chrome-devtools-frontend 1.0.1601661 → 1.0.1602543

package/front_end/panels/elements/CSSValueTraceView.ts

@@ -128,6 +128,7 @@ export class CSSValueTraceView extends UI.Widget.VBox {
       expandPercentagesInShorthands: boolean,
       shorthandPositionOffset: number,
       focus: boolean,
+      signal?: AbortSignal,
       ): Promise<void> {
     const matchedResult = subexpression === null ?
         property.parseValue(matchedStyles, computedStyles) :
@@ -136,7 +137,7 @@ export class CSSValueTraceView extends UI.Widget.VBox {
       return undefined;
     }
     return await this.#showTrace(
-        property, matchedResult, renderers, expandPercentagesInShorthands, shorthandPositionOffset, focus);
+        property, matchedResult, renderers, expandPercentagesInShorthands, shorthandPositionOffset, focus, signal);
   }
 
   async #showTrace(
@@ -146,6 +147,7 @@ export class CSSValueTraceView extends UI.Widget.VBox {
       expandPercentagesInShorthands: boolean,
       shorthandPositionOffset: number,
       focus: boolean,
+      signal?: AbortSignal,
       ): Promise<void> {
     this.#highlighting = new Highlighting();
     const rendererMap = new Map(renderers.map(r => [r.matchType, r]));
@@ -165,6 +167,7 @@ export class CSSValueTraceView extends UI.Widget.VBox {
           /* cssControls */ undefined,
           /* options */ {},
           tracing,
+          signal,
       );
       substitutions.push(Renderer.render(matchedResult.ast.tree, context).nodes);
     }
@@ -180,6 +183,7 @@ export class CSSValueTraceView extends UI.Widget.VBox {
           /* cssControls */ undefined,
           /* options */ {},
           tracing,
+          signal,
       );
       evaluations.push(Renderer.render(matchedResult.ast.tree, context).nodes);
       asyncCallbackResults.push(tracing.runAsyncEvaluations());
@@ -199,6 +203,10 @@ export class CSSValueTraceView extends UI.Widget.VBox {
           property,
           rendererMap,
           matchedResult,
+          undefined,
+          {},
+          undefined,
+          signal,
       );
       this.#evaluations.push(Renderer.render(matchedResult.ast.tree, context).nodes);
     }

package/front_end/panels/elements/NodeStackTraceWidget.ts

@@ -20,6 +20,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/NodeStackTraceWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {widget} = UI.Widget;
 
 interface ViewInput {
   stackTrace?: StackTrace.StackTrace.StackTrace;
@@ -35,7 +36,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
     ${target && stackTrace ?
          html`<devtools-widget
                 class="stack-trace"
-                .widgetConfig=${UI.Widget.widgetConfig(Components.JSPresentationUtils.StackTracePreviewContent, {stackTrace})}>
+                ${widget(Components.JSPresentationUtils.StackTracePreviewContent, {stackTrace})}>
               </devtools-widget>` :
          html`<div class="gray-info-message">${i18nString(UIStrings.noStackTraceAvailable)}</div>`}`,
     target);

package/front_end/panels/elements/PropertiesWidget.ts

@@ -40,7 +40,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, nothing, render} from '../../ui/lit/lit.js';
+import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import propertiesWidgetStyles from './propertiesWidget.css.js';
@@ -48,6 +48,7 @@ import propertiesWidgetStyles from './propertiesWidget.css.js';
 const OBJECT_GROUP_NAME = 'properties-sidebar-pane';
 
 const {bindToSetting} = UI.UIUtils;
+const {repeat} = Directives;
 
 const UIStrings = {
   /**
@@ -75,7 +76,6 @@ interface PropertiesWidgetInput {
   onFilterChanged: (e: CustomEvent<string>) => void;
   onRegexToggled: () => void;
   isRegex: boolean;
-  treeOutline: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline;
   objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree|null;
   allChildrenFiltered: boolean;
 }
@@ -103,7 +103,17 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
       ${input.objectTree && input.allChildrenFiltered ? html`
         <div class="gray-info-message">${i18nString(UIStrings.noMatchingProperty)}</div>
       ` : nothing}
-      ${input.treeOutline.element}
+      <devtools-tree .template=${html`
+        <ul role=tree class="source-code object-properties-section">
+          <style>${ObjectUI.ObjectPropertiesSection.objectValueStyles}</style>;
+          <style>${ObjectUI.ObjectPropertiesSection.objectPropertiesSectionStyles}</style>;
+          ${repeat(ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.createPropertyNodes(
+                        input.objectTree?.children ?? {},
+                        true /* skipProto */,
+                        true /* skipGettersAndSetters */),
+                   node => html`<devtools-tree-wrapper .treeElement=${node}></devtools-tree-wrapper>`)}
+        </ul>
+      `}></devtools-tree>
     </div>`, target);
   // clang-format on
 };
