chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -16,84 +16,84 @@ import type {RunnerResult} from './LighthouseReporterTypes.js';
 
 const UIStrings = {
   /**
-   *@description Explanation for user that Ligthhouse can only audit HTTP/HTTPS pages
+   * @description Explanation for user that Ligthhouse can only audit HTTP/HTTPS pages
    */
   canOnlyAuditHttphttpsPages: 'Can only audit pages on HTTP or HTTPS. Navigate to a different page.',
   /**
-   *@description Text when stored data in one location may affect Lighthouse run
-   *@example {IndexedDB} PH1
+   * @description Text when stored data in one location may affect Lighthouse run
+   * @example {IndexedDB} PH1
    */
   thereMayBeStoredDataAffectingSingular:
       'There may be stored data affecting loading performance in this location: {PH1}. Audit this page in an incognito window to prevent those resources from affecting your scores.',
   /**
-   *@description Text when stored data in multiple locations may affect Lighthouse run
-   *@example {IndexedDB, WebSQL} PH1
+   * @description Text when stored data in multiple locations may affect Lighthouse run
+   * @example {IndexedDB, WebSQL} PH1
    */
   thereMayBeStoredDataAffectingLoadingPlural:
       'There may be stored data affecting loading performance in these locations: {PH1}. Audit this page in an incognito window to prevent those resources from affecting your scores.',
   /**
-   *@description Help text in Lighthouse Controller
+   * @description Help text in Lighthouse Controller
    */
   multipleTabsAreBeingControlledBy:
       'Multiple tabs are being controlled by the same `service worker`. Close your other tabs on the same origin to audit this page.',
   /**
-   *@description Help text in Lighthouse Controller
+   * @description Help text in Lighthouse Controller
    */
   atLeastOneCategoryMustBeSelected: 'At least one category must be selected.',
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   localStorage: 'Local storage',
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   indexeddb: 'IndexedDB',
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   webSql: 'Web SQL',
   /**
-   *@description Text of checkbox to include running the performance audits in Lighthouse
+   * @description Text of checkbox to include running the performance audits in Lighthouse
    */
   performance: 'Performance',
   /**
-   *@description Tooltip text of checkbox to include running the performance audits in Lighthouse
+   * @description Tooltip text of checkbox to include running the performance audits in Lighthouse
    */
   howLongDoesThisAppTakeToShow: 'How long does this app take to show content and become usable',
   /**
-   *@description Text of checkbox to include running the Best Practices audits in Lighthouse
+   * @description Text of checkbox to include running the Best Practices audits in Lighthouse
    */
   bestPractices: 'Best practices',
   /**
-   *@description Tooltip text of checkbox to include running the Best Practices audits in Lighthouse
+   * @description Tooltip text of checkbox to include running the Best Practices audits in Lighthouse
    */
   doesThisPageFollowBestPractices: 'Does this page follow best practices for modern web development',
   /**
-   *@description Text of checkbox to include running the Accessibility audits in Lighthouse
+   * @description Text of checkbox to include running the Accessibility audits in Lighthouse
    */
   accessibility: 'Accessibility',
   /**
-   *@description Tooltip text of checkbox to include running the Accessibility audits in Lighthouse
+   * @description Tooltip text of checkbox to include running the Accessibility audits in Lighthouse
    */
   isThisPageUsableByPeopleWith: 'Is this page usable by people with disabilities or impairments',
   /**
-   *@description Text of checkbox to include running the Search Engine Optimization audits in Lighthouse
+   * @description Text of checkbox to include running the Search Engine Optimization audits in Lighthouse
    */
   seo: 'SEO',
   /**
-   *@description Tooltip text of checkbox to include running the Search Engine Optimization audits in Lighthouse
+   * @description Tooltip text of checkbox to include running the Search Engine Optimization audits in Lighthouse
    */
   isThisPageOptimizedForSearch: 'Is this page optimized for search engine results ranking',
   /**
-   *@description ARIA label for a radio button input to emulate mobile device behavior when running audits in Lighthouse.
+   * @description ARIA label for a radio button input to emulate mobile device behavior when running audits in Lighthouse.
    */
   applyMobileEmulation: 'Apply mobile emulation',
   /**
-   *@description Tooltip text of checkbox to emulate mobile device behavior when running audits in Lighthouse
+   * @description Tooltip text of checkbox to emulate mobile device behavior when running audits in Lighthouse
    */
   applyMobileEmulationDuring: 'Apply mobile emulation during auditing',
   /**
-   *@description Tooltip text of checkbox to emulate desktop device behavior when running audits in Lighthouse
+   * @description Tooltip text of checkbox to emulate desktop device behavior when running audits in Lighthouse
    */
   applyDesktopEmulationDuring: 'Apply desktop emulation during auditing',
   /**
@@ -129,11 +129,11 @@ const UIStrings = {
    */
   snapshotTooltip: 'Snapshot mode analyzes the page in a particular state, typically after user interactions.',
   /**
-   *@description Text for the mobile platform, as opposed to desktop
+   * @description Text for the mobile platform, as opposed to desktop
    */
   mobile: 'Mobile',
   /**
-   *@description Text for the desktop platform, as opposed to mobile
+   * @description Text for the desktop platform, as opposed to mobile
    */
   desktop: 'Desktop',
   /**
@@ -154,7 +154,7 @@ const UIStrings = {
   simulateASlowerPageLoadBasedOn:
       'Simulated throttling simulates a slower page load based on data from an initial unthrottled load. DevTools throttling actually slows down the page.',
   /**
-   *@description Text of checkbox to reset storage features prior to running audits in Lighthouse
+   * @description Text of checkbox to reset storage features prior to running audits in Lighthouse
    */
   clearStorage: 'Clear storage',
   /**
@@ -174,7 +174,7 @@ const UIStrings = {
   enableJavaScriptSampling:
       'Enable JavaScript sampling during the Lighthouse run. This will provide more execution details in the performance panel when you view the trace, but has higher CPU overhead and may impact the performance of the page.',
   /**
-   *@description Explanation for user that Lighthouse can only audit when JavaScript is enabled
+   * @description Explanation for user that Lighthouse can only audit when JavaScript is enabled
    */
   javaScriptDisabled:
       'JavaScript is disabled. You need to enable JavaScript to audit this page. Open the Command Menu and run the Enable JavaScript command to enable JavaScript.',
@@ -264,7 +264,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     }
 
     const inspectedURL = Common.ParsedURL.ParsedURL.fromString(mainTarget.inspectedURL());
