chrome-devtools-frontend 1.0.951864 → 1.0.952784

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

@@ -123,19 +123,19 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
   attributeChangedCallback(name: 'nowrap'|'toplevelbordercolor', oldValue: string|null, newValue: string|null): void {
     switch (name) {
       case 'nowrap': {
-        this.setNodeKeyNoWrapCSSVariable(newValue);
+        this.#setNodeKeyNoWrapCSSVariable(newValue);
         break;
       }
       case 'toplevelbordercolor': {
-        this.setTopLevelNodeBorderColorCSSVariable(newValue);
+        this.#setTopLevelNodeBorderColorCSSVariable(newValue);
         break;
       }
     }
   }
 
   connectedCallback(): void {
-    this.setTopLevelNodeBorderColorCSSVariable(this.getAttribute('toplevelbordercolor'));
-    this.setNodeKeyNoWrapCSSVariable(this.getAttribute('nowrap'));
+    this.#setTopLevelNodeBorderColorCSSVariable(this.getAttribute('toplevelbordercolor'));
+    this.#setNodeKeyNoWrapCSSVariable(this.getAttribute('nowrap'));
     this.#shadow.adoptedStyleSheets = [treeOutlineStyles, CodeHighlighter.Style.default];
   }
 
@@ -153,7 +153,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     if (!this.#hasRenderedAtLeastOnce) {
       this.#selectedTreeNode = this.#treeData[0];
     }