@@ -218,15 +228,7 @@ export class PropertiesWidget extends UI.Widget.VBox {
 
   override async performUpdate(): Promise<void> {
     await this.#updateNodeIfRequired();
-    if (!this.#objectTree) {
-      this.treeOutline.removeChildren();
-    } else {
-      const treeElement = this.treeOutline.rootElement();
-      treeElement.removeChildren();
-      ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.populateWithProperties(
-          treeElement, await this.#objectTree.populateChildrenIfNeeded(), true /* skipProto */,
-          true /* skipGettersAndSetters */);
-    }
+    await this.#objectTree?.populateChildrenIfNeeded();
     const allChildrenFiltered =
         !(this.#objectTree?.children?.accessors?.some(c => !c.isFiltered) ||
           this.#objectTree?.children?.arrayRanges?.some(() => true) ||
@@ -237,7 +239,6 @@ export class PropertiesWidget extends UI.Widget.VBox {
           onFilterChanged: this.onFilterChanged.bind(this),
           onRegexToggled: this.onRegexToggled.bind(this),
           isRegex: this.#isRegex,
-          treeOutline: this.treeOutline,
           allChildrenFiltered,
           objectTree: this.#objectTree,
         },

package/front_end/panels/elements/PropertyRenderer.ts

@@ -354,7 +354,7 @@ export class RenderingContext {
               MatchRenderer<SDK.CSSPropertyParser.Match>>,
       readonly matchedResult: SDK.CSSPropertyParser.BottomUpTreeMatching,
       readonly cssControls?: SDK.CSSPropertyParser.CSSControlMap, readonly options: {readonly?: boolean} = {},
-      readonly tracing?: TracingContext) {
+      readonly tracing?: TracingContext, readonly signal?: AbortSignal) {
   }
 
   addControl(cssType: string, control: HTMLElement): void {
@@ -414,11 +414,12 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
         readonly?: boolean,
       },
       tracing: TracingContext|undefined,
+      signal: AbortSignal|undefined,
   ) {
     super(ast);
     this.#matchedResult = matchedResult;
     this.#context =
-        new RenderingContext(this.ast, property, renderers, this.#matchedResult, cssControls, options, tracing);
+        new RenderingContext(this.ast, property, renderers, this.#matchedResult, cssControls, options, tracing, signal);
   }
 
   static render(nodeOrNodes: CodeMirror.SyntaxNode|CodeMirror.SyntaxNode[], context: RenderingContext):
@@ -430,7 +431,7 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
     const renderers = nodeOrNodes.map(
         node => this.walkExcludingSuccessors(
             context.ast.subtree(node), context.property, context.renderers, context.matchedResult, cssControls,
-            context.options, context.tracing));
+            context.options, context.tracing, context.signal));
     const nodes = renderers.map(node => node.#output).reduce(mergeWithSpacing, []);
     return {nodes, cssControls};
   }
@@ -491,8 +492,8 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
   static renderValueElement(
       property: SDK.CSSProperty.CSSProperty|{name: string, value: string},
       matchedResult: SDK.CSSPropertyParser.BottomUpTreeMatching|null,
-      renderers: Array<MatchRenderer<SDK.CSSPropertyParser.Match>>,
-      tracing?: TracingContext): {valueElement: HTMLElement, cssControls: SDK.CSSPropertyParser.CSSControlMap} {
+      renderers: Array<MatchRenderer<SDK.CSSPropertyParser.Match>>, tracing?: TracingContext,
+      signal?: AbortSignal): {valueElement: HTMLElement, cssControls: SDK.CSSPropertyParser.CSSControlMap} {
     const valueElement = document.createElement('span');
     valueElement.setAttribute(
         'jslog', `${VisualLogging.value().track({
@@ -502,7 +503,7 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
     UI.ARIAUtils.setLabel(valueElement, i18nString(UIStrings.cssPropertyValue, {PH1: property.value}));
     valueElement.className = 'value';
     valueElement.tabIndex = -1;
-    const {nodes, cssControls} = this.renderValueNodes(property, matchedResult, renderers, tracing);
+    const {nodes, cssControls} = this.renderValueNodes(property, matchedResult, renderers, tracing, signal);
     nodes.forEach(node => valueElement.appendChild(node));
     valueElement.normalize();
     return {valueElement, cssControls};
@@ -511,8 +512,8 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
   static renderValueNodes(
       property: SDK.CSSProperty.CSSProperty|{name: string, value: string},
       matchedResult: SDK.CSSPropertyParser.BottomUpTreeMatching|null,
-      renderers: Array<MatchRenderer<SDK.CSSPropertyParser.Match>>,
-      tracing?: TracingContext): {nodes: Node[], cssControls: SDK.CSSPropertyParser.CSSControlMap} {
+      renderers: Array<MatchRenderer<SDK.CSSPropertyParser.Match>>, tracing?: TracingContext,
+      signal?: AbortSignal): {nodes: Node[], cssControls: SDK.CSSPropertyParser.CSSControlMap} {
     if (!matchedResult) {
       return {nodes: [document.createTextNode(property.value)], cssControls: new Map()};
     }
@@ -524,7 +525,7 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
 
     const context = new RenderingContext(
         matchedResult.ast, property instanceof SDK.CSSProperty.CSSProperty ? property : null, rendererMap,
-        matchedResult, undefined, {}, tracing);
+        matchedResult, undefined, {}, tracing, signal);
     return Renderer.render([matchedResult.ast.tree, ...matchedResult.ast.trailingNodes], context);
   }
 }

package/front_end/panels/elements/StandaloneStylesContainer.ts

@@ -114,7 +114,7 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
     return this.#webCustomData;
   }
 
-  async #updateSections(): Promise<void> {
+  async #updateSections(signal?: AbortSignal): Promise<void> {
     for (const section of this.#sections) {
       section.dispose();
     }
@@ -126,6 +126,10 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
 
     const cssModel = node.domModel().cssModel();
     const matchedStyles = await cssModel.cachedMatchedCascadeForNode(node);
+    if (signal?.aborted) {
+      return;
+    }
+
     const parentNodeId = matchedStyles?.getParentLayoutNodeId();
 
     const [parentStyles, computedStyles, extraStyles] = await Promise.all([
@@ -133,6 +137,10 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
       cssModel.getComputedStyleExtraFields(node.id)
     ]);
 
+    if (signal?.aborted) {
+      return;
+    }
+
     if (!matchedStyles) {
       return;
     }
@@ -142,6 +150,7 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
     for (const style of matchedStyles.nodeStyles()) {
       const section = new StylePropertiesSection(
           this, matchedStyles, style, sectionIdx++, computedStyles, parentStyles, extraStyles);
+      section.update(true);
       newSections.push(section);
       this.sectionByElement.set(section.element, section);
     }
@@ -150,7 +159,10 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
     this.swatchPopoverHelper().reposition();
   }
 
-  override async performUpdate(): Promise<void> {
+  override async performUpdate(signal?: AbortSignal): Promise<void> {
+    await this.#updateSections(signal);
+    signal?.throwIfAborted();
+
     const viewInput: ViewInput = {
       sections: this.#sections.filter(section => !section.isHidden()),
     };
@@ -178,6 +190,7 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
       return;
     }
     this.#computedStyleModelInternal.node = node;
+    this.forceUpdate();
   }
 
   set filter(regex: RegExp|null) {

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -55,6 +55,7 @@ const ASTUtils = SDK.CSSPropertyParser.ASTUtils;
 const FlexboxEditor = ElementsComponents.StylePropertyEditor.FlexboxEditor;
 const GridEditor = ElementsComponents.StylePropertyEditor.GridEditor;
 const GridLanesEditor = ElementsComponents.StylePropertyEditor.GridLanesEditor;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -830,6 +831,9 @@ export class LightDarkColorRenderer extends rendererBase(SDK.CSSPropertyParserMa
       lightControls: SDK.CSSPropertyParser.CSSControlMap,
       darkControls: SDK.CSSPropertyParser.CSSControlMap): Promise<void> {
     const activeColor = await this.#activeColor(match);
+    if (context.signal?.aborted) {
+      return;
+    }
     if (!activeColor) {
       return;
     }
@@ -966,6 +970,9 @@ export class ColorMixRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
         context.addControl('color', swatch);
         const asyncEvalCallback = async(): Promise<boolean> => {
           const results = await this.#stylesContainer.cssModel()?.resolveValues(undefined, nodeId, colorMixText);
+          if (context.signal?.aborted) {
+            return false;
+          }
           if (results) {
             const color = Common.Color.parse(results[0]);
             if (color) {
@@ -1701,6 +1708,10 @@ export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.L
       valueElement: HTMLElement, match: SDK.CSSPropertyParser.Match, context: RenderingContext): Promise<boolean> {
     const pixelValue = await resolveValues(this.#stylesContainer, this.#propertyName, match, context, match.text);
 
+    if (context.signal?.aborted) {
+      return false;
+    }
+
     if (pixelValue?.[0] && pixelValue?.[0] !== match.text) {
       valueElement.textContent = pixelValue[0];
       return true;
@@ -1725,6 +1736,9 @@ export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.L
   async getTooltipValue(
       tooltip: Tooltips.Tooltip.Tooltip, match: SDK.CSSPropertyParser.Match, context: RenderingContext): Promise<void> {
     const pixelValue = await resolveValues(this.#stylesContainer, this.#propertyName, match, context, match.text);
+    if (context.signal?.aborted) {
+      return;
+    }
     if (!pixelValue) {
       return;
     }
@@ -1798,6 +1812,9 @@ export class BaseFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
       return null;
     });
     const evaled = await resolveValues(this.#stylesContainer, this.#propertyName, match, context, value);
+    if (context.signal?.aborted) {
+      return false;
+    }
     if (!evaled?.[0] || evaled[0] === value) {
       return false;
     }
@@ -1814,6 +1831,9 @@ export class BaseFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
     const values = match.args.map(arg => context.matchedResult.getComputedTextRange(arg[0], arg[arg.length - 1]));
     values.unshift(context.matchedResult.getComputedText(match.node));
     const evaledArgs = await resolveValues(this.#stylesContainer, this.#propertyName, match, context, ...values);
+    if (context.signal?.aborted) {
+      return;
+    }
     if (!evaledArgs) {
       return;
     }
@@ -2688,7 +2708,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
                 e.consume(true);
               }
             }}
-            .widgetConfig=${UI.Widget.widgetConfig(CSSValueTraceView)}>
+            ${widget(CSSValueTraceView)}>
           </devtools-widget>
         </devtools-tooltip>`;
     // clang-format on
@@ -3494,6 +3514,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     if (this.prompt) {
       this.prompt.detach();
       this.prompt = null;
+      this.#clearGhostTextInValue();
     }
   }
 

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -211,7 +211,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   #webCustomData?: WebCustomData;
 
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null = null;
-  #updateAbortController?: AbortController;
 
   constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel) {
     super(computedStyleModel, {delegatesFocus: true});
@@ -318,7 +317,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   forceUpdate(): void {
     this.needsForceUpdate = true;
     this.#swatchPopoverHelper.hide();
-    this.#updateAbortController?.abort();
     this.resetCache();
     this.requestUpdate();
   }
@@ -507,10 +505,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.nodeStylesUpdatedForTest(node, false);
   }
 
-  override async performUpdate(): Promise<void> {
-    this.#updateAbortController?.abort();
-    this.#updateAbortController = new AbortController();
-    await this.#innerDoUpdate(this.#updateAbortController.signal);
+  override async performUpdate(signal?: AbortSignal): Promise<void> {
+    await this.#innerDoUpdate(signal);
 
     // Hide all popovers when scrolling.
     // Styles and Computed panels both have popover (e.g. imagePreviewPopover),
@@ -526,10 +522,10 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
   }
 
-  async #innerDoUpdate(signal: AbortSignal): Promise<void> {
+  async #innerDoUpdate(signal?: AbortSignal): Promise<void> {
     if (!this.initialUpdateCompleted) {
       window.setTimeout(() => {
-        if (signal.aborted) {
+        if (signal?.aborted) {
           return;
         }
         if (!this.initialUpdateCompleted) {
@@ -541,9 +537,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
     const matchedStyles = await this.fetchMatchedCascade();
 
-    if (signal.aborted) {
-      return;
-    }
+    signal?.throwIfAborted();
 
     this.matchedStyles = matchedStyles;
     const nodeId = this.node()?.id;
@@ -554,16 +548,12 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       this.fetchComputedStyleExtraFieldsFor(nodeId)
     ]);
 
-    if (signal.aborted) {
-      return;
-    }
+    signal?.throwIfAborted();
 
     await this.innerRebuildUpdate(
         signal, this.matchedStyles, computedStyles, parentsComputedStyles, computedStyleExtraFields);
 
-    if (signal.aborted) {
-      return;
-    }
+    signal?.throwIfAborted();
 
     if (!this.initialUpdateCompleted) {
       this.initialUpdateCompleted = true;
@@ -897,7 +887,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   private async innerRebuildUpdate(
-      signal: AbortSignal, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null,
+      signal: AbortSignal|undefined, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null,
       computedStyles: Map<string, string>|null, parentsComputedStyles: Map<string, string>|null,
       computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null): Promise<void> {
     // ElementsSidebarPane's throttler schedules this method. Usually,
@@ -928,12 +918,10 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
 
     const blocks = await this.rebuildSectionsForMatchedStyleRules(
-        (matchedStyles as SDK.CSSMatchedStyles.CSSMatchedStyles), computedStyles, parentsComputedStyles,
+        signal, (matchedStyles as SDK.CSSMatchedStyles.CSSMatchedStyles), computedStyles, parentsComputedStyles,
         computedStyleExtraFields);
 
-    if (signal.aborted) {
-      return;
-    }
+    signal?.throwIfAborted();
 
     this.sectionBlocks = blocks;
 
@@ -1015,12 +1003,12 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       parentsComputedStyles: Map<string, string>|null,
       computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null): Promise<SectionBlock[]> {
     return this.rebuildSectionsForMatchedStyleRules(
-        matchedStyles, computedStyles, parentsComputedStyles, computedStyleExtraFields);
+        undefined, matchedStyles, computedStyles, parentsComputedStyles, computedStyleExtraFields);
   }
 
   private async rebuildSectionsForMatchedStyleRules(
-      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, computedStyles: Map<string, string>|null,
-      parentsComputedStyles: Map<string, string>|null,
+      signal: AbortSignal|undefined, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
+      computedStyles: Map<string, string>|null, parentsComputedStyles: Map<string, string>|null,
       computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null): Promise<SectionBlock[]> {
     if (this.idleCallbackManager) {
       this.idleCallbackManager.discard();
@@ -1074,6 +1062,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const lastBlock = blocks[blocks.length - 1];
       if (lastBlock && (!isTransitionOrAnimationStyle || style.allProperties().length > 0)) {
         this.idleCallbackManager.schedule(() => {
+          if (signal?.aborted) {
+            return;
+          }
           const section = new StylePropertiesSection(
               this, matchedStyles, style, sectionIdx, computedStyles, parentsComputedStyles, computedStyleExtraFields);
           sectionIdx++;
@@ -1147,6 +1138,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
         addLayerSeparator(style);
         const lastBlock = blocks[blocks.length - 1];
         this.idleCallbackManager.schedule(() => {
+          if (signal?.aborted) {
+            return;
+          }
           const section = new HighlightPseudoStylePropertiesSection(
               this, matchedStyles, style, sectionIdx, computedStyles, parentsComputedStyles, computedStyleExtraFields);
           sectionIdx++;
@@ -1159,6 +1153,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const block = SectionBlock.createKeyframesBlock(keyframesRule.name().text);
       for (const keyframe of keyframesRule.keyframes()) {
         this.idleCallbackManager.schedule(() => {
+          if (signal?.aborted) {
+            return;
+          }
           block.sections.push(new KeyframePropertiesSection(this, matchedStyles, keyframe.style, sectionIdx));
           sectionIdx++;
         });
@@ -1172,6 +1169,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const block = SectionBlock.createAtRuleBlock(expandedByDefault);
       for (const atRule of atRules) {
         this.idleCallbackManager.schedule(() => {
+          if (signal?.aborted) {
+            return;
+          }
           block.sections.push(new AtRuleSection(this, matchedStyles, atRule.style, sectionIdx, expandedByDefault));
           sectionIdx++;
         });
@@ -1182,6 +1182,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     for (const positionTryRule of matchedStyles.positionTryRules()) {
       const block = SectionBlock.createPositionTryBlock(positionTryRule.name().text);
       this.idleCallbackManager.schedule(() => {
+        if (signal?.aborted) {
+          return;
+        }
         block.sections.push(new PositionTryRuleSection(
             this, matchedStyles, positionTryRule.style, sectionIdx, positionTryRule.active()));
         sectionIdx++;
@@ -1194,6 +1197,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const block = SectionBlock.createRegisteredPropertiesBlock(expandedByDefault);
       for (const propertyRule of matchedStyles.registeredProperties()) {
         this.idleCallbackManager.schedule(() => {
+          if (signal?.aborted) {
+            return;
+          }
           block.sections.push(new RegisteredPropertiesSection(
               this, matchedStyles, propertyRule.style(), sectionIdx, propertyRule.propertyName(), expandedByDefault));
           sectionIdx++;
@@ -1207,6 +1213,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const block = SectionBlock.createFunctionBlock(expandedByDefault);
       for (const functionRule of matchedStyles.functionRules()) {
         this.idleCallbackManager.schedule(() => {
+          if (signal?.aborted) {
+            return;
+          }
           block.sections.push(new FunctionRuleSection(
               this, matchedStyles, functionRule.style, functionRule.children(), sectionIdx,
               functionRule.nameWithParameters(), expandedByDefault));

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -86,6 +86,11 @@
     font-style: italic;
     pointer-events: none;
   }
+
+  &.ghost-row {
+    /* As there is no checkbox to the left of the ghost rows, explicitly set padding-left */
+    padding-left: 56px;
+  }
 }
 
 .tree-outline > li {

package/front_end/panels/issues/AffectedSelectivePermissionsInterventionView.ts

@@ -85,8 +85,8 @@ export class AffectedSelectivePermissionsInterventionView extends AffectedResour
         <td class="affected-resource-cell">
           <div class="ad-ancestry-list">
             ${(details.adAncestry?.ancestryChain || []).map(script => {
-      const link = this.#linkifier.linkifyScriptLocation(
-          target, script.scriptId, script.name as Platform.DevToolsPath.UrlString, 0);
+      const link =
+          this.#linkifier.linkifyScriptLocation(target, script.scriptId, '' as Platform.DevToolsPath.UrlString, 0);
       return html`<div>${link}</div>`;
     })}
             ${

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -661,6 +661,9 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
       const inspectedURL = await this.getInspectedURL({force: true});
       const categoryIDs = overrides?.categoryIds ?? this.getCategoryIDs();
       const flags = this.getFlags();
+      if (overrides?.mode) {
+        flags.mode = overrides.mode;
+      }
 
       this.recordMetrics(flags, categoryIDs);
 
@@ -783,7 +786,7 @@ export function getRuntimeSettings(): LighthouseModel.RunTypes.RuntimeSetting[]
         title: i18nLazyString(UIStrings.lighthouseMode),
         description: i18nLazyString(UIStrings.runLighthouseInMode),
         setFlags: (flags: LighthouseModel.RunTypes.Flags, value: string|boolean) => {
-          flags.mode = value;
+          flags.mode = value as LighthouseModel.RunTypes.RunMode;
         },
         options: [
           {

package/front_end/panels/media/EventDisplayTable.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
+import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
@@ -156,10 +157,10 @@ export class PlayerEventsView extends UI.Widget.VBox {
   private static convertToGridDescriptor(columnConfig: EventDisplayColumnConfig): DataGrid.DataGrid.ColumnDescriptor {
     return {
       id: columnConfig.id,
-      title: columnConfig.title,
+      title: columnConfig.title as Common.UIString.LocalizedString,
       sortable: columnConfig.sortable,
       weight: columnConfig.weight || 0,
       sort: DataGrid.DataGrid.Order.Ascending,
-    } as DataGrid.DataGrid.ColumnDescriptor;
+    };
   }
 }

package/front_end/panels/network/EventSourceMessagesView.ts

@@ -86,12 +86,12 @@ export class EventSourceMessagesView extends UI.Widget.VBox {
     }
     this.mainToolbar.appendToolbarItem(this.filterTextInput);
 
-    const columns = ([
+    const columns: DataGrid.DataGrid.ColumnDescriptor[] = [
       {id: 'id', title: i18nString(UIStrings.id), sortable: true, weight: 8},
       {id: 'type', title: i18nString(UIStrings.type), sortable: true, weight: 8},
       {id: 'data', title: i18nString(UIStrings.data), sortable: false, weight: 88},
       {id: 'time', title: i18nString(UIStrings.time), sortable: true, weight: 8},
-    ] as DataGrid.DataGrid.ColumnDescriptor[]);
+    ];
 
     this.dataGrid = new DataGrid.SortableDataGrid.SortableDataGrid({
       displayName: i18nString(UIStrings.eventSource),

package/front_end/panels/network/RequestPayloadView.ts

@@ -51,7 +51,7 @@ import requestPayloadViewStyles from './requestPayloadView.css.js';
 import {ShowMoreDetailsWidget} from './ShowMoreDetailsWidget.js';
 
 const {classMap} = Directives;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 const {ifExpanded} = UI.TreeOutline;
 const UIStrings = {
   /**
@@ -146,7 +146,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 
   const createSourceText = (text: string): TemplateResult => html`<li role=treeitem
       @contextmenu=${copyValueContextmenu(i18nString(UIStrings.copyPayload), () => text, 'copy-payload')}>
-        <devtools-widget class='payload-value source-code' .widgetConfig=${widgetConfig(ShowMoreDetailsWidget, {text})}>
+        <devtools-widget class='payload-value source-code' ${widget(ShowMoreDetailsWidget, {text})}>
         </devtools-widget>
       </li>`;
 

package/front_end/panels/network/ResourceChunkView.ts

@@ -199,7 +199,7 @@ export abstract class ResourceChunkView<Chunk> extends UI.Widget.VBox {
         weight: 5,
       },
       {id: 'time', title: i18nString(UIStrings.time), sortable: true, weight: 7},
-    ] as DataGrid.DataGrid.ColumnDescriptor[];
+    ];
   }
 
   chunkAdded(chunk: Chunk): void {

package/front_end/panels/profiler/HeapDetachedElementsView.ts

@@ -168,11 +168,16 @@ export class DetachedElementsProfileHeader extends WritableProfileHeader {
   readonly #heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null;
   readonly detachedElements: Protocol.DOM.DetachedElementInfo[]|null;
   constructor(
-      heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null, type: DetachedElementsProfileType,
-      detachedElements: Protocol.DOM.DetachedElementInfo[]|null, title?: string) {
+      heapProfilerModel: SDK.HeapProfilerModel.HeapProfilerModel|null,
+      type: DetachedElementsProfileType,
+      detachedElements: Protocol.DOM.DetachedElementInfo[]|null,
+      title?: string,
+  ) {
     super(
-        heapProfilerModel?.debuggerModel() ?? null, type,
-        title || i18nString(UIStrings.detachedElementProfile, {PH1: type.nextProfileUid()}));
+        heapProfilerModel?.debuggerModel() ?? null,
+        type,
+        title || i18nString(UIStrings.detachedElementProfile, {PH1: type.nextProfileUid()}),
+    );
     this.detachedElements = detachedElements;
     this.#heapProfilerModel = heapProfilerModel;
   }