chrome-devtools-frontend 1.0.1660788 → 1.0.1662289

package/front_end/panels/emulation/DeviceModeView.ts

@@ -11,12 +11,15 @@ import type * as Protocol from '../../generated/protocol.js';
 import * as EmulationModel from '../../models/emulation/emulation.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {DeviceModeToolbar} from './DeviceModeToolbar.js';
 import deviceModeViewStyles from './deviceModeView.css.js';
 import {MediaQueryInspector} from './MediaQueryInspector.js';
 
+const {classMap, styleMap} = Directives;
+
 const UIStrings = {
   /**
    * @description Bottom resizer element title in Device Mode View of the Device Toolbar
@@ -58,14 +61,12 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class DeviceModeView extends UI.Widget.VBox {
   wrapperInstance!: UI.Widget.VBox|null;
-  blockElementToWidth: WeakMap<HTMLElement, number>;
   private model: EmulationModel.DeviceModeModel.DeviceModeModel;
   private readonly mediaInspector: MediaQueryInspector;
   private showMediaInspectorSetting: Common.Settings.Setting<boolean>;
   private showRulersSetting: Common.Settings.Setting<boolean>;
   private readonly topRuler: Ruler;
   private readonly leftRuler: Ruler;
-  private presetBlocks!: HTMLElement[];
   private responsivePresetsContainer!: HTMLElement;
   private screenArea!: HTMLElement;
   private pageArea!: HTMLElement;
@@ -98,8 +99,6 @@ export class DeviceModeView extends UI.Widget.VBox {
   constructor() {
     super({useShadowDom: true});
 
-    this.blockElementToWidth = new WeakMap();
-
     this.setMinimumSize(150, 150);
     this.element.classList.add('device-mode-view');
     this.registerRequiredCSS(deviceModeViewStyles);
@@ -114,9 +113,17 @@ export class DeviceModeView extends UI.Widget.VBox {
     this.showRulersSetting = Common.Settings.Settings.instance().moduleSetting('emulation.show-rulers');
     this.showRulersSetting.addChangeListener(this.updateUI, this);
 
-    this.topRuler = new Ruler(true, this.model.setWidthAndScaleToFit.bind(this.model));
+    this.topRuler = new Ruler();
+    this.topRuler.horizontal = true;
+    this.topRuler.addEventListener(RulerEvents.MARKER_SELECTED, event => {
+      this.model.setWidthAndScaleToFit(event.data);
+    });
     this.topRuler.element.classList.add('device-mode-ruler-top');
-    this.leftRuler = new Ruler(false, this.model.setHeightAndScaleToFit.bind(this.model));
+    this.leftRuler = new Ruler();
+    this.leftRuler.horizontal = false;
+    this.leftRuler.addEventListener(RulerEvents.MARKER_SELECTED, event => {
+      this.model.setHeightAndScaleToFit(event.data);
+    });
     this.leftRuler.element.classList.add('device-mode-ruler-left');
     this.createUI();
     UI.ZoomManager.ZoomManager.instance().addEventListener(UI.ZoomManager.Events.ZOOM_CHANGED, this.zoomChanged, this);
@@ -128,7 +135,7 @@ export class DeviceModeView extends UI.Widget.VBox {
     this.contentClip = this.contentElement.createChild('div', 'device-mode-content-clip vbox');
     this.responsivePresetsContainer = this.contentClip.createChild('div', 'device-mode-presets-container');
     this.responsivePresetsContainer.setAttribute('jslog', `${VisualLogging.responsivePresets()}`);
-    this.populatePresetsContainer();
+    this.renderPresets();
     this.mediaInspectorContainer = this.contentClip.createChild('div', 'device-mode-media-container');
     this.contentArea = this.contentClip.createChild('div', 'device-mode-content-area');
     this.outlineImage = this.contentArea.createChild('img', 'device-mode-outline-image hidden fill');
@@ -161,7 +168,8 @@ export class DeviceModeView extends UI.Widget.VBox {
     this.pageArea.createChild('slot');
   }
 
-  private populatePresetsContainer(): void {
+  private renderPresets(): void {
+    const scale = this.model.scale();
     const sizes = [320, 375, 425, 768, 1024, 1440, 2560];
     const titles = [
       i18nString(UIStrings.mobileS),
@@ -172,24 +180,29 @@ export class DeviceModeView extends UI.Widget.VBox {
       i18nString(UIStrings.laptopL),
       '4K',
     ];
-    this.presetBlocks = [];
-    const inner = this.responsivePresetsContainer.createChild('div', 'device-mode-presets-container-inner');
-    for (let i = sizes.length - 1; i >= 0; --i) {
-      const outer = inner.createChild('div', 'fill device-mode-preset-bar-outer');
-      const block = outer.createChild('div', 'device-mode-preset-bar');
-      block.createChild('span').textContent = titles[i] + ' \u2013 ' + sizes[i] + 'px';
-      block.setAttribute(
-          'jslog', `${VisualLogging.action().track({click: true}).context(`device-mode-preset-${sizes[i]}px`)}`);
-      block.addEventListener('click', applySize.bind(this, sizes[i]), false);
-      this.blockElementToWidth.set(block, sizes[i]);
-      this.presetBlocks.push(block);
-    }
-
-    function applySize(this: DeviceModeView, width: number, e: Event): void {
+
+    const applySize = (width: number, e: Event): void => {
       this.model.emulate(EmulationModel.DeviceModeModel.Type.Responsive, null, null);
       this.model.setWidthAndScaleToFit(width);
       e.consume();
-    }
+    };
+
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(html`
+      <div class="device-mode-presets-container-inner">
+        ${sizes.map((size, idx) => html`
+          <div class="fill device-mode-preset-bar-outer">
+            <div class="device-mode-preset-bar"
+                 style="width: ${size * scale}px;"
+                 jslog=${VisualLogging.action().track({click: true}).context(`device-mode-preset-${size}px`)}
+                 @click=${(e: Event) => applySize(size, e)}>
+              <span>${titles[idx]} – ${size}px</span>
+            </div>
+          </div>
+        `).reverse()}
+      </div>
+    `,
+           this.responsivePresetsContainer);
   }
 
   private createResizer(element: HTMLElement, widthFactor: number, heightFactor: number):
@@ -348,13 +361,7 @@ export class DeviceModeView extends UI.Widget.VBox {
     if (this.model.scale() !== this.cachedScale) {
       updateRulers = true;
       callDoResize = true;
-      for (const block of this.presetBlocks) {
-        const blockWidth = this.blockElementToWidth.get(block);
-        if (!blockWidth) {
-          throw new Error('Could not get width for block.');
-        }
-        block.style.width = blockWidth * this.model.scale() + 'px';
-      }
+      this.renderPresets();
       this.cachedScale = this.model.scale();
     }
 
@@ -567,103 +574,147 @@ export class DeviceModeView extends UI.Widget.VBox {
   }
 }
 
-export class Ruler extends UI.Widget.VBox {
-  #contentElement: HTMLElement;
-  private readonly horizontal: boolean;
-  private scale: number;
-  private count: number;
-  private readonly throttler: Common.Throttler.Throttler;
-  private readonly applyCallback: (arg0: number) => void;
-  private renderedScale!: number|undefined;
-  private renderedZoomFactor!: number|undefined;
-  constructor(horizontal: boolean, applyCallback: (arg0: number) => void) {
-    super({jslog: `${VisualLogging.deviceModeRuler().track({click: true})}`});
-    this.element.classList.add('device-mode-ruler');
-    this.#contentElement =
-        this.element.createChild('div', 'device-mode-ruler-content').createChild('div', 'device-mode-ruler-inner');
-    this.horizontal = horizontal;
-    this.scale = 1;
-    this.count = 0;
-    this.throttler = new Common.Throttler.Throttler(0);
-    this.applyCallback = applyCallback;
+export interface RulerViewInput {
+  horizontal: boolean;
+  scale: number;
+  onMarkerClick: (size: number) => void;
+}
+
+export type RulerView = (input: RulerViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_RULER_VIEW: RulerView = (input: RulerViewInput, output: undefined, target: HTMLElement): void => {
+  const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
+  const size = input.horizontal ? target.offsetWidth : target.offsetHeight;
+
+  const dipSize = size * zoomFactor / input.scale;
+  const count = Math.ceil(dipSize / 5);
+  let step = 1;
+  if (input.scale < 0.8) {
+    step = 2;
+  }
+  if (input.scale < 0.6) {
+    step = 4;
+  }
+  if (input.scale < 0.4) {
+    step = 8;
+  }
+  if (input.scale < 0.2) {
+    step = 16;
+  }
+  if (input.scale < 0.1) {
+    step = 32;
   }
 
-  render(scale: number): void {
-    this.scale = scale;
-    void this.throttler.schedule(this.update.bind(this));
+  const markers = [];
+  for (let i = 0; i < count; i++) {
+    if (i % step) {
+      continue;
+    }
+    const isLarge = !(i % 10);
+    const isMedium = !(i % 5);
+    const offset = i ? `${(5 * i) * input.scale / zoomFactor}px` : undefined;
+
+    // clang-format off
+    markers.push(html`
+      <div
+        class=${classMap({
+          'device-mode-ruler-marker': true,
+          'device-mode-ruler-marker-large': isLarge,
+          'device-mode-ruler-marker-medium': isMedium && !isLarge,
+        })}
+        style=${styleMap(input.horizontal ? {left: offset} : {top: offset})}>
+          ${i && !(i % 20) ?
+            html`<div class="device-mode-ruler-text" @click=${() => input.onMarkerClick(i * 5)}>${i * 5}</div>` :
+            nothing}
+      </div>
+    `);
+    // clang-format on
   }
 
-  override onResize(): void {
-    void this.throttler.schedule(this.update.bind(this));
+  render(html`
+    <div class="device-mode-ruler-content">
+      <div class="device-mode-ruler-inner">
+        ${markers}
+      </div>
+    </div>
+  `,
+         target, {
+           container: {
+             classes: ['device-mode-ruler'],
+             attributes: {jslog: VisualLogging.deviceModeRuler().track({click: true})},
+           },
+         });
+};
+
+export const enum RulerEvents {
+  MARKER_SELECTED = 'MarkerSelected',
+}
+
+export interface RulerEventTypes {
+  [RulerEvents.MARKER_SELECTED]: number;
+}
+
+export class Ruler extends Common.ObjectWrapper.eventMixin<RulerEventTypes, typeof UI.Widget.Widget>(UI.Widget.Widget) {
+  #view: RulerView;
+  #horizontal = true;
+  #scale = 1;
+
+  constructor(element?: HTMLElement, view: RulerView = DEFAULT_RULER_VIEW) {
+    super(element);
+    this.#view = view;
   }
 
-  update(): void {
-    const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
-    const size = this.horizontal ? this.#contentElement.offsetWidth : this.#contentElement.offsetHeight;
+  get horizontal(): boolean {
+    return this.#horizontal;
+  }
 
-    if (this.scale !== this.renderedScale || zoomFactor !== this.renderedZoomFactor) {
-      this.#contentElement.removeChildren();
-      this.count = 0;
-      this.renderedScale = this.scale;
-      this.renderedZoomFactor = zoomFactor;
+  set horizontal(horizontal: boolean) {
+    if (this.#horizontal === horizontal) {
+      return;
     }
+    this.#horizontal = horizontal;
+    this.requestUpdate();
+  }
 
-    const dipSize = size * zoomFactor / this.scale;
-    const count = Math.ceil(dipSize / 5);
-    let step = 1;
-    if (this.scale < 0.8) {
-      step = 2;
-    }
-    if (this.scale < 0.6) {
-      step = 4;
-    }
-    if (this.scale < 0.4) {
-      step = 8;
-    }
-    if (this.scale < 0.2) {
-      step = 16;
-    }
-    if (this.scale < 0.1) {
-      step = 32;
-    }
+  get scale(): number {
+    return this.#scale;
+  }
 
-    for (let i = count; i < this.count; i++) {
-      if (!(i % step)) {
-        const lastChild = this.#contentElement.lastChild;
-        if (lastChild) {
-          lastChild.remove();
-        }
-      }
+  set scale(scale: number) {
+    if (this.#scale === scale) {
+      return;
     }
+    this.#scale = scale;
+    this.requestUpdate();
+  }
 
-    for (let i = this.count; i < count; i++) {
-      if (i % step) {
-        continue;
-      }
-      const marker = this.#contentElement.createChild('div', 'device-mode-ruler-marker');
-      if (i) {
-        if (this.horizontal) {
-          marker.style.left = (5 * i) * this.scale / zoomFactor + 'px';
-        } else {
-          marker.style.top = (5 * i) * this.scale / zoomFactor + 'px';
-        }
-        if (!(i % 20)) {
-          const text = marker.createChild('div', 'device-mode-ruler-text');
-          text.textContent = String(i * 5);
-          text.addEventListener('click', this.onMarkerClick.bind(this, i * 5), false);
-        }
-      }
-      if (!(i % 10)) {
-        marker.classList.add('device-mode-ruler-marker-large');
-      } else if (!(i % 5)) {
-        marker.classList.add('device-mode-ruler-marker-medium');
-      }
-    }
+  render(scale: number): void {
+    this.scale = scale;
+  }
 
-    this.count = count;
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
   }
 
-  private onMarkerClick(size: number): void {
-    this.applyCallback.call(null, size);
+  override onResize(): void {
+    super.onResize();
+    this.requestUpdate();
+  }
+
+  #onMarkerClick = (size: number): void => {
+    this.dispatchEventToListeners(RulerEvents.MARKER_SELECTED, size);
+  };
+
+  override performUpdate(): void {
+    if (!this.isShowing()) {
+      return;
+    }
+    const viewInput: RulerViewInput = {
+      horizontal: this.#horizontal,
+      scale: this.#scale,
+      onMarkerClick: this.#onMarkerClick,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
   }
 }

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -84,7 +84,7 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
 
     this.affectedResources = this.createAffectedResources();
     this.#affectedResourcesCount = 0;
-    this.requestResolver = new Logs.RequestResolver.RequestResolver();
+    this.requestResolver = new Logs.RequestResolver.RequestResolver(Logs.NetworkLog.NetworkLog.instance());
     this.#frameListeners = [];
     this.#unresolvedFrameIds = new Set();
   }

package/front_end/panels/issues/IssueView.ts

@@ -33,7 +33,6 @@ import {AffectedSelectivePermissionsInterventionView} from './AffectedSelectiveP
 import {AffectedSharedArrayBufferIssueDetailsView} from './AffectedSharedArrayBufferIssueDetailsView.js';
 import {AffectedSourcesView} from './AffectedSourcesView.js';
 import {AffectedTrackingSitesView} from './AffectedTrackingSitesView.js';
-import {AttributionReportingIssueDetailsView} from './AttributionReportingIssueDetailsView.js';
 import * as Components from './components/components.js';
 import type {HiddenIssuesMenuData} from './components/HideIssuesMenu.js';
 import {CorsIssueDetailsView} from './CorsIssueDetailsView.js';
@@ -254,7 +253,6 @@ export class IssueView extends UI.TreeOutline.TreeElement {
       new CorsIssueDetailsView(this, this.#issue, 'cors-details'),
       new GenericIssueDetailsView(this, this.#issue, 'generic-details'),
       new AffectedDocumentsInQuirksModeView(this, this.#issue, 'affected-documents'),
-      new AttributionReportingIssueDetailsView(this, this.#issue, 'attribution-reporting-details'),
       new AffectedRawCookieLinesView(this, this.#issue, 'affected-raw-cookies'),
       new AffectedTrackingSitesView(this, this.#issue, 'tracking-sites-details'),
       new AffectedMetadataAllowedSitesView(this, this.#issue, 'metadata-allowed-sites-details'),

package/front_end/panels/issues/IssuesPane.ts

@@ -91,11 +91,6 @@ const UIStrings = {
    * @description Text that explains the issues panel that is shown if no issues are shown.
    */
   issuesPanelDescription: 'On this page you can find warnings from the browser.',
-  /**
-   * @description Category title for the different 'Attribution Reporting API' issues. The
-   * Attribution Reporting API is a newly proposed web API (see https://github.com/WICG/conversion-measurement-api).
-   */
-  attributionReporting: 'Attribution Reporting `API`',
   /**
    * @description Category title for the different 'Quirks Mode' issues. Quirks Mode refers
    *              to the legacy browser modes that displays web content according to outdated
@@ -149,8 +144,6 @@ class IssueCategoryView extends UI.TreeOutline.TreeElement {
         return i18nString(UIStrings.lowTextContrast);
       case IssuesManager.Issue.IssueCategory.CORS:
         return i18nString(UIStrings.cors);
-      case IssuesManager.Issue.IssueCategory.ATTRIBUTION_REPORTING:
-        return i18nString(UIStrings.attributionReporting);
       case IssuesManager.Issue.IssueCategory.QUIRKS_MODE:
         return i18nString(UIStrings.quirksMode);
       case IssuesManager.Issue.IssueCategory.GENERIC:
@@ -271,7 +264,7 @@ export class IssuesPane extends UI.Widget.VBox {
     });
     groupByKindSettingCheckbox.setVisible(true);
 
-    const thirdPartySetting = IssuesManager.Issue.getShowThirdPartyIssuesSetting();
+    const thirdPartySetting = IssuesManager.Issue.getShowThirdPartyIssuesSetting(Common.Settings.Settings.instance());
     this.#showThirdPartyCheckbox = new UI.Toolbar.ToolbarSettingCheckbox(
         thirdPartySetting, i18nString(UIStrings.includeCookieIssuesCausedBy),
         i18nString(UIStrings.includeThirdpartyCookieIssues));

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

@@ -71,8 +71,9 @@ UI.ViewManager.registerViewExtension({
   isPreviewFeature: true,
   async loadView(universe) {
     const Timeline = await loadTimelineModule();
-    const {pageResourceLoader: resourceLoader} = universe;
-    return Timeline.TimelinePanel.TimelinePanel.instance({forceNew: true, resourceLoader});
+    const {pageResourceLoader: resourceLoader, targetManager, isolateManager} = universe;
+    return Timeline.TimelinePanel.TimelinePanel.instance(
+        {forceNew: true, resourceLoader, targetManager, isolateManager});
   },
 });
 

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -5,7 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import type * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
+import * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import type * as LighthouseModel from '../../models/lighthouse/lighthouse.js';
@@ -78,6 +78,14 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
   private configForTesting?: object;
   private connection?: ProtocolClient.CDPConnection.CDPConnection;
 
+  /**
+   * Session ids that belong to this Lighthouse run. The proxy only relays
+   * worker commands and connection events that target one of these sessions
+   * so that traffic stays scoped to the parallel session created in
+   * `attach()` and its descendants.
+   */
+  readonly #knownSessionIds = new Set<string>();
+
   /**
    * Tracks pending requests to the Lighthouse worker.
    * Key: The message ID sent to the worker.
@@ -119,6 +127,8 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
 
     const rootTargetId = await rootChildTargetManager.getParentTargetId();
     const {sessionId} = await rootTarget.targetAgent().invoke_attachToTarget({targetId: rootTargetId, flatten: true});
+    this.#knownSessionIds.clear();
+    this.#knownSessionIds.add(sessionId);
     this.connection = connection;
     this.connection.observe(this);
 
@@ -217,6 +227,7 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
     this.rootTarget = undefined;
     this.connection?.unobserve(this);
     this.connection = undefined;
+    this.#knownSessionIds.clear();
 
     if (oldLighthouseWorker) {
       (await oldLighthouseWorker).terminate();
@@ -237,18 +248,29 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
   }
 
   private dispatchProtocolMessage(message: ProtocolClient.CDPConnection.CDPReceivableMessage): void {
-    // A message without a sessionId is the main session of the main target (call it "Main session").
-    // A parallel connection and session was made that connects to the same main target (call it "Lighthouse session").
-    // Messages from the "Lighthouse session" have a sessionId.
-    // Without some care, there is a risk of sending the same events for the same main frame to Lighthouse–the backend
-    // will create events for the "Main session" and the "Lighthouse session".
-    // The workaround–only send message to Lighthouse if:
-    //   * the message has a sessionId (is not for the "Main session")
-    //   * the message does not have a sessionId (is for the "Main session"), but only for the Target domain
-    //     (to kickstart autoAttach in LH).
-    if (message.sessionId || ('method' in message && message.method?.startsWith('Target'))) {
-      void this.send('dispatchProtocolMessage', {message});
+    // The shared CDPConnection carries traffic for every DevTools session. A
+    // parallel session is created for the Lighthouse run in `attach()`, and the
+    // worker only ever needs traffic that belongs to that session or one of the
+    // child sessions it subsequently attaches. Filtering on `#knownSessionIds`
+    // keeps the proxy scoped to the run instead of broadcasting unrelated
+    // session traffic into the worker.
+    if (!message.sessionId || !this.#knownSessionIds.has(message.sessionId)) {
+      return;
+    }
+    if ('method' in message) {
+      if (message.method === 'Target.attachedToTarget') {
+        const childSessionId = (message.params as Protocol.Target.AttachedToTargetEvent | undefined)?.sessionId;
+        if (childSessionId) {
+          this.#knownSessionIds.add(childSessionId);
+        }
+      } else if (message.method === 'Target.detachedFromTarget') {
+        const childSessionId = (message.params as Protocol.Target.DetachedFromTargetEvent | undefined)?.sessionId;
+        if (childSessionId) {
+          this.#knownSessionIds.delete(childSessionId);
+        }
+      }
     }
+    void this.send('dispatchProtocolMessage', {message});
   }
 
   onDisconnect(): void {
@@ -303,11 +325,30 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
 
   private sendProtocolMessage(message: string): void {
     const {id, method, params, sessionId} = JSON.parse(message);
+    // The worker is expected to only address the parallel session created in
+    // `attach()` or sessions discovered beneath it. Anything else, including
+    // the root session, is outside the scope of the run.
+    if (!sessionId || !this.#knownSessionIds.has(sessionId)) {
+      void this.send('dispatchProtocolMessage', {
+        message: {
+          id,
+          sessionId,
+          error: {
+            code: ProtocolClient.CDPConnection.CDPErrorStatus.SESSION_NOT_FOUND,
+            message: `Unknown session id: ${sessionId}`,
+          },
+        },
+      });
+      return;
+    }
     // CDPConnection manages it's own message IDs and it's important, otherwise we'd clash
     // with the rest of the DevTools traffic.
     // Instead, we ignore the ID coming from the worker when sending the command, but
     // patch it back in when sending the response back to the worker.
     void this.connection?.send(method, params, sessionId).then(response => {
+      if ('result' in response && method === 'Target.attachToTarget' && response.result?.sessionId) {
+        this.#knownSessionIds.add(response.result.sessionId);
+      }
       const message =
           'result' in response ? {id, sessionId, result: response.result} : {id, sessionId, error: response.error};
       this.dispatchProtocolMessage(message);

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 Memory inspector panel cannot be found.
    */
-  couldNotOpenLinearMemory: 'Could not open linear memory inspector: failed locating buffer.',
+  couldNotOpenLinearMemory: 'Could not open Memory inspector: buffer not found.',
   /**
-   * @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

@@ -15,17 +15,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).
-   *             Inspection hereby refers to viewing, navigating and understanding the memory through this tool.
+   * @description Label in the Memory inspector panel that serves as a placeholder if no inspections are open (i.e., nothing to see here).
+   *             Inspection here refers to viewing, navigating, and understanding the memory through this panel.
    */
   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).
