chrome-devtools-frontend 1.0.1019968 → 1.0.1020516

package/front_end/core/i18n/locales/en-US.json

@@ -7511,9 +7511,6 @@
   "panels/network/RequestHeadersView.ts | provisionalHeadersAreShownS": {
     "message": "Provisional headers are shown. Disable cache to see full headers."
   },
-  "panels/network/RequestHeadersView.ts | recordedAttribution": {
-    "message": "Recorded attribution with trigger-data: {PH1}"
-  },
   "panels/network/RequestHeadersView.ts | referrerPolicy": {
     "message": "Referrer Policy"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -7511,9 +7511,6 @@
   "panels/network/RequestHeadersView.ts | provisionalHeadersAreShownS": {
     "message": "P̂ŕôv́îśîón̂ál̂ h́êád̂ér̂ś âŕê śĥóŵń. D̂íŝáb̂ĺê ćâćĥé t̂ó ŝéê f́ûĺl̂ h́êád̂ér̂ś."
   },
-  "panels/network/RequestHeadersView.ts | recordedAttribution": {
-    "message": "R̂éĉór̂d́êd́ ât́t̂ŕîb́ût́îón̂ ẃît́ĥ trigger-data: {PH1}"
-  },
   "panels/network/RequestHeadersView.ts | referrerPolicy": {
     "message": "R̂éf̂ér̂ŕêŕ P̂ól̂íĉý"
   },

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -206,6 +206,8 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
   constructor() {
     super(true);
 
+    this.contentElement.classList.add('styles-sidebar-computed-style-widget');
+
     this.computedStyleModel = new ComputedStyleModel();
     this.computedStyleModel.addEventListener(Events.ComputedStyleChanged, this.update, this);
 

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -35,12 +35,10 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import * as ElementsComponents from './components/components.js';
+import {linkifyDeferredNodeReference} from './DOMLinkifier.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsTreeElement, InitialChildrenLimit} from './ElementsTreeElement.js';
 import elementsTreeOutlineStyles from './elementsTreeOutline.css.js';
@@ -1631,45 +1629,13 @@ export class ShortcutTreeElement extends UI.TreeOutline.TreeElement {
       text = '<' + text + '>';
     }
     title.textContent = '\u21AA ' + text;
+
+    const link = (linkifyDeferredNodeReference(nodeShortcut.deferredNode) as Element);
+    UI.UIUtils.createTextChild(this.listItemElement, ' ');
+    link.classList.add('elements-tree-shortcut-link');
+    link.textContent = i18nString(UIStrings.reveal);
+    this.listItemElement.appendChild(link);
     this.nodeShortcut = nodeShortcut;
-    this.addRevealAdorner();
-  }
-
-  addRevealAdorner(): void {
-    const adorner = new Adorners.Adorner.Adorner();
-    adorner.classList.add('adorner-reveal');
-    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-        ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL);
-    const name = config.name;
-    const adornerContent = document.createElement('span');
-    const linkIcon = new IconButton.Icon.Icon();
-    linkIcon
-        .data = {iconName: 'ic_show_node_16x16', color: 'var(--color-text-disabled)', width: '12px', height: '12px'};
-    const slotText = document.createElement('span');
-    slotText.textContent = name;
-    adornerContent.append(linkIcon);
-    adornerContent.append(slotText);
-    adornerContent.classList.add('adorner-with-icon');
-    adorner.data = {
-      name,
-      content: adornerContent,
-    };
-    this.listItemElement.appendChild(adorner);
-    const onClick = (((): void => {
-                       this.nodeShortcut.deferredNode.resolve(
-                           node => {
-                             void Common.Revealer.reveal(node);
-                           },
-                       );
-                     }) as EventListener);
-    adorner.addInteraction(onClick, {
-      isToggle: false,
-      shouldPropagateOnKeydown: false,
-      ariaLabelDefault: i18nString(UIStrings.reveal),
-      ariaLabelActive: i18nString(UIStrings.reveal),
-    });
-    adorner.addEventListener('mousedown', e => e.consume(), false);
-    ElementsPanel.instance().registerAdorner(adorner);
   }
 
   get hovered(): boolean {

package/front_end/panels/elements/TopLayerContainer.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as ElementsComponents from './components/components.js';
@@ -80,14 +79,7 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
     const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
         ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
     const adornerContent = document.createElement('span');
-    adornerContent.classList.add('adorner-with-icon');
-    const linkIcon = new IconButton.Icon.Icon();
-    linkIcon
-        .data = {iconName: 'ic_show_node_16x16', color: 'var(--color-text-disabled)', width: '12px', height: '12px'};
-    const adornerText = document.createElement('span');
-    adornerText.textContent = ` top-layer (${topLayerElementIndex}) `;
-    adornerContent.append(linkIcon);
-    adornerContent.append(adornerText);
+    adornerContent.textContent = ` top-layer (${topLayerElementIndex}) `;
     const adorner = element?.adorn(config, adornerContent);
     if (adorner) {
       const onClick = (((): void => {

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

@@ -31,7 +31,6 @@ export enum RegisteredAdorners {
   CONTAINER = 'container',
   SLOT = 'slot',
   TOP_LAYER = 'top-layer',
-  REVEAL = 'reveal',
 }
 
 // This enum-like const object serves as the authoritative registry for all the
@@ -80,12 +79,6 @@ export function getRegisteredAdorner(which: RegisteredAdorners): RegisteredAdorn
         category: AdornerCategories.LAYOUT,
         enabledByDefault: true,
       };
-    case RegisteredAdorners.REVEAL:
-      return {
-        name: 'reveal',
-        category: AdornerCategories.DEFAULT,
-        enabledByDefault: true,
-      };
   }
 }
 

package/front_end/panels/elements/computedStyleSidebarPane.css

@@ -37,3 +37,7 @@
     border: 1px solid ButtonText;
   }
 }
