chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/panels/profiler/ProfileSidebarTreeElement.ts

@@ -35,8 +35,7 @@ export class ProfileSidebarTreeElement extends UI.TreeOutline.TreeElement {
   small: boolean;
   readonly dataDisplayDelegate: DataDisplayDelegate;
   profile: ProfileHeader;
-  saveLinkElement?: HTMLElement;
-  editing?: UI.InplaceEditor.Controller|null;
+  editing: UI.InplaceEditor.Controller|null;
   constructor(dataDisplayDelegate: DataDisplayDelegate, profile: ProfileHeader, className: string) {
     super('', false);
     this.iconElement = document.createElement('div');
@@ -66,6 +65,7 @@ export class ProfileSidebarTreeElement extends UI.TreeOutline.TreeElement {
     this.dataDisplayDelegate = dataDisplayDelegate;
     this.profile = profile;
     profile.addEventListener(ProfileHeaderEvents.UPDATE_STATUS, this.updateStatus, this);
+    this.editing = null;
   }
 
   updateStatus(event: Common.EventTarget.EventTargetEvent<StatusUpdate>): void {
@@ -93,17 +93,18 @@ export class ProfileSidebarTreeElement extends UI.TreeOutline.TreeElement {
     if (!container) {
       return;
     }
-    const config = new UI.InplaceEditor.Config(this.editingCommitted.bind(this), this.editingCancelled.bind(this));
+    const config =
+        new UI.InplaceEditor.Config(this.editingCommitted.bind(this), this.editingCancelled.bind(this), undefined);
     this.editing = UI.InplaceEditor.InplaceEditor.startEditing(container, config);
   }
 
-  editingCommitted(container: Element, newTitle: string): void {
-    delete this.editing;
+  editingCommitted(_container: Element, newTitle: string): void {
+    this.editing = null;
     this.profile.setTitle(newTitle);
   }
 
   editingCancelled(): void {
-    delete this.editing;
+    this.editing = null;
   }
 
   dispose(): void {

package/front_end/panels/profiler/ProfileView.ts

@@ -566,7 +566,7 @@ export class WritableProfileHeader extends ProfileHeader implements Common.Strin
     if (this.jsonifiedProfile) {
       // TODO(l10n): Is the '%' at the end of this string correct? 4MB% looks wrong
       this.updateStatus(
-          i18nString(UIStrings.loadingD, {PH1: Platform.NumberUtilities.bytesToString(this.jsonifiedProfile.length)}));
+          i18nString(UIStrings.loadingD, {PH1: i18n.ByteUtilities.bytesToString(this.jsonifiedProfile.length)}));
     }
   }
 

package/front_end/panels/protocol_monitor/components/JSONEditor.ts

@@ -1,16 +1,15 @@
 // Copyright 2023 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import './Toolbar.js';
 import '../../../ui/components/icon_button/icon_button.js';
 import '../../../ui/components/menus/menus.js';
+import './Toolbar.js';
 
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Dialogs from '../../../ui/components/dialogs/dialogs.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import type * as Menus from '../../../ui/components/menus/menus.js';
 import * as SuggestionInput from '../../../ui/components/suggestion_input/suggestion_input.js';
 import * as UI from '../../../ui/legacy/legacy.js';
@@ -892,10 +891,11 @@ export class JSONEditor extends LitElement {
       color: 'var(--icon-warning)',
       width: '14px',
       height: '14px',
-    } as IconButton.Icon.IconData}
+      }
+      }
     class=${classMap({
-      'warning-icon': true,
-    })}
+        'warning-icon': true,
+      })}
   >
   </devtools-icon>`;
   }

package/front_end/panels/recorder/components/RecordingView.ts

@@ -688,12 +688,12 @@ export class RecordingView extends HTMLElement {
           // clang-format off
           replaySettingsFragments.push(html`<div>
             ${i18nString(UIStrings.download, {
-              value: Platform.NumberUtilities.bytesToString(
+              value: i18n.ByteUtilities.bytesToString(
                 this.#settings.networkConditionsSettings.download,
               ),
             })},
             ${i18nString(UIStrings.upload, {
-              value: Platform.NumberUtilities.bytesToString(
+              value: i18n.ByteUtilities.bytesToString(
                 this.#settings.networkConditionsSettings.upload,
               ),
             })},

package/front_end/panels/recorder/components/StartView.ts

@@ -2,15 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/legacy/legacy.js';
-import '../../../ui/components/panel_introduction_steps/panel_introduction_steps.js';
 import '../../../ui/components/panel_feedback/panel_feedback.js';
+import '../../../ui/components/panel_introduction_steps/panel_introduction_steps.js';
+import '../../../ui/legacy/legacy.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import type * as PanelFeedback from '../../../ui/components/panel_feedback/panel_feedback.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Actions from '../recorder-actions/recorder-actions.js';
@@ -108,14 +107,14 @@ export class StartView extends HTMLElement {
           feedbackUrl: FEEDBACK_URL,
           quickStartUrl: DOC_URL,
           quickStartLinkText: i18nString(UIStrings.quickStart),
-        } as PanelFeedback.PanelFeedback.PanelFeedbackData
+        }
       }>
           </devtools-panel-feedback>
           <div class="align-right">
             <devtools-feedback-button .data=${
         {
           feedbackUrl: FEEDBACK_URL,
-        } as PanelFeedback.FeedbackButton.FeedbackButtonData
+        }
       }>
             </devtools-feedback-button>
           </div>

