chrome-devtools-frontend 1.0.1515796 → 1.0.1515988

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -176,7 +176,6 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
             }
           };
 
-  const {on} = UI.UIUtils.HTMLElementWithLightDOMTemplate;
   const classes =
       (breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint): ReturnType<typeof Lit.Directives.classMap> =>
           Lit.Directives.classMap({
@@ -239,7 +238,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
                 ?indeterminate=${breakpoints.some(breakpoint => !breakpoint.enabled()) &&
                                  breakpoints.some(breakpoint => breakpoint.enabled())}
                 ?checked=${!breakpoints.some(breakpoint => !breakpoint.enabled())}
-                @change=${on((e: Event) => onCheckboxClicked(e, category))}
+                @change=${(e: Event) => onCheckboxClicked(e, category)}
               >${getLocalizedCategory(category)}</devtools-checkbox>
               <ul
                   role="group"
@@ -257,7 +256,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
                     ?checked=${breakpoint.enabled()}
                     aria-description=${breakpoint === input.highlightedItem ? i18nString(UIStrings.breakpointHit)
                                                                             : Lit.nothing}
-                    @change=${on((e: Event) => onCheckboxClicked(e, breakpoint))}
+                    @change=${(e: Event) => onCheckboxClicked(e, breakpoint)}
                   >${Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name)}</devtools-checkbox>
                 </li>`)}
               </ul>

package/front_end/panels/common/GdpSignUpDialog.ts

@@ -193,10 +193,12 @@ export class GdpSignUpDialog extends UI.Widget.VBox {
   #dialog: UI.Dialog.Dialog;
   #keepMeUpdated = false;
   #isSigningUp = false;
+  #onSuccess?: () => void;
 
-  constructor(options: {dialog: UI.Dialog.Dialog}, view?: View) {
+  constructor(options: {dialog: UI.Dialog.Dialog, onSuccess?: () => void}, view?: View) {
     super();
     this.#dialog = options.dialog;
+    this.#onSuccess = options.onSuccess;
     this.#view = view ?? DEFAULT_VIEW;
     this.requestUpdate();
   }
@@ -215,6 +217,7 @@ export class GdpSignUpDialog extends UI.Widget.VBox {
       Common.Settings.Settings.instance().moduleSetting('receive-gdp-badges').set(true);
       await Badges.UserBadges.instance().initialize();
       Badges.UserBadges.instance().recordAction(Badges.BadgeAction.GDP_SIGN_UP_COMPLETE);
+      this.#onSuccess?.();
       this.#dialog.hide();
     } else {
       Snackbars.Snackbar.Snackbar.show({message: i18nString(UIStrings.signUpFailed)}, this.#dialog.contentElement);
@@ -240,14 +243,14 @@ export class GdpSignUpDialog extends UI.Widget.VBox {
     this.#view(viewInput, undefined, this.contentElement);
   }
 
-  static show(): void {
+  static show({onSuccess}: {onSuccess?: () => void} = {}): void {
     const dialog = new UI.Dialog.Dialog();
     dialog.setAriaLabel(i18nString(UIStrings.gdpDialogAriaLabel));
     dialog.setMaxContentSize(new Geometry.Size(384, 500));
     dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
     dialog.setDimmed(true);
 
-    new GdpSignUpDialog({dialog}).show(dialog.contentElement);
+    new GdpSignUpDialog({dialog, onSuccess}).show(dialog.contentElement);
     dialog.show(undefined, /* stack */ true);
   }
 }

package/front_end/panels/console/ConsoleView.ts

@@ -322,7 +322,7 @@ export class ConsoleView extends UI.Widget.VBox implements
   private buildHiddenCacheTimeout?: number;
   private searchShouldJumpBackwards?: boolean;
   private searchProgressIndicator?: UI.ProgressIndicator.ProgressIndicator;
-  private innerSearchTimeoutId?: number;
+  #searchTimeoutId?: number;
   private muteViewportUpdates?: boolean;
   private waitForScrollTimeout?: number;
   private issueCounter: IssueCounter.IssueCounter.IssueCounter;
@@ -1051,18 +1051,13 @@ export class ConsoleView extends UI.Widget.VBox implements
       return;
     }
 
-    // Track any adjacent messages.
-    const originatingMessage = viewMessage.consoleMessage().originatingMessage();
-    const adjacent = Boolean(originatingMessage && lastMessage?.consoleMessage() === originatingMessage);
-    viewMessage.setAdjacentUserCommandResult(adjacent);
-
-    // Ensure any parent groups for this message are shown.
     const currentGroup = viewMessage.consoleGroup();
-    showGroup(currentGroup, this.visibleViewMessages);
 
-    // Determine whether this message should actually be visible.
-    const shouldShowMessage = !currentGroup?.messagesHidden();
-    if (shouldShowMessage) {
+    if (!currentGroup?.messagesHidden()) {
+      const originatingMessage = viewMessage.consoleMessage().originatingMessage();
+      const adjacent = Boolean(originatingMessage && lastMessage?.consoleMessage() === originatingMessage);
+      viewMessage.setAdjacentUserCommandResult(adjacent);
+      showGroup(currentGroup, this.visibleViewMessages);
       this.visibleViewMessages.push(viewMessage);
       this.searchMessage(this.visibleViewMessages.length - 1);
     }
@@ -1216,8 +1211,8 @@ export class ConsoleView extends UI.Widget.VBox implements
     const stream = new Bindings.FileUtils.FileOutputStream();
 
     const progressIndicator = document.createElement('devtools-progress');
-    progressIndicator.setTitle(i18nString(UIStrings.writingFile));
-    progressIndicator.setTotalWork(this.itemCount());
+    progressIndicator.title = i18nString(UIStrings.writingFile);
+    progressIndicator.totalWork = this.itemCount();
 
     const chunkSize = 350;
 
@@ -1227,7 +1222,7 @@ export class ConsoleView extends UI.Widget.VBox implements
     this.progressToolbarItem.element.appendChild(progressIndicator);
 
     let messageIndex = 0;
-    while (messageIndex < this.itemCount() && !progressIndicator.isCanceled()) {
+    while (messageIndex < this.itemCount() && !progressIndicator.canceled) {
       const messageContents = [];
       let i;
       for (i = 0; i < chunkSize && i + messageIndex < this.itemCount(); ++i) {
@@ -1236,11 +1231,11 @@ export class ConsoleView extends UI.Widget.VBox implements
       }
       messageIndex += i;
       await stream.write(messageContents.join('\n') + '\n');
-      progressIndicator.setWorked(messageIndex);
+      progressIndicator.worked = messageIndex;
     }
 
     void stream.close();
-    progressIndicator.done();
+    progressIndicator.done = true;
   }
 
   private async copyConsole(): Promise<void> {
@@ -1519,21 +1514,21 @@ export class ConsoleView extends UI.Widget.VBox implements
     }
 
     this.searchProgressIndicator = document.createElement('devtools-progress');
-    this.searchProgressIndicator.setTitle(i18nString(UIStrings.searching));
-    this.searchProgressIndicator.setTotalWork(this.visibleViewMessages.length);
+    this.searchProgressIndicator.title = i18nString(UIStrings.searching);
+    this.searchProgressIndicator.totalWork = this.visibleViewMessages.length;
     this.progressToolbarItem.element.appendChild(this.searchProgressIndicator);
 
-    this.innerSearch(0);
+    this.#search(0);
   }
 
   private cleanupAfterSearch(): void {
     delete this.searchShouldJumpBackwards;
-    if (this.innerSearchTimeoutId) {
-      clearTimeout(this.innerSearchTimeoutId);
-      delete this.innerSearchTimeoutId;
+    if (this.#searchTimeoutId) {
+      clearTimeout(this.#searchTimeoutId);
+      this.#searchTimeoutId = undefined;
     }
     if (this.searchProgressIndicator) {
-      this.searchProgressIndicator.done();
+      this.searchProgressIndicator.done = true;
       delete this.searchProgressIndicator;
     }
   }
@@ -1542,9 +1537,9 @@ export class ConsoleView extends UI.Widget.VBox implements
     // This method is sniffed in tests.
   }
 
-  private innerSearch(index: number): void {
-    delete this.innerSearchTimeoutId;
-    if (this.searchProgressIndicator?.isCanceled()) {
+  #search(index: number): void {
+    this.#searchTimeoutId = undefined;
+    if (this.searchProgressIndicator?.canceled) {
       this.cleanupAfterSearch();
       return;
     }
@@ -1566,9 +1561,9 @@ export class ConsoleView extends UI.Widget.VBox implements
       return;
     }
 
-    this.innerSearchTimeoutId = window.setTimeout(this.innerSearch.bind(this, index), 100);
+    this.#searchTimeoutId = window.setTimeout(this.#search.bind(this, index), 100);
     if (this.searchProgressIndicator) {
-      this.searchProgressIndicator.setWorked(index);
+      this.searchProgressIndicator.worked = index;
     }
   }
 

package/front_end/panels/console/ConsoleViewport.ts

@@ -435,13 +435,13 @@ export class ConsoleViewport {
 
   refresh(): void {
     this.observer.disconnect();
-    this.innerRefresh();
+    this.#refresh();
     if (this.#stickToBottom) {
       this.observer.observe(this.#contentElement, this.observerConfig);
     }
   }
 
-  private innerRefresh(): void {
+  #refresh(): void {
     if (!this.visibleHeight()) {
       return;
     }  // Do nothing for invisible controls.

package/front_end/panels/console/consoleView.css

@@ -325,14 +325,24 @@
 .console-view-object-properties-section {
   padding: 0;
   position: relative;
-  vertical-align: top;
   color: inherit;
   display: inline-block;
   overflow-wrap: break-word;
   max-width: 100%;
+  vertical-align: top;
   margin-top: -1.5px;
 }
 
+/* Console content is rendered in "Noto Sans Mono" on Linux, which has a
+ * different actual line-height than the fonts used on Windows or MacOS.
+ * "vertical-align: middle" breaks the layout when expanding an object such
+ * that it spans multiple lines. We therefore align to the top, and use a
+ * different "margin-top" on Linux to compensate for the line-height difference.
+ */
+.platform-linux .console-view-object-properties-section {
+  margin-top: 0;
+}
+
 .info-note {
   background-color: var(--sys-color-tonal-container);
 }

package/front_end/panels/coverage/CoverageView.ts

@@ -643,12 +643,12 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
           const view = UI.ViewManager.ViewManager.instance().view(coverageViewId);
           return view?.widget();
         })
-        .then(widget => this.innerHandleAction(widget as CoverageView, actionId));
+        .then(widget => this.#handleAction(widget as CoverageView, actionId));
 
     return true;
   }
 
-  private innerHandleAction(coverageView: CoverageView, actionId: string): void {
+  #handleAction(coverageView: CoverageView, actionId: string): void {
     switch (actionId) {
       case 'coverage.toggle-recording':
         coverageView.toggleRecording();

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1830,7 +1830,7 @@ export class ElementsTreeOutline extends
 
     console.assert(!treeElement.isClosingTag());
 
-    this.innerUpdateChildren(treeElement);
+    this.#updateChildren(treeElement);
   }
 
   insertChildElement(
@@ -1858,7 +1858,7 @@ export class ElementsTreeOutline extends
     }
   }
 
-  private innerUpdateChildren(treeElement: ElementsTreeElement): void {
+  #updateChildren(treeElement: ElementsTreeElement): void {
     if (this.treeElementsBeingUpdated.has(treeElement)) {
       return;
     }

package/front_end/panels/elements/StyleEditorWidget.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable rulesdir/no-imperative-dom-api */
 
-import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as ElementsComponents from './components/components.js';
@@ -120,7 +120,9 @@ export class StyleEditorWidget extends UI.Widget.VBox {
   static createTriggerButton(
       pane: StylesSidebarPane, section: StylePropertiesSection, editorClass: {new(): Editor}, buttonTitle: string,
       triggerKey: string): HTMLElement {
-    const triggerButton = createButton(buttonTitle);
+    const triggerButton = IconButton.Icon.create('flex-wrap', 'styles-pane-button');
+    triggerButton.title = buttonTitle;
+    triggerButton.role = 'button';
 
     triggerButton.onclick = async event => {
       event.stopPropagation();
@@ -146,28 +148,15 @@ export class StyleEditorWidget extends UI.Widget.VBox {
         scrollerElement.addEventListener('scroll', onScroll);
       }
     };
+    triggerButton.onmouseup = event => {
+      // Stop propagation to prevent the property editor from being activated.
+      event.stopPropagation();
+    };
 
     return triggerButton;
   }
 }
 
-function createButton(buttonTitle: string): Buttons.Button.Button {
-  const button = new Buttons.Button.Button();
-  button.data = {
-    variant: Buttons.Button.Variant.ICON,
-    size: Buttons.Button.Size.SMALL,
-    iconName: 'flex-wrap',
-    title: buttonTitle,
-    jslogContext: 'flex-wrap',
-  };
-  button.classList.add('styles-pane-button');
-  button.onmouseup = event => {
-    // Stop propagation to prevent the property editor from being activated.
-    event.stopPropagation();
-  };
-  return button;
-}
-
 function ensureTreeElementForProperty(section: StylePropertiesSection, propertyName: string): StylePropertyTreeElement {
   const target = section.propertiesTreeOutline.rootElement().children().find(
       child => child instanceof StylePropertyTreeElement && child.property.name === propertyName);

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1046,13 +1046,6 @@ export class LinkableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatc
           ruleBlock: '@position-try',
           isDefined: Boolean(this.#matchedStyles.positionTryRules().find(pt => pt.name().text === match.text)),
         };
-      case SDK.CSSPropertyParserMatchers.LinkableNameProperties.FUNCTION:
-        return {
-          jslogContext: 'css-function',
-          metric: null,
-          ruleBlock: '@function',
-          isDefined: Boolean(this.#matchedStyles.getRegisteredFunction(match.text)),
-        };
     }
   }
 
@@ -1065,15 +1058,7 @@ export class LinkableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatc
       isDefined,
       onLinkActivate: (): void => {
         metric && Host.userMetrics.swatchActivated(metric);
-        if (match.propertyName === SDK.CSSPropertyParserMatchers.LinkableNameProperties.FUNCTION) {
-          const functionName = this.#matchedStyles.getRegisteredFunction(match.text);
-          if (!functionName) {
-            return;
-          }
-          this.#stylesPane.jumpToFunctionDefinition(functionName);
-        } else {
-          this.#stylesPane.jumpToSectionBlock(`${ruleBlock} ${match.text}`);
-        }
+        this.#stylesPane.jumpToSectionBlock(`${ruleBlock} ${match.text}`);
       },
       jslogContext,
     };
@@ -1609,7 +1594,7 @@ export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.L
 }
 
 // clang-format off
-export class MathFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.MathFunctionMatch) {
+export class BaseFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.BaseFunctionMatch) {
   // clang-format on
   readonly #stylesPane: StylesSidebarPane;
   readonly #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
@@ -1627,7 +1612,7 @@ export class MathFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
     this.#propertyName = propertyName;
   }
 
-  override render(match: SDK.CSSPropertyParserMatchers.MathFunctionMatch, context: RenderingContext): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.BaseFunctionMatch<string>, context: RenderingContext): Node[] {
     const childTracingContexts = context.tracing?.evaluation(match.args, {match, context});
     const renderedArgs = match.args.map((arg, idx) => {
       const span = document.createElement('span');
@@ -1651,7 +1636,7 @@ export class MathFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
       if (evaluation) {
         return evaluation;
       }
-    } else if (!match.isArithmeticFunctionCall()) {
+    } else if (match instanceof SDK.CSSPropertyParserMatchers.MathFunctionMatch && !match.isArithmeticFunctionCall()) {
       void this.applyMathFunction(renderedArgs, match, context);
     }
 
@@ -1659,7 +1644,7 @@ export class MathFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
   }
 
   async applyEvaluation(
-      span: HTMLSpanElement, match: SDK.CSSPropertyParserMatchers.MathFunctionMatch,
+      span: HTMLSpanElement, match: SDK.CSSPropertyParserMatchers.BaseFunctionMatch<string>,
       context: RenderingContext): Promise<boolean> {
     const value = context.matchedResult.getComputedText(match.node, match => {
       if (match instanceof SDK.CSSPropertyParserMatchers.RelativeColorChannelMatch) {
@@ -1678,7 +1663,7 @@ export class MathFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
   }
 
   async applyMathFunction(
-      renderedArgs: HTMLElement[], match: SDK.CSSPropertyParserMatchers.MathFunctionMatch,
+      renderedArgs: HTMLElement[], match: SDK.CSSPropertyParserMatchers.BaseFunctionMatch<string>,
       context: RenderingContext): Promise<void> {
     // To understand which argument was selected by the function, we evaluate the function as well as all the arguments
     // and compare the function result to the values of all its arguments. Evaluating the arguments eliminates nested
@@ -1701,6 +1686,14 @@ export class MathFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
   }
 }
 
+export class MathFunctionRenderer extends BaseFunctionRenderer {
+  override readonly matchType = SDK.CSSPropertyParserMatchers.MathFunctionMatch;
+}
+
+export class CustomFunctionRenderer extends BaseFunctionRenderer {
+  override readonly matchType = SDK.CSSPropertyParserMatchers.CustomFunctionMatch;
+}
+
 // clang-format off
 export class AnchorFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.AnchorFunctionMatch) {
   // clang-format on
@@ -1871,6 +1864,7 @@ export function getPropertyRenderers(
     new PositionTryRenderer(matchedStyles),
     new LengthRenderer(stylesPane, propertyName, treeElement),
     new MathFunctionRenderer(stylesPane, matchedStyles, computedStyles, propertyName, treeElement),
+    new CustomFunctionRenderer(stylesPane, matchedStyles, computedStyles, propertyName, treeElement),
     new AutoBaseRenderer(computedStyles),
     new BinOpRenderer(),
     new RelativeColorChannelRenderer(treeElement),
@@ -2264,15 +2258,15 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
     this.lastComputedValue = computedValue;
-    this.innerUpdateTitle();
+    this.#updateTitle();
   }
 
   updateTitle(): void {
     this.lastComputedValue = this.#computeCSSExpression(this.property.ownerStyle, this.property.value);
-    this.innerUpdateTitle();
+    this.#updateTitle();
   }
 
-  private innerUpdateTitle(): void {
+  #updateTitle(): void {
     this.#tooltipKeyCounts.clear();
     this.updateState();
     if (this.isExpandable()) {
@@ -2460,6 +2454,26 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     return container;
   }
 
+  #getLinkableFunction(functionName: string, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles):
+      InlineEditor.LinkSwatch.LinkSwatch {
+    const swatch = new InlineEditor.LinkSwatch.LinkSwatch();
+    const registeredFunction = matchedStyles.getRegisteredFunction(functionName);
+    const isDefined = Boolean(registeredFunction);
+    swatch.data = {
+      jslogContext: 'css-function',
+      text: functionName,
+      tooltip: isDefined ? undefined : {title: i18nString(UIStrings.sIsNotDefined, {PH1: functionName})},
+      isDefined,
+      onLinkActivate: (): void => {
+        if (!registeredFunction) {
+          return;
+        }
+        this.#parentPane.jumpToFunctionDefinition(registeredFunction);
+      },
+    };
+    return swatch;
+  }
+
   getTracingTooltip(
       functionName: string, node: CodeMirror.SyntaxNode, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
       computedStyles: Map<string, string>, context: RenderingContext): Lit.TemplateResult {
@@ -2474,7 +2488,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const tooltipId = this.getTooltipId(`${functionName}-trace`);
     // clang-format off
     return html`
-        <span tabIndex=-1 class=tracing-anchor aria-details=${tooltipId}>${functionName}</span>
+        <span tabIndex=-1 class=tracing-anchor aria-details=${tooltipId}>${functionName.startsWith('--') ? this.#getLinkableFunction(functionName, matchedStyles) : functionName}</span>
         <devtools-tooltip
             id=${tooltipId}
             use-hotkey

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -623,10 +623,10 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   override onResize(): void {
-    void this.resizeThrottler.schedule(this.innerResize.bind(this));
+    void this.resizeThrottler.schedule(this.#resize.bind(this));
   }
 
-  private innerResize(): Promise<void> {
+  #resize(): Promise<void> {
     const width = this.contentElement.getBoundingClientRect().width + 'px';
     this.allSections().forEach(section => {
       section.propertiesTreeOutline.element.style.width = width;

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -220,13 +220,14 @@ devtools-icon.icon-link {
 }
 
 .styles-pane-button {
-  height: 15px;
-  margin: 0 0 0 6px;
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
+  margin-left: var(--sys-size-4);
   position: absolute;
-  top: -1px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  user-select: none;
 }
 /* Matched styles */
 

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -735,12 +735,12 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
       this.updateScheduled = true;
       requestAnimationFrame(() => requestAnimationFrame(() => {
                               this.updateScheduled = false;
-                              this.innerUpdate();
+                              this.#update();
                             }));
     }
   }
 
-  private innerUpdate(): void {
+  #update(): void {
     if (!this.layerTree?.root()) {
       this.failBanner.show(this.contentElement);
       return;

package/front_end/panels/layers/LayerTreeModel.ts

@@ -138,7 +138,7 @@ export class AgentLayerTree extends SDK.LayerTreeBase.LayerTreeBase {
 
   async setLayers(payload: Protocol.LayerTree.Layer[]|null): Promise<void> {
     if (!payload) {
-      this.innerSetLayers(payload);
+      this.#setLayers(payload);
       return;
     }
     const idsToResolve = new Set<Protocol.DOM.BackendNodeId>();
@@ -150,10 +150,10 @@ export class AgentLayerTree extends SDK.LayerTreeBase.LayerTreeBase {
       idsToResolve.add(backendNodeId);
     }
     await this.resolveBackendNodeIds(idsToResolve);
-    this.innerSetLayers(payload);
+    this.#setLayers(payload);
   }
 
-  private innerSetLayers(layers: Protocol.LayerTree.Layer[]|null): void {
+  #setLayers(layers: Protocol.LayerTree.Layer[]|null): void {
     this.setRoot(null);
     this.setContentRoot(null);
     // Payload will be null when not in the composited mode.

package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -400,8 +400,8 @@ export class CPUThrottlingCard {
   }
 
   private async runCalibration(): Promise<void> {
-    this.progress.setWorked(0);
-    this.progress.setTotalWork(1);
+    this.progress.worked = 0;
+    this.progress.totalWork = 1;
 
     this.controller = new CalibrationController();
 
@@ -412,7 +412,7 @@ export class CPUThrottlingCard {
       }
 
       for await (const result of this.controller.iterator()) {
-        this.progress.setWorked(result.progress);
+        this.progress.worked = result.progress;
       }
     } catch (e) {
       console.error(e);
@@ -424,7 +424,7 @@ export class CPUThrottlingCard {
     if (result && (result.low || result.mid)) {
       this.setting.set(result);
       // Let the user bask in the glory of a 100% progress bar, for a bit.
-      this.progress.setWorked(1);
+      this.progress.worked = 1;
       await new Promise(resolve => setTimeout(resolve, 200));
     }
 

package/front_end/panels/network/NetworkLogView.ts

@@ -1963,7 +1963,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
 
     const progressIndicator = this.progressBarContainer.createChild('devtools-progress');
     await HAR.Writer.Writer.write(stream, this.harRequests(), options, progressIndicator);
-    progressIndicator.done();
+    progressIndicator.done = true;
     void stream.close();
   }
 

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -279,7 +279,7 @@ export class NetworkLogViewColumns {
 
     this.updateColumns();
     this.#dataGrid.addEventListener(DataGrid.DataGrid.Events.SORTING_CHANGED, this.sortHandler, this);
-    this.#dataGrid.setHeaderContextMenuCallback(this.innerHeaderContextMenu.bind(this));
+    this.#dataGrid.setHeaderContextMenuCallback(this.#headerContextMenu.bind(this));
 
     this.activeWaterfallSortId = WaterfallSortIds.StartTime;
     this.#dataGrid.markColumnAsSortedBy(INITIAL_SORT_COLUMN, DataGrid.DataGrid.Order.Ascending);
@@ -405,7 +405,7 @@ export class NetworkLogViewColumns {
     this.waterfallHeaderElement.addEventListener('click', waterfallHeaderClicked.bind(this));
     this.waterfallHeaderElement.addEventListener('contextmenu', event => {
       const contextMenu = new UI.ContextMenu.ContextMenu(event);
-      this.innerHeaderContextMenu(contextMenu);
+      this.#headerContextMenu(contextMenu);
       void contextMenu.show();
     });
     this.waterfallHeaderElement.createChild('div', 'hover-layer');
@@ -627,7 +627,7 @@ export class NetworkLogViewColumns {
     return fragment;
   }
 
-  private innerHeaderContextMenu(contextMenu: UI.ContextMenu.SubMenu): void {
+  #headerContextMenu(contextMenu: UI.ContextMenu.SubMenu): void {
     const columnConfigs = this.columns.filter(columnConfig => columnConfig.hideable);
     const nonRequestResponseHeaders =
         columnConfigs.filter(columnConfig => !columnConfig.isRequestHeader && !columnConfig.isResponseHeader);

package/front_end/panels/network/NetworkSearchScope.ts

@@ -29,7 +29,7 @@ export class NetworkSearchScope implements Search.SearchScope.SearchScope {
 
   performIndexing(progress: Common.Progress.Progress): void {
     queueMicrotask(() => {
-      progress.done();
+      progress.done = true;
     });
   }
 
@@ -40,14 +40,14 @@ export class NetworkSearchScope implements Search.SearchScope.SearchScope {
     const promises = [];
     const requests =
         this.#networkLog.requests().filter(request => searchConfig.filePathMatchesFileQuery(request.url()));
-    progress.setTotalWork(requests.length);
+    progress.totalWork = requests.length;
     for (const request of requests) {
       const promise = this.searchRequest(searchConfig, request, progress);
       promises.push(promise);
     }
     const resultsWithNull = await Promise.all(promises);
     const results = (resultsWithNull.filter(result => result !== null));
-    if (progress.isCanceled()) {
+    if (progress.canceled) {
       searchFinishedCallback(false);
       return;
     }
@@ -56,7 +56,7 @@ export class NetworkSearchScope implements Search.SearchScope.SearchScope {
         searchResultCallback(result);
       }
     }
-    progress.done();
+    progress.done = true;
     searchFinishedCallback(true);
   }
 
@@ -64,7 +64,7 @@ export class NetworkSearchScope implements Search.SearchScope.SearchScope {
       searchConfig: Workspace.SearchConfig.SearchConfig, request: SDK.NetworkRequest.NetworkRequest,
       progress: Common.Progress.Progress): Promise<NetworkSearchResult|null> {
     const bodyMatches = await NetworkSearchScope.#responseBodyMatches(searchConfig, request);
-    if (progress.isCanceled()) {
+    if (progress.canceled) {
       return null;
     }
     const locations = [];
@@ -84,7 +84,7 @@ export class NetworkSearchScope implements Search.SearchScope.SearchScope {
     for (const match of bodyMatches) {
       locations.push(NetworkForward.UIRequestLocation.UIRequestLocation.bodyMatch(request, match));
     }
-    progress.incrementWorked();
+    ++progress.worked;
     return new NetworkSearchResult(request, locations);
 
     function headerMatchesQuery(header: SDK.NetworkRequest.NameValue): boolean {