chrome-devtools-frontend 1.0.1026673 → 1.0.1027150

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/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();
 
@@ -101,7 +104,7 @@ export class IgnoreListManager implements SDK.TargetManager.SDKModelObserver<SDK
       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);
@@ -110,16 +113,20 @@ export class IgnoreListManager implements SDK.TargetManager.SDKModelObserver<SDK
 
   isUserOrSourceMapIgnoreListedURL(url: Platform.DevToolsPath.UrlString, sourceMap: SDK.SourceMap.SourceMap|null):
       boolean {
-    const userIgnoreListed = this.isUserIgnoreListedURL(url);
-    const sourceMapIgnoreListed = sourceMap?.hasIgnoreListHint(url) ?? false;
-    return userIgnoreListed || sourceMapIgnoreListed;
+    if (this.isUserIgnoreListedURL(url)) {
+      return true;
+    }
+    if (this.automaticallyIgnoreListKnownThirdPartyScripts && sourceMap?.hasIgnoreListHint(url)) {
+      return true;
+    }
+    return false;
   }
 
   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();
@@ -208,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/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/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/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;

package/front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts

@@ -26,6 +26,15 @@ const UIStrings = {
   */
   ignoreListContentScriptsExtension: 'Add content scripts to ignore list (extension scripts in the page)',
   /**
+  *@description Text in Framework Ignore List Settings Tab of the Settings
+  */
+  automaticallyIgnoreListKnownThirdPartyScripts: 'Automatically add known third-party scripts to ignore list',
+  /**
+  *@description Text in Framework Ignore List Settings Tab of the Settings
+  */
+  automaticallyIgnoreListKnownThirdPartyScriptsTooltip:
+      'Add sources from the `x_google_ignoreList` field from source maps to the ignore list',
+  /**
   *@description Ignore List label in Framework Ignore List Settings Tab of the Settings
   */
   ignoreList: 'Ignore List',
@@ -98,6 +107,13 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
         Common.Settings.Settings.instance().moduleSetting('skipContentScripts'), true));
     UI.Tooltip.Tooltip.install(ignoreListContentScripts, i18nString(UIStrings.ignoreListContentScriptsExtension));
 
+    const automaticallyIgnoreList = this.contentElement.createChild('div', 'automatically-ignore-list');
+    automaticallyIgnoreList.appendChild(UI.SettingsUI.createSettingCheckbox(
+        i18nString(UIStrings.automaticallyIgnoreListKnownThirdPartyScripts),
+        Common.Settings.Settings.instance().moduleSetting('automaticallyIgnoreListKnownThirdPartyScripts'), true));
+    UI.Tooltip.Tooltip.install(
+        automaticallyIgnoreList, i18nString(UIStrings.automaticallyIgnoreListKnownThirdPartyScriptsTooltip));
+
     this.ignoreListLabel = i18nString(UIStrings.ignoreList);
     this.disabledLabel = i18nString(UIStrings.disabled);
 

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -235,6 +235,9 @@ export class DebuggerPlugin extends Plugin {
     Common.Settings.Settings.instance()
         .moduleSetting('skipContentScripts')
         .addChangeListener(this.showIgnoreListInfobarIfNeeded, this);
+    Common.Settings.Settings.instance()
+        .moduleSetting('automaticallyIgnoreListKnownThirdPartyScripts')
+        .addChangeListener(this.showIgnoreListInfobarIfNeeded, this);
 
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.callFrameChanged, this);
     this.liveLocationPool = new Bindings.LiveLocation.LiveLocationPool();
@@ -1625,6 +1628,9 @@ export class DebuggerPlugin extends Plugin {
     Common.Settings.Settings.instance()
         .moduleSetting('skipContentScripts')
         .removeChangeListener(this.showIgnoreListInfobarIfNeeded, this);
+    Common.Settings.Settings.instance()
+        .moduleSetting('automaticallyIgnoreListKnownThirdPartyScripts')
+        .removeChangeListener(this.showIgnoreListInfobarIfNeeded, this);
     super.dispose();
 
     UI.Context.Context.instance().removeFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.callFrameChanged, this);

package/front_end/ui/components/panel_feedback/PreviewToggle.ts

