chrome-devtools-frontend 1.0.1018569 → 1.0.1019968

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -35,10 +35,12 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {linkifyDeferredNodeReference} from './DOMLinkifier.js';
+import * as ElementsComponents from './components/components.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsTreeElement, InitialChildrenLimit} from './ElementsTreeElement.js';
 import elementsTreeOutlineStyles from './elementsTreeOutline.css.js';
@@ -555,7 +557,9 @@ export class ElementsTreeOutline extends
     // items extend at least to the right edge of the outer <ol> container.
     // In the no-word-wrap mode the outer <ol> may be wider than the tree container
     // (and partially hidden), in which case we are left to use only its right boundary.
-    const x = scrollContainer.totalOffsetLeft() + scrollContainer.offsetWidth - 18;
+    // We use .clientWidth to account for possible scrollbar, and subtract 6px
+    // for the width of the split widget (see splitWidget.css).
+    const x = scrollContainer.totalOffsetLeft() + scrollContainer.clientWidth - 6;
 
     const y = event.pageY;
 
@@ -1627,13 +1631,45 @@ export class ShortcutTreeElement extends UI.TreeOutline.TreeElement {
       text = '<' + text + '>';
     }
     title.textContent = '\u21AA ' + text;
-
-    const link = (linkifyDeferredNodeReference(nodeShortcut.deferredNode) as Element);
-    UI.UIUtils.createTextChild(this.listItemElement, ' ');
-    link.classList.add('elements-tree-shortcut-link');
-    link.textContent = i18nString(UIStrings.reveal);
-    this.listItemElement.appendChild(link);
     this.nodeShortcut = nodeShortcut;