-   *             Inspection hereby refers to viewing, navigating and understanding the memory through this tool.
+   * @description Label in the Memory inspector panel that serves as a placeholder if no inspections are open (i.e., nothing to see here).
+   *             Inspection here refers to viewing, navigating, and understanding the memory through this panel.
    */
   memoryInspectorExplanation: 'On this page you can inspect binary data.',
   /**
-   * @description Label in the Linear Memory inspector tool for a link.
+   * @description Label in the Memory inspector panel for a link.
    */
   learnMore: 'Learn more',
 } as const;

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

@@ -14,13 +14,13 @@ 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 highlight chip list in the Memory inspector panel.
+   * Clicking the button changes the displayed slice of computer memory in the Memory inspector panel 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.
+   * @description Tooltip text that appears when hovering over an inspected variable's delete button in the highlight chip list in the Memory inspector panel.
+   * Clicking the delete button stops highlighting the variable's memory in the Memory inspector panel.
    * 'Memory' is a slice of bytes in the computer memory.
    */
   deleteHighlight: 'Stop highlighting this memory',

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

@@ -32,11 +32,11 @@ import {
 
 const UIStrings = {
   /**
-   * @description Tooltip text that appears when hovering over an invalid address in the address line in the Linear memory inspector
+   * @description Tooltip text that appears when hovering over an invalid address in the address line in the Memory inspector panel.
    * @example {0x00000000} PH1
    * @example {0x00400000} PH2
    */
-  addressHasToBeANumberBetweenSAnd: 'Address has to be a number between {PH1} and {PH2}',
+  addressHasToBeANumberBetweenSAnd: 'Address must be a number between {PH1} and {PH2}',
 } as const;
 const str_ =
     i18n.i18n.registerUIStrings('panels/linear_memory_inspector/components/LinearMemoryInspector.ts', UIStrings);