chrome-devtools-frontend 1.0.1028166 → 1.0.1029692

package/front_end/panels/network/components/RequestHeadersView.ts

@@ -6,7 +6,6 @@ import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
-import {assertNotNullOrUndefined} from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as IssuesManager from '../../../models/issues_manager/issues_manager.js';
@@ -212,7 +211,9 @@ export class RequestHeadersComponent extends HTMLElement {
   }
 
   #render(): void {
-    assertNotNullOrUndefined(this.#request);
+    if (!this.#request) {
+      return;
+    }
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
@@ -224,8 +225,10 @@ export class RequestHeadersComponent extends HTMLElement {
     // clang-format on
   }
 
-  #renderResponseHeaders(): LitHtml.TemplateResult {
-    assertNotNullOrUndefined(this.#request);
+  #renderResponseHeaders(): LitHtml.LitTemplate {
+    if (!this.#request) {
+      return LitHtml.nothing;
+    }
 
     const headersWithIssues = [];
     if (this.#request.wasBlocked()) {
@@ -260,6 +263,18 @@ export class RequestHeadersComponent extends HTMLElement {
 
     const mergedHeaders = mergeHeadersWithIssues(this.#request.sortedResponseHeaders.slice(), headersWithIssues);
 
+    const blockedResponseCookies = this.#request.blockedResponseCookies();
+    const blockedCookieLineToReasons = new Map<string, Protocol.Network.SetCookieBlockedReason[]>(
+        blockedResponseCookies?.map(c => [c.cookieLine, c.blockedReasons]));
+    for (const header of mergedHeaders) {
+      if (header.name.toLowerCase() === 'set-cookie' && header.value) {
+        const matchingBlockedReasons = blockedCookieLineToReasons.get(header.value.toString());
+        if (matchingBlockedReasons) {
+          header.setCookieBlockedReasons = matchingBlockedReasons;
+        }
+      }
+    }
+
     const toggleShowRaw = (): void => {
       this.#showResponseHeadersText = !this.#showResponseHeadersText;
       this.#render();
@@ -287,8 +302,10 @@ export class RequestHeadersComponent extends HTMLElement {
     // clang-format on
   }
 
-  #renderRequestHeaders(): LitHtml.TemplateResult {
-    assertNotNullOrUndefined(this.#request);
+  #renderRequestHeaders(): LitHtml.LitTemplate {
+    if (!this.#request) {
+      return LitHtml.nothing;
+    }
 
     const headers = this.#request.requestHeaders().slice();
     headers.sort(function(a, b) {
@@ -325,8 +342,7 @@ export class RequestHeadersComponent extends HTMLElement {
   }
 
   #maybeRenderProvisionalHeadersWarning(): LitHtml.LitTemplate {
-    assertNotNullOrUndefined(this.#request);
-    if (this.#request.requestHeadersText() !== undefined) {
+    if (!this.#request || this.#request.requestHeadersText() !== undefined) {
       return LitHtml.nothing;
     }
 
@@ -338,14 +354,16 @@ export class RequestHeadersComponent extends HTMLElement {
     } else {
       cautionText = i18nString(UIStrings.provisionalHeadersAreShown);
     }
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
     return html`
       <div class="call-to-action">
         <div class="call-to-action-body">
           <div class="explanation" title=${cautionTitle}>
             <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
-              iconName: 'warning_icon',
-              width: '12px',
-              height: '12px',
+                iconName: 'clear-warning_icon',
+                width: '12px',
+                height: '12px',
               } as IconButton.Icon.IconData}>
             </${IconButton.Icon.Icon.litTagName}>
             ${cautionText} <x-link href="https://developer.chrome.com/docs/devtools/network/reference/#provisional-headers" class="link">${i18nString(UIStrings.learnMore)}</x-link>
@@ -353,6 +371,7 @@ export class RequestHeadersComponent extends HTMLElement {
         </div>
       </div>
     `;
+    // clang-format on
   }
 
   #renderHeader(header: HeaderDescriptor): LitHtml.TemplateResult {
@@ -361,51 +380,65 @@ export class RequestHeadersComponent extends HTMLElement {
     return html`
       <div class="row">
         <div class="header-name">
-          ${header.headerNotSet ? html`
-            <div class="header-badge header-badge-text">
-              ${i18n.i18n.lockedString('not-set')}
-            </div>
-          ` : ''}${header.name}:
+          ${header.headerNotSet ?
+            html`<div class="header-badge header-badge-text">${i18n.i18n.lockedString('not-set')}</div>` :
+            LitHtml.nothing
+          }${header.name}:
+        </div>
+        <div class="header-value ${header.headerValueIncorrect ? 'header-warning' : ''}">
+          ${header.value?.toString() || ''}
+          ${this.#maybeRenderHeaderValueSuffix(header)}
         </div>
-        ${this.#renderHeaderValue(header)}
       </div>
-      ${this.#maybeRenderHeaderDetails(header.details)}
+      ${this.#maybeRenderBlockedDetails(header.blockedDetails)}
     `;
     // clang-format on
   }
 
-  #renderHeaderValue(header: HeaderDescriptor): LitHtml.TemplateResult {
+  #maybeRenderHeaderValueSuffix(header: HeaderDescriptor): LitHtml.LitTemplate {
     const headerId = header.name.toLowerCase();
+
+    if (headerId === 'set-cookie' && header.setCookieBlockedReasons) {
+      const titleText =
+          header.setCookieBlockedReasons.map(SDK.NetworkRequest.setCookieBlockedReasonToUiString).join('\n');
+      // Disabled until https://crbug.com/1079231 is fixed.
+      // clang-format off
+      return html`
+        <${IconButton.Icon.Icon.litTagName} class="inline-icon" title=${titleText} .data=${{
+            iconName: 'clear-warning_icon',
+            width: '12px',
+            height: '12px',
+          } as IconButton.Icon.IconData}>
+        </${IconButton.Icon.Icon.litTagName}>
+      `;
+      // clang-format on
+    }
+
     if (headerId === 'x-client-data') {
       const data = ClientVariations.parseClientVariations(header.value?.toString() || '');
       const output = ClientVariations.formatClientVariations(
           data, i18nString(UIStrings.activeClientExperimentVariation),
           i18nString(UIStrings.activeClientExperimentVariationIds));
       return html`
-        <div class="header-value ${header.headerValueIncorrect ? 'header-warning' : ''}">
-          ${header.value?.toString() || ''}
-          <div>${i18nString(UIStrings.decoded)}</div>
-          <code>${output}</code>
-        </div>
+        <div>${i18nString(UIStrings.decoded)}</div>
+        <code>${output}</code>
       `;
     }
 
-    return html`
-      <div class="header-value ${header.headerValueIncorrect ? 'header-warning' : ''}">
-        ${header.value?.toString() || ''}
-      </div>
-    `;
+    return LitHtml.nothing;
   }
 
-  #maybeRenderHeaderDetails(headerDetails?: HeaderDetailsDescriptor): LitHtml.LitTemplate {
-    if (!headerDetails) {
+  #maybeRenderBlockedDetails(blockedDetails?: BlockedDetailsDescriptor): LitHtml.LitTemplate {
+    if (!blockedDetails) {
       return LitHtml.nothing;
     }
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
     return html`
       <div class="call-to-action">
         <div class="call-to-action-body">
-          <div class="explanation">${headerDetails.explanation()}</div>
-          ${headerDetails.examples.map(example => html`
+          <div class="explanation">${blockedDetails.explanation()}</div>
+          ${blockedDetails.examples.map(example => html`
             <div class="example">
               <code>${example.codeSnippet}</code>
               ${example.comment ? html`
@@ -413,13 +446,14 @@ export class RequestHeadersComponent extends HTMLElement {
               ` : ''}
             </div>
           `)}
-          ${this.#maybeRenderHeaderDetailsLink(headerDetails)}
+          ${this.#maybeRenderBlockedDetailsLink(blockedDetails)}
         </div>
       </div>
     `;
+    // clang-format on
   }
 
-  #maybeRenderHeaderDetailsLink(headerDetails?: HeaderDetailsDescriptor): LitHtml.LitTemplate {
+  #maybeRenderBlockedDetailsLink(blockedDetails?: BlockedDetailsDescriptor): LitHtml.LitTemplate {
     if (this.#request && IssuesManager.RelatedIssue.hasIssueOfCategory(this.#request, IssuesManager.Issue.IssueCategory.CrossOriginEmbedderPolicy)) {
       const followLink = (): void => {
         Host.userMetrics.issuesPanelOpenedFrom(Host.UserMetrics.IssueOpener.LearnMoreLinkCOEP);
@@ -441,9 +475,11 @@ export class RequestHeadersComponent extends HTMLElement {
         </div>
       `;
     }
-    if (headerDetails?.link) {
+    if (blockedDetails?.link) {
+      // Disabled until https://crbug.com/1079231 is fixed.
+      // clang-format off
       return html`
-        <x-link href=${headerDetails.link.url} class="link">
+        <x-link href=${blockedDetails.link.url} class="link">
           <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
             iconName: 'link_icon',
             color: 'var(--color-link)',
@@ -454,6 +490,7 @@ export class RequestHeadersComponent extends HTMLElement {
           >${i18nString(UIStrings.learnMore)}
         </x-link>
       `;
+      // clang-format on
     }
     return LitHtml.nothing;
   }
@@ -502,8 +539,10 @@ export class RequestHeadersComponent extends HTMLElement {
     `;
   }
 
-  #renderGeneralSection(): LitHtml.TemplateResult {
-    assertNotNullOrUndefined(this.#request);
+  #renderGeneralSection(): LitHtml.LitTemplate {
+    if (!this.#request) {
+      return LitHtml.nothing;
+    }
 
     let coloredCircleClassName = 'red-circle';
     if (this.#request.statusCode < 300 || this.#request.statusCode === 304) {
@@ -674,7 +713,7 @@ declare global {
   }
 }
 
-interface HeaderDetailsDescriptor {
+interface BlockedDetailsDescriptor {
   explanation: () => string;
   examples: Array<{
     codeSnippet: string,
@@ -689,8 +728,9 @@ interface HeaderDescriptor {
   name: string;
   value: Object|null;
   headerValueIncorrect?: boolean|null;
-  details?: HeaderDetailsDescriptor;
+  blockedDetails?: BlockedDetailsDescriptor;
   headerNotSet: boolean|null;
+  setCookieBlockedReasons?: Protocol.Network.SetCookieBlockedReason[];
 }
 
 const BlockedReasonDetails = new Map<Protocol.Network.BlockedReason, HeaderDescriptor>([
@@ -700,7 +740,7 @@ const BlockedReasonDetails = new Map<Protocol.Network.BlockedReason, HeaderDescr
       name: 'cross-origin-embedder-policy',
       value: null,
       headerValueIncorrect: null,
-      details: {
+      blockedDetails: {
         explanation: i18nLazyString(UIStrings.toEmbedThisFrameInYourDocument),
         examples: [{codeSnippet: 'Cross-Origin-Embedder-Policy: require-corp', comment: undefined}],
         link: {url: 'https://web.dev/coop-coep/'},
@@ -714,7 +754,7 @@ const BlockedReasonDetails = new Map<Protocol.Network.BlockedReason, HeaderDescr
       name: 'cross-origin-resource-policy',
       value: null,
       headerValueIncorrect: null,
-      details: {
+      blockedDetails: {
         explanation: i18nLazyString(UIStrings.toUseThisResourceFromADifferent),
         examples: [
           {
@@ -737,7 +777,7 @@ const BlockedReasonDetails = new Map<Protocol.Network.BlockedReason, HeaderDescr
       name: 'cross-origin-opener-policy',
       value: null,
       headerValueIncorrect: false,
-      details: {
+      blockedDetails: {
         explanation: i18nLazyString(UIStrings.thisDocumentWasBlockedFrom),
         examples: [],
         link: {url: 'https://web.dev/coop-coep/'},
@@ -751,7 +791,7 @@ const BlockedReasonDetails = new Map<Protocol.Network.BlockedReason, HeaderDescr
       name: 'cross-origin-resource-policy',
       value: null,
       headerValueIncorrect: true,
-      details: {
+      blockedDetails: {
         explanation: i18nLazyString(UIStrings.toUseThisResourceFromADifferentSite),
         examples: [
           {
@@ -770,7 +810,7 @@ const BlockedReasonDetails = new Map<Protocol.Network.BlockedReason, HeaderDescr
       name: 'cross-origin-resource-policy',
       value: null,
       headerValueIncorrect: true,
-      details: {
+      blockedDetails: {
         explanation: i18nLazyString(UIStrings.toUseThisResourceFromADifferentOrigin),
         examples: [
           {

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

@@ -108,6 +108,11 @@ const UIStrings = {
   *@description Title of a setting under the Network category that can be invoked through the Command Menu
   */
   dontGroupNetworkLogItemsByFrame: 'Don\'t group network log items by frame',
+  /**
+   * @description Label of a checkbox in the DevTools settings UI.
+   */
+  enableUNCLoading:
+      'Allow `DevTools` to load resources, such as source maps, from Windows Shares via `UNC` paths. Disabled by default for security reasons.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/network-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -316,6 +321,17 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
+// While this setting is used by the Network module, we place it under the
+// "sources" category as source map loading is the dominant use case.
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.SOURCES,
+  storageType: Common.Settings.SettingStorageType.Synced,
+  title: i18nLazyString(UIStrings.enableUNCLoading),
+  settingName: 'network.enable-unc-loading',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});
+
 UI.ViewManager.registerLocationResolver({
   name: UI.ViewManager.ViewLocationValues.NETWORK_SIDEBAR,
   category: UI.ViewManager.ViewLocationCategoryValues.NETWORK,

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -82,6 +82,11 @@ const UIStrings = {
   *@description A placeholder for an input in Protocol Monitor. The input accepts commands that are sent to the backend on Enter. CDP stands for Chrome DevTools Protocol.
   */
   sendRawCDPCommand: 'Send a raw `CDP` command',
+  /**
+   * @description A tooltip text for the input in the Protocol Monitor panel. The tooltip describes what format is expected.
+   */
+  sendRawCDPCommandExplanation:
+      'Format: `\'Domain.commandName\'` for a command without parameters, or `\'{"command":"Domain.commandName", "parameters": {...}}\'` as a JSON object for a command with parameters. `\'cmd\'`/`\'method\'` and `\'args\'`/`\'params\'`/`\'arguments\'` are also supported as alternative keys for the `JSON` object.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/protocol_monitor/ProtocolMonitor.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -287,28 +292,29 @@ export class ProtocolMonitorImpl extends UI.Widget.VBox {
     });
     topToolbar.appendToolbarItem(this.textFilterUI);
 
-    const onSend = (): void => {
-      const value = input.value();
-      // If input cannot be parsed as json, we assume it's the command name
-      // for a command without parameters. Otherwise, we expect an object
-      // with "command" and "parameters" attributes.
-      let json = null;
-      try {
-        json = JSON.parse(value);
-      } catch (err) {
-      }
-      const command = json ? json.command : value;
-      const parameters = json ? json.parameters : null;
-      const test = ProtocolClient.InspectorBackend.test;
-      // TODO: TS thinks that properties are read-only because
-      // in TS test is defined as a namespace.
-      // @ts-ignore
-      test.sendRawMessage(command, parameters, () => {});
-    };
-    const input = new UI.Toolbar.ToolbarInput(i18nString(UIStrings.sendRawCDPCommand), '', 1, .2, '', undefined, false);
-    input.addEventListener(UI.Toolbar.ToolbarInput.Event.EnterPressed, onSend);
     const bottomToolbar = new UI.Toolbar.Toolbar('protocol-monitor-bottom-toolbar', this.contentElement);
-    bottomToolbar.appendToolbarItem(input);
+    bottomToolbar.appendToolbarItem(this.#createCommandInput());
+  }
+
+  #createCommandInput(): UI.Toolbar.ToolbarInput {
+    const placeholder = i18nString(UIStrings.sendRawCDPCommand);
+    const accessiblePlaceholder = placeholder;
+    const growFactor = 1;
+    const shrinkFactor = 0.2;
+    const tooltip = i18nString(UIStrings.sendRawCDPCommandExplanation);
+    const input = new UI.Toolbar.ToolbarInput(
+        placeholder, accessiblePlaceholder, growFactor, shrinkFactor, tooltip, undefined, false);
+    input.addEventListener(UI.Toolbar.ToolbarInput.Event.EnterPressed, () => this.#onCommandSend(input));
+    return input;
+  }
+
+  #onCommandSend(input: UI.Toolbar.ToolbarInput): void {
+    const {command, parameters} = parseCommandInput(input.value());
+    const test = ProtocolClient.InspectorBackend.test;
+    // TODO: TS thinks that properties are read-only because
+    // in TS test is defined as a namespace.
+    // @ts-ignore
+    test.sendRawMessage(command, parameters, () => {});
   }
 
   static instance(opts = {forceNew: null}): ProtocolMonitorImpl {
@@ -518,3 +524,17 @@ export class InfoWidget extends UI.Widget.VBox {
     this.tabbedPane.changeTabView('response', SourceFrame.JSONView.JSONView.createViewSync(responseParsed));
   }
 }
+
+export function parseCommandInput(input: string): {command: string, parameters: unknown} {
+  // If input cannot be parsed as json, we assume it's the command name
+  // for a command without parameters. Otherwise, we expect an object
+  // with "command"/"method"/"cmd" and "parameters"/"params"/"args"/"arguments" attributes.
+  let json = null;
+  try {
+    json = JSON.parse(input);
+  } catch (err) {
+  }
+  const command = json ? json.command || json.method || json.cmd : input;
+  const parameters = json ? json.parameters || json.params || json.args || json.arguments : null;
+  return {command, parameters};
+}

package/front_end/panels/timeline/TimelineLoader.ts

@@ -98,7 +98,8 @@ export class TimelineLoader implements Common.StringOutputStream.OutputStream {
 
   static loadFromURL(url: Platform.DevToolsPath.UrlString, client: Client): TimelineLoader {
     const loader = new TimelineLoader(client);
-    Host.ResourceLoader.loadAsStream(url, null, loader);
+    const allowFileUNCPaths = Common.Settings.Settings.instance().moduleSetting('network.enable-unc-loading').get();
+    Host.ResourceLoader.loadAsStream(url, null, loader, undefined, allowFileUNCPaths);
     return loader;
   }
 

package/front_end/ui/components/linear_memory_inspector/LinearMemoryInspectorController.ts

@@ -111,6 +111,7 @@ type SerializableSettings = {
 export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelObserver<SDK.RuntimeModel.RuntimeModel> {
   #paneInstance = LinearMemoryInspectorPaneImpl.instance();
   #bufferIdToRemoteObject: Map<string, SDK.RemoteObject.RemoteObject> = new Map();
+  #bufferIdToHighlightInfo: Map<string, HighlightInfo> = new Map();
   #settings: Common.Settings.Setting<SerializableSettings>;
 
   private constructor() {
@@ -178,6 +179,18 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     };
   }
 
+  getHighlightInfo(bufferId: string): HighlightInfo|undefined {
+    return this.#bufferIdToHighlightInfo.get(bufferId);
+  }
+
+  #setHighlightInfo(bufferId: string, highlightInfo: HighlightInfo): void {
+    this.#bufferIdToHighlightInfo.set(bufferId, highlightInfo);
+  }
+
+  #resetHighlightInfo(bufferId: string): void {
+    this.#bufferIdToHighlightInfo.delete(bufferId);
+  }
+
   static async retrieveDWARFMemoryObjectAndAddress(obj: SDK.RemoteObject.RemoteObject):
       Promise<{obj: SDK.RemoteObject.RemoteObject, address: number}|undefined> {
     if (obj instanceof Bindings.DebuggerLanguagePlugins.ExtensionRemoteObject) {
@@ -253,8 +266,6 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
       memoryObj = response.obj;
     }
 
-    const highlightInfo = this.#extractHighlightInfo(obj, memoryAddress);
-
     if (memoryAddress !== undefined) {
       Host.userMetrics.linearMemoryInspectorTarget(
           Host.UserMetrics.LinearMemoryInspectorTarget.DWARFInspectableAddress);
@@ -277,9 +288,14 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     }
     const memoryProperty = internalProperties?.find(({name}) => name === '[[WebAssemblyMemory]]');
     const memory = memoryProperty?.value;
-
+    const highlightInfo = LinearMemoryInspectorController.extractHighlightInfo(obj, memoryAddress);
+    if (highlightInfo !== undefined) {
+      this.#setHighlightInfo(id, highlightInfo);
+    } else {
+      this.#resetHighlightInfo(id);
+    }
     if (this.#bufferIdToRemoteObject.has(id)) {
-      this.#paneInstance.reveal(id, memoryAddress, highlightInfo);
+      this.#paneInstance.reveal(id, memoryAddress);
       void UI.ViewManager.ViewManager.instance().showView('linear-memory-inspector');
       return;
     }
@@ -288,11 +304,11 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     this.#bufferIdToRemoteObject.set(id, buffer.object());
     const arrayBufferWrapper = new RemoteArrayBufferWrapper(buffer);
 
-    this.#paneInstance.create(id, title, arrayBufferWrapper, memoryAddress, highlightInfo);
+    this.#paneInstance.create(id, title, arrayBufferWrapper, memoryAddress);
     void UI.ViewManager.ViewManager.instance().showView('linear-memory-inspector');
   }
 
-  #extractHighlightInfo(obj: SDK.RemoteObject.RemoteObject, memoryAddress?: number): HighlightInfo|undefined {
+  static extractHighlightInfo(obj: SDK.RemoteObject.RemoteObject, memoryAddress?: number): HighlightInfo|undefined {
     let highlightInfo;
     if (obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode) {
       try {
@@ -311,6 +327,7 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     for (const [bufferId, remoteObject] of this.#bufferIdToRemoteObject) {
       if (model === remoteObject.runtimeModel()) {
         this.#bufferIdToRemoteObject.delete(bufferId);
+        this.#resetHighlightInfo(bufferId);
         this.#paneInstance.close(bufferId);
       }
     }
@@ -320,7 +337,7 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     const debuggerModel = event.data;
     for (const [bufferId, remoteObject] of this.#bufferIdToRemoteObject) {
       if (debuggerModel.runtimeModel() === remoteObject.runtimeModel()) {
-        this.#paneInstance.resetHighlightInfo(bufferId);
+        this.#resetHighlightInfo(bufferId);
         this.#paneInstance.refreshView(bufferId);
       }
     }
@@ -336,5 +353,6 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
       remoteObj.release();
     }
     this.#bufferIdToRemoteObject.delete(bufferId);
+    this.#resetHighlightInfo(bufferId);
   }
 }

package/front_end/ui/components/linear_memory_inspector/LinearMemoryInspectorPane.ts

@@ -84,14 +84,13 @@ export class LinearMemoryInspectorPaneImpl extends Common.ObjectWrapper.eventMix
   getViewForTabId(tabId: string): LinearMemoryInspectorView {
     const view = this.#tabIdToInspectorView.get(tabId);
     if (!view) {
-      throw new Error(`No linear memory inspector view for given tab id: ${tabId}`);
+      throw new Error(`No linear memory inspector view for the given tab id: ${tabId}`);
     }
     return view;
   }
 
-  create(tabId: string, title: string, arrayWrapper: LazyUint8Array, address?: number, highlightInfo?: HighlightInfo):
-      void {
-    const inspectorView = new LinearMemoryInspectorView(arrayWrapper, address, highlightInfo);
+  create(tabId: string, title: string, arrayWrapper: LazyUint8Array, address?: number): void {
+    const inspectorView = new LinearMemoryInspectorView(arrayWrapper, address, tabId);
     this.#tabIdToInspectorView.set(tabId, inspectorView);
     this.#tabbedPane.appendTab(tabId, title, inspectorView, undefined, false, true);
     this.#tabbedPane.selectTab(tabId);
@@ -101,15 +100,12 @@ export class LinearMemoryInspectorPaneImpl extends Common.ObjectWrapper.eventMix
     this.#tabbedPane.closeTab(tabId, false);
   }
 
-  reveal(tabId: string, address?: number, highlightInfo?: HighlightInfo): void {
+  reveal(tabId: string, address?: number): void {
     const view = this.getViewForTabId(tabId);
 
     if (address !== undefined) {
       view.updateAddress(address);
     }
-    if (highlightInfo !== undefined) {
-      view.updateHighlightInfo(highlightInfo);
-    }
     this.refreshView(tabId);
     this.#tabbedPane.selectTab(tabId);
   }
@@ -119,11 +115,6 @@ export class LinearMemoryInspectorPaneImpl extends Common.ObjectWrapper.eventMix
     view.refreshData();
   }
 
-  resetHighlightInfo(tabId: string): void {
-    const view = this.getViewForTabId(tabId);
-    view.updateHighlightInfo(undefined);
-  }
-
   #tabClosed(event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void {
     const {tabId} = event.data;
     this.#tabIdToInspectorView.delete(tabId);
@@ -142,10 +133,10 @@ export type EventTypes = {
 class LinearMemoryInspectorView extends UI.Widget.VBox {
   #memoryWrapper: LazyUint8Array;
   #address: number;
-  #highlightInfo?: HighlightInfo;
+  #tabId: string;
   #inspector: LinearMemoryInspector;
   firstTimeOpen: boolean;
-  constructor(memoryWrapper: LazyUint8Array, address: number|undefined = 0, highlightInfo?: HighlightInfo) {
+  constructor(memoryWrapper: LazyUint8Array, address: number|undefined = 0, tabId: string) {
     super(false);
 
     if (address < 0 || address >= memoryWrapper.length()) {
@@ -154,7 +145,7 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
 
     this.#memoryWrapper = memoryWrapper;
     this.#address = address;
-    this.#highlightInfo = highlightInfo;
+    this.#tabId = tabId;
     this.#inspector = new LinearMemoryInspector();
     this.#inspector.addEventListener('memoryrequest', (event: MemoryRequestEvent) => {
       this.#memoryRequested(event);
@@ -186,18 +177,6 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
     this.#address = address;
   }
 
-  updateHighlightInfo(highlightInfo?: HighlightInfo): void {
-    if (highlightInfo !== undefined) {
-      if (highlightInfo.startAddress < 0 || highlightInfo.startAddress >= this.#memoryWrapper.length()) {
-        throw new Error('Highlight info start address is out of bounds.');
-      }
-      if (highlightInfo.size < 0) {
-        throw new Error('Highlight size cannot be negative.');
-      }
-    }
-    this.#highlightInfo = highlightInfo;
-  }
-
   refreshData(): void {
     void LinearMemoryInspectorController.getMemoryForAddress(this.#memoryWrapper, this.#address).then(({
                                                                                                         memory,
@@ -221,7 +200,7 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
         valueTypes,
         valueTypeModes,
         endianness,
-        highlightInfo: this.#highlightInfo,
+        highlightInfo: this.#getHighlightInfo(),
       };
     });
   }
@@ -238,8 +217,21 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
         address: address,
         memoryOffset: start,
         outerMemoryLength: this.#memoryWrapper.length(),
-        highlightInfo: this.#highlightInfo,
+        highlightInfo: this.#getHighlightInfo(),
       };
     });
   }
+
+  #getHighlightInfo(): HighlightInfo|undefined {
+    const highlightInfo = LinearMemoryInspectorController.instance().getHighlightInfo(this.#tabId);
+    if (highlightInfo !== undefined) {
+      if (highlightInfo.startAddress < 0 || highlightInfo.startAddress >= this.#memoryWrapper.length()) {
+        throw new Error('Highlight info start address is out of bounds.');
+      }
+      if (highlightInfo.size <= 0) {
+        throw new Error('Highlight size must be a positive number.');
+      }
+    }
+    return highlightInfo;
+  }
 }

package/front_end/ui/legacy/SplitWidget.ts

@@ -532,6 +532,7 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     // This order of things is important.
     // 1. Resize main element early and force layout.
     this.contentElement.style.setProperty(animatedMarginPropertyName, marginFrom);
+    this.contentElement.style.setProperty('overflow', 'hidden');
     if (!reverse) {
       suppressUnused(this.mainElement.offsetWidth);
       suppressUnused(this.sidebarElementInternal.offsetWidth);
@@ -579,6 +580,7 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     this.contentElement.style.removeProperty('margin-bottom');
     this.contentElement.style.removeProperty('margin-left');
     this.contentElement.style.removeProperty('transition');
+    this.contentElement.style.removeProperty('overflow');
 
     if (this.animationFrameHandle) {
       this.contentElement.window().cancelAnimationFrame(this.animationFrameHandle);