chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/ui/legacy/softDropDownButton.css

@@ -12,14 +12,18 @@ button.soft-dropdown {
   background: none;
   max-width: 120px;
 
-  devtools-icon {
-    top: 1px;
+  &[disabled] {
+    background: var(--sys-color-state-disabled-container);
+    color: var(--sys-color-state-disabled);
+
+    devtools-icon {
+      color: var(--sys-color-state-disabled);
+    }
   }
-}
 
-button.soft-dropdown[disabled] {
-  background: var(--sys-color-state-disabled-container);
-  color: var(--sys-color-state-disabled);
+  devtools-icon {
+    top: var(--sys-size-2);
+  }
 }
 
 button.soft-dropdown > .title {

package/front_end/ui/legacy/tabbedPane.css

@@ -241,7 +241,7 @@
 }
 
 .tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-content {
-  padding: var(--sys-size-10);
+  padding-top: var(--sys-size-10);
   overflow-x: hidden;
 }
 

package/front_end/ui/legacy/themeColors.css

@@ -387,6 +387,11 @@
   * Color for scrollable area shadow gradient
   */
   --app-color-scroll-area-shadow-start: color-mix(in sRGB, var(--ref-palette-neutral0) 30%, transparent);
+
+  /**
+   * Colors for element panel sidebar subtitle
+   */
+  --app-color-element-sidebar-subtitle: var(--ref-palette-neutral50);
 }
 
 :root.baseline-default {
@@ -761,4 +766,9 @@
   * Color for scrollable area shadow gradient
   */
   --app-color-scroll-area-shadow-start: color-mix(in sRGB, var(--ref-palette-neutral100) 30%, transparent);
+
+  /**
+   * Colors for element panel sidebar subtitle
+   */
+  --app-color-element-sidebar-subtitle: var(--sys-color-token-subtle);
 }

package/front_end/ui/legacy/toolbar.css

@@ -82,20 +82,17 @@ devtools-issue-counter.main-toolbar {
 .toolbar-dropdown-arrow {
   pointer-events: none;
   flex: none;
-  top: 1px;
+  top: 2px;
 }
 
 .toolbar-select-container .toolbar-dropdown-arrow {
-  left: -5px;
+  left: -7px;
 }
 
 .toolbar-button.dark-text .toolbar-dropdown-arrow {
   color: var(--sys-color-on-surface);
 }
 
-select.toolbar-item:disabled + .toolbar-dropdown-arrow {
-  opacity: 50%;
-}
 /* Toolbar item */
 
 .toolbar-button {
@@ -163,6 +160,10 @@ select.toolbar-item:disabled + .toolbar-dropdown-arrow {
     background-color: var(--sys-color-state-disabled-container);
     color: var(--sys-color-state-disabled);
   }
+
+  &:first-child {
+    margin-left: var(--sys-size-2);
+  }
 }
 
 .toolbar-has-dropdown-shrinkable {
@@ -318,29 +319,51 @@ it. */
 .toolbar-select-container {
   display: inline-flex;
   flex-shrink: 0;
-  margin-right: 6px;
+  padding-left: 2px;
 }
 
 select.toolbar-item {
-  min-width: 38px;
+  min-width: var(--sys-size-14);
   appearance: none;
-  border: 1px solid transparent;
-  padding: 0 13px 0 5px;
+  padding: 0 var(--sys-size-9) 0 var(--sys-size-5);
   margin-right: -10px;
   position: relative;
-  height: 22px;
-  margin-top: 2px;
-  margin-bottom: 2px;
+  height: var(--sys-size-9);
+  border-radius: var(--sys-shape-corner-extra-small);
+
+  &:disabled,
+  &:disabled:hover,
+  &:disabled:active,
+  &:disabled:hover:active {
+    background-color: var(--sys-color-state-disabled-container);
+    color: var(--sys-color-state-disabled);
+
+    & + .toolbar-dropdown-arrow {
+      color: var(--sys-color-state-disabled);
+    }
+  }
+
+  &:hover {
+    background-color: var(--sys-color-state-hover-on-subtle);
+  }
+
+  &:active {
+    background-color: var(--sys-color-state-ripple-neutral-on-subtle);
+  }
+
+  &:hover:active {
+    background:
+      linear-gradient(var(--sys-color-state-hover-on-subtle), var(--sys-color-state-hover-on-subtle)),
+      linear-gradient(var(--sys-color-state-ripple-neutral-on-subtle), var(--sys-color-state-ripple-neutral-on-subtle));
+  }
 }
 
 button.toolbar-item:focus-visible,
 select.toolbar-item:focus-visible {
-  background: var(--sys-color-state-hover-on-subtle);
-  border-radius: 2px;
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
 
   &.toolbar-has-dropdown {
     background: none;
-    border-radius: var(--sys-shape-corner-extra-small);
   }
 }
 
@@ -349,9 +372,6 @@ select.toolbar-item:focus-visible > * {
   border-radius: 7px;
 }
 
-select.toolbar-item:not(.toolbar-has-dropdown):disabled {
-  opacity: 50%;
-}
 /* Input */
 
 .toolbar-input {
@@ -396,6 +416,10 @@ select.toolbar-item:not(.toolbar-has-dropdown):disabled {
   }
 }
 
+.toolbar-filter .toolbar-input-clear-button {
+  margin-right: var(--sys-size-4);
+}
+
 .toolbar-input-empty .toolbar-input-clear-button {
   display: none;
 }

package/front_end/ui/legacy/treeoutline.css

@@ -172,8 +172,6 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
   padding: var(--sys-size-3) 0 var(--sys-size-3) var(--sys-size-3);
 }
 
-/* It does not look like the linter works with CSS nesting correctly. */
-/* stylelint-disable no-descending-specificity */
 .tree-outline.tree-variant-navigation li,
 .tree-outline.hide-selection-when-blurred.tree-variant-navigation li {
   height: var(--sys-size-10);
@@ -218,7 +216,6 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
     color: var(--app-color-navigation-drawer-label-selected);
   }
 }