+    this.addRevealAdorner();
+  }
+
+  addRevealAdorner(): void {
+    const adorner = new Adorners.Adorner.Adorner();
+    adorner.classList.add('adorner-reveal');
+    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
+        ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL);
+    const name = config.name;
+    const adornerContent = document.createElement('span');
+    const linkIcon = new IconButton.Icon.Icon();
+    linkIcon
+        .data = {iconName: 'ic_show_node_16x16', color: 'var(--color-text-disabled)', width: '12px', height: '12px'};
+    const slotText = document.createElement('span');
+    slotText.textContent = name;
+    adornerContent.append(linkIcon);
+    adornerContent.append(slotText);
+    adornerContent.classList.add('adorner-with-icon');
+    adorner.data = {
+      name,
+      content: adornerContent,
+    };
+    this.listItemElement.appendChild(adorner);
+    const onClick = (((): void => {
+                       this.nodeShortcut.deferredNode.resolve(
+                           node => {
+                             void Common.Revealer.reveal(node);
+                           },
+                       );
+                     }) as EventListener);
+    adorner.addInteraction(onClick, {
+      isToggle: false,
+      shouldPropagateOnKeydown: false,
+      ariaLabelDefault: i18nString(UIStrings.reveal),
+      ariaLabelActive: i18nString(UIStrings.reveal),
+    });
+    adorner.addEventListener('mousedown', e => e.consume(), false);
+    ElementsPanel.instance().registerAdorner(adorner);
   }
 
   get hovered(): boolean {

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -121,6 +121,8 @@ export class StylePropertiesSection {
   protected parentPane: StylesSidebarPane;
   styleInternal: SDK.CSSStyleDeclaration.CSSStyleDeclaration;
   readonly matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
+  private computedStyles: Map<string, string>|null;
+  private parentsComputedStyles: Map<string, string>|null;
   editable: boolean;
   private hoverTimer: number|null;
   private willCauseCancelEditing: boolean;
@@ -152,11 +154,14 @@ export class StylePropertiesSection {
 
   constructor(
       parentPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
-      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
+      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number, computedStyles: Map<string, string>|null,
+      parentsComputedStyles: Map<string, string>|null) {
     this.parentPane = parentPane;
     this.sectionIdx = sectionIdx;
     this.styleInternal = style;
     this.matchedStyles = matchedStyles;
+    this.computedStyles = computedStyles;
+    this.parentsComputedStyles = parentsComputedStyles;
     this.editable = Boolean(style.styleSheetId && style.range);
     this.hoverTimer = null;
     this.willCauseCancelEditing = false;
@@ -703,6 +708,7 @@ export class StylePropertiesSection {
   protected createAtRuleLists(rule: SDK.CSSRule.CSSStyleRule): void {
     this.createMediaList(rule.media);
     this.createContainerQueryList(rule.containerQueries);
+    this.createScopesList(rule.scopes);
     this.createSupportsList(rule.supports);
   }
 
@@ -773,6 +779,28 @@ export class StylePropertiesSection {
     }
   }
 
+  protected createScopesList(scopesList: SDK.CSSScope.CSSScope[]): void {
+    for (let i = scopesList.length - 1; i >= 0; --i) {
+      const scope = scopesList[i];
+      if (!scope.text) {
+        continue;
+      }
+
+      let onQueryTextClick;
+      if (scope.styleSheetId) {
+        onQueryTextClick = this.handleQueryRuleClick.bind(this, scope);
+      }
+
+      const scopeElement = new ElementsComponents.CSSQuery.CSSQuery();
+      scopeElement.data = {
+        queryPrefix: '@scope',
+        queryText: scope.text,
+        onQueryTextClick,
+      };
+      this.queryListElement.append(scopeElement);
+    }
+  }
+
   protected createSupportsList(supportsList: SDK.CSSSupports.CSSSupports[]): void {
     for (let i = supportsList.length - 1; i >= 0; --i) {
       const supports = supportsList[i];
@@ -932,6 +960,8 @@ export class StylePropertiesSection {
       }
       const item = new StylePropertyTreeElement(
           this.parentPane, this.matchedStyles, property, isShorthand, inherited, overloaded, false);
+      item.setComputedStyles(this.computedStyles);
+      item.setParentsComputedStyles(this.parentsComputedStyles);
       this.propertiesTreeOutline.appendChild(item);
     }
 
@@ -1178,6 +1208,8 @@ export class StylePropertiesSection {
         success = await cssModel.setContainerQueryText(query.styleSheetId, range, newContent);
       } else if (query instanceof SDK.CSSSupports.CSSSupports) {
         success = await cssModel.setSupportsText(query.styleSheetId, range, newContent);
+      } else if (query instanceof SDK.CSSScope.CSSScope) {
+        success = await cssModel.setScopeText(query.styleSheetId, range, newContent);
       } else {
         success = await cssModel.setMediaText(query.styleSheetId, range, newContent);
       }
@@ -1449,7 +1481,7 @@ export class BlankStylePropertiesSection extends StylePropertiesSection {
       insertAfterStyle: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
     const cssModel = (stylesPane.cssModel() as SDK.CSSModel.CSSModel);
     const rule = SDK.CSSRule.CSSStyleRule.createDummyRule(cssModel, defaultSelectorText);
-    super(stylesPane, matchedStyles, rule.style, sectionIdx);
+    super(stylesPane, matchedStyles, rule.style, sectionIdx, null, null);
     this.normal = false;
     this.ruleLocation = ruleLocation;
     this.styleSheetId = styleSheetId;
@@ -1553,7 +1585,7 @@ export class KeyframePropertiesSection extends StylePropertiesSection {
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
       style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
-    super(stylesPane, matchedStyles, style, sectionIdx);
+    super(stylesPane, matchedStyles, style, sectionIdx, null, null);
     this.selectorElement.className = 'keyframe-key';
   }
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -21,6 +21,7 @@ import {StyleEditorWidget} from './StyleEditorWidget.js';
 import type {StylePropertiesSection} from './StylePropertiesSection.js';
 import {CSSPropertyPrompt, StylesSidebarPane, StylesSidebarPropertyRenderer} from './StylesSidebarPane.js';
 import {getCssDeclarationAsJavascriptProperty} from './StylePropertyUtils.js';
+import {cssRuleValidatorsMap} from './CSSRuleValidator.js';
 
 const FlexboxEditor = ElementsComponents.StylePropertyEditor.FlexboxEditor;
 const GridEditor = ElementsComponents.StylePropertyEditor.GridEditor;
@@ -120,6 +121,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   private hasBeenEditedIncrementally: boolean;
   private prompt: CSSPropertyPrompt|null;
   private lastComputedValue: string|null;
+  private computedStyles: Map<string, string>|null = null;
+  private parentsComputedStyles: Map<string, string>|null = null;
   private contextForTest!: Context|undefined;
   #propertyTextFromSource: string;
 
@@ -179,6 +182,14 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.updateState();
   }
 
+  setComputedStyles(computedStyles: Map<string, string>|null): void {
+    this.computedStyles = computedStyles;
+  }
+
+  setParentsComputedStyles(parentsComputedStyles: Map<string, string>|null): void {
+    this.parentsComputedStyles = parentsComputedStyles;
+  }
+
   get name(): string {
     return this.property.name;
   }
@@ -568,6 +579,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       const item = new StylePropertyTreeElement(
           this.parentPaneInternal, this.matchedStylesInternal, longhandProperties[i], false, inherited, overloaded,
           false);
+      item.setComputedStyles(this.computedStyles);
+      item.setParentsComputedStyles(this.parentsComputedStyles);
       this.appendChild(item);
     }
   }
@@ -702,6 +715,17 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       }
     }
 
+    const hintMessage = this.getHintMessage(this.computedStyles, this.parentsComputedStyles);
+    if (hintMessage !== null) {
+      const hintIcon = UI.Icon.Icon.create('mediumicon-info', 'hint');
+      const hintPopover =
+          new UI.PopoverHelper.PopoverHelper(hintIcon, event => this.handleHintPopoverRequest(hintMessage, event));
+      hintPopover.setHasPadding(true);
+      hintPopover.setTimeout(0, 100);
+
+      this.listItemElement.append(hintIcon);
+    }
+
     if (!this.property.parsedOk) {
       // Avoid having longhands under an invalid shorthand.
       this.listItemElement.classList.add('not-parsed-ok');
@@ -793,6 +817,41 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
         StylesSidebarPane.createExclamationMark(this.property, warnings.join(' ')), this.listItemElement.firstChild);
   }
 