@@ -72,23 +72,22 @@ export class PreviewToggle extends HTMLElement {
     render(
       html`
       <div class="container">
-        <div class="checkbox-line">
-          <label class="experiment-preview">
-            <input type="checkbox" ?checked=${checked} @change=${this.#checkboxChanged} aria-label=${this.#name}/>
-            <${IconButton.Icon.Icon.litTagName} .data=${{
-              iconName: 'ic_preview_feature',
-              width: '16px',
-              height: '16px',
-              color: 'var(--color-text-secondary)',
-            } as IconButton.Icon.IconData}>
-            </${IconButton.Icon.Icon.litTagName}>${this.#name}
-          </label>
-          ${this.#feedbackURL && !this.#helperText
-            ? html`<div class="feedback"><x-link class="x-link" href=${this.#feedbackURL}>${i18nString(UIStrings.shortFeedbackLink)}</x-link></div>`
-            : nothing}
-        </div>
+        <label class="experiment-preview">
+          <input type="checkbox" ?checked=${checked} @change=${this.#checkboxChanged} aria-label=${this.#name}/>
+          <${IconButton.Icon.Icon.litTagName} .data=${{
+            iconName: 'ic_preview_feature',
+            width: '16px',
+            height: '16px',
+            color: 'var(--color-text-secondary)',
+          } as IconButton.Icon.IconData}>
+          </${IconButton.Icon.Icon.litTagName}>${this.#name}
+        </label>
+        <div class="spacer"></div>
+        ${this.#feedbackURL && !this.#helperText
+          ? html`<div class="feedback"><x-link class="x-link" href=${this.#feedbackURL}>${i18nString(UIStrings.shortFeedbackLink)}</x-link></div>`
+          : nothing}
         ${this.#learnMoreURL
-          ? html`<x-link class="x-link" href=${this.#learnMoreURL}>${i18nString(UIStrings.learnMoreLink)}</x-link>`
+          ? html`<div class="learn-more"><x-link class="x-link" href=${this.#learnMoreURL}>${i18nString(UIStrings.learnMoreLink)}</x-link></div>`
           : nothing}
         <div class="helper">
           ${this.#helperText && this.#feedbackURL

package/front_end/ui/components/panel_feedback/previewToggle.css

@@ -8,35 +8,33 @@
   display: block;
 }
 
-.experiment-preview {
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 4px;
+}
+
+.experiment-preview,
+.feedback,
+.learn-more {
   display: flex;
   align-items: center;
 }
 
 .helper {
+  flex-basis: 100%;
   text-align: center;
   font-style: italic;
 }
 
-.feedback {
-  text-align: right;
-}
-
-.checkbox-line {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.container {
-  padding: 4px;
+.spacer {
+  flex: 1;
 }
 
 .x-link {
   color: var(--color-primary);
   text-decoration-line: underline;
-  margin: 4px;
+  margin: 0 4px;
 }
 
 .feedback .x-link {

package/front_end/ui/legacy/ListControl.ts

@@ -428,6 +428,10 @@ export class ListControl<T> {
       }
       if (newElement) {
         ARIAUtils.setSelected(newElement, true);
+        const text = newElement.textContent;
+        if (text) {
+          ARIAUtils.alert(text);
+        }
       }
       ARIAUtils.setActiveDescendant(this.element, newElement);
     }

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -30,6 +30,7 @@
 
 import * as Common from '../../../../core/common/common.js';
 import type * as Components from '../utils/utils.js';
+import * as Root from '../../../../core/root/root.js';
 import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as LinearMemoryInspector from '../../../components/linear_memory_inspector/linear_memory_inspector.js';
@@ -222,8 +223,12 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
       return;
     }
 
+    const includedWebIdlTypes = webIdlType.includes?.map(className => domPinnedProperties[className]) ?? [];
+    const includedWebIdlProps = includedWebIdlTypes.flatMap(webIdlType => Object.entries(webIdlType.props ?? {}));
+    const webIdlProps = {...webIdlType.props, ...Object.fromEntries(includedWebIdlProps)};
+
     for (const property of properties) {
-      const webIdlProperty = webIdlType?.props?.[property.name];
+      const webIdlProperty = webIdlProps[property.name];
       if (webIdlProperty) {
         property.webIdl = {info: webIdlProperty};
       }
@@ -1118,10 +1123,12 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       this.expandedValueElement = this.createExpandedValueElement(this.property.value);
     }
 
+    const experiment = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.IMPORTANT_DOM_PROPERTIES);
+
     let adorner: Element|string = '';
     let container: Element;
 
-    if (this.property.webIdl?.applicable) {
+    if (this.property.webIdl?.applicable && experiment) {
       const icon = new IconButton.Icon.Icon();
       icon.data = {
         iconName: 'star_outline',
@@ -1148,7 +1155,10 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.listItemElement.removeChildren();
     this.rowContainer = (container as HTMLElement);
     this.listItemElement.appendChild(this.rowContainer);
-    this.listItemElement.dataset.webidl = this.property.webIdl?.applicable ? 'true' : 'false';
+
+    if (experiment) {
+      this.listItemElement.dataset.webidl = this.property.webIdl?.applicable ? 'true' : 'false';
+    }
   }
 
   private updatePropertyPath(): void {

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1026673"
+  "version": "1.0.1027150"
 }