-    const inspectedOrigin = inspectedURL && inspectedURL.securityOrigin();
+    const inspectedOrigin = inspectedURL?.securityOrigin();
     for (const registration of this.manager.registrations().values()) {
       if (registration.securityOrigin !== inspectedOrigin) {
         continue;
@@ -290,7 +290,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     }
 
     const mainTarget = this.manager.target();
-    const inspectedURL = mainTarget && mainTarget.inspectedURL();
+    const inspectedURL = mainTarget?.inspectedURL();
     /*
      * The full history of Lighthouse panel + extensions et al:
      *

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -28,31 +28,31 @@ import {TimespanView} from './LighthouseTimespanView.js';
 
 const UIStrings = {
   /**
-   *@description Text that appears when user drag and drop something (for example, a file) in Lighthouse Panel
+   * @description Text that appears when user drag and drop something (for example, a file) in Lighthouse Panel
    */
   dropLighthouseJsonHere: 'Drop `Lighthouse` JSON here',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon add button in the Lighthouse Panel
+   * @description Tooltip text that appears when hovering over the largeicon add button in the Lighthouse Panel
    */
   performAnAudit: 'Perform an audit…',
   /**
-   *@description Text to clear everything
+   * @description Text to clear everything
    */
   clearAll: 'Clear all',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon settings gear in show settings pane setting in start view of the audits panel
+   * @description Tooltip text that appears when hovering over the largeicon settings gear in show settings pane setting in start view of the audits panel
    */
   lighthouseSettings: '`Lighthouse` settings',
   /**
-   *@description Status header in the Lighthouse panel
+   * @description Status header in the Lighthouse panel
    */
   printing: 'Printing',
   /**
-   *@description Status text in the Lighthouse panel
+   * @description Status text in the Lighthouse panel
    */
   thePrintPopupWindowIsOpenPlease: 'The print popup window is open. Please close it to continue.',
   /**
-   *@description Text in Lighthouse Panel
+   * @description Text in Lighthouse Panel
    */
   cancelling: 'Cancelling',
 } as const;

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -9,41 +9,39 @@ import * as SDK from '../../core/sdk/sdk.js';
 
 import type * as ReportRenderer from './LighthouseReporterTypes.js';
 
