chrome-devtools-frontend 1.0.1522585 → 1.0.1525561

package/front_end/panels/developer_resources/DeveloperResourcesListView.ts

@@ -3,20 +3,19 @@
 // found in the LICENSE file.
 
 import '../../ui/legacy/components/data_grid/data_grid.js';
+import '../../ui/components/highlighting/highlighting.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 * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
+import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
+import {html, nothing, render} from '../../ui/lit/lit.js';
 
 import developerResourcesListViewStyles from './developerResourcesListView.css.js';
 
-const {ref} = Directives;
-
 const UIStrings = {
   /**
    * @description Text for the status of something
@@ -87,7 +86,6 @@ const {withThousandsSeparator} = Platform.NumberUtilities;
 export interface ViewInput {
   items: SDK.PageResourceLoader.PageResource[];
   selectedItem: SDK.PageResourceLoader.PageResource|null;
-  highlight: (element: Element|undefined, textContent: string|undefined, columnId: string) => void;
   filters: TextUtils.TextUtils.ParsedFilter[];
   onContextMenu: (e: CustomEvent<{menu: UI.ContextMenu.ContextMenu, element: HTMLElement}>) => void;
   onSelect: (e: CustomEvent<HTMLElement>) => void;
@@ -98,6 +96,20 @@ export interface ViewInput {
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 const DEFAULT_VIEW: View = (input, _output, target) => {
+  function highlightRange(textContent: string|undefined, columnId: string): string {
+    if (!textContent) {
+      return '';
+    }
+    const filter = input.filters.find(filter => filter.key?.split(',')?.includes(columnId));
+    if (!filter?.regex) {
+      return '';
+    }
+    const matches = filter.regex.exec(textContent ?? '');
+    if (!matches?.length) {
+      return '';
+    }
+    return `${matches.index},${matches[0].length}`;
+  }
   // clang-format off
   render(html`
       <style>${developerResourcesListViewStyles}</style>
@@ -135,11 +147,11 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
                     item.success === false ? i18nString(UIStrings.failure) :
                                              i18nString(UIStrings.pending)}</td>
               <td title=${item.url} aria-label=${item.url}>
-                <div aria-hidden="true" part="url-outer"
-                     ${ref(e => input.highlight(e, item.url, 'url'))}>
+                <devtools-highlight aria-hidden="true" part="url-outer"
+                                    ranges=${highlightRange(item.url, 'url')}>
                   <div part="url-prefix">${splitURL ? splitURL[1] : item.url}</div>
                   <div part="url-suffix">${splitURL ? splitURL[2] : ''}</div>
-                </div>
+                </devtools-highlight>
               </td>
               <td title=${item.initiator.initiatorUrl || ''}
                   aria-label=${item.initiator.initiatorUrl || ''}
@@ -154,9 +166,9 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
                   item.duration !== null ? html`<span>${i18n.TimeUtilities.millisToString(item.duration)}</span>` : ''}</td>
               <td class="error-message">
                 ${item.errorMessage ? html`
-                <span ${ref(e => input.highlight(e, item.errorMessage, 'error-message'))}>
+                <devtools-highlight ranges=${highlightRange(item.errorMessage, 'error-message')}>
                   ${item.errorMessage}
-                </span>` : nothing}
+                </devtools-highlight>` : nothing}
               </td>
             </tr>`;
           })}
@@ -233,7 +245,6 @@ export class DeveloperResourcesListView extends UI.Widget.VBox {
       items: this.#items,
       selectedItem: this.#selectedItem,
       filters: this.#filters,
-      highlight: this.#highlight.bind(this),
       onContextMenu: (e: CustomEvent<{menu: UI.ContextMenu.ContextMenu, element: HTMLElement}>) => {
         if (e.detail?.element) {
           this.#populateContextMenu(e.detail.menu, e.detail.element);
@@ -256,28 +267,4 @@ export class DeveloperResourcesListView extends UI.Widget.VBox {
     const output = {};
     this.#view(input, output, this.contentElement);
   }
-
-  #highlight(element: Element|undefined, textContent: string|undefined, columnId: string): void {
-    if (!element || !textContent) {
-      return;
-    }
-    const highlightContainers =
-        new Set<Element>([...element.querySelectorAll('.filter-highlight')].map(e => e.parentElement as Element));
-    for (const container of highlightContainers) {
-      container.textContent = container.textContent;
-    }
-    const filter = this.#filters.find(filter => filter.key?.split(',')?.includes(columnId));
-    if (!filter?.regex) {
-      return;
-    }
-    const matches = filter.regex.exec(element.textContent ?? '');
-    if (!matches?.length) {
-      return;
-    }
-    const range = new TextUtils.TextRange.SourceRange(matches.index, matches[0].length);
-    UI.UIUtils.highlightRangesWithStyleClass(element, [range], 'filter-highlight');
-    for (const el of element.querySelectorAll('.filter-highlight')) {
-      el.setAttribute('part', 'filter-highlight');
-    }
-  }
 }

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -191,7 +191,7 @@ const createTraceElement =
       return trace;
     };
 
-// clang-format off
+/** clang-format off **/
 class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ColorMatch) {
   // clang-format on
   override render(match: SDK.CSSPropertyParserMatchers.ColorMatch, context: RenderingContext): Node[] {

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -66,6 +66,7 @@ enum SpecificPseudoStates {
   PLACEHOLDER_SHOWN = 'placeholder-shown',
   AUTOFILL = 'autofill',
   OPEN = 'open',
+  TARGET_CURRENT = 'target-current',
 }
 
 interface ElementState {
@@ -179,6 +180,8 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
         SpecificPseudoStates.PLACEHOLDER_SHOWN, {state: SpecificPseudoStates.PLACEHOLDER_SHOWN, type: 'specific'});
     this.#states.set(SpecificPseudoStates.AUTOFILL, {state: SpecificPseudoStates.AUTOFILL, type: 'specific'});
     this.#states.set(SpecificPseudoStates.OPEN, {state: SpecificPseudoStates.OPEN, type: 'specific'});
+    this.#states.set(
+        SpecificPseudoStates.TARGET_CURRENT, {state: SpecificPseudoStates.TARGET_CURRENT, type: 'specific'});
 
     setDualStateCheckboxes(SpecificPseudoStates.VALID, SpecificPseudoStates.INVALID);
     setDualStateCheckboxes(SpecificPseudoStates.USER_VALID, SpecificPseudoStates.USER_INVALID);
@@ -268,6 +271,9 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     const isElementOfTypes = (node: SDK.DOMModel.DOMNode, types: string[]): boolean => {
       return types.includes(node.nodeName()?.toLowerCase());
     };
+    const isAnchorElementWithHref = (node: SDK.DOMModel.DOMNode): boolean => {
+      return isElementOfTypes(node, ['a']) && node.getAttribute('href') !== undefined;
+    };
     const isInputWithTypeRadioOrCheckbox = (node: SDK.DOMModel.DOMNode): boolean => {
       return isElementOfTypes(node, ['input']) &&
           (node.getAttribute('type') === 'checkbox' || node.getAttribute('type') === 'radio');
@@ -385,6 +391,12 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     } else {
       hideSpecificCheckbox(SpecificPseudoStates.OPEN, true);
     }
+
+    if (isAnchorElementWithHref(node) || node.pseudoType() === 'scroll-marker') {
+      hideSpecificCheckbox(SpecificPseudoStates.TARGET_CURRENT, false);
+    } else {
+      hideSpecificCheckbox(SpecificPseudoStates.TARGET_CURRENT, true);
+    }
   }
 }
 

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -2950,14 +2950,16 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
 export const InitialChildrenLimit = 500;
 
