chrome-devtools-frontend 1.0.1026160 → 1.0.1027447

package/front_end/generated/protocol.ts

@@ -236,6 +236,10 @@ export namespace Accessibility {
      * This `Node`'s role, whether explicit or implicit.
      */
     role?: AXValue;
+    /**
+     * This `Node`'s Chrome raw role.
+     */
+    chromeRole?: AXValue;
     /**
      * The accessible name for this `Node`.
      */

package/front_end/legacy_test_runner/axe_core_test_runner/axe_core_test_runner.js

@@ -133,7 +133,7 @@ const DEFAULT_CONFIG = {
     // ignored by the 'aria-valid-attr' rule.
     // This should be removed after axe-core is updated.
     // See: https://github.com/dequelabs/axe-core/issues/1457
-    {id: 'aria-valid-attr', options: ['aria-placeholder']}
+    {id: 'aria-valid-attr', options: ['aria-placeholder', 'aria-description']}
   ],
   runOnly: {type: 'tags', values: {include: ['wcag2a', 'best-practice'], exclude: ['experimental']}}
 };

package/front_end/legacy_test_runner/sources_test_runner/DebuggerTestRunner.js

@@ -291,7 +291,7 @@ SourcesTestRunner.captureStackTraceIntoString = async function(callFrames, async
       const script = location.script();
       const uiLocation = await self.Bindings.debuggerWorkspaceBinding.rawLocationToUILocation(location);
       const isFramework =
-          uiLocation ? self.Bindings.ignoreListManager.isIgnoreListedUISourceCode(uiLocation.uiSourceCode) : false;
+          uiLocation ? self.Bindings.ignoreListManager.isUserIgnoreListedURL(uiLocation.uiSourceCode.url()) : false;
 
       if (options.dropFrameworkCallFrames && isFramework) {
         continue;

package/front_end/models/bindings/CompilerScriptMapping.ts

@@ -247,7 +247,7 @@ export class CompilerScriptMapping implements DebuggerSourceMapping {
     const sourceMap = event.data.sourceMap;
     await this.removeStubUISourceCode(script);
 
-    if (IgnoreListManager.instance().isIgnoreListedURL(script.sourceURL, script.isContentScript())) {
+    if (IgnoreListManager.instance().isUserIgnoreListedURL(script.sourceURL, script.isContentScript())) {
       this.sourceMapAttachedForTest(sourceMap);
       return;
     }

package/front_end/models/bindings/DebuggerLanguagePlugins.ts

@@ -656,15 +656,23 @@ class SourceScopeRemoteObject extends SDK.RemoteObject.RemoteObjectImpl {
     }
 
     for (const variable of this.variables) {
-      let sourceVar;
+      let sourceVar: SDK.RemoteObject.RemoteObject|undefined;
       try {
-        sourceVar = await getValueTreeForExpression(this.#callFrame, this.#plugin, variable.name, ({
-                                                      generatePreview: false,
-                                                      includeCommandLineAPI: true,
-                                                      objectGroup: 'backtrace',
-                                                      returnByValue: false,
-                                                      silent: false,
-                                                    } as SDK.RuntimeModel.EvaluationOptions));
+        const evalResult = await this.#plugin.evaluate(variable.name, getRawLocation(this.#callFrame), this.stopId);
+        if (evalResult) {
+          sourceVar = new ExtensionRemoteObject(this.#callFrame, evalResult, this.#plugin);
+        }
+        // For backwards compatibility, fall back to the legacy API if the plugin doesn't define the new one.
+        // TODO(crbug.com/1342848) Remove
+        if (!sourceVar) {
+          sourceVar = await getValueTreeForExpression(this.#callFrame, this.#plugin, variable.name, ({
+                                                        generatePreview: false,
+                                                        includeCommandLineAPI: true,
+                                                        objectGroup: 'backtrace',
+                                                        returnByValue: false,
+                                                        silent: false,
+                                                      } as SDK.RuntimeModel.EvaluationOptions));
+        }
       } catch (e) {
         console.warn(e);
         sourceVar = new SDK.RemoteObject.LocalJSONObject(undefined);
@@ -918,7 +926,7 @@ export class DebuggerLanguagePluginManager implements
     error: string,
   }|null> {
     const {script} = callFrame;
-    const {expression} = options;
+    const {expression, returnByValue, throwOnSideEffect} = options;
     const {plugin} = await this.rawModuleIdAndPluginForScript(script);
     if (!plugin) {
       return null;
@@ -929,9 +937,20 @@ export class DebuggerLanguagePluginManager implements
       return null;
     }
 
+    if (returnByValue) {
+      return {error: 'Cannot return by value'};
+    }
+    if (throwOnSideEffect) {
+      return {error: 'Cannot guarantee side-effect freedom'};
+    }
+
     try {
-      const object = await getValueTreeForExpression(callFrame, plugin, expression, options);
-      return {object, exceptionDetails: undefined};
+      const object = await plugin.evaluate(expression, location, this.stopIdForCallFrame(callFrame));
+      if (!object) {
+        const object = await getValueTreeForExpression(callFrame, plugin, expression, options);
+        return {object, exceptionDetails: undefined};
+      }
+      return {object: new ExtensionRemoteObject(callFrame, object, plugin), exceptionDetails: undefined};
     } catch (error) {
       if (error instanceof FormattingError) {
         const {exception: object, exceptionDetails} = error;
@@ -1542,4 +1561,12 @@ class ModelData {
 export interface DebuggerLanguagePlugin extends Chrome.DevTools.LanguageExtensionPlugin {
   name: string;
   handleScript(script: SDK.Script.Script): boolean;
+
+  // These are optional in the public interface for compatibility purposes, but ExtensionAPI handles the missing
+  // functions gracefully, so we can mark them non-optional here.
+  // TODO(crbug.com/1342848) Remove
+  evaluate(expression: string, context: Chrome.DevTools.RawLocation, stopId: unknown):
+      Promise<Chrome.DevTools.RemoteObject|null>;
+  getProperties(objectId: Chrome.DevTools.RemoteObjectId): Promise<Chrome.DevTools.PropertyDescriptor[]>;
+  releaseObject(objectId: Chrome.DevTools.RemoteObjectId): Promise<void>;
 }

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -509,7 +509,13 @@ export class Location extends LiveLocationWithPool {
 
   async isIgnoreListed(): Promise<boolean> {
     const uiLocation = await this.uiLocation();
-    return uiLocation ? IgnoreListManager.instance().isIgnoreListedUISourceCode(uiLocation.uiSourceCode) : false;
+    if (!uiLocation) {
+      return false;
+    }
+    const manager = this.rawLocation.debuggerModel.sourceMapManager();
+    const script = this.rawLocation.script();
+    const map = script ? await manager.sourceMapForClientPromise(script) : null;
+    return IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(uiLocation.uiSourceCode, map);
   }
 }
 

package/front_end/models/bindings/IgnoreListManager.ts

@@ -28,6 +28,9 @@ export class IgnoreListManager implements SDK.TargetManager.SDKModelObserver<SDK
     Common.Settings.Settings.instance()
         .moduleSetting('skipContentScripts')
         .addChangeListener(this.patternChanged.bind(this));
+    Common.Settings.Settings.instance()
+        .moduleSetting('automaticallyIgnoreListKnownThirdPartyScripts')
+        .addChangeListener(this.patternChanged.bind(this));
 
     this.#listeners = new Set();
 
@@ -97,21 +100,33 @@ export class IgnoreListManager implements SDK.TargetManager.SDKModelObserver<SDK
     return debuggerModel.setBlackboxPatterns(patterns);
   }
 
-  isIgnoreListedUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
+  isUserOrSourceMapIgnoreListedUISourceCode(
+      uiSourceCode: Workspace.UISourceCode.UISourceCode, sourceMap: SDK.SourceMap.SourceMap|null): boolean {
     const projectType = uiSourceCode.project().type();
     const isContentScript = projectType === Workspace.Workspace.projectTypes.ContentScripts;
-    if (isContentScript && Common.Settings.Settings.instance().moduleSetting('skipContentScripts').get()) {
+    if (this.skipContentScripts && isContentScript) {
       return true;
     }
     const url = this.uiSourceCodeURL(uiSourceCode);
-    return url ? this.isIgnoreListedURL(url) : false;
+    return url ? this.isUserOrSourceMapIgnoreListedURL(url, sourceMap) : false;
+  }
+
+  isUserOrSourceMapIgnoreListedURL(url: Platform.DevToolsPath.UrlString, sourceMap: SDK.SourceMap.SourceMap|null):
+      boolean {
+    if (this.isUserIgnoreListedURL(url)) {
+      return true;
+    }
+    if (this.automaticallyIgnoreListKnownThirdPartyScripts && sourceMap?.hasIgnoreListHint(url)) {
+      return true;
+    }
+    return false;
   }
 
-  isIgnoreListedURL(url: Platform.DevToolsPath.UrlString, isContentScript?: boolean): boolean {
+  isUserIgnoreListedURL(url: Platform.DevToolsPath.UrlString, isContentScript?: boolean): boolean {
     if (this.#isIgnoreListedURLCache.has(url)) {
       return Boolean(this.#isIgnoreListedURLCache.get(url));
     }
-    if (isContentScript && Common.Settings.Settings.instance().moduleSetting('skipContentScripts').get()) {
+    if (isContentScript && this.skipContentScripts) {
       return true;
     }
     const regex = this.getSkipStackFramesPatternSetting().asRegExp();
@@ -137,8 +152,9 @@ export class IgnoreListManager implements SDK.TargetManager.SDKModelObserver<SDK
 
   private async updateScriptRanges(script: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap|null): Promise<void> {
     let hasIgnoreListedMappings = false;
-    if (!IgnoreListManager.instance().isIgnoreListedURL(script.sourceURL, script.isContentScript())) {
-      hasIgnoreListedMappings = sourceMap ? sourceMap.sourceURLs().some(url => this.isIgnoreListedURL(url)) : false;
+    if (!IgnoreListManager.instance().isUserIgnoreListedURL(script.sourceURL, script.isContentScript())) {
+      hasIgnoreListedMappings =
+          sourceMap?.sourceURLs().some(url => this.isUserOrSourceMapIgnoreListedURL(url, sourceMap)) ?? false;
     }
     if (!hasIgnoreListedMappings) {
       if (scriptToRange.get(script) && await script.setBlackboxedRanges([])) {
@@ -152,21 +168,10 @@ export class IgnoreListManager implements SDK.TargetManager.SDKModelObserver<SDK
       return;
     }
 
-    const mappings = sourceMap.mappings();
-    const newRanges: SourceRange[] = [];
-    if (mappings.length > 0) {
-      let currentIgnoreListed = false;
-      if (mappings[0].lineNumber !== 0 || mappings[0].columnNumber !== 0) {
-        newRanges.push({lineNumber: 0, columnNumber: 0});
-        currentIgnoreListed = true;
-      }
-      for (const mapping of mappings) {
-        if (mapping.sourceURL && currentIgnoreListed !== this.isIgnoreListedURL(mapping.sourceURL)) {
-          newRanges.push({lineNumber: mapping.lineNumber, columnNumber: mapping.columnNumber});
-          currentIgnoreListed = !currentIgnoreListed;
-        }
-      }
-    }
+    const newRanges =
+        sourceMap
+            .findRanges(srcURL => this.isUserOrSourceMapIgnoreListedURL(srcURL, sourceMap), {isStartMatching: true})
+            .flatMap(range => [range.start, range.end]);
 
     const oldRanges = scriptToRange.get(script) || [];
     if (!isEqual(oldRanges, newRanges) && await script.setBlackboxedRanges(newRanges)) {
@@ -210,6 +215,14 @@ export class IgnoreListManager implements SDK.TargetManager.SDKModelObserver<SDK
     }
   }
 
+  get skipContentScripts(): boolean {
+    return Common.Settings.Settings.instance().moduleSetting('skipContentScripts').get();
+  }
+
+  get automaticallyIgnoreListKnownThirdPartyScripts(): boolean {
+    return Common.Settings.Settings.instance().moduleSetting('automaticallyIgnoreListKnownThirdPartyScripts').get();
+  }
+
   ignoreListContentScripts(): void {
     Common.Settings.Settings.instance().moduleSetting('skipContentScripts').set(true);
   }

package/front_end/models/issues_manager/descriptions/clientHintMetaTagAllowListInvalidOrigin.md

@@ -1,4 +1,4 @@
 # Client Hint meta tag contained invalid origin
 
-Items in the accept-ch meta tag allow list must be valid origins.
+Items in the delegate-ch meta tag allow list must be valid origins.
 No special values (e.g. self, none, and *) are permitted.

package/front_end/models/issues_manager/descriptions/clientHintMetaTagModifiedHTML.md

@@ -1,4 +1,4 @@
 # Client Hint meta tag modified by javascript
 
-Only accept-ch meta tags in the original HTML sent from the server
+Only delegate-ch meta tags in the original HTML sent from the server
 are respected. Any injected via javascript (or other means) are ignored.

package/front_end/models/text_utils/TextRange.ts

@@ -230,6 +230,14 @@ export class TextRange {
     }
     return this.startLine < lineNumber && lineNumber < this.endLine;
   }
+
+  get start(): {lineNumber: number, columnNumber: number} {
+    return {lineNumber: this.startLine, columnNumber: this.startColumn};
+  }
+
+  get end(): {lineNumber: number, columnNumber: number} {
+    return {lineNumber: this.endLine, columnNumber: this.endColumn};
+  }
 }
 
 export class SourceRange {

package/front_end/models/timeline_model/TimelineModel.ts

@@ -94,6 +94,18 @@ const UIStrings = {
    *@description Title of an auction worklet in the timeline flame chart of the Performance panel
    */
   unknownWorklet: 'Auction Worklet',
+
+  /**
+   *@description Title of control thread of a service process for an auction worklet in the timeline flame chart of the Performance panel
+   */
+  workletService: 'Auction Worklet Service',
+
+  /**
+   *@description Title of control thread of a service process for an auction worklet with known URL in the timeline flame chart of the Performance panel
+   * @example {https://google.com} PH1
+   */
+  workletServiceS: 'Auction Worklet Service — {PH1}',
+
 };
 const str_ = i18n.i18n.registerUIStrings('models/timeline_model/TimelineModel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -535,7 +547,8 @@ export class TimelineModelImpl {
         } else {
           let urlForOther: Platform.DevToolsPath.UrlString|null = null;
           let workletTypeForOther: WorkletType = WorkletType.NotWorklet;
-          if (thread.name() === TimelineModelImpl.AuctionWorkletThreadName) {
+          if (thread.name() === TimelineModelImpl.AuctionWorkletThreadName ||
+              thread.name() === TimelineModelImpl.UtilityMainThreadName) {
             if (typeof workletUrl !== 'boolean') {
               urlForOther = workletUrl;
             }
@@ -822,6 +835,9 @@ export class TimelineModelImpl {
     } else if (thread.name() === TimelineModelImpl.AuctionWorkletThreadName) {
       track.url = url || Platform.DevToolsPath.EmptyUrlString;
       track.name = TimelineModelImpl.nameAuctionWorklet(workletType, url);
+    } else if (workletType !== WorkletType.NotWorklet && thread.name() === TimelineModelImpl.UtilityMainThreadName) {
+      track.url = url || Platform.DevToolsPath.EmptyUrlString;
+      track.name = url ? i18nString(UIStrings.workletServiceS, {PH1: url}) : i18nString(UIStrings.workletService);
     }
     this.tracksInternal.push(track);
 
@@ -1700,6 +1716,7 @@ export namespace TimelineModelImpl {
   export const WorkerThreadNameLegacy = 'DedicatedWorker Thread';
   export const RendererMainThreadName = 'CrRendererMain';
   export const BrowserMainThreadName = 'CrBrowserMain';
+  export const UtilityMainThreadName = 'CrUtilityMain';
   export const AuctionWorkletThreadName = 'AuctionV8HelperThread';
 
   export const DevToolsMetadataEvent = {

package/front_end/panels/accessibility/ARIAAttributesView.ts

@@ -229,6 +229,7 @@ const ATTRIBUTES = new Set<string>([
   'aria-activedescendant',
   'aria-atomic',
   'aria-autocomplete',
+  'aria-braillelabel',
   'aria-brailleroledescription',
   'aria-busy',
   'aria-checked',
@@ -239,6 +240,7 @@ const ATTRIBUTES = new Set<string>([
   'aria-controls',
   'aria-current',
   'aria-describedby',
+  'aria-description',
   'aria-details',
   'aria-disabled',
   'aria-dropeffect',

package/front_end/panels/console/consoleView.css

@@ -546,3 +546,7 @@
     --override-error-text-color: HighlightText;
   }
 }
+
+[slot="insertion-point-sidebar"] {
+  contain: layout style;
+}

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -453,6 +453,8 @@ export class ElementsTreeOutline extends
       }
     }
 
+    this.createTopLayerContainer();
+
     if (selectedNode) {
       this.revealAndSelectNode(selectedNode, true);
     }
@@ -1173,24 +1175,16 @@ export class ElementsTreeOutline extends
     }
 
     return new Promise<void>(resolve => {
-             treeElement.node().getChildNodes(() => {
-               populatedTreeElements.add(treeElement);
-               this.updateModifiedParentNode(treeElement.node());
-               resolve();
-             });
-           })
-        .then(() => {
-          if (treeElement.node().nodeName() === 'BODY') {
-            this.createTopLayerContainer(treeElement);
-          }
-        });
+      treeElement.node().getChildNodes(() => {
+        populatedTreeElements.add(treeElement);
+        this.updateModifiedParentNode(treeElement.node());
+        resolve();
+      });
+    });
   }
 
-  createTopLayerContainer(bodyElement: ElementsTreeElement): void {
-    if (!this.topLayerContainer) {
-      this.topLayerContainer = new TopLayerContainer(bodyElement);
-    }
-    this.topLayerContainer.updateBody(bodyElement);
+  createTopLayerContainer(): void {
+    this.topLayerContainer = new TopLayerContainer(this);
     void this.topLayerContainer.throttledUpdateTopLayerElements();
   }
 

package/front_end/panels/elements/TopLayerContainer.ts

@@ -23,29 +23,18 @@ const str_ = i18n.i18n.registerUIStrings('panels/elements/TopLayerContainer.ts',
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class TopLayerContainer extends UI.TreeOutline.TreeElement {
-  treeOutline: ElementsTreeOutline.ElementsTreeOutline|null;
-  domModel: SDK.DOMModel.DOMModel;
+  domContainer: ElementsTreeOutline.ElementsTreeOutline;
   currentTopLayerElements: Set<ElementsTreeElement>;
-  bodyElement: ElementsTreeElement;
   topLayerUpdateThrottler: Common.Throttler.Throttler;
   #inserted = false;
 
-  constructor(bodyElement: ElementsTreeElement) {
+  constructor(domContainer: ElementsTreeOutline.ElementsTreeOutline) {
     super('#top-layer');
-    this.bodyElement = bodyElement;
-    this.domModel = bodyElement.node().domModel();
-    this.treeOutline = null;
+    this.domContainer = domContainer;
     this.currentTopLayerElements = new Set();
     this.topLayerUpdateThrottler = new Common.Throttler.Throttler(1);
   }
 
-  updateBody(bodyElement: ElementsTreeElement): void {
-    if (this.bodyElement !== bodyElement) {
-      this.#inserted = false;
-    }
-    this.bodyElement = bodyElement;
-  }
-
   async throttledUpdateTopLayerElements(): Promise<void> {
     await this.topLayerUpdateThrottler.schedule(() => this.updateTopLayerElements());
   }
@@ -55,7 +44,13 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
     this.removeCurrentTopLayerElementsAdorners();
     this.currentTopLayerElements = new Set();
 
-    const newTopLayerElementsIDs = await this.domModel.getTopLayerElements();
+    const domModel = this.domContainer.rootDOMNode?.domModel();
+    if (!domModel) {
+      this.hidden = true;
+      return;
+    }
+
+    const newTopLayerElementsIDs = await domModel.getTopLayerElements();
     if (!newTopLayerElementsIDs || newTopLayerElementsIDs.length === 0) {
       this.hidden = true;
       return;
@@ -63,12 +58,12 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
 
     let topLayerElementIndex = 0;
     for (let i = 0; i < newTopLayerElementsIDs.length; i++) {
-      const topLayerDOMNode = this.domModel.idToDOMNode.get(newTopLayerElementsIDs[i]);
+      const topLayerDOMNode = domModel.idToDOMNode.get(newTopLayerElementsIDs[i]);
       if (topLayerDOMNode && topLayerDOMNode.nodeName() !== '::backdrop') {
         const topLayerElementShortcut = new SDK.DOMModel.DOMNodeShortcut(
-            this.domModel.target(), topLayerDOMNode.backendNodeId(), 0, topLayerDOMNode.nodeName());
+            domModel.target(), topLayerDOMNode.backendNodeId(), 0, topLayerDOMNode.nodeName());
         const topLayerElementRepresentation = new ElementsTreeOutline.ShortcutTreeElement(topLayerElementShortcut);
-        const topLayerTreeElement = this.bodyElement.treeOutline?.treeElementByNode.get(topLayerDOMNode);
+        const topLayerTreeElement = this.domContainer.treeElementByNode.get(topLayerDOMNode);
         if (!topLayerTreeElement) {
           continue;
         }
@@ -78,11 +73,10 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
         this.currentTopLayerElements.add(topLayerTreeElement);
         this.appendChild(topLayerElementRepresentation);
         // Add the element's backdrop if previous top layer element is a backdrop.
-        const previousTopLayerDOMNode =
-            (i > 0) ? this.domModel.idToDOMNode.get(newTopLayerElementsIDs[i - 1]) : undefined;
+        const previousTopLayerDOMNode = (i > 0) ? domModel.idToDOMNode.get(newTopLayerElementsIDs[i - 1]) : undefined;
         if (previousTopLayerDOMNode && previousTopLayerDOMNode.nodeName() === '::backdrop') {
           const backdropElementShortcut = new SDK.DOMModel.DOMNodeShortcut(
-              this.domModel.target(), previousTopLayerDOMNode.backendNodeId(), 0, previousTopLayerDOMNode.nodeName());
+              domModel.target(), previousTopLayerDOMNode.backendNodeId(), 0, previousTopLayerDOMNode.nodeName());
           const backdropElementRepresentation = new ElementsTreeOutline.ShortcutTreeElement(backdropElementShortcut);
           topLayerElementRepresentation.appendChild(backdropElementRepresentation);
         }
@@ -91,7 +85,7 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
 
     this.hidden = topLayerElementIndex <= 0;
     if (!this.hidden && !this.#inserted) {
-      this.bodyElement.insertChild(this, this.bodyElement.childCount() - 1);
+      this.domContainer.appendChild(this);
       this.#inserted = true;
     }
   }

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -45,6 +45,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-elements-breadcrumbs`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #resizeObserver = new ResizeObserver(() => this.#checkForOverflowOnResize());
+  readonly #renderBound = this.#render.bind(this);
 
   #crumbsData: readonly DOMNode[] = [];
   #selectedDOMNode: Readonly<DOMNode>|null = null;
@@ -61,7 +62,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
     this.#selectedDOMNode = data.selectedNode;
     this.#crumbsData = data.crumbs;
     this.#userHasManuallyScrolled = false;
-    void this.#update();
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#renderBound);
   }
 
   disconnectedCallback(): void {
@@ -104,12 +105,6 @@ export class ElementsBreadcrumbs extends HTMLElement {
     }
   }
 
-  async #update(): Promise<void> {
-    await this.#render();
-    this.#engageResizeObserver();
-    void this.#ensureSelectedNodeIsVisible();
-  }
-
   #onCrumbMouseMove(node: DOMNode): () => void {
     return (): void => node.highlightNode();
   }
@@ -267,53 +262,53 @@ export class ElementsBreadcrumbs extends HTMLElement {
       `;
   }
 
-  async #render(): Promise<void> {
+  #render(): void {
     const crumbs = crumbsToRender(this.#crumbsData, this.#selectedDOMNode);
 
-    await coordinator.write('Breadcrumbs render', () => {
-      // Disabled until https://crbug.com/1079231 is fixed.
-      // clang-format off
-      LitHtml.render(LitHtml.html`
-        <nav class="crumbs" aria-label=${i18nString(UIStrings.breadcrumbs)}>
-          ${this.#renderOverflowButton('left', this.#userScrollPosition === 'start')}
-
-          <div class="crumbs-window" @scroll=${this.#onCrumbsWindowScroll}>
-            <ul class="crumbs-scroll-container">
-              ${crumbs.map(crumb => {
-                const crumbClasses = {
-                  crumb: true,
-                  selected: crumb.selected,
-                };
-                // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
-                return LitHtml.html`
-                  <li class=${LitHtml.Directives.classMap(crumbClasses)}
-                    data-node-id=${crumb.node.id}
-                    data-crumb="true"
-                  >
-                    <a href="#"
-                      draggable=false
-                      class="crumb-link"
-                      @click=${this.#onCrumbClick(crumb.node)}
-                      @mousemove=${this.#onCrumbMouseMove(crumb.node)}
-                      @mouseleave=${this.#onCrumbMouseLeave(crumb.node)}
-                      @focus=${this.#onCrumbFocus(crumb.node)}
-                      @blur=${this.#onCrumbBlur(crumb.node)}
-                    ><${NodeText.NodeText.NodeText.litTagName} data-node-title=${crumb.title.main} .data=${{
-                      nodeTitle: crumb.title.main,
-                      nodeId: crumb.title.extras.id,
-                      nodeClasses: crumb.title.extras.classes,
-                    } as NodeText.NodeText.NodeTextData}></${NodeText.NodeText.NodeText.litTagName}></a>
-                  </li>`;
-              })}
-            </ul>
-          </div>
-          ${this.#renderOverflowButton('right', this.#userScrollPosition === 'end')}
-        </nav>
-      `, this.#shadow, { host: this });
-      // clang-format on
-    });
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      <nav class="crumbs" aria-label=${i18nString(UIStrings.breadcrumbs)}>
+        ${this.#renderOverflowButton('left', this.#userScrollPosition === 'start')}
+
+        <div class="crumbs-window" @scroll=${this.#onCrumbsWindowScroll}>
+          <ul class="crumbs-scroll-container">
+            ${crumbs.map(crumb => {
+              const crumbClasses = {
+                crumb: true,
+                selected: crumb.selected,
+              };
+              // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
+              return LitHtml.html`
+                <li class=${LitHtml.Directives.classMap(crumbClasses)}
+                  data-node-id=${crumb.node.id}
+                  data-crumb="true"
+                >
+                  <a href="#"
+                    draggable=false
+                    class="crumb-link"
+                    @click=${this.#onCrumbClick(crumb.node)}
+                    @mousemove=${this.#onCrumbMouseMove(crumb.node)}
+                    @mouseleave=${this.#onCrumbMouseLeave(crumb.node)}
+                    @focus=${this.#onCrumbFocus(crumb.node)}
+                    @blur=${this.#onCrumbBlur(crumb.node)}
+                  ><${NodeText.NodeText.NodeText.litTagName} data-node-title=${crumb.title.main} .data=${{
+                    nodeTitle: crumb.title.main,
+                    nodeId: crumb.title.extras.id,
+                    nodeClasses: crumb.title.extras.classes,
+                  } as NodeText.NodeText.NodeTextData}></${NodeText.NodeText.NodeText.litTagName}></a>
+                </li>`;
+            })}
+          </ul>
+        </div>
+        ${this.#renderOverflowButton('right', this.#userScrollPosition === 'end')}
+      </nav>
+    `, this.#shadow, { host: this });
+    // clang-format on
 
     void this.#checkForOverflow();
+    this.#engageResizeObserver();
+    void this.#ensureSelectedNodeIsVisible();
   }
 
   async #ensureSelectedNodeIsVisible(): Promise<void> {

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -309,6 +309,9 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
       return '';
     }
     const usageData = await mainTarget.storageAgent().invoke_getUsageAndQuota({origin});
+    if (usageData.getError()) {
+      return '';
+    }
     const locations = usageData.usageBreakdown.filter(usage => usage.usage)
                           .map(usage => STORAGE_TYPE_NAMES.get(usage.storageType))
                           .map(i18nStringFn => i18nStringFn ? i18nStringFn() : undefined)

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -308,6 +308,8 @@ export class LighthousePanel extends UI.Panel.Panel {
     const reportContainer = this.auditResultsElement.createChild('div', 'lh-vars lh-root lh-devtools');
     // @ts-ignore Expose LHR on DOM for e2e tests
     reportContainer._lighthouseResultForTesting = lighthouseResult;
+    // @ts-ignore Expose Artifacts on DOM for e2e tests
+    reportContainer._lighthouseArtifactsForTesting = artifacts;
 
     const dom = new LighthouseReport.DOM(this.auditResultsElement.ownerDocument as Document, reportContainer);
     const renderer = new LighthouseReportRenderer(dom) as LighthouseReport.ReportRenderer;