-/* eslint-disable jsdoc/check-alignment */
 /**
- * @overview
-                                                   ┌────────────┐
-                                                   │CDP Backend │
-                                                   └────────────┘
-                                                        │ ▲
-                                                        │ │ parallelConnection
-                          ┌┐                            ▼ │                     ┌┐
-                          ││   dispatchProtocolMessage     sendProtocolMessage  ││
-                          ││                     │          ▲                   ││
-          ProtocolService ││                     |          │                   ││
-                          ││    sendWithResponse ▼          │                   ││
-                          ││              │    send          onWorkerMessage    ││
-                          └┘              │    │                 ▲              └┘
-          worker boundary - - - - - - - - ┼ - -│- - - - - - - - -│- - - - - - - - - - - -
-                          ┌┐              ▼    ▼                 │                    ┌┐
-                          ││   onFrontendMessage      notifyFrontendViaWorkerMessage  ││
-                          ││                   │       ▲                              ││
-                          ││                   ▼       │                              ││
-LighthouseWorkerService   ││          Either ConnectionProxy or LegacyPort            ││
-                          ││                           │ ▲                            ││
-                          ││     ┌─────────────────────┼─┼───────────────────────┐    ││
-                          ││     │  Lighthouse    ┌────▼──────┐                  │    ││
-                          ││     │                │connection │                  │    ││
-                          ││     │                └───────────┘                  │    ││
-                          └┘     └───────────────────────────────────────────────┘    └┘
-
- * All messages traversing the worker boundary are action-wrapped.
- * All messages over the parallelConnection speak pure CDP.
- * All messages within ConnectionProxy/LegacyPort speak pure CDP.
- * The foundational CDP connection is `parallelConnection`.
- * All connections within the worker are not actual ParallelConnection's.
+ * @file
+ *                                                   ┌────────────┐
+ *                                                   │CDP Backend │
+ *                                                   └────────────┘
+ *                                                        │ ▲
+ *                                                        │ │ parallelConnection
+ *                          ┌┐                            ▼ │                     ┌┐
+ *                          ││   dispatchProtocolMessage     sendProtocolMessage  ││
+ *                          ││                     │          ▲                   ││
+ *          ProtocolService ││                     |          │                   ││
+ *                          ││    sendWithResponse ▼          │                   ││
+ *                          ││              │    send          onWorkerMessage    ││
+ *                          └┘              │    │                 ▲              └┘
+ *          worker boundary - - - - - - - - ┼ - -│- - - - - - - - -│- - - - - - - - - - - -
+ *                          ┌┐              ▼    ▼                 │                    ┌┐
+ *                          ││   onFrontendMessage      notifyFrontendViaWorkerMessage  ││
+ *                          ││                   │       ▲                              ││
+ *                          ││                   ▼       │                              ││
+ *  LighthouseWorkerService ││          Either ConnectionProxy or LegacyPort            ││
+ *                          ││                           │ ▲                            ││
+ *                          ││     ┌─────────────────────┼─┼───────────────────────┐    ││
+ *                          ││     │  Lighthouse    ┌────▼──────┐                  │    ││
+ *                          ││     │                │connection │                  │    ││
+ *                          ││     │                └───────────┘                  │    ││
+ *                          └┘     └───────────────────────────────────────────────┘    └┘
+ *
+ * - All messages traversing the worker boundary are action-wrapped.
+ * - All messages over the parallelConnection speak pure CDP.
+ * - All messages within ConnectionProxy/LegacyPort speak pure CDP.
+ * - The foundational CDP connection is `parallelConnection`.
+ * - All connections within the worker are not actual ParallelConnection's.
  */
-/* eslint-enable jsdoc/check-alignment */
 
 let lastId = 1;
 

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -6,6 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as LighthouseReport from '../../third_party/lighthouse/report/report.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -41,9 +42,10 @@ export class LighthouseReportRenderer {
       const timestamp = Platform.DateUtilities.toISO8601Compact(new Date(lhr.fetchTime));
       const ext = blob.type.match('json') ? '.json' : '.html';
       const basename = `${sanitizedDomain}-${timestamp}${ext}` as Platform.DevToolsPath.RawPathString;
