chrome-devtools-frontend 1.0.1515446 → 1.0.1515988

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 {