package/front_end/panels/recorder/components/recordingView.css

@@ -300,12 +300,9 @@
   align-items: center;
 }
 
-.editable-setting devtools-select-menu {
-  height: 32px;
-}
-
 .editable-setting .devtools-text-input {
   width: fit-content;
+  height: var(--sys-size-9);
 }
 
 .wrapping-label {

package/front_end/panels/recorder/components/selectButton.css

@@ -13,57 +13,13 @@
   position: relative; /* Needed for outline to appear on top of the next element */
 }
 
+.select-button devtools-select-menu {
+  position: relative;
+  top: var(--sys-size-1);
+  height: var(--sys-size-9);
+}
+
 .select-menu-item-content-with-icon {
   display: flex;
   align-items: center;
 }
-
-/* .select-menu-item-content-with-icon::before {
-  content: "";
-  position: relative;
-  left: 0;
-  top: 0;
-  background-color: var(--sys-color-on-surface);
-  display: inline-block;
-  mask-repeat: no-repeat;
-  mask-position: center;
-  width: 24px;
-  height: 24px;
-  margin-right: 4px;
-  mask-image: var(--item-mask-icon);
-} */
-
-/* devtools-select-menu {
-  height: var(--override-select-menu-height, 24px);
-  border-radius: 0 4px 4px 0;
-  box-sizing: border-box;
-
-  --override-select-menu-show-button-outline: var(--sys-color-state-focus-ring);
-  --override-select-menu-label-with-arrow-padding: 0;
-  --override-select-menu-border: none;
-  --override-select-menu-show-button-padding: 0 6px 0 0;
-} */
-
-/* devtools-select-menu.primary {
-  border: none;
-  border-left: 1px solid var(--override-icon-and-text-color);
-
-  --override-icon-and-text-color: var(--sys-color-cdt-base-container);
-  --override-select-menu-arrow-color: var(--override-icon-and-text-color);
-  --override-divider-color: var(--override-icon-and-text-color);
-  --override-select-menu-background-color: var(--sys-color-primary);
-  --override-select-menu-active-background-color:
-    var(
-      --override-select-menu-background-color
-    );
-} */
-
-/* devtools-select-menu.primary:hover {
-  --override-select-menu-background-color: color-mix(in sRGB, var(--sys-color-primary), var(--sys-color-state-hover-on-prominent) 10%);
-} */
-
-/* devtools-select-menu[disabled].primary,
-devtools-select-menu[disabled].primary:hover {
-  --override-icon-and-text-color: var(--sys-color-state-disabled);
-  --override-select-menu-background-color: var(--sys-color-cdt-base-container-elevation-1);
-} */