-      const text = await blob.text();
+      const base64 = await blob.arrayBuffer().then(Common.Base64.encode);
       await Workspace.FileManager.FileManager.instance().save(
-          basename, text, true /* forceSaveAs */, false /* isBase64 */);
+          basename, new TextUtils.ContentData.ContentData(base64, /* isBase64= */ true, blob.type),
+          /* forceSaveAs=*/ true);
       Workspace.FileManager.FileManager.instance().close(basename);
     }
 

package/front_end/panels/lighthouse/LighthouseReportSelector.ts

@@ -10,11 +10,11 @@ import type * as ReportRenderer from './LighthouseReporterTypes.js';
 
 const UIStrings = {
   /**
-   *@description Title of combo box in audits report selector
+   * @description Title of combo box in audits report selector
    */
   reports: 'Reports',
   /**
-   *@description New report item label in Lighthouse Report Selector
+   * @description New report item label in Lighthouse Report Selector
    */
   newReport: '(new report)',
 } as const;
@@ -31,8 +31,6 @@ export class ReportSelector {
     this.newLighthouseItem = document.createElement('option');
     this.comboBoxInternal = new UI.Toolbar.ToolbarComboBox(
         this.handleChange.bind(this), i18nString(UIStrings.reports), 'lighthouse-report');
-    this.comboBoxInternal.setMaxWidth(180);
-    this.comboBoxInternal.setMinWidth(140);
     this.itemByOptionElement = new Map();
     this.setEmptyState();
   }

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -66,7 +66,7 @@ export class StartView extends UI.Widget.Widget {
   changeFormMode?: (mode: string) => void;
 
   constructor(controller: LighthouseController, panel: LighthousePanel) {
-    super(true /* useShadowDom */);
+    super({useShadowDom: true});
     this.registerRequiredCSS(lighthouseStartViewStyles);
 
     this.controller = controller;
@@ -137,8 +137,9 @@ export class StartView extends UI.Widget.Widget {
     if (runtimeSetting.learnMore) {
       const link = UI.XLink.XLink.create(
           runtimeSetting.learnMore, i18nString(UIStrings.learnMore), 'lighthouse-learn-more', undefined, 'learn-more');
-      link.style.margin = '5px';
-      control.element.appendChild(link);
+      link.style.paddingLeft = '5px';
+      link.style.display = 'inline-flex';
+      toolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(link));
     }
   }
 

package/front_end/panels/lighthouse/LighthouseStatusView.ts

@@ -14,134 +14,134 @@ import type {LighthousePanel} from './LighthousePanel.js';
 
 const UIStrings = {
   /**
-   *@description Text to cancel something
+   * @description Text to cancel something
    */
   cancel: 'Cancel',
   /**
-   *@description Text when something is loading
+   * @description Text when something is loading
    */
   loading: 'Loading…',
   /**
-   *@description Status text in Lighthouse splash screen while an audit is being performed
-   *@example {github.com} PH1
+   * @description Status text in Lighthouse splash screen while an audit is being performed
+   * @example {github.com} PH1
    */
   auditingS: 'Auditing {PH1}',
   /**
-   *@description Status text in Lighthouse splash screen while an audit is being performed
+   * @description Status text in Lighthouse splash screen while an audit is being performed
    */
   auditingYourWebPage: 'Auditing your web page',
   /**
-   *@description Status text in Lighthouse splash screen while an audit is being performed, and cancellation to take effect
+   * @description Status text in Lighthouse splash screen while an audit is being performed, and cancellation to take effect
    */
   cancelling: 'Cancelling…',
   /**
-   *@description Status text in Lighthouse splash screen while preparing for an audit
+   * @description Status text in Lighthouse splash screen while preparing for an audit
    */
   lighthouseIsWarmingUp: '`Lighthouse` is warming up…',
   /**
-   *@description Status text in Lighthouse splash screen while an audit is being performed
+   * @description Status text in Lighthouse splash screen while an audit is being performed
    */
   lighthouseIsLoadingYourPage: '`Lighthouse` is loading your page',
   /**
-   *@description Text in Lighthouse Status View
-   *@example {75% of global mobile users in 2016 were on 2G or 3G [Source: GSMA Mobile]} PH1
+   * @description Text in Lighthouse Status View
+   * @example {75% of global mobile users in 2016 were on 2G or 3G [Source: GSMA Mobile]} PH1
    */
   fastFactMessageWithPlaceholder: '💡 {PH1}',
   /**
-   *@description Text of a DOM element in Lighthouse Status View
+   * @description Text of a DOM element in Lighthouse Status View
    */
   ahSorryWeRanIntoAnError: 'Ah, sorry! We ran into an error.',
   /**
-   *@description Text in Lighthouse Status View
+   * @description Text in Lighthouse Status View
    */
   tryToNavigateToTheUrlInAFresh:
       'Try to navigate to the URL in a fresh `Chrome` profile without any other tabs or extensions open and try again.',
   /**
-   *@description Text of a DOM element in Lighthouse Status View
+   * @description Text of a DOM element in Lighthouse Status View
    */
   ifThisIssueIsReproduciblePlease: 'If this issue is reproducible, please report it at the `Lighthouse` `GitHub` repo.',
   /**
-   *@description Text in Lighthouse splash screen when loading the page for auditing
+   * @description Text in Lighthouse splash screen when loading the page for auditing
    */
   lighthouseIsLoadingThePage: 'Lighthouse is loading the page.',
   /**
-   *@description Text in Lighthouse splash screen when Lighthouse is gathering information for display
+   * @description Text in Lighthouse splash screen when Lighthouse is gathering information for display
    */
   lighthouseIsGatheringInformation: '`Lighthouse` is gathering information about the page to compute your score.',
   /**
-   *@description Text in Lighthouse splash screen when Lighthouse is generating a report.
+   * @description Text in Lighthouse splash screen when Lighthouse is generating a report.
    */
   almostThereLighthouseIsNow: 'Almost there! `Lighthouse` is now generating your report.',
   /**
-   *@description Text in Lighthouse splash screen when loading the page for auditing
+   * @description Text in Lighthouse splash screen when loading the page for auditing
    */
   lighthouseIsLoadingYourPageWith:
       '`Lighthouse` is loading your page with throttling to measure performance on a mobile device on 3G.',
   /**
-   *@description Text in Lighthouse splash screen when loading the page for auditing
+   * @description Text in Lighthouse splash screen when loading the page for auditing
    */
   lighthouseIsLoadingYourPageWithThrottling:
       '`Lighthouse` is loading your page with throttling to measure performance on a slow desktop on 3G.',
   /**
-   *@description Text in Lighthouse splash screen when loading the page for auditing
+   * @description Text in Lighthouse splash screen when loading the page for auditing
    */
   lighthouseIsLoadingYourPageWithMobile: '`Lighthouse` is loading your page with mobile emulation.',
   /**
-   *@description Fast fact in the splash screen while Lighthouse is performing an audit
+   * @description Fast fact in the splash screen while Lighthouse is performing an audit
    */
   mbTakesAMinimumOfSecondsTo:
       '1MB takes a minimum of 5 seconds to download on a typical 3G connection [Source: `WebPageTest` and `DevTools` 3G definition].',
   /**
-   *@description Fast fact in the splash screen while Lighthouse is performing an audit
+   * @description Fast fact in the splash screen while Lighthouse is performing an audit
    */
   rebuildingPinterestPagesFor:
       'Rebuilding Pinterest pages for performance increased conversion rates by 15% [Source: `WPO Stats`]',
   /**
-   *@description Fast fact in the splash screen while Lighthouse is performing an audit
+   * @description Fast fact in the splash screen while Lighthouse is performing an audit
    */
   byReducingTheResponseSizeOfJson:
       'By reducing the response size of JSON needed for displaying comments, Instagram saw increased impressions [Source: `WPO Stats`]',
   /**
-   *@description Fast fact in the splash screen while Lighthouse is performing an audit
+   * @description Fast fact in the splash screen while Lighthouse is performing an audit
    */
   walmartSawAIncreaseInRevenueFor:
       'Walmart saw a 1% increase in revenue for every 100ms improvement in page load [Source: `WPO Stats`]',
   /**
-   *@description Fast fact in the splash screen while Lighthouse is performing an audit
+   * @description Fast fact in the splash screen while Lighthouse is performing an audit
    */
   ifASiteTakesSecondToBecome:
       'If a site takes >1 second to become interactive, users lose attention, and their perception of completing the page task is broken [Source: `Google Developers Blog`]',
   /**
-   *@description Fast fact in the splash screen while Lighthouse is performing an audit
+   * @description Fast fact in the splash screen while Lighthouse is performing an audit
    */
   OfGlobalMobileUsersInWereOnGOrG: '75% of global mobile users in 2016 were on 2G or 3G [Source: `GSMA Mobile`]',
   /**
-   *@description Fast fact in the splash screen while Lighthouse is performing an audit
+   * @description Fast fact in the splash screen while Lighthouse is performing an audit
    */
   theAverageUserDeviceCostsLess:
       'The average user device costs less than 200 USD. [Source: `International Data Corporation`]',
   /**
-   *@description Fast fact in the splash screen while Lighthouse is performing an audit
+   * @description Fast fact in the splash screen while Lighthouse is performing an audit
    */
   SecondsIsTheAverageTimeAMobile:
       '19 seconds is the average time a mobile web page takes to load on a 3G connection [Source: `Google DoubleClick blog`]',
   /**
-   *@description Fast fact in the splash screen while Lighthouse is performing an audit
+   * @description Fast fact in the splash screen while Lighthouse is performing an audit
    */
   OfMobilePagesTakeNearlySeconds:
       '70% of mobile pages take nearly 7 seconds for the visual content above the fold to display on the screen. [Source: `Think with Google`]',
   /**
-   *@description Fast fact in the splash screen while Lighthouse is performing an audit
+   * @description Fast fact in the splash screen while Lighthouse is performing an audit
    */
   asPageLoadTimeIncreasesFromOne:
       'As page load time increases from one second to seven seconds, the probability of a mobile site visitor bouncing increases 113%. [Source: `Think with Google`]',
   /**
-   *@description Fast fact in the splash screen while Lighthouse is performing an audit
+   * @description Fast fact in the splash screen while Lighthouse is performing an audit
    */
   asTheNumberOfElementsOnAPage:
       'As the number of elements on a page increases from 400 to 6,000, the probability of conversion drops 95%. [Source: `Think with Google`]',
   /**
-   *@description Fast fact in the splash screen while Lighthouse is performing an audit
+   * @description Fast fact in the splash screen while Lighthouse is performing an audit
    */
   lighthouseOnlySimulatesMobile:
       '`Lighthouse` only simulates mobile performance; to measure performance on a real device, try WebPageTest.org [Source: `Lighthouse` team]',

package/front_end/panels/lighthouse/lighthouse-meta.ts

@@ -9,7 +9,7 @@ import type * as Lighthouse from './lighthouse.js';
 
 const UIStrings = {
   /**
-   *@description Command for showing the 'Lighthouse' tool
+   * @description Command for showing the 'Lighthouse' tool
    */
   showLighthouse: 'Show `Lighthouse`',
 } as const;

package/front_end/panels/lighthouse/lighthousePanel.css

@@ -31,10 +31,19 @@ button.view-trace {
 
 .lighthouse-settings-pane {
   flex: none;
+  background-color: var(--sys-color-cdt-base-container);
+  border-bottom: 1px solid var(--sys-color-divider);
 }
 
 .lighthouse-settings-pane devtools-toolbar {
   flex: 1 1;
+  flex-wrap: wrap;
+}
+
+select.lighthouse-report {
+  min-width: 140px;
+  /* Up to 180px wide, but if window is very small ensure dropdown arrow is visible */
+  max-width: min(180px, calc(100% - 30px));
 }
 
 .lighthouse-toolbar-container {

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorController.ts

@@ -14,11 +14,11 @@ import {Events as LmiEvents, LinearMemoryInspectorPane} from './LinearMemoryInsp
 
 const UIStrings = {
   /**
-   *@description Error message that shows up in the console if a buffer to be opened in the linear memory inspector cannot be found.
+   * @description Error message that shows up in the console if a buffer to be opened in the linear memory inspector cannot be found.
    */
   couldNotOpenLinearMemory: 'Could not open linear memory inspector: failed locating buffer.',
   /**
-   *@description A context menu item in the Scope View of the Sources Panel
+   * @description A context menu item in the Scope View of the Sources Panel
    */
   openInMemoryInspectorPanel: 'Open in Memory inspector panel',
 } as const;

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorPane.ts

@@ -14,17 +14,17 @@ import {type LazyUint8Array, LinearMemoryInspectorController} from './LinearMemo
 
 const UIStrings = {
   /**
-   *@description Label in the Linear Memory inspector tool that serves as a placeholder if no inspections are open (i.e. nothing to see here).
+   * @description Label in the Linear Memory inspector tool that serves as a placeholder if no inspections are open (i.e. nothing to see here).
    *             Inspection hereby refers to viewing, navigating and understanding the memory through this tool.
    */
   noOpenInspections: 'No open inspections',
   /**
-   *@description Label in the Linear Memory inspector tool that serves as a placeholder if no inspections are open (i.e. nothing to see here).
+   * @description Label in the Linear Memory inspector tool that serves as a placeholder if no inspections are open (i.e. nothing to see here).
    *             Inspection hereby refers to viewing, navigating and understanding the memory through this tool.
    */
   memoryInspectorExplanation: 'On this page you can inspect binary data.',
   /**
-   *@description Label in the Linear Memory inspector tool for a link.
+   * @description Label in the Linear Memory inspector tool for a link.
    */
   learnMore: 'Learn more',
 } as const;
@@ -40,8 +40,7 @@ export class LinearMemoryInspectorPane extends Common.ObjectWrapper.eventMixin<E
   readonly #tabbedPane: UI.TabbedPane.TabbedPane;
 
   constructor() {
-    super(false);
-    this.element.setAttribute('jslog', `${VisualLogging.panel('linear-memory-inspector').track({resize: true})}`);
+    super({jslog: `${VisualLogging.panel('linear-memory-inspector').track({resize: true})}`});
     this.#tabbedPane = new UI.TabbedPane.TabbedPane();
     this.#tabbedPane.setPlaceholderElement(this.createPlaceholder());
     this.#tabbedPane.setCloseableTabs(true);
@@ -131,7 +130,7 @@ export class LinearMemoryInspectorView extends UI.Widget.VBox {
 
   constructor(
       memoryWrapper: LazyUint8Array, address: number|undefined = 0, tabId: string, hideValueInspector?: boolean) {
-    super(false);
+    super();
 
     if (address < 0 || address >= memoryWrapper.length()) {
       throw new Error('Requested address is out of bounds.');

package/front_end/panels/linear_memory_inspector/components/LinearMemoryHighlightChipList.ts

@@ -14,14 +14,14 @@ import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
 
 const UIStrings = {
   /**
-   *@description Tooltip text that appears when hovering over an inspected variable's button in the Linear Memory Highlight Chip List.
-  Clicking the button changes the displayed slice of computer memory in the Linear Memory inspector to contain the inspected variable's bytes.
+   * @description Tooltip text that appears when hovering over an inspected variable's button in the Linear Memory Highlight Chip List.
+   * Clicking the button changes the displayed slice of computer memory in the Linear Memory inspector to contain the inspected variable's bytes.
    */
   jumpToAddress: 'Jump to this memory',
   /**
-   *@description Tooltip text that appears when hovering over an inspected variable's delete button in the Linear Memory Highlight Chip List.
-   Clicking the delete button stops highlighting the variable's memory in the Linear Memory inspector.
-   'Memory' is a slice of bytes in the computer memory.
+   * @description Tooltip text that appears when hovering over an inspected variable's delete button in the Linear Memory Highlight Chip List.
+   * Clicking the delete button stops highlighting the variable's memory in the Linear Memory inspector.
+   * 'Memory' is a slice of bytes in the computer memory.
    */
   deleteHighlight: 'Stop highlighting this memory',
 } as const;
@@ -108,11 +108,7 @@ export class LinearMemoryHighlightChipList extends HTMLElement {
           <button class="delete-highlight-button" title=${i18nString(UIStrings.deleteHighlight)}
               jslog=${VisualLogging.action('linear-memory-inspector.delete-highlight').track({click:true})}
               @click=${():void => this.#onDeleteHighlightClick(highlightInfo)}>
-            <devtools-icon .data=${{
-              iconName: 'cross',
-              color: 'var(--icon-default-hover)',
-              width: '16px',
-              }}>
+            <devtools-icon name="cross" class="medium">
             </devtools-icon>
           </button>
         </div>

package/front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.ts

@@ -35,9 +35,9 @@ import {
 
 const UIStrings = {
   /**
-   *@description Tooltip text that appears when hovering over an invalid address in the address line in the Linear memory inspector
-   *@example {0x00000000} PH1
-   *@example {0x00400000} PH2
+   * @description Tooltip text that appears when hovering over an invalid address in the address line in the Linear memory inspector
+   * @example {0x00000000} PH1
+   * @example {0x00400000} PH2
    */
   addressHasToBeANumberBetweenSAnd: 'Address has to be a number between {PH1} and {PH2}',
 } as const;