-// A union of HTML4 and HTML5-Draft elements that explicitly
-// or implicitly (for HTML5) forbid the closing tag.
+/**
+ * A union of HTML4 and HTML5-Draft elements that explicitly
+ * or implicitly (for HTML5) forbid the closing tag.
+ **/
 export const ForbiddenClosingTagElements = new Set<string>([
   'area', 'base',  'basefont', 'br',   'canvas',   'col',  'command', 'embed',  'frame', 'hr',
   'img',  'input', 'keygen',   'link', 'menuitem', 'meta', 'param',   'source', 'track', 'wbr',
 ]);
 
-// These tags we do not allow editing their tag name.
+/** These tags we do not allow editing their tag name. **/
 export const EditTagBlocklist = new Set<string>(['html', 'head', 'body']);
 
 export function adornerComparator(adornerA: Adorners.Adorner.Adorner, adornerB: Adorners.Adorner.Adorner): number {
@@ -3000,8 +3002,10 @@ export interface EditorHandles {
   resize: () => void;
 }
 
-// As a privacy measure we are logging elements tree outline as a flat list where every tree item is a
-// child of a tree outline.
+/**
+ * As a privacy measure we are logging elements tree outline as a flat list where every tree item is a
+ * child of a tree outline.
+ **/
 function loggingParentProvider(e: Element): Element|undefined {
   const treeElement = UI.TreeOutline.TreeElement.getTreeElementBylistItemNode(e);
   return treeElement?.treeOutline?.contentElement;

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1230,11 +1230,6 @@ export class ElementsTreeOutline extends
   }
 
   private contextMenuEventFired(event: MouseEvent): void {
-    // The context menu construction may be async. In order to
-    // make sure that no other (default) context menu shows up, we need
-    // to stop propagating and prevent the default action.
-    event.stopPropagation();
-    event.preventDefault();
     const treeElement = this.treeElementFromEventInternal(event);
     if (treeElement instanceof ElementsTreeElement) {
       void this.showContextMenu(treeElement, event);
@@ -1246,13 +1241,21 @@ export class ElementsTreeOutline extends
       return;
     }
 
-    const contextMenu = new UI.ContextMenu.ContextMenu(event);
-    const isPseudoElement = Boolean(treeElement.node().pseudoType());
-    const isTag = treeElement.node().nodeType() === Node.ELEMENT_NODE && !isPseudoElement;
     const node = (event.target as Node | null);
     if (!node) {
       return;
     }
+
+    // The context menu construction may be async. In order to
+    // make sure that no other (default) context menu shows up, we need
+    // to stop propagating and prevent the default action.
+    event.stopPropagation();
+    event.preventDefault();
+
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
+    const isPseudoElement = Boolean(treeElement.node().pseudoType());
+    const isTag = treeElement.node().nodeType() === Node.ELEMENT_NODE && !isPseudoElement;
+
     let textNode: Element|null = node.enclosingNodeOrSelfWithClass('webkit-html-text-node');
     if (textNode?.classList.contains('bogus')) {
       textNode = null;

package/front_end/panels/elements/PropertyRenderer.ts

@@ -57,8 +57,10 @@ export function rendererBase<MatchT extends SDK.CSSPropertyParser.Match>(
   return RendererBase;
 }
 
-// This class implements highlighting for rendered nodes in value traces. On hover, all nodes belonging to the same
-// Match (using object identity) are highlighted.
+/**
+ * This class implements highlighting for rendered nodes in value traces. On hover, all nodes belonging to the same
+ * Match (using object identity) are highlighted.
+ **/
 export class Highlighting {
   static readonly REGISTRY_NAME = 'css-value-tracing';
   // This holds a stack of active ranges, the top-stack is the currently highlighted set. mouseenter and mouseleave
@@ -145,19 +147,21 @@ export class Highlighting {
   }
 }
 
-// This class is used to guide value tracing when passed to the Renderer. Tracing has two phases. First, substitutions
-// such as var() are applied step by step. In each step, all vars in the value are replaced by their definition until no
-// vars remain. In the second phase, we evaluate other functions such as calc() or min() or color-mix(). Which CSS
-// function types are actually substituted or evaluated is not relevant here, rather it is decided by an individual
-// MatchRenderer.
-//
-// Callers don't need to keep track of the tracing depth (i.e., the number of substitution/evaluation steps).
-// TracingContext is stateful and keeps track of the depth, so callers can progressively produce steps by calling
-// TracingContext#nextSubstitution or TracingContext#nextEvaluation. Calling Renderer with the tracing context will then
-// produce the next step of tracing. The tracing depth is passed to the individual MatchRenderers by way of
-// TracingContext#substitution or TracingContext#applyEvaluation/TracingContext#evaluation (see function-level comments
-// about how these two play together), which MatchRenderers call to request a fresh TracingContext for the next level of
-// substitution/evaluation.
+/**
+ * This class is used to guide value tracing when passed to the Renderer. Tracing has two phases. First, substitutions
+ * such as var() are applied step by step. In each step, all vars in the value are replaced by their definition until no
+ * vars remain. In the second phase, we evaluate other functions such as calc() or min() or color-mix(). Which CSS
+ * function types are actually substituted or evaluated is not relevant here, rather it is decided by an individual
+ * MatchRenderer.
+ *
+ * Callers don't need to keep track of the tracing depth (i.e., the number of substitution/evaluation steps).
+ * TracingContext is stateful and keeps track of the depth, so callers can progressively produce steps by calling
+ * TracingContext#nextSubstitution or TracingContext#nextEvaluation. Calling Renderer with the tracing context will then
+ * produce the next step of tracing. The tracing depth is passed to the individual MatchRenderers by way of
+ * TracingContext#substitution or TracingContext#applyEvaluation/TracingContext#evaluation (see function-level comments
+ * about how these two play together), which MatchRenderers call to request a fresh TracingContext for the next level of
+ * substitution/evaluation.
+ **/
 export class TracingContext {
   #substitutionDepth = 0;
   #hasMoreSubstitutions: boolean;

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1193,10 +1193,12 @@ type ShadowLengthProperty = ShadowProperty&{
   propertyType: Exclude<ShadowPropertyType, ShadowPropertyType.INSET|ShadowPropertyType.COLOR>,
 };
 
-// The shadow model is an abstraction over the various shadow properties on the one hand and the order they were defined
-// in on the other, so that modifications through the shadow editor can retain the property order in the authored text.
-// The model also looks through var()s by keeping a mapping between individual properties and any var()s they are coming
-// from, replacing the var() functions as needed with concrete values when edited.
+/**
+ * The shadow model is an abstraction over the various shadow properties on the one hand and the order they were defined
+ * in on the other, so that modifications through the shadow editor can retain the property order in the authored text.
+ * The model also looks through var()s by keeping a mapping between individual properties and any var()s they are coming
+ * from, replacing the var() functions as needed with concrete values when edited.
+ **/
 export class ShadowModel implements InlineEditor.CSSShadowEditor.CSSShadowModel {
   readonly #properties: ShadowProperty[];
   readonly #shadowType: SDK.CSSPropertyParserMatchers.ShadowType;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -135,9 +135,9 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const FILTER_IDLE_PERIOD = 500;
 // Minimum number of @property rules for the @property section block to be folded initially
 const MIN_FOLDED_SECTIONS_COUNT = 5;
-// Title of the registered properties section
+/** Title of the registered properties section **/
 export const REGISTERED_PROPERTY_SECTION_NAME = '@property';
-// Title of the function section
+/** Title of the function section **/
 export const FUNCTION_SECTION_NAME = '@function';
 
 // Highlightable properties are those that can be hovered in the sidebar to trigger a specific

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

@@ -21,8 +21,10 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/elements/components/AccessibilityTreeNode.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-// TODO(jobay) move this to Platform.StringUtilities if still needed.
-// This function is a variant of setTextContentTruncatedIfNeeded found in DOMExtension.
+/**
+ * TODO(jobay) move this to Platform.StringUtilities if still needed.
+ * This function is a variant of setTextContentTruncatedIfNeeded found in DOMExtension.
+ **/
 function truncateTextIfNeeded(text: string): string {
   const maxTextContentLength = 10000;
 

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

@@ -38,8 +38,10 @@ export enum RegisteredAdorners {
   POPOVER = 'popover',
 }
 
-// This enum-like const object serves as the authoritative registry for all the
-// adorners available.
+/**
+ * This enum-like const object serves as the authoritative registry for all the
+ * adorners available.
+ **/
 export function getRegisteredAdorner(which: RegisteredAdorners): RegisteredAdorner {
   switch (which) {
     case RegisteredAdorners.GRID:
@@ -215,7 +217,7 @@ const OrderedAdornerCategories = [
   AdornerCategories.DEFAULT,
 ];
 
-// Use idx + 1 for the order to avoid JavaScript's 0 == false issue
+/** Use idx + 1 for the order to avoid JavaScript's 0 == false issue **/
 export const AdornerCategoryOrder = new Map(OrderedAdornerCategories.map((category, idx) => [category, idx + 1]));
 
 export function compareAdornerNamesByCategory(nameA: string, nameB: string): number {

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -401,8 +401,13 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
   }
 
   getCategoryIDs(): string[] {
+    const {mode} = this.getFlags();
     const categoryIDs = [];
     for (const preset of Presets) {
+      if (mode && !preset.supportedModes.includes(mode)) {
+        continue;
+      }
+
       if (preset.setting.get()) {
         categoryIDs.push(preset.configID);
       }

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorPane.ts

@@ -122,6 +122,8 @@ export interface EventTypes {
 
 export class LinearMemoryInspectorView extends UI.Widget.VBox {
   #memoryWrapper: LazyUint8Array;
+  #memory?: Uint8Array<ArrayBuffer>;
+  #offset = 0;
   #address: number;
   #tabId: string;
   #inspector: LinearMemoryInspectorComponents.LinearMemoryInspector.LinearMemoryInspector;
@@ -140,32 +142,52 @@ export class LinearMemoryInspectorView extends UI.Widget.VBox {
     this.#address = address;
     this.#tabId = tabId;
     this.#hideValueInspector = Boolean(hideValueInspector);
+    this.firstTimeOpen = true;
+
     this.#inspector = new LinearMemoryInspectorComponents.LinearMemoryInspector.LinearMemoryInspector();
-    this.#inspector.addEventListener(
+    this.#inspector.contentElement.addEventListener(
         LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent.eventName,
-        (event: LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent) => {
-          this.#memoryRequested(event);
-        });
-    this.#inspector.addEventListener(
+        (event: LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent) =>
+            this.#memoryRequested(event));
+    this.#inspector.contentElement.addEventListener(
         LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent.eventName,
-        (event: LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent) => {
-          this.updateAddress(event.data);
-        });
-    this.#inspector.addEventListener(
+        (event: LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent) =>
+            this.updateAddress(event.data));
+    this.#inspector.contentElement.addEventListener(
         LinearMemoryInspectorComponents.LinearMemoryInspector.SettingsChangedEvent.eventName,
         (event: LinearMemoryInspectorComponents.LinearMemoryInspector.SettingsChangedEvent) => {
           // Stop event from bubbling up, since no element further up needs the event.
           event.stopPropagation();
           this.saveSettings(event.data);
         });
-    this.#inspector.addEventListener(
+    this.#inspector.contentElement.addEventListener(
         LinearMemoryInspectorComponents.LinearMemoryHighlightChipList.DeleteMemoryHighlightEvent.eventName,
         (event: LinearMemoryInspectorComponents.LinearMemoryHighlightChipList.DeleteMemoryHighlightEvent) => {
           LinearMemoryInspectorController.instance().removeHighlight(this.#tabId, event.data);
           this.refreshData();
         });
-    this.contentElement.appendChild(this.#inspector);
-    this.firstTimeOpen = true;
+    this.#inspector.show(this.contentElement);
+  }
+
+  render(): void {
+    if (this.firstTimeOpen) {
+      const settings = LinearMemoryInspectorController.instance().loadSettings();
+      this.#inspector.valueTypes = settings.valueTypes;
+      this.#inspector.valueTypeModes = settings.modes;
+      this.#inspector.endianness = settings.endianness;
+      this.firstTimeOpen = false;
+    }
+
+    if (!this.#memory) {
+      return;
+    }
+
+    this.#inspector.memory = this.#memory;
+    this.#inspector.memoryOffset = this.#offset;
+    this.#inspector.address = this.#address;
+    this.#inspector.outerMemoryLength = this.#memoryWrapper.length();
+    this.#inspector.highlightInfo = this.#getHighlightInfo();
+    this.#inspector.hideValueInspector = this.#hideValueInspector;
   }
 
   override wasShown(): void {
@@ -184,32 +206,12 @@ export class LinearMemoryInspectorView extends UI.Widget.VBox {
   }
 
   refreshData(): void {
-    void LinearMemoryInspectorController.getMemoryForAddress(this.#memoryWrapper, this.#address).then(({
-                                                                                                        memory,
-                                                                                                        offset,
-                                                                                                      }) => {
-      let valueTypes;
-      let valueTypeModes;
-      let endianness;
-      if (this.firstTimeOpen) {
-        const settings = LinearMemoryInspectorController.instance().loadSettings();
-        valueTypes = settings.valueTypes;
-        valueTypeModes = settings.modes;
-        endianness = settings.endianness;
-        this.firstTimeOpen = false;
-      }
-      this.#inspector.data = {
-        memory,
-        address: this.#address,
-        memoryOffset: offset,
-        outerMemoryLength: this.#memoryWrapper.length(),
-        valueTypes,
-        valueTypeModes,
-        endianness,
-        highlightInfo: this.#getHighlightInfo(),
-        hideValueInspector: this.#hideValueInspector,
-      };
-    });
+    void LinearMemoryInspectorController.getMemoryForAddress(this.#memoryWrapper, this.#address)
+        .then(({memory, offset}) => {
+          this.#memory = memory;
+          this.#offset = offset;
+          this.render();
+        });
   }
 
   #memoryRequested(event: LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent): void {
@@ -219,14 +221,9 @@ export class LinearMemoryInspectorView extends UI.Widget.VBox {
     }
 
     void LinearMemoryInspectorController.getMemoryRange(this.#memoryWrapper, start, end).then(memory => {
-      this.#inspector.data = {
-        memory,
-        address,
-        memoryOffset: start,
-        outerMemoryLength: this.#memoryWrapper.length(),
-        highlightInfo: this.#getHighlightInfo(),
-        hideValueInspector: this.#hideValueInspector,
-      };
+      this.#memory = memory;
+      this.#offset = start;
+      this.render();
     });
   }