chrome-devtools-frontend 1.0.1555174 → 1.0.1555430

package/front_end/panels/timeline/components/timelineSummary.css

@@ -3,69 +3,70 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
+@scope to (devtools-widget > *){
+  .timeline-summary {
+    max-height: 100%;
+    overflow: hidden auto;
+    scrollbar-width: thin; /* ~11px wide reserved for gutter */
+    font-size: var(--sys-typescale-body4-size);
+    flex-direction: column;
+    padding: 0 var(--sys-size-6) var(--sys-size-4) var(--sys-size-8) ;
+    /* The category summary can't be more narrow than this, so we'll force a horizontal scrollbar
+    */
+    min-width: 192px;
+  }
 
-:host {
-  max-height: 100%;
-  overflow: hidden auto;
-  scrollbar-width: thin; /* ~11px wide reserved for gutter */
-}
+  .summary-range {
+    font-weight: var(--ref-typeface-weight-medium);
+    height: 24.5px;
+    line-height: 22px;
+  }
 
-.timeline-summary {
-  font-size: var(--sys-typescale-body4-size);
-  flex-direction: column;
-  padding: 0 var(--sys-size-6) var(--sys-size-4) var(--sys-size-8) ;
-}
+  .category-summary {
+    gap: var(--sys-size-4);
+    display: flex;
+    flex-direction: column;
+  }
 
-.summary-range {
-  font-weight: var(--ref-typeface-weight-medium);
-  height: 24.5px;
-  line-height: 22px;
-}
+  .category-row {
+    min-height: 16px;
+    line-height: 16px;
+  }
 
-.category-summary {
-  gap: var(--sys-size-4);
-  display: flex;
-  flex-direction: column;
-}
+  .category-swatch {
+    display: inline-block;
+    width: var(--sys-size-6);
+    height: var(--sys-size-6);
+    margin-right: var(--sys-size-4);
+    top: var(--sys-size-1);
+    position: relative;
+    border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+  }
 
-.category-row {
-  min-height: 16px;
-  line-height: 16px;
-}
+  .category-name {
+    display: inline;
+    word-break: break-all;
+  }
 
-.category-swatch {
-  display: inline-block;
-  width: var(--sys-size-6);
-  height: var(--sys-size-6);
-  margin-right: var(--sys-size-4);
-  top: var(--sys-size-1);
-  position: relative;
-  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
-}
+  .category-value {
+    text-align: right;
+    position: relative;
+    float: right;
+    z-index: 0;
+    width: var(--sys-size-19);
+  }
 
-.category-name {
-  display: inline;
-  word-break: break-all;
-}
-
-.category-value {
-  text-align: right;
-  position: relative;
-  float: right;
-  z-index: 0;
-  width: var(--sys-size-19);
-}
-
-.background-bar-container {
-  position: absolute;
-  inset: 0 0 0 var(--sys-size-3);
-  z-index: -1;
-}
+  .background-bar-container {
+    position: absolute;
+    inset: 0 0 0 var(--sys-size-3);
+    z-index: -1;
+  }
 
-.background-bar {
-  width: 100%;
-  float: right;
-  height: var(--sys-size-8);
-  background-color: var(--sys-color-surface-yellow);
-  border-bottom: var(--sys-size-1) solid var(--sys-color-yellow-outline);
+  .background-bar {
+    width: 100%;
+    float: right;
+    height: var(--sys-size-8);
+    background-color: var(--sys-color-surface-yellow);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-yellow-outline);
+  }
 }

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/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';

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/package.json

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