Merge branch 'main' into users/devanb/screenshots-android-gate

Author: sbuggay

config/gni/devtools_grd_files.gni

@@ -237,6 +237,7 @@ grd_files_release_sources = [
   "front_end/Images/psychiatry.svg",
   "front_end/Images/react_native/learn-debugging-basics.jpg",
   "front_end/Images/react_native/learn-native-debugging.jpg",
+  "front_end/Images/react_native/whats-new-083.jpg",
   "front_end/Images/react_native/learn-react-native-devtools.jpg",
   "front_end/Images/react_native/welcomeIcon.png",
   "front_end/Images/record-start.svg",

config/gni/devtools_image_files.gni

@@ -18,6 +18,7 @@ devtools_image_files = [
   "popoverArrows.png",
   "react_native/learn-debugging-basics.jpg",
   "react_native/learn-native-debugging.jpg",
+  "react_native/whats-new-083.jpg",
   "react_native/learn-react-native-devtools.jpg",
   "react_native/welcomeIcon.png",
   "toolbarResizerVertical.png",

front_end/Images/react_native/whats-new-083.jpg

@@ -27,7 +27,7 @@ const UIStrings = {
   /** @description "What's new" link */
   whatsNewLabel: 'What\'s new',
   /** @description Description for sharing the session ID of the current session with the user */
-  sessionIdMessage: '[FB-only] The ID for this React Native DevTools session is:',
+  sessionIdMessage: '[FB-only] React Native DevTools session ID:',
   /** @description "Debugging Basics" title (docs item 1) */
   docsDebuggingBasics: 'Debugging Basics',
   /** @description "Debugging Basics" item detail */
@@ -40,6 +40,10 @@ const UIStrings = {
   docsNativeDebugging: 'Native Debugging',
   /** @description "Native Debugging" item detail */
   docsNativeDebuggingDetail: 'Find out more about native debugging tools',
+  /** @description Title for the "What's New" highlighted item */
+  whatsNewHighlightTitle: 'React Native 0.83 - Performance & Network debugging, improved desktop experience',
+  /** @description Detail for the "What's New" highlighted item */
+  whatsNewHighlightDetail: 'Learn about the latest debugging features in 0.83',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/rn_welcome/RNWelcome.ts', UIStrings);
@@ -127,6 +131,10 @@ export class RNWelcomeImpl extends UI.Widget.VBox implements
       '../../Images/react_native/welcomeIcon.png',
       import.meta.url,
     ).toString();
+    const whatsNewImageUrl = new URL(
+      '../../Images/react_native/whats-new-083.jpg',
+      import.meta.url,
+    ).toString();
     const docsImage1Url = new URL(
       '../../Images/react_native/learn-debugging-basics.jpg',
       import.meta.url,
@@ -188,6 +196,16 @@ export class RNWelcomeImpl extends UI.Widget.VBox implements
         </header>
         ${showDocs ? html`
           <section class="rn-welcome-docsfeed">
+            <div class="rn-welcome-docsfeed-highlight">
+              <h2 class="rn-welcome-h2">What's new</h2>
+              <button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this.#handleLinkPress.bind(this, 'https:\/\/reactnative.dev/blog')} title=${i18nString(UIStrings.docsDebuggingBasics)}>
+                <div class="rn-welcome-image" style="background-image: url('${whatsNewImageUrl}')"></div>
+                <div>
+                  <p class="devtools-link">${i18nString(UIStrings.whatsNewHighlightTitle)}</p>
+                  <p>${i18nString(UIStrings.whatsNewHighlightDetail)}</p>
+                </div>
+              </button>
+            </div>
             <h2 class="rn-welcome-h2">Learn</h2>
             <button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this.#handleLinkPress.bind(this, 'https:\/\/reactnative.dev/docs/debugging')} title=${i18nString(UIStrings.docsDebuggingBasics)}>
               <div class="rn-welcome-image" style="background-image: url('${docsImage1Url}')"></div>

front_end/panels/rn_welcome/RNWelcome.ts

@@ -111,6 +111,7 @@
   background: var(--sys-color-surface2);
   color: var(--color-text-secondary);
   font-size: 11px;
+  z-index: 10;
 }
 
 .rn-welcome-docsfeed {
@@ -135,6 +136,24 @@
   }
 }
 
+.rn-welcome-docsfeed-highlight {
+  display: flex;
+  justify-content: stretch;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  margin: 8px -16px;
+  margin-top: 16px;
+  padding: 4px 16px;
+  border-radius: 16px;
+  flex-shrink: 0;
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--sys-color-blue-bright), transparent 92%) 0%,
+    color-mix(in srgb, var(--sys-color-purple-bright), transparent 88%) 100%
+  );
+}
+
 .rn-welcome-h2 {
   flex-shrink: 0;
   font-size: 16px;

front_end/panels/rn_welcome/rnWelcome.css

@@ -573,7 +573,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.panelToolbar.wrappable = true;
     this.panelRightToolbar = timelineToolbarContainer.createChild('devtools-toolbar');
     this.panelRightToolbar.role = 'presentation';
-    if (!isNode && !isReactNative) {
+    if (!isNode) {
       this.createSettingsPane();
       this.updateShowSettingsToolbarButton();
     }
@@ -1197,7 +1197,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
     // View
     this.panelToolbar.appendSeparator();
-    if (!isNode && !isReactNative) {
+    if (!isNode && (Root.Runtime.experiments.isEnabled(Root.Runtime.RNExperimentName.ENABLE_TIMELINE_FRAMES) || !isReactNative)) {
       this.showScreenshotsToolbarCheckbox =
           this.createSettingCheckbox(this.showScreenshotsSetting, i18nString(UIStrings.captureScreenshots));
 
@@ -1237,7 +1237,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     }
 
     // Settings
-    if (!isNode && !isReactNative) {
+    if (!isNode) {
       this.panelRightToolbar.appendSeparator();
       this.panelRightToolbar.appendToolbarItem(this.showSettingsPaneButton);
     }
@@ -1346,22 +1346,24 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         this.disableCaptureJSProfileSetting.title(), this.disableCaptureJSProfileSetting,
         i18nString(UIStrings.disablesJavascriptSampling)));
 
-    const cpuThrottlingPane = this.settingsPane.createChild('div');
-    cpuThrottlingPane.append(i18nString(UIStrings.cpu));
-    this.cpuThrottlingSelect = MobileThrottling.ThrottlingManager.throttlingManager().createCPUThrottlingSelector();
-    cpuThrottlingPane.append(this.cpuThrottlingSelect.control.element);
+    if (!isReactNative) {
+      const cpuThrottlingPane = this.settingsPane.createChild('div');
+      cpuThrottlingPane.append(i18nString(UIStrings.cpu));
+      this.cpuThrottlingSelect = MobileThrottling.ThrottlingManager.throttlingManager().createCPUThrottlingSelector();
+      cpuThrottlingPane.append(this.cpuThrottlingSelect.control.element);
 
-    this.settingsPane.append(UI.SettingsUI.createSettingCheckbox(
-        this.captureLayersAndPicturesSetting.title(), this.captureLayersAndPicturesSetting,
-        i18nString(UIStrings.capturesAdvancedPaint)));
+      this.settingsPane.append(UI.SettingsUI.createSettingCheckbox(
+          this.captureLayersAndPicturesSetting.title(), this.captureLayersAndPicturesSetting,
+          i18nString(UIStrings.capturesAdvancedPaint)));
 
-    const networkThrottlingPane = this.settingsPane.createChild('div');
-    networkThrottlingPane.append(i18nString(UIStrings.network));
-    networkThrottlingPane.append(this.createNetworkConditionsSelectToolbarItem().element);
+      const networkThrottlingPane = this.settingsPane.createChild('div');
+      networkThrottlingPane.append(i18nString(UIStrings.network));
+      networkThrottlingPane.append(this.createNetworkConditionsSelectToolbarItem().element);
 
-    this.settingsPane.append(UI.SettingsUI.createSettingCheckbox(
-        this.captureSelectorStatsSetting.title(), this.captureSelectorStatsSetting,
-        i18nString(UIStrings.capturesSelectorStats)));
+      this.settingsPane.append(UI.SettingsUI.createSettingCheckbox(
+          this.captureSelectorStatsSetting.title(), this.captureSelectorStatsSetting,
+          i18nString(UIStrings.capturesSelectorStats)));
+    }
 
     const thirdPartyCheckbox =
         this.createSettingCheckbox(this.#thirdPartyTracksSetting, i18nString(UIStrings.showDataAddedByExtensions));
@@ -1630,7 +1632,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   }
 
   private updateSettingsPaneVisibility(): void {
-    if (isNode || isReactNative) {
+    if (isNode) {
       return;
     }
     if (this.showSettingsPaneSetting.get()) {