+
+.styles-sidebar-computed-style-widget {
+  min-height: auto;
+}

package/front_end/panels/elements/elementsTreeOutline.css

@@ -27,10 +27,6 @@
   display: none;
 }
 
-.adorner-reveal {
-  margin: 3px;
-}
-
 .adorner-with-icon {
   display: flex;
   justify-content: center;

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -302,6 +302,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;
 
     const dom = new LighthouseReport.DOM(this.auditResultsElement.ownerDocument as Document, reportContainer);
     const renderer = new LighthouseReportRenderer(dom) as LighthouseReport.ReportRenderer;

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -143,6 +143,7 @@ export class StartView extends UI.Widget.Widget {
       const checkbox = new UI.Toolbar.ToolbarSettingCheckbox(preset.setting, preset.description());
       const row = formElements.createChild('div', 'vbox lighthouse-launcher-row');
       row.appendChild(checkbox.element);
+      checkbox.element.setAttribute('data-lh-category', preset.configID);
       this.checkboxes.push({preset, checkbox});
       if (mode && !preset.supportedModes.includes(mode)) {
         checkbox.setEnabled(false);

package/front_end/panels/network/RequestHeadersView.ts

@@ -195,13 +195,6 @@ const UIStrings = {
   */
   toUseThisResourceFromADifferentOrigin:
       'To use this resource from a different origin, the server may relax the cross-origin resource policy response header:',
-  /**
-   * @description Shown in the network panel for network requests that meet special criteria.
-   * 'Attribution' is a term used by the "Attribution Reporting API" and refers to an event, e.g.
-   * buying an item in an online store after an ad was clicked.
-   * @example {foo} PH1
-   */
-  recordedAttribution: 'Recorded attribution with `trigger-data`: {PH1}',
   /**
   *@description Label for a link from the network panel's headers view to the file in which
   * header overrides are defined in the sources panel.
@@ -322,22 +315,7 @@ export class RequestHeadersView extends UI.Widget.VBox {
   private formatHeaderObject(header: BlockedReasonDetailDescriptor): DocumentFragment {
     const fragment = document.createDocumentFragment();
     if (header.headerNotSet) {
-      fragment.createChild('div', 'header-badge header-badge-error header-badge-text').textContent = 'not-set';
-    }
-    // Highlight successful Attribution Reporting API redirects. If the request was
-    // not canceled, then something went wrong.
-    if (header.name.toLowerCase() === 'location' && this.request.canceled) {
-      const url = new URL(header.value?.toString() || '', this.request.parsedURL.securityOrigin());
-      const triggerData = getTriggerDataFromAttributionRedirect(url);
-      if (triggerData) {
-        fragment.createChild('div', 'header-badge header-badge-success header-badge-text').textContent =
-            'Attribution Reporting API';
-        header.details = {
-          explanation: (): string => i18nString(UIStrings.recordedAttribution, {PH1: triggerData}),
-          examples: [],
-          link: null,
-        };
-      }
+      fragment.createChild('div', 'header-badge header-badge-text').textContent = 'not-set';
     }
     const colon = header.value ? ': ' : '';
     fragment.createChild('div', 'header-name').textContent = header.name + colon;
@@ -817,19 +795,6 @@ export class Category extends UI.TreeOutline.TreeElement {
   }
 }
 
-/**
- * Returns the value for the `trigger-data` search parameter iff the provided
- * url is a valid attribution redirect as specified by the Attribution
- * Reporting API.
- */
-function getTriggerDataFromAttributionRedirect(url: URL): string|null {
-  if (url.pathname === '/.well-known/attribution-reporting/trigger-attribution' &&
-      url.searchParams.has('trigger-data')) {
-    return url.searchParams.get('trigger-data');
-  }
-  return null;
-}
-
 interface BlockedReasonDetailDescriptor {
   name: string;
   value: Object|null;

package/front_end/panels/network/requestHeadersTree.css

@@ -112,21 +112,13 @@
 .tree-outline .header-badge {
   display: inline;
   margin-right: 0.75em;
+  background-color: var(--override-error-background-color);
   color: var(--override-error-text-color);
   border-radius: 100vh;
   padding-left: 6px;
   padding-right: 6px;
 }
 
-.tree-outline .header-badge-error {
-  background-color: var(--override-error-background-color);
-}
-
-.tree-outline .header-badge-success {
-  background-color: var(--color-accent-green);
-  text-transform: uppercase;
-}
-
 .tree-outline .header-value {
   display: inline;
   margin-right: 1em;

package/front_end/panels/sources/CSSPlugin.ts

@@ -121,11 +121,11 @@ function findColorsAndCurves(
       if (content) {
         const parsedColor = Common.Color.Color.parse(content);
         if (parsedColor) {
-          onColor(from, parsedColor, content);
+          onColor(node.from, parsedColor, content);
         } else {
           const parsedCurve = UI.Geometry.CubicBezier.parse(content);
           if (parsedCurve) {
-            onCurve(from, parsedCurve, content);
+            onCurve(node.from, parsedCurve, content);
           }
         }
       }

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -179,7 +179,7 @@ export class DebuggerPlugin extends Plugin {
   private readonly breakpointManager: Bindings.BreakpointManager.BreakpointManager;
   // Manages pop-overs shown when the debugger is active and the user
   // hovers over an expression
-  private readonly popoverHelper: UI.PopoverHelper.PopoverHelper;
+  private popoverHelper: UI.PopoverHelper.PopoverHelper|null = null;
   private scriptFileForDebuggerModel:
       Map<SDK.DebuggerModel.DebuggerModel, Bindings.ResourceScriptMapping.ResourceScriptFile>;
   // The current set of breakpoints for this file. The locations in
@@ -214,12 +214,6 @@ export class DebuggerPlugin extends Plugin {
     this.scriptsPanel = SourcesPanel.instance();
     this.breakpointManager = Bindings.BreakpointManager.BreakpointManager.instance();
 
-    this.popoverHelper =
-        new UI.PopoverHelper.PopoverHelper(this.scriptsPanel.element, this.getPopoverRequest.bind(this));
-    this.popoverHelper.setDisableOnClick(true);
-    this.popoverHelper.setTimeout(250, 250);
-    this.popoverHelper.setHasPadding(true);
-
     this.breakpointManager.addEventListener(
         Bindings.BreakpointManager.Events.BreakpointAdded, this.breakpointChange, this);
     this.breakpointManager.addEventListener(
@@ -349,6 +343,12 @@ export class DebuggerPlugin extends Plugin {
       void this.refreshBreakpoints();
     }
     void this.callFrameChanged();
+
+    this.popoverHelper?.dispose();
+    this.popoverHelper = new UI.PopoverHelper.PopoverHelper(editor, this.getPopoverRequest.bind(this));
+    this.popoverHelper.setDisableOnClick(true);
+    this.popoverHelper.setTimeout(250, 250);
+    this.popoverHelper.setHasPadding(true);
   }
 
   static accepts(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
@@ -422,7 +422,7 @@ export class DebuggerPlugin extends Plugin {
   }
 
   willHide(): void {
-    this.popoverHelper.hidePopover();
+    this.popoverHelper?.hidePopover();
   }
 
   populateLineGutterContextMenu(contextMenu: UI.ContextMenu.ContextMenu, editorLineNumber: number): void {
@@ -739,7 +739,7 @@ export class DebuggerPlugin extends Plugin {
       this.setControlDown(false);
     }
     if (event.key === Platform.KeyboardUtilities.ESCAPE_KEY) {
-      if (this.popoverHelper.isPopoverVisible()) {
+      if (this.popoverHelper && this.popoverHelper.isPopoverVisible()) {
         this.popoverHelper.hidePopover();
         event.consume();
         return true;
@@ -1000,7 +1000,7 @@ export class DebuggerPlugin extends Plugin {
   // Highlight the locations the debugger can continue to (when
   // Control is held)
   private async showContinueToLocations(): Promise<void> {
-    this.popoverHelper.hidePopover();
+    this.popoverHelper?.hidePopover();
     const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (!executionContext || !this.editor) {
       return;
@@ -1581,8 +1581,8 @@ export class DebuggerPlugin extends Plugin {
     }
     this.scriptFileForDebuggerModel.clear();
 
-    this.popoverHelper.hidePopover();
-    this.popoverHelper.dispose();
+    this.popoverHelper?.hidePopover();
+    this.popoverHelper?.dispose();
 
     this.breakpointManager.removeEventListener(
         Bindings.BreakpointManager.Events.BreakpointAdded, this.breakpointChange, this);

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.1019968"
+  "version": "1.0.1020516"
 }