-    this.render();
+    this.#render();
   }
 
   /**
@@ -162,8 +162,8 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
    * 1 and 2.
    */
   async expandRecursively(maxDepth = 2): Promise<void> {
-    await Promise.all(this.#treeData.map(rootNode => this.expandAndRecurse(rootNode, 0, maxDepth)));
-    await this.render();
+    await Promise.all(this.#treeData.map(rootNode => this.#expandAndRecurse(rootNode, 0, maxDepth)));
+    await this.#render();
   }
 
   /**
@@ -171,7 +171,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
    */
   async collapseAllNodes(): Promise<void> {
     this.#nodeExpandedMap.clear();
-    await this.render();
+    await this.#render();
   }
 
   /**
@@ -193,13 +193,13 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     pathToTreeNode.forEach((node, index) => {
       // We don't expand the very last node, which was the target node.
       if (index < pathToTreeNode.length - 1) {
-        this.setNodeExpandedState(node, true);
+        this.#setNodeExpandedState(node, true);
       }
     });
 
     // Mark the node as pending focus so when it is rendered into the DOM we can focus it
     this.#nodeIdPendingFocus = targetTreeNodeId;
-    await this.render();
+    await this.#render();
   }
 
   /**
@@ -207,7 +207,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
    */
   expandNodeIds(nodeIds: TreeNodeId[]): Promise<void> {
     nodeIds.forEach(id => this.#nodeExpandedMap.set(id, true));
-    return this.render();
+    return this.#render();
   }
 
   /**
@@ -215,7 +215,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
    */
   focusNodeId(nodeId: TreeNodeId): Promise<void> {
     this.#nodeIdPendingFocus = nodeId;
-    return this.render();
+    return this.#render();
   }
 
   async collapseChildrenOfNode(domNode: HTMLLIElement): Promise<void> {
@@ -223,38 +223,38 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     if (!treeNode) {
       return;
     }
-    await this.recursivelyCollapseTreeNodeChildren(treeNode);
-    await this.render();
+    await this.#recursivelyCollapseTreeNodeChildren(treeNode);
+    await this.#render();
   }
 
-  private setNodeKeyNoWrapCSSVariable(attributeValue: string|null): void {
+  #setNodeKeyNoWrapCSSVariable(attributeValue: string|null): void {
     ComponentHelpers.SetCSSProperty.set(
         this, '--override-key-whitespace-wrapping', attributeValue !== null ? 'nowrap' : 'initial');
   }
 
-  private setTopLevelNodeBorderColorCSSVariable(attributeValue: string|null): void {
+  #setTopLevelNodeBorderColorCSSVariable(attributeValue: string|null): void {
     ComponentHelpers.SetCSSProperty.set(
         this, '--override-top-node-border', attributeValue ? `1px solid ${attributeValue}` : '');
   }
 
-  private async recursivelyCollapseTreeNodeChildren(treeNode: TreeNode<TreeNodeDataType>): Promise<void> {
-    if (!isExpandableNode(treeNode) || !this.nodeIsExpanded(treeNode)) {
+  async #recursivelyCollapseTreeNodeChildren(treeNode: TreeNode<TreeNodeDataType>): Promise<void> {
+    if (!isExpandableNode(treeNode) || !this.#nodeIsExpanded(treeNode)) {
       return;
     }
-    const children = await this.fetchNodeChildren(treeNode);
-    const childRecursions = Promise.all(children.map(child => this.recursivelyCollapseTreeNodeChildren(child)));
+    const children = await this.#fetchNodeChildren(treeNode);
+    const childRecursions = Promise.all(children.map(child => this.#recursivelyCollapseTreeNodeChildren(child)));
     await childRecursions;
-    this.setNodeExpandedState(treeNode, false);
+    this.#setNodeExpandedState(treeNode, false);
   }
 
-  private getSelectedTreeNode(): TreeNode<TreeNodeDataType> {
+  #getSelectedTreeNode(): TreeNode<TreeNodeDataType> {
     if (!this.#selectedTreeNode) {
       throw new Error('getSelectedNode was called but selectedTreeNode is null');
     }
     return this.#selectedTreeNode;
   }
 
-  private async fetchNodeChildren(node: TreeNodeWithChildren<TreeNodeDataType>): Promise<TreeNode<TreeNodeDataType>[]> {
+  async #fetchNodeChildren(node: TreeNodeWithChildren<TreeNodeDataType>): Promise<TreeNode<TreeNodeDataType>[]> {
     const children = await getNodeChildren(node);
     if (!this.#nodeFilter) {
       return children;
@@ -263,77 +263,76 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     for (const child of children) {
       const filtering = this.#nodeFilter(child.treeNodeData);
       // We always include the selected node in the tree, regardless of its filtering status.
-      if (filtering === FilterOption.SHOW || this.isSelectedNode(child) || child.id === this.#nodeIdPendingFocus) {
+      if (filtering === FilterOption.SHOW || this.#isSelectedNode(child) || child.id === this.#nodeIdPendingFocus) {
         filteredChildren.push(child);
       } else if (filtering === FilterOption.FLATTEN && isExpandableNode(child)) {
-        const grandChildren = await this.fetchNodeChildren(child);
+        const grandChildren = await this.#fetchNodeChildren(child);
         filteredChildren.push(...grandChildren);
       }
     }
     return filteredChildren;
   }
 
-  private setNodeExpandedState(node: TreeNode<TreeNodeDataType>, newExpandedState: boolean): void {
+  #setNodeExpandedState(node: TreeNode<TreeNodeDataType>, newExpandedState: boolean): void {
     this.#nodeExpandedMap.set(node.id, newExpandedState);
   }
 
-  private nodeIsExpanded(node: TreeNode<TreeNodeDataType>): boolean {
+  #nodeIsExpanded(node: TreeNode<TreeNodeDataType>): boolean {
     return this.#nodeExpandedMap.get(node.id) || false;
   }
 
-  private async expandAndRecurse(node: TreeNode<TreeNodeDataType>, currentDepth: number, maxDepth: number):
-      Promise<void> {
+  async #expandAndRecurse(node: TreeNode<TreeNodeDataType>, currentDepth: number, maxDepth: number): Promise<void> {
     if (!isExpandableNode(node)) {
       return;
     }
-    this.setNodeExpandedState(node, true);
+    this.#setNodeExpandedState(node, true);
     if (currentDepth === maxDepth || !isExpandableNode(node)) {
       return;
     }
-    const children = await this.fetchNodeChildren(node);
-    await Promise.all(children.map(child => this.expandAndRecurse(child, currentDepth + 1, maxDepth)));
+    const children = await this.#fetchNodeChildren(node);
+    await Promise.all(children.map(child => this.#expandAndRecurse(child, currentDepth + 1, maxDepth)));
   }
 
-  private onArrowClick(node: TreeNode<TreeNodeDataType>): ((e: Event) => void) {
+  #onArrowClick(node: TreeNode<TreeNodeDataType>): ((e: Event) => void) {
     return (event: Event): void => {
       event.stopPropagation();
       if (isExpandableNode(node)) {
-        this.setNodeExpandedState(node, !this.nodeIsExpanded(node));
-        this.render();
+        this.#setNodeExpandedState(node, !this.#nodeIsExpanded(node));
+        this.#render();
       }
     };
   }
 
-  private onNodeClick(event: Event): void {
+  #onNodeClick(event: Event): void {
     // Avoid it bubbling up to parent tree elements, else clicking a node deep in the tree will toggle it + all its ancestor's visibility.
     event.stopPropagation();
     const nodeClickExpandsOrContracts = this.getAttribute('clickabletitle') !== null;
     const domNode = event.currentTarget as HTMLLIElement;
     const node = this.#domNodeToTreeNodeMap.get(domNode);
     if (nodeClickExpandsOrContracts && node && isExpandableNode(node)) {
-      this.setNodeExpandedState(node, !this.nodeIsExpanded(node));
+      this.#setNodeExpandedState(node, !this.#nodeIsExpanded(node));
     }
-    this.focusTreeNode(domNode);
+    this.#focusTreeNode(domNode);
   }
 
-  private async focusTreeNode(domNode: HTMLLIElement): Promise<void> {
+  async #focusTreeNode(domNode: HTMLLIElement): Promise<void> {
     const treeNode = this.#domNodeToTreeNodeMap.get(domNode);
     if (!treeNode) {
       return;
     }
     this.#selectedTreeNode = treeNode;
-    await this.render();
+    await this.#render();
     this.dispatchEvent(new ItemSelectedEvent(treeNode));
     coordinator.write('DOMNode focus', () => {
       domNode.focus();
     });
   }
 
-  private processHomeAndEndKeysNavigation(key: 'Home'|'End'): void {
+  #processHomeAndEndKeysNavigation(key: 'Home'|'End'): void {
     if (key === 'Home') {
       const firstRootNode = this.#shadow.querySelector<HTMLLIElement>('ul[role="tree"] > li[role="treeitem"]');
       if (firstRootNode) {
-        this.focusTreeNode(firstRootNode);
+        this.#focusTreeNode(firstRootNode);
       }
     } else if (key === 'End') {
       /**
@@ -348,12 +347,12 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
       const allTreeItems = this.#shadow.querySelectorAll<HTMLLIElement>('li[role="treeitem"]');
       const lastTreeItem = allTreeItems[allTreeItems.length - 1];
       if (lastTreeItem) {
-        this.focusTreeNode(lastTreeItem);
+        this.#focusTreeNode(lastTreeItem);
       }
     }
   }
 
-  private async processArrowKeyNavigation(key: Platform.KeyboardUtilities.ArrowKey, currentDOMNode: HTMLLIElement):
+  async #processArrowKeyNavigation(key: Platform.KeyboardUtilities.ArrowKey, currentDOMNode: HTMLLIElement):
       Promise<void> {
     const currentTreeNode = this.#domNodeToTreeNodeMap.get(currentDOMNode);
     if (!currentTreeNode) {
@@ -364,65 +363,65 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
       currentDOMNode,
       currentTreeNode,
       direction: key,
-      setNodeExpandedState: (node, expanded) => this.setNodeExpandedState(node, expanded),
+      setNodeExpandedState: (node, expanded) => this.#setNodeExpandedState(node, expanded),
     });
-    await this.focusTreeNode(domNode);
+    await this.#focusTreeNode(domNode);
   }
 
-  private processEnterOrSpaceNavigation(currentDOMNode: HTMLLIElement): void {
+  #processEnterOrSpaceNavigation(currentDOMNode: HTMLLIElement): void {
     const currentTreeNode = this.#domNodeToTreeNodeMap.get(currentDOMNode);
     if (!currentTreeNode) {
       return;
     }
     if (isExpandableNode(currentTreeNode)) {
-      const currentExpandedState = this.nodeIsExpanded(currentTreeNode);
-      this.setNodeExpandedState(currentTreeNode, !currentExpandedState);
-      this.render();
+      const currentExpandedState = this.#nodeIsExpanded(currentTreeNode);
+      this.#setNodeExpandedState(currentTreeNode, !currentExpandedState);
+      this.#render();
     }
   }
 
-  private async onTreeKeyDown(event: KeyboardEvent): Promise<void> {
+  async #onTreeKeyDown(event: KeyboardEvent): Promise<void> {
     if (!(event.target instanceof HTMLLIElement)) {
       throw new Error('event.target was not an <li> element');
     }
 
     if (event.key === 'Home' || event.key === 'End') {
       event.preventDefault();
-      this.processHomeAndEndKeysNavigation(event.key);
+      this.#processHomeAndEndKeysNavigation(event.key);
     } else if (Platform.KeyboardUtilities.keyIsArrowKey(event.key)) {
       event.preventDefault();
-      await this.processArrowKeyNavigation(event.key, event.target);
+      await this.#processArrowKeyNavigation(event.key, event.target);
     } else if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
-      this.processEnterOrSpaceNavigation(event.target);
+      this.#processEnterOrSpaceNavigation(event.target);
     }
   }
 
-  private focusPendingNode(domNode: HTMLLIElement): void {
+  #focusPendingNode(domNode: HTMLLIElement): void {
     this.#nodeIdPendingFocus = null;
-    this.focusTreeNode(domNode);
+    this.#focusTreeNode(domNode);
   }
 
-  private isSelectedNode(node: TreeNode<TreeNodeDataType>): boolean {
+  #isSelectedNode(node: TreeNode<TreeNodeDataType>): boolean {
     if (this.#selectedTreeNode) {
       return node.id === this.#selectedTreeNode.id;
     }
     return false;
   }
 
-  private renderNode(node: TreeNode<TreeNodeDataType>, {depth, setSize, positionInSet}: {
+  #renderNode(node: TreeNode<TreeNodeDataType>, {depth, setSize, positionInSet}: {
     depth: number,
     setSize: number,
     positionInSet: number,
   }): LitHtml.TemplateResult {
     let childrenToRender;
-    const nodeIsExpanded = this.nodeIsExpanded(node);
+    const nodeIsExpanded = this.#nodeIsExpanded(node);
     if (!isExpandableNode(node) || !nodeIsExpanded) {
       childrenToRender = LitHtml.nothing;
     } else {
-      const childNodes = this.fetchNodeChildren(node).then(children => {
+      const childNodes = this.#fetchNodeChildren(node).then(children => {
         return children.map((childNode, index) => {
-          return this.renderNode(childNode, {depth: depth + 1, setSize: children.length, positionInSet: index});
+          return this.#renderNode(childNode, {depth: depth + 1, setSize: children.length, positionInSet: index});
         });
       });
       // Disabled until https://crbug.com/1079231 is fixed.
@@ -431,12 +430,12 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
       // clang-format on
     }
 
-    const nodeIsFocusable = this.getSelectedTreeNode() === node;
+    const nodeIsFocusable = this.#getSelectedTreeNode() === node;
     const tabIndex = nodeIsFocusable ? 0 : -1;
     const listItemClasses = LitHtml.Directives.classMap({
       expanded: isExpandableNode(node) && nodeIsExpanded,
       parent: isExpandableNode(node),
-      selected: this.isSelectedNode(node),
+      selected: this.#isSelectedNode(node),
       'is-top-level': depth === 0,
     });
     const ariaExpandedAttribute =
@@ -459,7 +458,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
         aria-level=${depth + 1}
         aria-posinset=${positionInSet + 1}
         class=${listItemClasses}
-        @click=${this.onNodeClick}
+        @click=${this.#onNodeClick}
         track-dom-node-to-tree-node=${trackDOMNodeToTreeNode(this.#domNodeToTreeNodeMap, node)}
         on-render=${ComponentHelpers.Directives.nodeRenderedCallback(domNode => {
          /**
@@ -474,7 +473,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
           }
 
           if (this.#nodeIdPendingFocus && node.id === this.#nodeIdPendingFocus) {
-            this.focusPendingNode(domNode);
+            this.#focusPendingNode(domNode);
           }
         })}
       >
@@ -486,7 +485,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
             this.dispatchEvent(new ItemMouseOutEvent(node));
           }}
         >
-          <span class="arrow-icon" @click=${this.onArrowClick(node)}>
+          <span class="arrow-icon" @click=${this.#onArrowClick(node)}>
           </span>
           <span class="tree-node-key" data-node-key=${node.treeNodeData}>${renderedNodeKey}</span>
         </span>
@@ -496,7 +495,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     // clang-format on
   }
 
-  private async render(): Promise<void> {
+  async #render(): Promise<void> {
     if (this.#scheduledRender) {
       // If we are already rendering, don't render again immediately, but
       // enqueue it to be run after we're done on our current render.
@@ -511,9 +510,9 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
       // clang-format off
       LitHtml.render(LitHtml.html`
       <div class="wrapping-container">
-      <ul role="tree" @keydown=${this.onTreeKeyDown}>
+      <ul role="tree" @keydown=${this.#onTreeKeyDown}>
         ${this.#treeData.map((topLevelNode, index) => {
-          return this.renderNode(topLevelNode, {
+          return this.#renderNode(topLevelNode, {
             depth: 0,
             setSize: this.#treeData.length,
             positionInSet: index,
@@ -533,7 +532,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     // to ensure we're not rendering any stale UI.
     if (this.#enqueuedRender) {
       this.#enqueuedRender = false;
-      return this.render();
+      return this.#render();
     }
   }
 }

package/front_end/ui/legacy/SearchableView.ts

@@ -597,6 +597,11 @@ export interface Replaceable {
   replaceAllWith(searchConfig: SearchConfig, replacement: string): void;
 }
 
+export interface SearchRegexResult {
+  regex: RegExp;
+  fromQuery: boolean;
+}
+
 export class SearchConfig {
   query: string;
   caseSensitive: boolean;
@@ -608,20 +613,21 @@ export class SearchConfig {
     this.isRegex = isRegex;
   }
 
-  toSearchRegex(global?: boolean): RegExp {
+  toSearchRegex(global?: boolean): SearchRegexResult {
     let modifiers = this.caseSensitive ? '' : 'i';
     if (global) {
       modifiers += 'g';
     }
     const query = this.isRegex ? '/' + this.query + '/' : this.query;
 
-    let regex;
+    let regex: RegExp|undefined;
+    let fromQuery = false;
 
     // First try creating regex if user knows the / / hint.
     try {
       if (/^\/.+\/$/.test(query)) {
         regex = new RegExp(query.substring(1, query.length - 1), modifiers);
-        regex.__fromRegExpQuery = true;
+        fromQuery = true;
       }
     } catch (e) {
       // Silent catch.
@@ -632,6 +638,9 @@ export class SearchConfig {
       regex = Platform.StringUtilities.createPlainTextSearchRegex(query, modifiers);
     }
 
-    return regex;
+    return {
+      regex,
+      fromQuery,
+    };
   }
 }

package/front_end/ui/legacy/components/source_frame/JSONView.ts

@@ -231,7 +231,7 @@ export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Search
     let newIndex: number = this.currentSearchFocusIndex;
     const previousSearchFocusElement = this.currentSearchTreeElements[newIndex];
     this.searchCanceled();
-    this.searchRegex = searchConfig.toSearchRegex(true);
+    this.searchRegex = searchConfig.toSearchRegex(true).regex;
 
     let element: UI.TreeOutline.TreeElement|null;
     for (element = this.treeOutline.rootElement(); element; element = element.traverseNextTreeElement(false)) {

package/front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -120,7 +120,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
   private delayedFindSearchMatches: (() => void)|null;
   private currentSearchResultIndex: number;
   private searchResults: SearchMatch[];
-  private searchRegex: RegExp|null;
+  private searchRegex: UI.SearchableView.SearchRegexResult|null;
   private loadError: boolean;
   private muteChangeEventsForSetContent: boolean;
   private readonly sourcePosition: UI.Toolbar.ToolbarText;
@@ -830,7 +830,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   jumpToSearchResult(index: number): void {
-    if (!this.loaded || !this.searchResults.length) {
+    if (!this.loaded || !this.searchResults.length || !this.searchRegex) {
       return;
     }
     this.currentSearchResultIndex = (index + this.searchResults.length) % this.searchResults.length;
@@ -840,7 +840,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     const editor = this.textEditor;
     const range = this.searchResults[this.currentSearchResultIndex];
     editor.dispatch({
-      effects: setActiveSearch.of(new ActiveSearch(this.searchRegex as RegExp, range)),
+      effects: setActiveSearch.of(new ActiveSearch(this.searchRegex, range)),
       selection: {anchor: range.from, head: range.to},
       scrollIntoView: true,
       userEvent: 'select.search',
@@ -853,7 +853,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
       return;
     }
 
-    const insert = (this.searchRegex as RegExp).__fromRegExpQuery ? range.insertPlaceholders(replacement) : replacement;
+    const insert = this.searchRegex?.fromQuery ? range.insertPlaceholders(replacement) : replacement;
     const editor = this.textEditor;
     const changes = editor.state.changes({from: range.from, to: range.to, insert});
     editor.dispatch(
@@ -869,7 +869,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
       return;
     }
 
-    const isRegExp = regex.__fromRegExpQuery;
+    const isRegExp = regex.fromQuery;
     const changes = ranges.map(
         match =>
             ({from: match.from, to: match.to, insert: isRegExp ? match.insertPlaceholders(replacement) : replacement}));
@@ -877,13 +877,13 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.textEditor.dispatch({changes, scrollIntoView: true, userEvent: 'input.replace.all'});
   }
 
-  private collectRegexMatches(regexObject: RegExp): SearchMatch[] {
+  private collectRegexMatches({regex}: UI.SearchableView.SearchRegexResult): SearchMatch[] {
     const ranges = [];
     let pos = 0;
     for (const line of this.textEditor.state.doc.iterLines()) {
-      regexObject.lastIndex = 0;
+      regex.lastIndex = 0;
       for (;;) {
-        const match = regexObject.exec(line);
+        const match = regex.exec(line);
         if (!match) {
           break;
         }
@@ -1022,7 +1022,8 @@ const config = {
 };
 
 class ActiveSearch {
-  constructor(readonly regexp: RegExp, readonly currentRange: {from: number, to: number}|null) {
+  constructor(
+      readonly regexp: UI.SearchableView.SearchRegexResult, readonly currentRange: {from: number, to: number}|null) {
   }
 
   map(change: CodeMirror.ChangeDesc): ActiveSearch {
@@ -1036,7 +1037,7 @@ class ActiveSearch {
     return Boolean(
         a === b ||
         a && b && a.currentRange?.from === b.currentRange?.from && a.currentRange?.to === b.currentRange?.to &&
-            a.regexp.source === b.regexp.source && a.regexp.flags === b.regexp.flags);
+            a.regexp.regex.source === b.regexp.regex.source && a.regexp.regex.flags === b.regexp.regex.flags);
   }
 }
 
@@ -1084,9 +1085,9 @@ const searchHighlighter = CodeMirror.ViewPlugin.fromClass(class {
       let pos = from;
       for (const part of doc.iterRange(from, to)) {
         if (part !== '\n') {
-          active.regexp.lastIndex = 0;
+          active.regexp.regex.lastIndex = 0;
           for (;;) {
-            const match = active.regexp.exec(part);
+            const match = active.regexp.regex.exec(part);
             if (!match) {
               break;
             }

package/front_end/ui/legacy/components/source_frame/XMLView.ts

@@ -78,7 +78,7 @@ export class XMLView extends UI.Widget.Widget implements UI.SearchableView.Searc
     if (!this.searchConfig) {
       return;
     }
-    const regex = this.searchConfig.toSearchRegex(true);
+    const {regex} = this.searchConfig.toSearchRegex(true);
     const previousFocusElement = this.currentSearchTreeElements[this.currentSearchFocusIndex];
     if (previousFocusElement) {
       previousFocusElement.setSearchRegex(regex);
@@ -119,7 +119,7 @@ export class XMLView extends UI.Widget.Widget implements UI.SearchableView.Searc
     const previousSearchFocusElement = this.currentSearchTreeElements[newIndex];
     this.innerSearchCanceled();
     this.currentSearchTreeElements = [];
-    const regex = this.searchConfig.toSearchRegex(true);
+    const {regex} = this.searchConfig.toSearchRegex(true);
 
     for (let element: (UI.TreeOutline.TreeElement|null) =
              (this.treeOutline.rootElement() as UI.TreeOutline.TreeElement | null);

package/front_end/ui/legacy/themeColors.css

@@ -15,6 +15,7 @@
   --color-primary-variant: rgb(66 133 244);
   --color-background: rgb(255 255 255);
   --color-background-inverted: rgb(0 0 0);
+  --color-background-inverted-opacity-2: rgb(0 0 0 / 2%);
   --color-background-inverted-opacity-30: rgb(0 0 0 / 30%);
   --color-background-inverted-opacity-50: rgb(0 0 0 / 50%);
   --color-background-opacity-50: rgb(255 255 255 / 50%);
@@ -192,6 +193,7 @@
   --color-primary-variant: rgb(102 157 246);
   --color-background: rgb(32 33 36);
   --color-background-inverted: rgb(255 255 255);
+  --color-background-inverted-opacity-2: rgb(255 255 255 / 2%);
   --color-background-inverted-opacity-30: rgb(255 255 255 / 30%);
   --color-background-inverted-opacity-50: rgb(255 255 255 / 50%);
   --color-background-opacity-50: rgb(32 33 36 / 50%);

package/front_end/ui/legacy/theme_support/theme_support_impl.ts

@@ -41,7 +41,7 @@ import inspectorSyntaxHighlightDarkStyles from '../inspectorSyntaxHighlightDark.
 
 let themeSupportInstance: ThemeSupport;
 
-const themeValuesCache = new Map<string, string>();
+const themeValuesCache = new Map<CSSStyleDeclaration, Map<string, string>>();
 
 export class ThemeSupport {
   private readonly themeNameInternal: string;
@@ -96,20 +96,35 @@ export class ThemeSupport {
     return themeSupportInstance;
   }
 
-  getComputedValue(variableName: string): string {
-    const computedRoot = this.computedRoot();
-
+  getComputedValue(variableName: string, target: Element|null = null): string {
+    const computedRoot = target ? window.getComputedStyle(target) : this.computedRoot();
     if (typeof computedRoot === 'symbol') {
       throw new Error(`Computed value for property (${variableName}) could not be found on :root.`);
     }
 
+    // Since we might query the same variable name from various targets we need to support
+    // per-target caching of computed values. Here we attempt to locate the particular computed
+    // value cache for the target. If no target was specified we use the default computed root,
+    // which belongs to the document element.
+    let computedRootCache = themeValuesCache.get(computedRoot);
+    if (!computedRootCache) {
+      computedRootCache = new Map<string, string>();
+      themeValuesCache.set(computedRoot, computedRootCache);
+    }
+
     // Since theme changes trigger a reload, we can avoid repeatedly looking up color values
     // dynamically. Instead we can look up the first time and cache them for future use,
     // knowing that the cache will be invalidated by virtue of a reload when the theme changes.
-    let cachedValue = themeValuesCache.get(variableName);
+    let cachedValue = computedRootCache.get(variableName);
     if (!cachedValue) {
-      cachedValue = computedRoot.getPropertyValue(variableName);
-      themeValuesCache.set(variableName, cachedValue);
+      cachedValue = computedRoot.getPropertyValue(variableName).trim();
+
+      // If we receive back an empty value (nothing has been set) we don't store it for the future.
+      // This means that subsequent requests will continue to query the styles in case the value
+      // has been set.
+      if (cachedValue) {
+        computedRootCache.set(variableName, cachedValue);
+      }
     }
 
     return cachedValue;
@@ -291,6 +306,12 @@ export class ThemeSupport {
     output.push(';');
   }
 
+  /**
+   * This legacy function has been supeseded by CSS custom properties. Wherever possible, please use
+   * the values declared in global stylesheets.
+   *
+   * @deprecated
+   */
   patchColorText(text: string, colorUsage: number): string {
     const color = Common.Color.Color.parse(text);
     if (!color) {
@@ -304,6 +325,12 @@ export class ThemeSupport {
     return outText || text;
   }
 
+  /**
+   * This legacy function has been supeseded by CSS custom properties. Wherever possible, please use
+   * the values declared in global stylesheets.
+   *
+   * @deprecated
+   */
   patchColor(color: Common.Color.Color, colorUsage: number): Common.Color.Color {
     const hsla = color.hsla();
     this.patchHSLA(hsla, colorUsage);

package/package.json

@@ -53,5 +53,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.951864"
+  "version": "1.0.952784"
 }