chrome-devtools-frontend 1.0.1553956 → 1.0.1555430

package/front_end/panels/timeline/thirdPartyTreeView.css

@@ -4,6 +4,115 @@
  * found in the LICENSE file.
  */
 
+devtools-performance-third-party-tree-view {
+  .background-bar-container {
+    /* Dont need the bars in 3p table */
+    display: none;
+  }
+
+   .timeline-tree-view devtools-toolbar {
+    border: 0;
+   }
+
+  .timeline-tree-view .data-grid .odd {
+    background: none;
+  }
+
+  .timeline-tree-view .data-grid {
+    border-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+
+    th {
+      background-color: var(--sys-color-cdt-base-container);
+      font-weight: var(--ref-typeface-weight-medium);
+      /* Center to give some gap against sorting triangle */
+      text-align: center;
+
+      &.site-column {
+        text-align: left;
+      }
+    }
+
+    tr .numeric-column,
+    tr .site-column {
+      border-left: none;
+      border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+      /* Don't let devtools-button size mess with things */
+      contain: strict;
+      padding: 0;
+      line-height: 21px;
+    }
+
+    .bottom-filler-td,
+    th.sortable {
+      border: none;
+    }
+
+    tr {
+      height: 22px;
+    }
+
+    devtools-button {
+      display: inline-flex;
+      visibility: hidden;
+      margin: 0 8px 0 4px;
+      vertical-align: top;
+    }
+
+    tr.revealed:hover,
+    tr.selected {
+     devtools-button {
+        visibility: visible;
+      }
+    }
+
+    /* Default data-grid has this element on the edge of the rows,
+      we don't need them for the 3P table. So for now set display to none. */
+    .corner,
+    &.data-grid-fits-viewport .corner {
+      display: none;
+    }
+
+    .data-grid-resizer:hover {
+        background: linear-gradient(to right, transparent, transparent 2px, var(--sys-color-divider) 2px, var(--sys-color-divider) 3px, transparent 3px) no-repeat 0 0 / 100% 100%;
+    }
+  }
+
+  .widget.vbox.timeline-tree-view {
+    /* See column width comments in populateColumns() */
+    max-width: min(100%, 550px);
+    min-width: 350px; /* Lower than this, there's not enough room for the entity name */
+    padding: 0 0 0 var(--sys-size-6);
+    border-left: var(--sys-size-1) solid var(--sys-color-divider);
+  }
+
+  /* While timeline treeview name-container uses flexbox to layout, it's overkill for this table's purposes.
+     By not using it, we can benefit from text-overflow:ellipsis applying correctly to names and entity-badges */
+ .timeline-tree-view .data-grid .name-container {
+    display: block;
+    padding-left: 2px;
+
+    .activity-name {
+      display: inline;
+    }
+
+    .activity-icon-container {
+      display: none;
+    }
+
+    .entity-badge {
+      margin-left: var(--sys-size-4);
+      font-weight: var(--ref-typeface-weight-medium);
+      padding: 0 var(--sys-size-2);
+      background-color: var(--sys-color-tonal-container);
+      border-radius: var(--sys-shape-corner-extra-small);
+      height: 16px;
+      line-height: 16px;
+      font-size: var(--sys-typescale-body5-size);
+      display: inline-block;
+    }
+ }
+}
+
 .empty-table {
   display: none;
 }

package/front_end/panels/timeline/timelineDetailsView.css

@@ -60,10 +60,8 @@
     padding: var(--sys-size-4) 0 0;
     height: 100%;
 
-    & > devtools-performance-timeline-summary {
-      /* The category summary can't be more narrow than this, so we'll force a horizontal scrollbar
-        Also this style can't be applied on the element's :host without !important, thus its here. */
-      min-width: 192px;
+    >.widget:has(.timeline-summary) {
+      flex-grow: 0;
     }
   }
 

package/front_end/panels/timeline/timelinePanel.css

@@ -314,116 +314,6 @@
   flex: none;
 }
 