+  private getHintMessage(computedStyles: Map<string, string>|null, parentComputedStyles: Map<string, string>|null):
+      string|null {
+    const propertyName = this.property.name;
+
+    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.CSS_AUTHORING_HINTS) ||
+        !cssRuleValidatorsMap.has(propertyName)) {
+      return null;
+    }
+
+    for (const validator of cssRuleValidatorsMap.get(propertyName) || []) {
+      if (!validator.isRuleValid(computedStyles, parentComputedStyles)) {
+        return validator.getHintMessage(propertyName);
+      }
+    }
+
+    return null;
+  }
+
+  private handleHintPopoverRequest(hintMessageContent: string, event: Event): UI.PopoverHelper.PopoverRequest|null {
+    const link = event.composedPath()[0];
+    Platform.DCHECK(() => link instanceof Element, 'Link is not an instance of Element');
+
+    return {
+      box: (link as Element).boxInWindow(),
+      show: async(popover: UI.GlassPane.GlassPane): Promise<boolean> => {
+        const node = this.node();
+        if (!node) {
+          return false;
+        }
+        popover.contentElement.insertAdjacentHTML('beforeend', hintMessageContent);
+        return true;
+      },
+    };
+  }
+
   private mouseUp(event: MouseEvent): void {
     const activeTreeElement = parentMap.get(this.parentPaneInternal);
     parentMap.delete(this.parentPaneInternal);

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -583,8 +583,16 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       }, 200 /* only spin for loading time > 200ms to avoid unpleasant render flashes */);
     }
 
+    const node = this.node();
+    // TODO: Fetch the parent node id using CDP command
+    const parentNode = node ? node.parentNode : null;
+
+    const [computedStyles, parentsComputedStyles] =
+        await Promise.all([this.fetchComputedStylesFor(node), this.fetchComputedStylesFor(parentNode)]);
+
     const matchedStyles = await this.fetchMatchedCascade();
-    await this.innerRebuildUpdate(matchedStyles);
+
+    await this.innerRebuildUpdate(matchedStyles, computedStyles, parentsComputedStyles);
     if (!this.initialUpdateCompleted) {
       this.initialUpdateCompleted = true;
       this.appendToolbarItem(this.createRenderingShortcuts());
@@ -599,6 +607,13 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.dispatchEventToListeners(Events.StylesUpdateCompleted, {hasMatchedStyles: this.hasMatchedStyles});
   }
 
