chrome-devtools-frontend 1.0.1595925 → 1.0.1596535

package/front_end/ui/components/text_editor/AutocompleteHistory.ts

@@ -26,6 +26,18 @@ export class AutocompleteHistory {
    */
   #editedEntries = new Map<number, string>();
 
+  /**
+   * The prefix used for filtering history during navigation (zsh-style).
+   * Set on first navigation when user has typed something.
+   */
+  #searchPrefix = '';
+
+  /**
+   * Stack of history indices visited during filtered navigation.
+   * Used to navigate forward through the same filtered entries.
+   */
+  #filteredIndices: number[] = [];
+
   /**
    * Creates a new settings-backed history. The class assumes it has sole
    * ownership of the setting.
@@ -40,6 +52,8 @@ export class AutocompleteHistory {
     this.#setting.set([]);
     this.#historyOffset = 1;
     this.#editedEntries.clear();
+    this.#searchPrefix = '';
+    this.#filteredIndices = [];
   }
 
   length(): number {
@@ -57,6 +71,8 @@ export class AutocompleteHistory {
 
     this.#historyOffset = 1;
     this.#editedEntries.clear();
+    this.#searchPrefix = '';
+    this.#filteredIndices = [];
     if (text !== this.#currentHistoryItem()) {
       this.#data.push(text);
     }
@@ -74,17 +90,64 @@ export class AutocompleteHistory {
     this.#data.push(currentText);
   }
 
-  previous(currentText: string): string|undefined {
+  previous(currentText?: string): string|undefined {
     if (this.#historyOffset > this.#data.length) {
       return undefined;
     }
+    currentText = currentText ?? '';
     if (this.#historyOffset === 1) {
       this.#pushCurrentText(currentText);
+
+      this.#filteredIndices = [];
+      this.#searchPrefix = currentText;
     } else {
+      // Save edits made to history entries at non-uncommitted positions.
+      // #saveCurrentEdit() compares against #currentHistoryItem() and no-ops for
+      // pure navigation.
       this.#saveCurrentEdit(currentText);
     }
-    ++this.#historyOffset;
-    return this.#currentHistoryItem();
+
+    // If no prefix filter, use simple sequential navigation
+    if (this.#searchPrefix.length === 0) {
+      ++this.#historyOffset;
+      return this.#currentHistoryItem();
+    }
+
+    // Find the next matching entry for prefix-filtered navigation
+    const result = this.#findNextMatch();
+
+    if (!result) {
+      // On initial navigation with a non-empty prefix and no matches, fall back to
+      // unfiltered history navigation.
+      if (this.#historyOffset === 1) {
+        this.#searchPrefix = '';
+        ++this.#historyOffset;
+        return this.#currentHistoryItem();
+      }
+      return undefined;
+    }
+
+    this.#filteredIndices.push(result.index);
+    this.#historyOffset = this.#data.length - result.index;
+    return result.value;
+  }
+
+  /**
+   * Finds the next history entry that matches the search prefix.
+   * Returns undefined if no more matches are found.
+   */
+  #findNextMatch(): {index: number, value: string}|undefined {
+    // Start searching from the current position
+    const startIndex = this.#data.length - this.#historyOffset - 1;
+
+    for (let i = startIndex; i >= 0; --i) {
+      const storedValue = this.#data[i];
+      if (storedValue.startsWith(this.#searchPrefix)) {
+        const value = this.#editedEntries.get(i) ?? storedValue;
+        return {index: i, value};
+      }
+    }
+    return undefined;
   }
 
   /**
@@ -107,12 +170,33 @@ export class AutocompleteHistory {
     }
   }
 
-  next(currentText: string): string|undefined {
+  next(currentText?: string): string|undefined {
     if (this.#historyOffset === 1) {
       return undefined;
     }
+
+    currentText = currentText ?? this.#currentHistoryItem() ?? '';
+
     this.#saveCurrentEdit(currentText);
-    --this.#historyOffset;
+
+    // If no prefix filter was used, use simple sequential navigation
+    if (this.#searchPrefix.length === 0) {
+      --this.#historyOffset;
+      return this.#currentHistoryItem();
+    }
+
+    // Pop the current position from the filtered indices stack
+    this.#filteredIndices.pop();
+
+    if (this.#filteredIndices.length === 0) {
+      // No more filtered entries - return to the uncommitted text
+      this.#historyOffset = 1;
+      return this.#currentHistoryItem();
+    }
+
+    // Move to the previous filtered position
+    const prevIndex = this.#filteredIndices[this.#filteredIndices.length - 1];
+    this.#historyOffset = this.#data.length - prevIndex;
     return this.#currentHistoryItem();
   }
 

package/front_end/ui/components/tree_outline/TreeOutline.ts

@@ -527,7 +527,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
 
     const ulClasses = Lit.Directives.classMap({hasNoChildren: !hasChildrenInTree});
 
-    await RenderCoordinator.write('TreeOutline render', () => {
+    await RenderCoordinator.write(() => {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       // Unfortunately the TreeOutline web component adds the

package/front_end/ui/legacy/ProgressIndicator.ts

@@ -66,7 +66,7 @@ export class ProgressIndicator extends HTMLElement implements Common.Progress.Pr
   }
 
   override get title(): string {
-    return this.#labelElement.textContent ?? '';
+    return this.#labelElement.textContent;
   }
 
   set totalWork(totalWork: number) {

package/front_end/ui/legacy/Toolbar.ts

@@ -562,7 +562,7 @@ export class ToolbarText extends ToolbarItem<void, HTMLElement> {
   }
 
   text(): string {
-    return this.element.textContent ?? '';
+    return this.element.textContent;
   }
 
   setText(text: string): void {

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -636,18 +636,25 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
   }
 
   static createNameElement(name: string|null, isPrivate?: boolean): Element {
+    const element = document.createElement('span');
+    element.classList.add('name');
     if (name === null) {
-      return UI.Fragment.html`<span class="name"></span>`;
+      return element;
     }
     if (/^\s|\s$|^$|\n/.test(name)) {
-      return UI.Fragment.html`<span class="name">"${name.replace(/\n/g, '\u21B5')}"</span>`;
+      element.textContent = `"${name.replace(/\n/g, '\u21B5')}"`;
+      return element;
     }
     if (isPrivate) {
-      return UI.Fragment.html`<span class="name">
-  <span class="private-property-hash">${name[0]}</span>${name.substring(1)}
-  </span>`;
-    }
-    return UI.Fragment.html`<span class="name">${name}</span>`;
+      const privatePropertyHash = document.createElement('span');
+      privatePropertyHash.classList.add('private-property-hash');
+      privatePropertyHash.textContent = name[0];
+      element.appendChild(privatePropertyHash);
+      element.appendChild(document.createTextNode(name.substring(1)));
+      return element;
+    }
+    element.textContent = name;
+    return element;
   }
 
   static valueElementForFunctionDescription(

package/front_end/ui/legacy/legacy.ts

@@ -16,7 +16,6 @@ import * as EmptyWidget from './EmptyWidget.js';
 import * as FilterBar from './FilterBar.js';
 import * as FilterSuggestionBuilder from './FilterSuggestionBuilder.js';
 import * as ForwardedInputEventHandler from './ForwardedInputEventHandler.js';
-import * as Fragment from './Fragment.js';
 import * as GlassPane from './GlassPane.js';
 import * as Infobar from './Infobar.js';
 import * as InplaceEditor from './InplaceEditor.js';
@@ -67,7 +66,6 @@ export {
   FilterBar,
   FilterSuggestionBuilder,
   ForwardedInputEventHandler,
-  Fragment,
   GlassPane,
   Infobar,
   InplaceEditor,

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -1359,6 +1359,10 @@ export const knownContextValues = new Set([
   'dominant-baseline',
   'dont-show-again',
   'download',
+  'dpr-1',
+  'dpr-2',
+  'dpr-3',
+  'dpr-default',
   'drag',
   'drag-drop',
   'dragend',
@@ -2449,6 +2453,7 @@ export const knownContextValues = new Set([
   'lighthouse.enable-sampling',
   'lighthouse.end-time-span',
   'lighthouse.mode',
+  'lighthouse.record',
   'lighthouse.start',
   'lighthouse.throttling',
   'lighting-color',

package/inspector_overlay/loadCSS.rollup.js

@@ -10,8 +10,8 @@ export default function loadCSS() {
   return {
     name: 'loadCSS',
     /**
-     * @param code
-     * @param id
+     * @param code {string}
+     * @param id {string}
      */
     transform(code, id) {
       if (id.endsWith('.css')) {

package/inspector_overlay/tool_source_order.css

@@ -15,6 +15,7 @@
   text-align: center;
   align-items: center;
   background-color: #fff;
+  /* stylelint-disable-next-line plugin/use_monospace_font */
   font-family: Menlo, Consolas, monospace;
   font-size: 12px;
   font-weight: bold;

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1595925"
+  "version": "1.0.1596535"
 }

package/front_end/ui/legacy/Fragment.ts

@@ -1,234 +0,0 @@
-// Copyright 2017 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
-
-function getNodeData(node: Node): string {
-  return (node as unknown as {
-           data: string,
-         })
-      .data;
-}
-
-function setNodeData<T>(node: Node, value: T): void {
-  (node as unknown as {
-    data: T,
-  }).data = value;
-}
-
-export class Fragment {
-  readonly #element: Element;
-  private readonly elementsById = new Map<string, Element>();
-
-  constructor(element: Element) {
-    this.#element = element;
-  }
-
-  element(): Element {
-    return this.#element;
-  }
-
-  $(elementId: string): Element {
-    return this.elementsById.get(elementId) as Element;
-  }
-
-  static build(strings: TemplateDefinition, ...values: any[]): Fragment {
-    return Fragment.render(Fragment.template(strings), values);
-  }
-
-  static cached(strings: TemplateDefinition, ...values: any[]): Fragment {
-    let template = templateCache.get(strings);
-    if (!template) {
-      template = Fragment.template(strings);
-      templateCache.set(strings, template);
-    }
-    return Fragment.render(template, values);
-  }
-
-  private static template(strings: TemplateDefinition): Template {
-    let html = '';
-    let insideText = true;
-    for (let i = 0; i < strings.length - 1; i++) {
-      html += strings[i];
-      const close = strings[i].lastIndexOf('>');
-      const open = strings[i].indexOf('<', close + 1);
-      if (close !== -1 && open === -1) {
-        insideText = true;
-      } else if (open !== -1) {
-        insideText = false;
-      }
-      html += insideText ? textMarker : attributeMarker(i);
-    }
-    html += strings[strings.length - 1];
-
-    const template = document.createElement('template');
-    template.innerHTML = html;
-    const walker =
-        template.ownerDocument.createTreeWalker(template.content, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, null);
-    let valueIndex = 0;
-    const emptyTextNodes = [];
-    const binds: Bind[] = [];
-    const nodesToMark = [];
-    while (walker.nextNode()) {
-      const node = (walker.currentNode as HTMLElement);
-      if (node.nodeType === Node.ELEMENT_NODE && node.hasAttributes()) {
-        if (node.hasAttribute('$')) {
-          nodesToMark.push(node);
-          binds.push({elementId: node.getAttribute('$') || ''});
-          node.removeAttribute('$');
-        }
-
-        const attributesToRemove = [];
-        for (let i = 0; i < node.attributes.length; i++) {
-          const name = node.attributes[i].name;
-
-          if (!attributeMarkerRegex.test(name) && !attributeMarkerRegex.test(node.attributes[i].value)) {
-            continue;
-          }
-
-          attributesToRemove.push(name);
-          nodesToMark.push(node);
-
-          const attr = {
-            index: valueIndex,
-            names: name.split(attributeMarkerRegex),
-            values: node.attributes[i].value.split(attributeMarkerRegex),
-          };
-          valueIndex += attr.names.length - 1;
-          valueIndex += attr.values.length - 1;
-          const bind: Bind = {
-            attr,
-          };
-          binds.push(bind);
-        }
-        for (let i = 0; i < attributesToRemove.length; i++) {
-          node.removeAttribute(attributesToRemove[i]);
-        }
-      }
-
-      if (node.nodeType === Node.TEXT_NODE && getNodeData(node).indexOf(textMarker) !== -1) {
-        const texts = getNodeData(node).split(textMarkerRegex);
-        setNodeData(node, texts[texts.length - 1]);
-        const parentNode = (node.parentNode as HTMLElement);
-        for (let i = 0; i < texts.length - 1; i++) {
-          if (texts[i]) {
-            parentNode.insertBefore(document.createTextNode(texts[i]), node);
-          }
-          const nodeToReplace = document.createElement('span');
-          nodesToMark.push(nodeToReplace);
-          binds.push({replaceNodeIndex: valueIndex++});
-          parentNode.insertBefore(nodeToReplace, node);
-        }
-      }
-
-      if (node.nodeType === Node.TEXT_NODE &&
-          (!node.previousSibling || node.previousSibling.nodeType === Node.ELEMENT_NODE) &&
-          (!node.nextSibling || node.nextSibling.nodeType === Node.ELEMENT_NODE) && /^\s*$/.test(getNodeData(node))) {
-        emptyTextNodes.push(node);
-      }
-    }
-
-    for (let i = 0; i < nodesToMark.length; i++) {
-      nodesToMark[i].classList.add(generateClassName(i));
-    }
-
-    for (const emptyTextNode of emptyTextNodes) {
-      emptyTextNode.remove();
-    }
-    return {template, binds};
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private static render(template: Template, values: any[]): Fragment {
-    const content = template.template.ownerDocument.importNode(template.template.content, true);
-    const resultElement = (content.firstChild === content.lastChild ? content.firstChild : content) as Element;
-    const result = new Fragment(resultElement);
-
-    const boundElements = [];
-    for (let i = 0; i < template.binds.length; i++) {
-      const className = generateClassName(i);
-      const element = (content.querySelector('.' + className) as Element);
-      element.classList.remove(className);
-      boundElements.push(element);
-    }
-
-    for (let bindIndex = 0; bindIndex < template.binds.length; bindIndex++) {
-      const bind = template.binds[bindIndex];
-      const element = boundElements[bindIndex];
-      if (bind.elementId !== undefined) {
-        result.elementsById.set(bind.elementId, element);
-      } else if (bind.replaceNodeIndex !== undefined) {
-        const value = values[bind.replaceNodeIndex];
-        (element.parentNode as HTMLElement).replaceChild(this.nodeForValue(value), element);
-      } else if (bind.attr !== undefined) {
-        if (bind.attr.names.length === 2 && bind.attr.values.length === 1 &&
-            typeof values[bind.attr.index] === 'function') {
-          values[bind.attr.index].call(null, element);
-        } else {
-          let name = bind.attr.names[0];
-          for (let i = 1; i < bind.attr.names.length; i++) {
-            name += values[bind.attr.index + i - 1];
-            name += bind.attr.names[i];
-          }
-          if (name) {
-            let value = bind.attr.values[0];
-            for (let i = 1; i < bind.attr.values.length; i++) {
-              value += values[bind.attr.index + bind.attr.names.length - 1 + i - 1];
-              value += bind.attr.values[i];
-            }
-            element.setAttribute(name, value);
-          }
-        }
-      } else {
-        throw new Error('Unexpected bind');
-      }
-    }
-    return result;
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private static nodeForValue(value: any): Node {
-    if (value instanceof Node) {
-      return value;
-    }
-    if (value instanceof Fragment) {
-      return value.#element;
-    }
-    if (Array.isArray(value)) {
-      const node = document.createDocumentFragment();
-      for (const v of value) {
-        node.appendChild(this.nodeForValue(v));
-      }
-      return node;
-    }
-    return document.createTextNode(String(value));
-  }
-}
-
-export const textMarker = '{{template-text}}';
-const textMarkerRegex = /{{template-text}}/;
-export const attributeMarker = (index: number): string => 'template-attribute' + index;
-const attributeMarkerRegex = /template-attribute\d+/;
-const generateClassName = (index: number): string => 'template-class-' + index;
-const templateCache = new Map<TemplateDefinition, Template>();
-
-export const html = (strings: TemplateDefinition, ...vararg: any[]): Element => {
-  return Fragment.cached(strings, ...vararg).element();
-};
-
-export type TemplateDefinition = string[]|TemplateStringsArray;
-
-export interface Bind {
-  elementId?: string;
-  attr?: {
-    index: number,
-    names: string[],
-    values: string[],
-  };
-  replaceNodeIndex?: number;
-}
-
-export interface Template {
-  template: HTMLTemplateElement;
-  binds: Bind[];
-}