-
-devtools-performance-third-party-tree-view {
-  .background-bar-container {
-    /* Dont need the bars in 3p table */
-    display: none;
-  }
-
-   .timeline-tree-view devtools-toolbar {
-    border: 0;
-   }
-
-  .timeline-tree-view .data-grid .odd {
-    background: none;
-  }
-
-  .timeline-tree-view .data-grid {
-    border-width: 0 !important; /* stylelint-disable-line declaration-no-important */
-
-    th {
-      background-color: var(--sys-color-cdt-base-container);
-      font-weight: var(--ref-typeface-weight-medium);
-      /* Center to give some gap against sorting triangle */
-      text-align: center;
-
-      &.site-column {
-        text-align: left;
-      }
-    }
-
-    tr .numeric-column,
-    tr .site-column {
-      border-left: none;
-      border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
-      /* Don't let devtools-button size mess with things */
-      contain: strict;
-      padding: 0;
-      line-height: 21px;
-    }
-
-    .bottom-filler-td,
-    th.sortable {
-      border: none;
-    }
-
-    tr {
-      height: 22px;
-    }
-
-    devtools-button {
-      display: inline-flex;
-      visibility: hidden;
-      margin: 0 8px 0 4px;
-      vertical-align: top;
-    }
-
-    tr.revealed:hover,
-    tr.selected {
-     devtools-button {
-        visibility: visible;
-      }
-    }
-
-    /* Default data-grid has this element on the edge of the rows,
-      we don't need them for the 3P table. So for now set display to none. */
-    .corner,
-    &.data-grid-fits-viewport .corner {
-      display: none;
-    }
-
-    .data-grid-resizer:hover {
-        background: linear-gradient(to right, transparent, transparent 2px, var(--sys-color-divider) 2px, var(--sys-color-divider) 3px, transparent 3px) no-repeat 0 0 / 100% 100%;
-    }
-  }
-
-  .widget.vbox.timeline-tree-view {
-    /* See column width comments in populateColumns() */
-    max-width: min(100%, 550px);
-    min-width: 350px; /* Lower than this, there's not enough room for the entity name */
-    padding: 0 0 0 var(--sys-size-6);
-    border-left: var(--sys-size-1) solid var(--sys-color-divider);
-  }
-
-  /* While timeline treeview name-container uses flexbox to layout, it's overkill for this table's purposes.
-     By not using it, we can benefit from text-overflow:ellipsis applying correctly to names and entity-badges */
- .timeline-tree-view .data-grid .name-container {
-    display: block;
-    padding-left: 2px;
-
-    .activity-name {
-      display: inline;
-    }
-
-    .activity-icon-container {
-      display: none;
-    }
-
-    .entity-badge {
-      margin-left: var(--sys-size-4);
-      font-weight: var(--ref-typeface-weight-medium);
-      padding: 0 var(--sys-size-2);
-      background-color: var(--sys-color-tonal-container);
-      border-radius: var(--sys-shape-corner-extra-small);
-      height: 16px;
-      line-height: 16px;
-      font-size: var(--sys-typescale-body5-size);
-      display: inline-block;
-    }
- }
-}
-
 devtools-toolbar {
   .history-dropdown-button {
     width: var(--sys-size-23);

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://chromium.googlesource.com/chromium/src
 Version: N/A
-Revision: 0f255732c24a64c7d64af50a8f1624c4c15d7d86
+Revision: b5f7f1049c1c66374a70dc4e9110c063c9c66aea
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/settings/SettingCheckbox.ts

@@ -5,7 +5,7 @@
 
 import '../tooltips/tooltips.js';
 import './SettingDeprecationWarning.js';
-import '../../legacy/legacy.js';
+import '../../kit/kit.js';
 
 import type * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
@@ -90,13 +90,11 @@ export class SettingCheckbox extends HTMLElement {
           <devtools-tooltip id=${id} variant="rich">
             <span>${learnMore.tooltip()}</span><br />
             ${url
-              ? html`<x-link
+              ? html`<devtools-link
                   href=${url}
                   class="link"
-                  jslog=${VisualLogging.link(jsLogContext).track({
-                    click: true,
-                  })}
-                  >${i18nString(UIStrings.learnMore)}</x-link
+                  .jslogContext=${jsLogContext}
+                  >${i18nString(UIStrings.learnMore)}</devtools-link
                 >`
               : Lit.nothing}
           </devtools-tooltip>

package/front_end/ui/legacy/TabbedPane.ts

@@ -9,8 +9,8 @@ import './Toolbar.js';
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as Annotations from '../../models/annotations/annotations.js';
 import * as Geometry from '../../models/geometry/geometry.js';
-import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import {type LitTemplate, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -1203,11 +1203,21 @@ export class TabbedPaneTab {
     if (!this.#tabElement) {
       return;
     }
-    const iconElement = this.#tabElement.querySelector('.ai-icon');
+    const iconElement = this.#tabElement.querySelector('.spark');
     if (iconVisible) {
       if (!iconElement) {
-        const closeButton = this.#tabElement.querySelector('.close-button');
-        this.#tabElement.insertBefore(this.createTabAnnotationIcon(), closeButton);
+        const spark = this.createTabAnnotationIcon();
+        this.#tabElement.appendChild(spark);
+
+        const parentRect = this.#tabElement.parentElement?.getBoundingClientRect();
+        if (!parentRect) {
+          return;
+        }
+        const containerRect = this.tabElement.getBoundingClientRect();
+        const iconWidth = spark.getBoundingClientRect().width;
+        // Position the icon so that its right edge is at the container's right edge.
+        const x = containerRect.x - parentRect.x + containerRect.width - iconWidth;
+        (spark as HTMLElement).style.left = `${x}px`;
       }
     } else {
       iconElement?.remove();
@@ -1393,17 +1403,14 @@ export class TabbedPaneTab {
     return tabElement as HTMLElement;
   }
 
-  private createTabAnnotationIcon(): HTMLDivElement {
-    // TODO(finnur): Replace the ai-icon with the squiggly svg once it becomes available.
-    const iconContainer = document.createElement('div');
-    iconContainer.classList.add('ai-icon');
+  private createTabAnnotationIcon(): Icon {
     const tabAnnotationIcon = new Icon();
-    tabAnnotationIcon.name = 'smart-assistant';
+    tabAnnotationIcon.name = 'spark';
     tabAnnotationIcon.classList.add('small');
-    iconContainer.appendChild(tabAnnotationIcon);
-    iconContainer.setAttribute('title', i18nString(UIStrings.panelContainsAnnotation));
-    iconContainer.setAttribute('aria-label', i18nString(UIStrings.panelContainsAnnotation));
-    return iconContainer;
+    tabAnnotationIcon.classList.add('spark');
+    tabAnnotationIcon.setAttribute('title', i18nString(UIStrings.panelContainsAnnotation));
+    tabAnnotationIcon.setAttribute('aria-label', i18nString(UIStrings.panelContainsAnnotation));
+    return tabAnnotationIcon;
   }
 
   private createCloseIconButton(): Buttons.Button.Button {

package/front_end/ui/legacy/ViewManager.ts

@@ -9,7 +9,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
+import type * as Root from '../../core/root/root.js';
 import type * as Foundation from '../../foundation/foundation.js';
 import {createIcon, type Icon} from '../kit/kit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
@@ -18,7 +18,7 @@ import * as ARIAUtils from './ARIAUtils.js';
 import type {ContextMenu} from './ContextMenu.js';
 import {type EventData, Events as TabbedPaneEvents, TabbedPane} from './TabbedPane.js';
 import {type ItemsProvider, type ToolbarItem, ToolbarMenuButton} from './Toolbar.js';
-import {createTextChild, PromotionManager} from './UIUtils.js';
+import {createTextChild} from './UIUtils.js';
 import type {TabbedViewLocation, View, ViewLocation} from './View.js';
 import viewContainersStyles from './viewContainers.css.js';
 import {
@@ -756,31 +756,6 @@ class TabbedLocation extends Location implements TabbedViewLocation {
     const views = Array.from(this.views.values());
     views.sort((viewa, viewb) => viewa.title().localeCompare(viewb.title()));
 
-    const freestylerView = views.find(view => view.viewId() === 'freestyler');
-    if (freestylerView) {
-      const featureName = Root.Runtime.hostConfig.devToolsFreestyler?.featureName;
-      const promotionId =
-          (freestylerView instanceof PreRegisteredView) ? freestylerView.featurePromotionId() : undefined;
-      // Register this with the PromotionManager and the back-end, in order to make sure that
-      // showing the general ai assistance panel new badge is synchronized.
-      const handler = (): void => {
-        void this.showView(freestylerView, undefined, true);
-        if (promotionId) {
-          PromotionManager.instance().recordFeatureInteraction(promotionId);
-        }
-      };
-      contextMenu.defaultSection().appendItem(freestylerView.title(), handler, {
-        isPreviewFeature: freestylerView.isPreviewFeature(),
-        jslogContext: freestylerView.viewId(),
-        // Request to show a new badge in the native context menu only if:
-        // 1. The promotion manager agrees that we may show it, or 2. the promotion manager doesn't track this badge.
-        // Note that this is only a request to show the new badge, the back-end will decide whether
-        // or not it will show it depending on the user education service.
-        featureName: !promotionId || PromotionManager.instance().maybeShowPromotion(promotionId) ? featureName :
-                                                                                                   undefined,
-      });
-    }
-
     for (const view of views) {
       const title = view.title();
 
@@ -792,11 +767,6 @@ class TabbedLocation extends Location implements TabbedViewLocation {
         continue;
       }
 
-      if (view.viewId() === 'freestyler') {
-        // We have already taken care of this.
-        continue;
-      }
-
       const isPreviewFeature = view.isPreviewFeature();
       contextMenu.defaultSection().appendItem(
           title, this.showView.bind(this, view, undefined, true), {isPreviewFeature, jslogContext: view.viewId()});

package/front_end/ui/legacy/Widget.ts

@@ -998,9 +998,7 @@ export class Widget {
    * assert.isTrue(widget.someDataLoaded);
    * ```
    *
-   * @returns a promise that resolves to a `boolean` when the widget has finished
-   *          updating, the value is `true` if there are no more pending updates,
-   *          and `false` if the update cycle triggered another update.
+   * @returns a promise that resolves when the widget has finished updating.
    */
   get updateComplete(): Promise<void> {
     return this.#updateComplete;

package/front_end/ui/legacy/tabbedPane.css

@@ -521,12 +521,9 @@
   }
 }
 
-.tabbed-pane-header-tab.ai .ai-icon {
-  background-color: var(--sys-color-primary);
-  border-radius: 50%;
-  margin-left: 4px;
-}
+.spark {
+  position: absolute;
+  top: 2px;
 
-.tabbed-pane-header-tab.ai .ai-icon devtools-icon {
-  color: var(--sys-color-on-primary);
+  --icon-default: var(--sys-color-primary);
 }

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -4055,6 +4055,7 @@ export const knownContextValues = new Set([
   'translate',
   'transport',
   'tree',
+  'trigger-scope',
   'tritanopia',
   'trust-tokens',
   'trusted-type-violation',

package/package.json

@@ -104,5 +104,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1553956"
+  "version": "1.0.1555430"
 }