package/front_end/panels/recorder/injected/{rollup.config.js → rollup.config.mjs}

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-const {terser} = require('../../../../node_modules/rollup-plugin-terser/rollup-plugin-terser.js');
+import terser from '@rollup/plugin-terser';
 
 /**
  * Checks if an env variable is true.

package/front_end/panels/recorder/models/RecorderShortcutHelper.ts

@@ -6,7 +6,7 @@ import * as UI from '../../../ui/legacy/legacy.js';
 
 export class RecorderShortcutHelper {
   #abortController: AbortController;
-  #timeoutId: NodeJS.Timeout|null = null;
+  #timeoutId: ReturnType<typeof setTimeout>|null = null;
   #timeout: number;
 
   constructor(timeout = 200) {

package/front_end/panels/recorder/models/RecordingSession.ts

@@ -92,10 +92,10 @@ const createShortcuts = (descriptors: number[][]): Shortcut[] => {
       shortcutBase.keyCode = keyCode;
       const modifiersMap = UI.KeyboardShortcut.Modifiers;
 
-      shortcutBase.ctrl = Boolean(modifiers & modifiersMap.Ctrl);
-      shortcutBase.meta = Boolean(modifiers & modifiersMap.Meta);
-      shortcutBase.shift = Boolean(modifiers & modifiersMap.Shift);
-      shortcutBase.shift = Boolean(modifiers & modifiersMap.Alt);
+      shortcutBase.ctrl = Boolean(modifiers & modifiersMap.Ctrl.value);
+      shortcutBase.meta = Boolean(modifiers & modifiersMap.Meta.value);
+      shortcutBase.shift = Boolean(modifiers & modifiersMap.Shift.value);
+      shortcutBase.shift = Boolean(modifiers & modifiersMap.Alt.value);
 
       if (shortcutBase.keyCode !== -1) {
         shortcuts.push(shortcutBase);

package/front_end/panels/recorder/recorderController.css

@@ -55,30 +55,50 @@ devtools-create-recording-view {
 }
 
 select {
-  border-radius: 2px;
-  border: 1px solid transparent;
-  height: 24px;
+  appearance: none;
+  user-select: none;
+  border: none;
+  border-radius: var(--sys-shape-corner-extra-small);
+  height: var(--sys-size-9);
   max-width: 180px;
   min-width: 140px;
-  padding: 0 5px;
+  padding: 0 var(--sys-size-6) 0 var(--sys-size-5);
   position: relative;
   color: var(--sys-color-on-surface);
   background-color: var(--sys-color-cdt-base-container);
   text-overflow: ellipsis;
-}
-
-select:disabled {
-  color: var(--sys-color-state-disabled);
-}
-
-select:not([disabled]):hover,
-select:not([disabled]):focus-visible,
-select:not([disabled]):active {
-  background-color: var(--sys-color-state-hover-on-subtle);
-}
-
-select:not([disabled]):focus-visible {
-  box-shadow: 0 0 0 2px var(--sys-color-state-focus-ring);
+  background-image: var(--combobox-dropdown-arrow);
+  background-position: right center;
+  background-repeat: no-repeat;
+
+  &:hover {
+    background-color: var(--sys-color-state-hover-on-subtle);
+  }
+
+  &:active {
+    background-color: var(--sys-color-state-ripple-neutral-on-subtle);
+  }
+
+  &:hover:active {
+    /* stylelint-disable plugin/use_theme_colors */
+    background:
+      var(--combobox-dropdown-arrow),
+      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));
+    /* stylelint-enable plugin/use_theme_colors */
+    background-position: right center;
+    background-repeat: no-repeat;
+  }
+
+  &:disabled {
+    pointer-events: none;
+    color: var(--sys-color-state-disabled);
+    background-color: var(--sys-color-state-disabled-container);
+  }
+
+  &:focus-visible {
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  }
 }
 
 select option {
@@ -120,7 +140,3 @@ devtools-recording-list-view {
 .feedback .x-link:focus-visible {
   outline: -webkit-focus-ring-color auto 1px;
 }
-
-devtools-shortcut-dialog {
-  padding-right: 6px;
-}

package/front_end/panels/screencast/ScreencastApp.ts

@@ -87,7 +87,7 @@ export class ScreencastApp implements Common.App.App,
   }
 
   private toggleButtonClicked(): void {
-    const enabled = !this.toggleButton.isToggled();
+    const enabled = this.toggleButton.isToggled();
     this.enabledSetting.set(enabled);
     this.onScreencastEnabledChanged();
   }

package/front_end/panels/screencast/ScreencastView.ts

@@ -193,7 +193,7 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
     this.context = this.canvasElement.getContext('2d') as CanvasRenderingContext2D;
     this.checkerboardPattern = this.createCheckerboardPattern(this.context);
 
-    this.shortcuts[UI.KeyboardShortcut.KeyboardShortcut.makeKey('l', UI.KeyboardShortcut.Modifiers.Ctrl)] =
+    this.shortcuts[UI.KeyboardShortcut.KeyboardShortcut.makeKey('l', UI.KeyboardShortcut.Modifiers.Ctrl.value)] =
         this.focusNavigationBar.bind(this);
 
     SDK.TargetManager.TargetManager.instance().addEventListener(

package/front_end/panels/search/SearchView.ts

@@ -95,7 +95,6 @@ function createSearchToggleButton(iconName: string, jslogContext: string): Butto
   const button = new Buttons.Button.Button();
   button.data = {
     variant: Buttons.Button.Variant.ICON_TOGGLE,
-    size: Buttons.Button.Size.SMALL,
     iconName,
     toggledIconName: iconName,
     toggleType: Buttons.Button.ToggleType.PRIMARY,
@@ -192,7 +191,6 @@ export class SearchView extends UI.Widget.VBox {
     const clearInputFieldButton = new Buttons.Button.Button();
     clearInputFieldButton.data = {
       variant: Buttons.Button.Variant.ICON,
-      size: Buttons.Button.Size.SMALL,
       iconName: 'cross-circle-filled',
       jslogContext: 'clear-input',
       title: i18nString(UIStrings.clearInput),

package/front_end/panels/search/searchView.css

@@ -23,7 +23,7 @@
     flex-grow: 1;
     box-shadow: inset 0 0 0 2px transparent;
     box-sizing: border-box;
-    height: var(--sys-size-9);
+    height: var(--sys-size-11);
     margin-left: var(--sys-size-3);
     padding: 0 var(--sys-size-2) 0 var(--sys-size-5);
     border-radius: 100px;
@@ -53,6 +53,10 @@
       height: var(--sys-size-8);
       margin-right: var(--sys-size-3);
     }
+
+    & > devtools-button:last-child {
+      margin-right: var(--sys-size-4);
+    }
   }
 
   .search-toolbar-input {

package/front_end/panels/security/CookieReportTreeElement.ts

@@ -0,0 +1,18 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+
+import {SecurityPanelSidebarTreeElement} from './SecurityPanelSidebarTreeElement.js';
+
+export class CookieReportTreeElement extends SecurityPanelSidebarTreeElement {
+  constructor(title: string) {
+    super(title);
+    this.setLeadingIcons([IconButton.Icon.create('cookie', 'cookie-icon')]);
+  }
+
+  override onselect(): boolean {
+    this.listItemElement.dispatchEvent(new CustomEvent('showCookieReport', {bubbles: true, composed: true}));
+    return true;
+  }
+}

package/front_end/panels/security/CookieReportView.ts

@@ -0,0 +1,120 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as LitHtml from '../../ui/lit-html/lit-html.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+
+import cookieReportViewStyles from './cookieReportView.css.js';
+
+const {render, html, Directives: {ref}} = LitHtml;
+
+const UIStrings = {
+  /**
+   *@description Title in the header for the third-party cookie report in the Security & Privacy Panel
+   */
+  title: 'Third-party cookies',
+  /**
+   *@description Explaination in the header about the cookies listed in the report
+   */
+  body:
+      'Third-party cookies that might be restricted by users, depending on their settings. If a user chooses to restrict cookies, then this site might not work for them.',
+  /**
+   *@description A link the user can follow to learn more about third party cookie usage
+   */
+  learnMoreLink: 'Learn more about how third-party cookies are used',
+  /**
+   *@description Status string in the cookie report for a third-party cookie that is allowed without any sort of exception. This is also used as filter chip text to allow the user to filter the table based on cookie status
+   */
+  allowed: 'Allowed',
+  /**
+   *@description Status string in the cookie report for a third-party cookie that is allowed due to a grace period or heuristic exception. Otherwise, this would have been blocked. This is also used as filter chip text to allow the user to filter the table based on cookie status
+   */
+  allowedByException: 'Allowed By Exception',
+  /**
+   *@description Status string in the cookie report for a third-party cookie that was blocked. This is also used as filter chip text to allow the user to filter the table based on cookie status
+   */
+  blocked: 'Blocked',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/security/CookieReportView.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface ViewInput {}
+export interface ViewOutput {
+  namedBitSetFilterUI?: UI.FilterBar.NamedBitSetFilterUI;
+}
+
+export interface CookieReportNodeData {
+  name: string;
+  domain: string;
+  type: string;
+  platform: string;
+  status: string;
+  recommendation: string;
+}
+
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+const filterItems: UI.FilterBar.Item[] = [
+  {
+    name: UIStrings.blocked,
+    label: () => i18nString(UIStrings.blocked),
+    title: UIStrings.blocked,
+    jslogContext: UIStrings.blocked,
+  },
+  {
+    name: UIStrings.allowed,
+    label: () => i18nString(UIStrings.allowed),
+    title: UIStrings.allowed,
+    jslogContext: UIStrings.allowed,
+  },
+  {
+    name: UIStrings.allowedByException,
+    label: () => i18nString(UIStrings.allowedByException),
+    title: UIStrings.allowedByException,
+    jslogContext: UIStrings.allowedByException,
+  },
+];
+
+export class CookieReportView extends UI.Widget.VBox {
+  namedBitSetFilterUI?: UI.FilterBar.NamedBitSetFilterUI;
+  #view: View;
+
+  constructor(element?: HTMLElement, view: View = (input, output, target) => {
+    // clang-format off
+    render(html `
+        <div class="report overflow-auto">
+            <div class="header">
+              <div class="title">${i18nString(UIStrings.title)}</div>
+              <div class="body">${i18nString(UIStrings.body)} <x-link class="x-link" href="https://developers.google.com/privacy-sandbox/cookies/prepare/audit-cookies" jslog=${VisualLogging.link('learn-more').track({click: true})}>${i18nString(UIStrings.learnMoreLink)}</x-link></div>
+            </div>
+            <devtools-named-bit-set-filter
+              class="filter"
+              .options=${{items: filterItems}}
+              ${ref((el?: Element) => {
+                  if(el instanceof UI.FilterBar.NamedBitSetFilterUIElement){
+                    output.namedBitSetFilterUI = el.getOrCreateNamedBitSetFilterUI();
+                  }
+              })}
+            ></devtools-named-bit-set-filter>
+        </div>
+    `, target, {host: this});
+    // clang-format on
+  }) {
+    super(true, undefined, element);
+    this.#view = view;
+
+    this.doUpdate();
+  }
+
+  doUpdate(): void {
+    this.#view(this, this, this.contentElement);
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.registerCSSFiles([cookieReportViewStyles]);
+  }
+}

package/front_end/panels/security/OriginTreeElement.ts

@@ -5,21 +5,28 @@
 import type * as Platform from '../../core/platform/platform.js';
 import * as Protocol from '../../generated/protocol.js';
 
-import type {SecurityPanel} from './SecurityPanel.js';
 import {SecurityPanelSidebarTreeElement} from './SecurityPanelSidebarTreeElement.js';
 
+export class ShowOriginEvent extends Event {
+  static readonly eventName = 'showorigin';
+  origin: Platform.DevToolsPath.UrlString|null;
+
+  constructor(origin: Platform.DevToolsPath.UrlString|null) {
+    super(ShowOriginEvent.eventName, {bubbles: true, composed: true});
+    this.origin = origin;
+  }
+}
+
 export class OriginTreeElement extends SecurityPanelSidebarTreeElement {
   #securityStateInternal: Protocol.Security.SecurityState|null;
-  readonly #onSelect: () => void;
   readonly #renderTreeElement: (element: SecurityPanelSidebarTreeElement) => void;
   readonly #originInternal: Platform.DevToolsPath.UrlString|null = null;
 
   constructor(
-      className: string, onSelect: () => void, renderTreeElement: (element: SecurityPanelSidebarTreeElement) => void,
-      origin: Platform.DevToolsPath.UrlString|null = null, securityPanel: SecurityPanel|undefined = undefined) {
-    super(securityPanel);
+      className: string, renderTreeElement: (element: SecurityPanelSidebarTreeElement) => void,
+      origin: Platform.DevToolsPath.UrlString|null = null) {
+    super();
 
-    this.#onSelect = onSelect;
     this.#renderTreeElement = renderTreeElement;
     this.#originInternal = origin;
 
@@ -42,7 +49,13 @@ export class OriginTreeElement extends SecurityPanelSidebarTreeElement {
   }
 
   override onselect(): boolean {
-    this.#onSelect();
+    this.listItemElement.dispatchEvent(new ShowOriginEvent(this.#originInternal));
     return true;
   }
 }
+
+declare global {
+  interface HTMLElementEventMap {
+    'showorigin': ShowOriginEvent;
+  }
+}