Update Welcome docs links for launch

- Substitute "React DevTools" guide for incoming "React Native DevTools" page (note: URL will be changed later via redirect) - Fix `/docs/debugging-native-code` link
facebookexperimental · Oct 2, 2024 · de79fc2 · de79fc2
1 parent 87b2feb
commit de79fc2
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 11 deletions.
diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni
@@ -191,7 +191,6 @@ grd_files_release_sources = [
   "front_end/Images/profile.svg",
   "front_end/Images/react_native/learn-debugging-basics.jpg",
   "front_end/Images/react_native/learn-native-debugging.jpg",
-  "front_end/Images/react_native/learn-react-devtools.jpg",
   "front_end/Images/react_native/learn-react-native-devtools.jpg",
   "front_end/Images/react_native/welcomeIcon.png",
   "front_end/Images/record-start.svg",

diff --git a/config/gni/devtools_image_files.gni b/config/gni/devtools_image_files.gni
@@ -18,7 +18,6 @@ devtools_image_files = [
   "popoverArrows.png",
   "react_native/learn-debugging-basics.jpg",
   "react_native/learn-native-debugging.jpg",
-  "react_native/learn-react-devtools.jpg",
   "react_native/learn-react-native-devtools.jpg",
   "react_native/welcomeIcon.png",
   "toolbarResizerVertical.png",

diff --git a/front_end/Images/react_native/learn-react-devtools.jpg b/front_end/Images/react_native/learn-react-devtools.jpg
diff --git a/front_end/panels/rn_welcome/RNWelcome.ts b/front_end/panels/rn_welcome/RNWelcome.ts
@@ -29,10 +29,10 @@ const UIStrings = {
   docsDebuggingBasics: 'Debugging Basics',
   /** @description "Debugging Basics" item detail */
   docsDebuggingBasicsDetail: 'Overview of debugging tools in React Native',
-  /** @description "React DevTools" title (docs item 2 - pre-launch) */
-  docsReactDevTools: 'React DevTools',
-  /** @description "React DevTools" item detail */
-  docsReactDevToolsDetail: 'Debug React components with React DevTools',
+  /** @description "React Native DevTools" title (docs item 2) */
+  docsReactNativeDevTools: 'React Native DevTools',
+  /** @description "React Native DevTools" item detail */
+  docsReactDevToolsDetail: 'Explore features available in React Native DevTools',
   /** @description "Native Debugging" title (docs item 3) */
   docsNativeDebugging: 'Native Debugging',
   /** @description "Native Debugging" item detail */
@@ -124,7 +124,7 @@ export class RNWelcomeImpl extends UI.Widget.VBox implements
       import.meta.url,
     ).toString();
     const docsImage2Url = new URL(
-      '../../Images/react_native/learn-react-devtools.jpg',
+      '../../Images/react_native/learn-react-native-devtools.jpg',
       import.meta.url,
     ).toString();
     const docsImage3Url = new URL(
@@ -176,15 +176,14 @@ export class RNWelcomeImpl extends UI.Widget.VBox implements
                 <p>${i18nString(UIStrings.docsDebuggingBasicsDetail)}</p>
               </div>
             </button>
-            <!-- TODO(huntie): Replace this item when React Native DevTools docs are complete -->
-            <button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this.#handleLinkPress.bind(this, 'https:\/\/reactnative.dev/docs/debugging/react-devtools')} title=${i18nString(UIStrings.docsReactDevTools)}>
+            <button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this.#handleLinkPress.bind(this, 'https:\/\/reactnative.dev/docs/react-devtools')} title=${i18nString(UIStrings.docsReactNativeDevTools)}>
               <div class="rn-welcome-image" style="background-image: url('${docsImage2Url}')"></div>
               <div>
-                <p class="devtools-link">${i18nString(UIStrings.docsReactDevTools)}</p>
+                <p class="devtools-link">${i18nString(UIStrings.docsReactNativeDevTools)}</p>
                 <p>${i18nString(UIStrings.docsReactDevToolsDetail)}</p>
               </div>
             </button>
-            <button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this.#handleLinkPress.bind(this, 'https:\/\/reactnative.dev/docs/debugging/debugging-native-code')} title=${i18nString(UIStrings.docsNativeDebugging)}>
+            <button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this.#handleLinkPress.bind(this, 'https:\/\/reactnative.dev/docs/debugging-native-code')} title=${i18nString(UIStrings.docsNativeDebugging)}>
               <div class="rn-welcome-image" style="background-image: url('${docsImage3Url}')"></div>
               <div>
                 <p class="devtools-link">${i18nString(UIStrings.docsNativeDebugging)}</p>

diff --git a/front_end/panels/rn_welcome/rnWelcome.css b/front_end/panels/rn_welcome/rnWelcome.css
@@ -176,6 +176,7 @@
 }
 
 .rn-welcome-image {
+  flex-shrink: 0;
   aspect-ratio: calc(16 / 9);
   height: 64px;
   margin-right: 16px;