+  private async fetchComputedStylesFor(node: SDK.DOMModel.DOMNode|null): Promise<Map<string, string>|null> {
+    if (!node) {
+      return null;
+    }
+    return await node.domModel().cssModel().getComputedStyle(node.id);
+  }
+
   onResize(): void {
     void this.resizeThrottler.schedule(this.innerResize.bind(this));
   }
@@ -718,7 +733,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
   }
 
-  private async innerRebuildUpdate(matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null): Promise<void> {
+  private async innerRebuildUpdate(
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null, computedStyles: Map<string, string>|null,
+      parentsComputedStyles: Map<string, string>|null): Promise<void> {
     // ElementsSidebarPane's throttler schedules this method. Usually,
     // rebuild is suppressed while editing (see onCSSModelChanged()), but we need a
     // 'force' flag since the currently running throttler process cannot be canceled.
@@ -742,8 +759,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       return;
     }
 
-    this.sectionBlocks =
-        await this.rebuildSectionsForMatchedStyleRules((matchedStyles as SDK.CSSMatchedStyles.CSSMatchedStyles));
+    this.sectionBlocks = await this.rebuildSectionsForMatchedStyleRules(
+        (matchedStyles as SDK.CSSMatchedStyles.CSSMatchedStyles), computedStyles, parentsComputedStyles);
 
     // Style sections maybe re-created when flexbox editor is activated.
     // With the following code we re-bind the flexbox editor to the new
@@ -814,8 +831,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     // For sniffing in tests.
   }
 