-/* stylelint-enable no-descending-specificity */
 
 ol.tree-outline.tree-variant-navigation:not(.hide-selection-when-blurred) li.selected:focus .selection {
   background-color: var(--app-color-navigation-drawer-background-selected);

package/front_end/ui/lit-html/static.test.ts

@@ -7,6 +7,8 @@ import * as i18nRaw from '../../third_party/i18n/i18n.js';
 
 import * as LitHtml from './lit-html.js';
 
+const {html} = LitHtml;
+
 const templateArray = (value: string[]) => {
   // We assume here it's okay to lose the `raw` value from the TemplateStringsArray
   // for the purposes of testing.
@@ -61,7 +63,7 @@ describe('Static', () => {
 
   describe('rendering', () => {
     it('renders non-statics', () => {
-      const tmpl = LitHtml.html`Hello, world ${123}!`;
+      const tmpl = html`Hello, world ${123}!`;
       const target = document.createElement('div');
       LitHtml.render(tmpl, target, {host: this});
 
@@ -70,7 +72,7 @@ describe('Static', () => {
 
     it('renders static tags', () => {
       const tag = LitHtml.literal`div`;
-      const tmpl = LitHtml.html`<${tag}>Hello, world!</${tag}>`;
+      const tmpl = html`<${tag}>Hello, world!</${tag}>`;
       const target = document.createElement('section');
       LitHtml.render(tmpl, target, {host: this});
 
@@ -81,7 +83,7 @@ describe('Static', () => {
     it('renders multiple', () => {
       const tag = LitHtml.literal`div`;
       const message = 'Hello, everyone!';
-      const tmpl = LitHtml.html`<${tag} .data={{x: 1}}>${1}${2}${3}, ${message}! ${'Static value'}!</${tag}>`;
+      const tmpl = html`<${tag} .data={{x: 1}}>${1}${2}${3}, ${message}! ${'Static value'}!</${tag}>`;
 
       const target = document.createElement('div');
       LitHtml.render(tmpl, target, {host: this});
@@ -94,7 +96,7 @@ describe('Static', () => {
       const tag1 = LitHtml.literal`div`;
       const tag2 = LitHtml.literal`p`;
       const tmpls = [tag1, tag2].map(tag => {
-        return LitHtml.html`<${tag}>I am ${tag.value}</${tag}>`;
+        return html`<${tag}>I am ${tag.value}</${tag}>`;
       });
 
       const target = document.createElement('div');
@@ -130,8 +132,7 @@ describe('Static', () => {
       const strings = i18nInstance.registerFileStrings('test.ts', uiStrings);
       setLocale('en-US');
 
-      const result =
-          LitHtml.i18nTemplate(strings, uiStrings.placeholder, {string: 'STRING', template: LitHtml.html`TEMPLATE`});
+      const result = LitHtml.i18nTemplate(strings, uiStrings.placeholder, {string: 'STRING', template: html`TEMPLATE`});
       const element = LitHtml.render(result, document.createElement('div'), {host: this});
       assert.deepStrictEqual(
           (element.parentNode as HTMLDivElement).innerText, 'a message with a STRING and TEMPLATE placeholder');
@@ -143,8 +144,7 @@ describe('Static', () => {
       const strings = i18nInstance.registerFileStrings('test.ts', uiStrings);
       setLocale('de');
 
-      const result =
-          LitHtml.i18nTemplate(strings, uiStrings.placeholder, {string: 'STRING', template: LitHtml.html`TEMPLATE`});
+      const result = LitHtml.i18nTemplate(strings, uiStrings.placeholder, {string: 'STRING', template: html`TEMPLATE`});
       const element = LitHtml.render(result, document.createElement('div'), {host: this});
       assert.deepStrictEqual(
           (element.parentNode as HTMLDivElement).innerText, 'a message with a TEMPLATE and STRING placeholder');

package/front_end/ui/visual_logging/Debugging.ts

@@ -4,7 +4,7 @@
 
 import {assertNotNullOrUndefined} from '../../core/platform/platform.js';
 
-import {type Loggable} from './Loggable.js';
+import type {Loggable} from './Loggable.js';
 import {type LoggingConfig, VisualElements} from './LoggingConfig.js';
 import {getLoggingState, type LoggingState} from './LoggingState.js';
 

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -16,6 +16,15 @@ export const knownContextValues = new Set([
   '-epub-text-transform',
   '-epub-word-break',
   '-epub-writing-mode',
+  '-moz-box-direction',
+  '-moz-box-orient',
+  '-moz-box-sizing',
+  '-moz-osx-font-smoothing',
+  '-moz-text-decoration',
+  '-moz-text-size-adjust',
+  '-ms-flex-direction',
+  '-ms-text-size-adjust',
+  '-ms-touch-action',
   '-webkit-FONT-smoothing',
   '-webkit-align-content',
   '-webkit-align-items',
@@ -143,6 +152,7 @@ export const knownContextValues = new Set([
   '-webkit-shape-outside',
   '-webkit-tap-highlight-color',
   '-webkit-text-combine',
+  '-webkit-text-decoration',
   '-webkit-text-decorations-in-effect',
   '-webkit-text-emphasis',
   '-webkit-text-emphasis-color',
@@ -266,6 +276,7 @@ export const knownContextValues = new Set([
   'ad-status',
   'add',
   'add-3p-scripts-to-ignorelist',
+  'add-anonymous-scripts-to-ignorelist',
   'add-asserted-events',
   'add-assertion',
   'add-attribute',
@@ -318,6 +329,7 @@ export const knownContextValues = new Set([
   'affected-raw-cookies',
   'affected-requests',
   'affected-sources',
+  'ai-assistance-enabled',
   'align-content',
   'align-content-center',
   'align-content-flex-end',
@@ -407,6 +419,7 @@ export const knownContextValues = new Set([
   'auto',
   'auto-adjust-zoom',
   'auto-attach-to-created-pages',
+  'auto-attach-to-created-pages-true',
   'auto-focus-on-debugger-paused-enabled',
   'auto-focus-on-debugger-paused-enabled-false',
   'auto-open-autofill-view-on-event',
@@ -450,6 +463,7 @@ export const knownContextValues = new Set([
   'background-sync',
   'badproperty',
   'bars',
+  'base-64',
   'base-palette',
   'baseline-shift',
   'baseline-source',
@@ -594,6 +608,7 @@ export const knownContextValues = new Set([
   'canvas-context-created',
   'caption-side',
   'capture-node-creation-stacks',
+  'caret-animation',
   'caret-color',
   'category',
   'change',
@@ -871,6 +886,7 @@ export const knownContextValues = new Set([
   'create-recording-view',
   'credential-id',
   'credentialId',
+  'critical',
   'cs',
   'css',
   'css-angle',
@@ -1081,7 +1097,11 @@ export const knownContextValues = new Set([
   'dragstart',
   'drawer',
   'drawer-view-closeableTabs',
+  'drjones.network-floating-button',
   'drjones.network-panel-context',
+  'drjones.performance-panel-context',
+  'drjones.sources-floating-button',
+  'drjones.sources-panel-context',
   'drop',
   'duration',
   'durationchange',
@@ -1174,6 +1194,7 @@ export const knownContextValues = new Set([
   'emulation.capture-full-height-screenshot',
   'emulation.capture-node-screenshot',
   'emulation.capture-screenshot',
+  'emulation.cpu-pressure',
   'emulation.device-height',
   'emulation.device-mode-value',
   'emulation.device-orientation-override',
@@ -1254,11 +1275,13 @@ export const knownContextValues = new Set([
   'expression',
   'extend-grid-lines',
   'extension-storage',
+  'extension-storage-data',
   'extension-storage-for-domain',
   'extension-storage-viewer',
   'extension-view',
   'extremely-slow',
   'fa',
+  'fair',
   'fallback',
   'fallback-font-family',
   'fangsong',
@@ -1312,6 +1335,7 @@ export const knownContextValues = new Set([
   'float',
   'float-32-bit',
   'float-64-bit',
+  'floating-entry-points-for-ai-assistance',
   'flood-color',
   'flood-opacity',
   'focus',
@@ -1373,14 +1397,17 @@ export const knownContextValues = new Set([
   'frames',
   'frames-per-issue',
   'freestyler',
-  'freestyler-enabled',
   'freestyler.accordion',
-  'freestyler.clear',
+  'freestyler.delete',
   'freestyler.dogfood-info',
   'freestyler.element-panel-context',
+  'freestyler.elements-floating-button',
   'freestyler.feedback',
   'freestyler.help',
+  'freestyler.history',
   'freestyler.new-chat',
+  'freestyler.send-feedback',
+  'freestyler.settings',
   'freestyler.style-tab-context',
   'full-accessibility',
   'full-accessibility-tree',
@@ -1588,6 +1615,7 @@ export const knownContextValues = new Set([
   'integer-32-bit',
   'integer-64-bit',
   'integer-8-bit',
+  'interactions',
   'interest-groups',
   'internal',
   'internet-explorer-10',
@@ -1668,54 +1696,88 @@ export const knownContextValues = new Set([
   'landscape-right',
   'language',
   'language-af',
+  'language-am',
+  'language-ar',
+  'language-as',
   'language-az',
   'language-be',
   'language-bg',
   'language-bn',
+  'language-bs',
   'language-ca',
   'language-cs',
+  'language-cy',
   'language-da',
   'language-de',
   'language-el',
   'language-en-gb',
+  'language-en-us',
   'language-en-xl',
   'language-es',
   'language-es-419',
+  'language-et',
+  'language-eu',
+  'language-fa',
   'language-fi',
+  'language-fil',
   'language-fr',
   'language-fr-ca',
   'language-gl',
   'language-gu',
   'language-he',
   'language-hi',
+  'language-hr',
+  'language-hu',
+  'language-hy',
   'language-id',
   'language-is',
   'language-it',
   'language-ja',
+  'language-ka',
+  'language-kk',
+  'language-km',
   'language-kn',
   'language-ko',
+  'language-ky',
   'language-lo',
   'language-lt',
   'language-lv',
   'language-mk',
   'language-ml',
   'language-mn',
+  'language-mr',
   'language-ms',
+  'language-my',
+  'language-ne',
   'language-nl',
+  'language-no',
   'language-or',
   'language-pa',
   'language-pl',
+  'language-pt',
   'language-pt-pt',
+  'language-ro',
+  'language-ru',
   'language-si',
   'language-sk',
   'language-sl',
   'language-sq',
+  'language-sr',
+  'language-sr-latn',
   'language-sv',
   'language-sw',
+  'language-ta',
+  'language-te',
+  'language-th',
   'language-tr',
+  'language-uk',
+  'language-ur',
+  'language-uz',
+  'language-vi',
   'language-zh',
   'language-zh-hk',
   'language-zh-tw',
+  'language-zu',
   'large',
   'large-blob',
   'larger',
@@ -1745,6 +1807,7 @@ export const knownContextValues = new Set([
   'layers.zoom-out',
   'layout',
   'layout-count',
+  'layout-shifts',
   'learn-more',
   'learn-more.ai-assistance',
   'learn-more.console-insights',
@@ -2037,6 +2100,7 @@ export const knownContextValues = new Set([
   'network.enable-request-blocking',
   'network.group-by-frame',
   'network.group-by-frame-false',
+  'network.group-by-frame-true',
   'network.hide-request-details',
   'network.initiator-stacktrace',
   'network.remove-all-network-request-blocking-patterns',
@@ -2060,6 +2124,7 @@ export const knownContextValues = new Set([
   'nfc',
   'nl',
   'no',
+  'no-agent-entrypoint',
   'no-override',
   'no-throttling',
   'node',
@@ -2067,6 +2132,7 @@ export const knownContextValues = new Set([
   'node-id',
   'node-removed',
   'nodes',
+  'nominal',
   'none',
   'normal',
   'not-logged-in',
@@ -2091,6 +2157,7 @@ export const knownContextValues = new Set([
   'offset-rotate',
   'offset-x',
   'offset-y',
+  'on',
   'on-shown-without-set-expression',
   'only-3rd-party-requests',
   'only-blocked-requests',
@@ -2102,6 +2169,7 @@ export const knownContextValues = new Set([
   'opacity',
   'open-ai-settings',
   'open-folder',
+  'open-in-animations-panel',
   'open-in-containing-folder',
   'open-in-new-tab',
   'open-link-handler',
@@ -2262,6 +2330,7 @@ export const knownContextValues = new Set([
   'preloading-rules',
   'preloading-speculations',
   'preloading-status-panel',
+  'preloading-status-panel-pretty-print',
   'presentation',
   'preserve-console-log',
   'preserve-console-log-true',
@@ -2610,6 +2679,7 @@ export const knownContextValues = new Set([
   'sensors.manage-locations',
   'sensors.reset-device-orientiation',
   'serif',
+  'serious',
   'server',
   'server-timing-api',
   'service-worker-update-on-reload',
@@ -2626,7 +2696,7 @@ export const knownContextValues = new Set([
   'set-to-browser-language',
   'set-to-specific-language',
   'setting',
-  'setting-disabled',
+  'setting-is-not-true',
   'setting1',
   'setting2',
   'settings',
@@ -2654,6 +2724,7 @@ export const knownContextValues = new Set([
   'shortcut-panel-switch',
   'shortcuts',
   'show-ad-highlights',
+  'show-ad-highlights-true',
   'show-adorner-settings',
   'show-all-properties',
   'show-as-javascript-object',
@@ -2675,6 +2746,7 @@ export const knownContextValues = new Set([
   'show-grid-areas',
   'show-grid-areas-true',
   'show-grid-line-labels',
+  'show-grid-line-labels-line-names',
   'show-grid-track-sizes',
   'show-grid-track-sizes-true',
   'show-html-comments',
@@ -2724,6 +2796,7 @@ export const knownContextValues = new Set([
   'size-adjust',
   'size-delta',
   'sk',
+  'skip-anonymous-scripts',
   'skip-content-scripts',
   'skip-stack-frames-pattern',
   'skip-waiting',
@@ -2952,6 +3025,7 @@ export const knownContextValues = new Set([
   'thumbs-up',
   'time',
   'timeline',
+  'timeline-alternative-navigation',
   'timeline-capture-layers-and-pictures',
   'timeline-capture-selector-stats',
   'timeline-compiled-sources',
@@ -2961,8 +3035,10 @@ export const knownContextValues = new Set([
   'timeline-counters-graph-js-heap-size-used',
   'timeline-counters-graph-nodes',
   'timeline-debug-mode',
+  'timeline-dim-unrelated-events',
   'timeline-disable-js-sampling',
   'timeline-enhanced-traces',
+  'timeline-experimental-insights',
   'timeline-flamechart-main-view-group-expansion',
   'timeline-flamechart-network-view-group-expansion',
   'timeline-invalidation-tracking',
@@ -2983,15 +3059,24 @@ export const knownContextValues = new Set([
   'timeline-status',
   'timeline-tree-current-thread',
   'timeline-tree-group-by',
+  'timeline-user-has-opened-sidebar-once',
   'timeline-user-has-opened-siderbar-once',
   'timeline-v8-runtime-call-stats',
-  'timeline.',
   'timeline.animations',
   'timeline.annotation-sidebar.annotation-entries-link',
   'timeline.annotation-sidebar.annotation-entry-label',
   'timeline.annotation-sidebar.annotation-time-range',
   'timeline.annotation-sidebar.delete',
   'timeline.annotations-tab',
+  'timeline.annotations.',
+  'timeline.annotations.create-entries-link',
+  'timeline.annotations.create-entry-label',
+  'timeline.annotations.create-entry-link',
+  'timeline.annotations.delete-entry-annotations',
+  'timeline.annotations.entry-annotation-create',
+  'timeline.annotations.entry-label-input',
+  'timeline.annotations.time-range-label-input',
+  'timeline.back-to-live-metrics',
   'timeline.breadcrumb-select',
   'timeline.clear',
   'timeline.configure',
@@ -3006,6 +3091,7 @@ export const knownContextValues = new Set([
   'timeline.field-data.settings',
   'timeline.field-data.setup',
   'timeline.field-metric-value',
+  'timeline.flame-chart-view',
   'timeline.gpu',
   'timeline.history-item',
   'timeline.insights-tab',
@@ -3022,13 +3108,19 @@ export const knownContextValues = new Set([
   'timeline.interactions',
   'timeline.jump-to-next-frame',
   'timeline.jump-to-previous-frame',
+  'timeline.landing.clear-log',
   'timeline.landing.field-cls',
   'timeline.landing.field-inp',
   'timeline.landing.field-lcp',
   'timeline.landing.interaction-event-timing',
+  'timeline.landing.interactions-log',
+  'timeline.landing.layout-shift-event-score',
+  'timeline.landing.layout-shifts-log',
   'timeline.landing.local-cls',
   'timeline.landing.local-inp',
   'timeline.landing.local-lcp',
+  'timeline.landing.show-cls-cluster',
+  'timeline.landing.show-inp-interaction',
   'timeline.layout-shifts',
   'timeline.load-from-file',
   'timeline.network',
@@ -3053,6 +3145,7 @@ export const knownContextValues = new Set([
   'timeline.sidebar-insights-category-select',
   'timeline.sidebar-open',
   'timeline.stop-recording',
+  'timeline.thread.auction-worklet',
   'timeline.thread.cpu-profile',
   'timeline.thread.frame',
   'timeline.thread.main',
@@ -3171,6 +3264,7 @@ export const knownContextValues = new Set([
   'user-valid',
   'user-verification',
   'userHandle',
+  'utf-8',
   'uz',
   'valid',
   'value',
@@ -3196,6 +3290,7 @@ export const knownContextValues = new Set([
   'view-timeline-axis',
   'view-timeline-inset',
   'view-timeline-name',
+  'view-transition-capture-mode',
   'view-transition-class',
   'view-transition-group',
   'view-transition-name',