chrome-devtools-frontend 1.0.1587572 → 1.0.1587905

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://chromium.googlesource.com/chromium/src
 Version: N/A
-Revision: ca9006bfc6f6f58d2fcd25b7c78dbd3b1289f949
+Revision: e991bb058bdc3021ea1576fee0a80a7ecd0ef566
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/legacy/Toolbar.ts

@@ -40,6 +40,10 @@ const UIStrings = {
    * @description Placeholder for filter bars that shows before the user types in a filter keyword.
    */
   filter: 'Filter',
+  /**
+   * @description Tooltip shown when the user hovers over the regex icon to toggle regular-expression filtering.
+   */
+  useRegularExpression: 'Use regular expression',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/Toolbar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -693,7 +697,6 @@ export namespace ToolbarButton {
 export class ToolbarInput extends ToolbarItem<ToolbarInput.EventTypes> {
   private prompt: TextPrompt;
   private readonly proxyElement: Element;
-
   constructor(
       placeholder: string, accessiblePlaceholder?: string, growFactor?: number, shrinkFactor?: number, tooltip?: string,
       completions?: ((arg0: string, arg1: string, arg2?: boolean|undefined) => Promise<Suggestion[]>),
@@ -759,6 +762,10 @@ export class ToolbarInput extends ToolbarItem<ToolbarInput.EventTypes> {
     this.updateEmptyStyles();
   }
 
+  protected insertTrailingElement(element: Element): void {
+    this.element.appendChild(element);
+  }
+
   override applyEnabledState(enabled: boolean): void {
     if (enabled) {
       this.element.classList.remove('disabled');
@@ -818,7 +825,8 @@ export class ToolbarFilter extends ToolbarInput {
   constructor(
       filterBy?: Common.UIString.LocalizedString, growFactor?: number, shrinkFactor?: number, tooltip?: string,
       completions?: ((arg0: string, arg1: string, arg2?: boolean|undefined) => Promise<Suggestion[]>),
-      dynamicCompletions?: boolean, jslogContext?: string, element?: HTMLElement) {
+      dynamicCompletions?: boolean, jslogContext?: string, element?: HTMLElement, showRegexToggle?: boolean,
+      onRegexToggle?: () => void) {
     const filterPlaceholder = filterBy ? filterBy : i18nString(UIStrings.filter);
     super(
         filterPlaceholder, filterPlaceholder, growFactor, shrinkFactor, tooltip, completions, dynamicCompletions,
@@ -827,17 +835,36 @@ export class ToolbarFilter extends ToolbarInput {
     const filterIcon = createIcon('filter');
     this.element.prepend(filterIcon);
     this.element.classList.add('toolbar-filter');
+
+    if (showRegexToggle) {
+      const regexIconName = 'regular-expression';
+      const regexButton = new Buttons.Button.Button();
+      regexButton.data = {
+        variant: Buttons.Button.Variant.ICON_TOGGLE,
+        size: Buttons.Button.Size.SMALL,
+        iconName: regexIconName,
+        toggledIconName: regexIconName,
+        toggleType: Buttons.Button.ToggleType.PRIMARY,
+        toggled: false,
+        title: i18nString(UIStrings.useRegularExpression),
+        jslogContext: regexIconName,
+      };
+      ARIAUtils.setLabel(regexButton, i18nString(UIStrings.useRegularExpression));
+      regexButton.addEventListener('click', () => {
+        onRegexToggle?.();
+      });
+      this.insertTrailingElement(regexButton);
+    }
   }
 }
 
 export class ToolbarInputElement extends HTMLElement {
-  static observedAttributes = ['value', 'disabled'];
+  static observedAttributes = ['value', 'disabled', 'regex'];
 
   item?: ToolbarInput;
   datalist: HTMLDataListElement|null = null;
   #value: string|undefined = undefined;
   #disabled = false;
-
   connectedCallback(): void {
     if (this.item) {
       return;
@@ -855,7 +882,8 @@ export class ToolbarInputElement extends HTMLElement {
       this.item = new ToolbarFilter(
           placeholder as Platform.UIString.LocalizedString, /* growFactor=*/ undefined,
           /* shrinkFactor=*/ undefined, tooltip, this.datalist ? this.#onAutocomplete.bind(this) : undefined,
-          /* dynamicCompletions=*/ undefined, jslogContext || 'filter', this);
+          /* dynamicCompletions=*/ undefined, jslogContext || 'filter', this, this.hasAttribute('regex'),
+          this.#onRegexToggle.bind(this));
     } else {
       this.item = new ToolbarInput(
           placeholder, accessiblePlaceholder, /* growFactor=*/ undefined,
@@ -880,6 +908,10 @@ export class ToolbarInputElement extends HTMLElement {
     this.item?.focus();
   }
 
+  #onRegexToggle(): void {
+    this.dispatchEvent(new CustomEvent('regextoggle'));
+  }
+
   async #onAutocomplete(expression: string, prefix: string, force?: boolean): Promise<Suggestion[]> {
     if (!prefix && !force && expression || !this.datalist) {
       return [];

package/front_end/ui/legacy/UIUtils.ts

@@ -2034,8 +2034,8 @@ export class InterceptBindingDirective extends Lit.Directive.Directive {
   }
 
   /* eslint-disable-next-line @typescript-eslint/no-unsafe-function-type */
-  render(_listener: Function): undefined {
-    return undefined;
+  render(listener: Function): Function {
+    return listener;
   }
 
   static setEventListeners(templateElement: Element, renderedElement: Element): void {
@@ -2092,7 +2092,17 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
   }
 
   private static patchLitTemplate(template: Lit.LitTemplate): void {
-    const wrapper = Lit.Directive.directive(InterceptBindingDirective);
+    const interceptingWrapper = Lit.Directive.directive(InterceptBindingDirective);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const patchingWrapper = <Args extends any[], R>(fn: (...args: Args) => R): ((...args: Args) => R) => {
+      return function(this: unknown, ...args: Args): R {
+        const result = fn.apply(this, args);
+        if (isLitTemplate(result)) {
+          HTMLElementWithLightDOMTemplate.patchLitTemplate(result);
+        }
+        return result;
+      };
+    };
     if (template === Lit.nothing) {
       return;
     }
@@ -2104,10 +2114,19 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
           value['_$litType$'] === 1);
     }
 
+    function isLitDirective(value: unknown): value is {values: unknown[]} {
+      return Boolean(typeof value === 'object' && value && '_$litDirective$' in value && 'values' in value);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function isCallable(value: unknown): value is(...args: any[]) => any {
+      return typeof value === 'function';
+    }
+
     function patchValue(value: unknown): unknown {
-      if (typeof value === 'function') {
+      if (isCallable(value)) {
         try {
-          return wrapper(value);
+          return interceptingWrapper(value);
         } catch {
           return value;
         }
@@ -2116,6 +2135,17 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
         HTMLElementWithLightDOMTemplate.patchLitTemplate(value);
         return value;
       }
+      if (isLitDirective(value)) {
+        for (let i = 0; i < value.values.length; i++) {
+          const subvalue = value.values[i];
+          if (isCallable(subvalue)) {
+            value.values[i] = patchingWrapper(subvalue);
+          } else {
+            value.values[i] = patchValue(subvalue);
+          }
+        }
+        return value;
+      }
       if (Array.isArray(value) || value instanceof Iterator) {
         return value.map(patchValue);
       }

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1587572"
+  "version": "1.0.1587905"
 }