-  private async rebuildSectionsForMatchedStyleRules(matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles):
-      Promise<SectionBlock[]> {
+  private async rebuildSectionsForMatchedStyleRules(
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, computedStyles: Map<string, string>|null,
+      parentsComputedStyles: Map<string, string>|null): Promise<SectionBlock[]> {
     if (this.idleCallbackManager) {
       this.idleCallbackManager.discard();
     }
@@ -872,7 +890,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const lastBlock = blocks[blocks.length - 1];
       if (lastBlock) {
         this.idleCallbackManager.schedule(() => {
-          const section = new StylePropertiesSection(this, matchedStyles, style, sectionIdx);
+          const section =
+              new StylePropertiesSection(this, matchedStyles, style, sectionIdx, computedStyles, parentsComputedStyles);
           sectionIdx++;
           lastBlock.sections.push(section);
         });
@@ -941,7 +960,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
         addLayerSeparator(style);
         const lastBlock = blocks[blocks.length - 1];
         this.idleCallbackManager.schedule(() => {
-          const section = new HighlightPseudoStylePropertiesSection(this, matchedStyles, style, sectionIdx);
+          const section = new HighlightPseudoStylePropertiesSection(
+              this, matchedStyles, style, sectionIdx, computedStyles, parentsComputedStyles);
           sectionIdx++;
           lastBlock.sections.push(section);
         });

package/front_end/panels/elements/TopLayerContainer.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as ElementsComponents from './components/components.js';
@@ -79,7 +80,14 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
     const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
         ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
     const adornerContent = document.createElement('span');
-    adornerContent.textContent = ` top-layer (${topLayerElementIndex}) `;
+    adornerContent.classList.add('adorner-with-icon');
+    const linkIcon = new IconButton.Icon.Icon();
+    linkIcon
+        .data = {iconName: 'ic_show_node_16x16', color: 'var(--color-text-disabled)', width: '12px', height: '12px'};
+    const adornerText = document.createElement('span');
+    adornerText.textContent = ` top-layer (${topLayerElementIndex}) `;
+    adornerContent.append(linkIcon);
+    adornerContent.append(adornerText);
     const adorner = element?.adorn(config, adornerContent);
     if (adorner) {
       const onClick = (((): void => {

package/front_end/panels/elements/components/AdornerManager.ts

@@ -31,6 +31,7 @@ export enum RegisteredAdorners {
   CONTAINER = 'container',
   SLOT = 'slot',
   TOP_LAYER = 'top-layer',
+  REVEAL = 'reveal',
 }
 
 // This enum-like const object serves as the authoritative registry for all the
@@ -79,6 +80,12 @@ export function getRegisteredAdorner(which: RegisteredAdorners): RegisteredAdorn
         category: AdornerCategories.LAYOUT,
         enabledByDefault: true,
       };
+    case RegisteredAdorners.REVEAL:
+      return {
+        name: 'reveal',
+        category: AdornerCategories.DEFAULT,
+        enabledByDefault: true,
+      };
   }
 }
 

package/front_end/panels/elements/elements.ts

@@ -22,6 +22,7 @@ import './StylePropertyHighlighter.js';
 import './StylesSidebarPane.js';
 import './StylePropertyTreeElement.js';
 import './ComputedStyleWidget.js';
+import './CSSRuleValidator.js';
 import './ElementsPanel.js';
 import './ClassesPaneWidget.js';
 import './ElementStatePaneWidget.js';
@@ -32,6 +33,7 @@ import * as ClassesPaneWidget from './ClassesPaneWidget.js';
 import * as ColorSwatchPopoverIcon from './ColorSwatchPopoverIcon.js';
 import * as ComputedStyleModel from './ComputedStyleModel.js';
 import * as ComputedStyleWidget from './ComputedStyleWidget.js';
+import * as CSSRuleValidator from './CSSRuleValidator.js';
 import * as DOMLinkifier from './DOMLinkifier.js';
 import * as DOMPath from './DOMPath.js';
 import * as ElementsPanel from './ElementsPanel.js';
@@ -62,6 +64,7 @@ export {
   ColorSwatchPopoverIcon,
   ComputedStyleModel,
   ComputedStyleWidget,
+  CSSRuleValidator,
   DOMLinkifier,
   DOMPath,
   ElementsPanel,

package/front_end/panels/elements/elementsTreeOutline.css

@@ -27,6 +27,10 @@
   display: none;
 }
 
+.adorner-reveal {
+  margin: 3px;
+}
+
 .adorner-with-icon {
   display: flex;
   justify-content: center;

package/front_end/panels/elements/stylesSectionTree.css

@@ -155,6 +155,16 @@ ol.expanded {
   transform: scale(0.9);
 }
 
+.hint {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  display: inline-block;
+  cursor: pointer;
+  transform: scale(0.9);
+}
+
 .has-ignorable-error {
   color: var(--color-text-disabled);
 }

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -415,6 +415,7 @@ export class DeviceModeToolbar {
     boundAppendScaleItem('100%', 1);
     boundAppendScaleItem('125%', 1.25);
     boundAppendScaleItem('150%', 1.5);
+    boundAppendScaleItem('200%', 2);
 
     function appendScaleItem(this: DeviceModeToolbar, title: string, value: number): void {
       contextMenu.defaultSection().appendCheckboxItem(

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

@@ -20,23 +20,23 @@ const UIStrings = {
   /**
   *@description Text in Request Headers View of the Network panel
   */
-  fromMemoryCache: '(from memory cache)',
+  fromDiskCache: '(from disk cache)',
   /**
   *@description Text in Request Headers View of the Network panel
   */
-  fromServiceWorker: '(from `service worker`)',
+  fromMemoryCache: '(from memory cache)',
   /**
   *@description Text in Request Headers View of the Network panel
   */
-  fromSignedexchange: '(from signed-exchange)',
+  fromPrefetchCache: '(from prefetch cache)',
   /**
   *@description Text in Request Headers View of the Network panel
   */
-  fromPrefetchCache: '(from prefetch cache)',
+  fromServiceWorker: '(from `service worker`)',
   /**
   *@description Text in Request Headers View of the Network panel
   */
-  fromDiskCache: '(from disk cache)',
+  fromSignedexchange: '(from signed-exchange)',
   /**
   *@description Text in Request Headers View of the Network panel
   */
@@ -52,16 +52,24 @@ const UIStrings = {
   /**
   *@description Text in Request Headers View of the Network panel
   */
-  requestHeaders: 'Request Headers',
+  referrerPolicy: 'Referrer Policy',
   /**
-  *@description The URL of a request
+  *@description Text in Network Log View Columns of the Network panel
   */
-  requestUrl: 'Request URL',
+  remoteAddress: 'Remote Address',
+  /**
+  *@description Text in Request Headers View of the Network panel
+  */
+  requestHeaders: 'Request Headers',
   /**
   *@description The HTTP method of a request
   */
   requestMethod: 'Request Method',
   /**
+  *@description The URL of a request
+  */
+  requestUrl: 'Request URL',
+  /**
   *@description A context menu item in the Network Log View Columns of the Network panel
   */
   responseHeaders: 'Response Headers',
@@ -73,14 +81,6 @@ const UIStrings = {
   *@description HTTP response code
   */
   statusCode: 'Status Code',
-  /**
-  *@description Text in Network Log View Columns of the Network panel
-  */
-  remoteAddress: 'Remote Address',
-  /**
-  *@description Text in Request Headers View of the Network panel
-  */
-  referrerPolicy: 'Referrer Policy',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/components/RequestHeadersView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

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

@@ -27,6 +27,7 @@ import {
 import {formatAddress, parseAddress} from './LinearMemoryInspectorUtils.js';
 import type {JumpToPointerAddressEvent, ValueTypeModeChangedEvent} from './ValueInterpreterDisplay.js';
 import {LinearMemoryViewer} from './LinearMemoryViewer.js';
+import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 const UIStrings = {
@@ -51,6 +52,7 @@ export interface LinearMemoryInspectorData {
   valueTypes?: Set<ValueType>;
   valueTypeModes?: Map<ValueType, ValueTypeMode>;
   endianness?: Endianness;
+  highlightInfo?: HighlightInfo;
 }
 
 export type Settings = {
@@ -120,6 +122,10 @@ export class LinearMemoryInspector extends HTMLElement {
   #outerMemoryLength = 0;
 
   #address = -1;
+  #highlightInfo: HighlightInfo = {
+    size: 0,
+    startAddress: 0,
+  };
 
   #currentNavigatorMode = Mode.Submitted;
   #currentNavigatorAddressLine = `${this.#address}`;
@@ -143,12 +149,23 @@ export class LinearMemoryInspector extends HTMLElement {
       throw new Error('Memory offset has to be greater or equal to zero.');
     }
 
+    if (data.highlightInfo !== undefined) {
+      if (data.highlightInfo.size < 0) {
+        throw new Error('Object size has to be greater than or equal to zero');
+      }
+      if (data.highlightInfo.startAddress > data.memoryOffset + data.memory.length ||
+          data.highlightInfo.startAddress < 0) {
+        throw new Error('Object start address is out of bounds.');
+      }
+    }
+
     this.#memory = data.memory;
     this.#memoryOffset = data.memoryOffset;
     this.#outerMemoryLength = data.outerMemoryLength;
     this.#valueTypeModes = data.valueTypeModes || this.#valueTypeModes;
     this.#valueTypes = data.valueTypes || this.#valueTypes;
     this.#endianness = data.endianness || this.#endianness;
+    this.#highlightInfo = data.highlightInfo || this.#highlightInfo;
     this.#setAddress(data.address);
     this.#render();
   }
@@ -179,7 +196,12 @@ export class LinearMemoryInspector extends HTMLElement {
           @pagenavigation=${this.#navigatePage}
           @historynavigation=${this.#navigateHistory}></${LinearMemoryNavigator.litTagName}>
         <${LinearMemoryViewer.litTagName}
-          .data=${{memory: this.#memory.slice(start - this.#memoryOffset, end - this.#memoryOffset), address: this.#address, memoryOffset: start, focus: this.#currentNavigatorMode === Mode.Submitted} as LinearMemoryViewerData}
+          .data=${{
+            memory: this.#memory.slice(start - this.#memoryOffset,
+            end - this.#memoryOffset),
+            address: this.#address, memoryOffset: start,
+            focus: this.#currentNavigatorMode === Mode.Submitted,
+            highlightInfo: this.#highlightInfo } as LinearMemoryViewerData}
           @byteselected=${this.#onByteSelected}
           @resize=${this.#resize}>
         </${LinearMemoryViewer.litTagName}>