chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

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/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 {

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,26 @@
+// 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 ShowCookieReportEvent extends Event {
+  static readonly eventName = 'showcookiereport';
+
+  constructor() {
+    super(ShowCookieReportEvent.eventName, {bubbles: true, composed: true});
+  }
+}
+
+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 ShowCookieReportEvent());
+    return true;
+  }
+}

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;
+  }
+}

package/front_end/panels/security/SecurityPanel.ts

@@ -11,12 +11,13 @@ import * as Protocol from '../../generated/protocol.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.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 lockIconStyles from './lockIcon.css.js';
 import mainViewStyles from './mainView.css.js';
+import {ShowOriginEvent} from './OriginTreeElement.js';
 import originViewStyles from './originView.css.js';
-import {SecurityAndPrivacyPanelSidebar} from './SecurityAndPrivacyPanelSidebar.js';
 import {
   Events,
   type PageVisibleSecurityState,
@@ -25,6 +26,7 @@ import {
   SecurityStyleExplanation,
   SummaryMessages,
 } from './SecurityModel.js';
+import {SecurityPanelSidebar} from './SecurityPanelSidebar.js';
 
 const UIStrings = {
   /**
@@ -527,25 +529,67 @@ export function createHighlightedUrl(url: Platform.DevToolsPath.UrlString, secur
   return highlightedUrl;
 }
 
-export class SecurityPanel extends UI.Panel.PanelWithSidebar implements
-    SDK.TargetManager.SDKModelObserver<SecurityModel> {
-  readonly mainView: SecurityMainView;
-  readonly sidebar: SecurityAndPrivacyPanelSidebar;
+const {render, html} = LitHtml;
+export type ViewInput = {
+  panel: SecurityPanel,
+};
+export type ViewOutput = {
+  splitWidget: UI.SplitWidget.SplitWidget,
+  mainView: SecurityMainView,
+  visibleView: UI.Widget.VBox|null,
+  sidebar: SecurityPanelSidebar,
+};
+
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.SDKModelObserver<SecurityModel> {
+  readonly mainView!: SecurityMainView;
+  readonly sidebar!: SecurityPanelSidebar;
   private readonly lastResponseReceivedForLoaderId: Map<string, SDK.NetworkRequest.NetworkRequest>;
   private readonly origins: Map<string, OriginState>;
   private readonly filterRequestCounts: Map<string, number>;
-  private visibleView: UI.Widget.VBox|null;
+  visibleView: UI.Widget.VBox|null;
   private eventListeners: Common.EventTarget.EventDescriptor[];
   private securityModel: SecurityModel|null;
-
-  constructor() {
+  readonly splitWidget!: UI.SplitWidget.SplitWidget;
+
+  constructor(private view: View = (input, output, target) => {
+    // clang-format off
+    render(
+      html`
+    <devtools-split-widget
+    .options=${{vertical: true, settingName: 'security'}}
+    ${UI.Widget.widgetRef(UI.SplitWidget.SplitWidget, e => {output.splitWidget = e;})}>
+          <devtools-widget
+          slot="main"
+          .widgetClass=${SecurityMainView}
+          .widgetParams=${[input.panel] as SecurityMainViewProps}
+          ${UI.Widget.widgetRef(SecurityMainView, e => {output.mainView = e;})}>
+        </devtools-widget>
+        <devtools-widget
+          slot="sidebar"
+          .widgetClass=${SecurityPanelSidebar}
+          ${UI.Widget.widgetRef(SecurityPanelSidebar, e => {output.sidebar = e;})}>
+        </devtools-widget>
+    </devtools-split-widget>`,
+      target, {host: this});
+    // clang-format on
+  }) {
     super('security');
 
-    this.mainView = new SecurityMainView(this);
+    this.doUpdate();
 
-    this.sidebar =
-        new SecurityAndPrivacyPanelSidebar(this.showOrigin.bind(this), this.setVisibleView.bind(this, this.mainView));
-    this.sidebar.show(this.panelSidebarElement());
+    this.sidebar.setMinimumSize(100, 25);
+    this.sidebar.element.classList.add('panel-sidebar');
+    this.sidebar.element.setAttribute('jslog', `${VisualLogging.pane('sidebar').track({resize: true})}`);
+
+    this.element.addEventListener(ShowOriginEvent.eventName, (event: ShowOriginEvent) => {
+      if (event.origin) {
+        this.showOrigin(event.origin);
+      } else {
+        this.setVisibleView(this.mainView);
+      }
+    });
 
     this.lastResponseReceivedForLoaderId = new Map();
 
@@ -593,6 +637,10 @@ export class SecurityPanel extends UI.Panel.PanelWithSidebar implements
     return certificateButton;
   }
 
+  private doUpdate(): void {
+    this.view({panel: this}, this, this.contentElement);
+  }
+
   private updateVisibleSecurityState(visibleSecurityState: PageVisibleSecurityState): void {
     this.sidebar.securityOverviewElement.setSecurityState(visibleSecurityState.securityState);
     this.mainView.updateVisibleSecurityState(visibleSecurityState);
@@ -641,7 +689,7 @@ export class SecurityPanel extends UI.Panel.PanelWithSidebar implements
     this.visibleView = view;
 
     if (view) {
-      this.splitWidget().setMainWidget(view);
+      this.splitWidget.setMainWidget(view);
     }
   }
 
@@ -815,6 +863,7 @@ export enum OriginGroup {
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
+type SecurityMainViewProps = [SecurityPanel];
 export class SecurityMainView extends UI.Widget.VBox {
   private readonly panel: SecurityPanel;
   private readonly summarySection: HTMLElement;
@@ -824,8 +873,8 @@ export class SecurityMainView extends UI.Widget.VBox {
   private summaryText: HTMLElement;
   private explanations: (Protocol.Security.SecurityStateExplanation|SecurityStyleExplanation)[]|null;
   private securityState: Protocol.Security.SecurityState|null;
-  constructor(panel: SecurityPanel) {
-    super(true);
+  constructor(panel: SecurityPanel, element?: HTMLElement) {
+    super(undefined, undefined, element);
     this.element.setAttribute('jslog', `${VisualLogging.pane('security.main-view')}`);
 
     this.setMinimumSize(200, 100);

package/front_end/panels/security/{SecurityAndPrivacyPanelSidebar.ts → SecurityPanelSidebar.ts}

@@ -2,18 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+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 Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import {CookieReportTreeElement} from './CookieReportTreeElement.js';
 import lockIconStyles from './lockIcon.css.js';
 import {OriginTreeElement} from './OriginTreeElement.js';
 import {
   createHighlightedUrl,
   getSecurityStateIconForDetailedView,
   getSecurityStateIconForOverview,
-  type Origin,
   OriginGroup,
 } from './SecurityPanel.js';
 import type {SecurityPanelSidebarTreeElement} from './SecurityPanelSidebarTreeElement.js';
@@ -24,6 +25,14 @@ const UIStrings = {
    *@description Section title for the the Security Panel's sidebar
    */
   security: 'Security',
+  /**
+   *@description Section title for the the Security Panel's sidebar
+   */
+  privacy: 'Privacy',
+  /**
+   *@description Sidebar element text in the Security panel
+   */
+  cookieReport: 'Third-party cookies',
   /**
    *@description Text in Security Panel of the Security panel
    */
@@ -58,10 +67,10 @@ const UIStrings = {
   mainOriginNonsecure: 'Main origin (non-secure)',
 };
 
-const str_ = i18n.i18n.registerUIStrings('panels/security/SecurityAndPrivacyPanelSidebar.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/security/SecurityPanelSidebar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class SecurityAndPrivacyPanelSidebar extends UI.Widget.VBox {
+export class SecurityPanelSidebar extends UI.Widget.VBox {
   readonly sidebarTree: UI.TreeOutline.TreeOutlineInShadow;
   readonly #originGroupTitles: Map<OriginGroup, string>;
   #originGroups: Map<OriginGroup, UI.TreeOutline.TreeElement>;
@@ -69,25 +78,28 @@ export class SecurityAndPrivacyPanelSidebar extends UI.Widget.VBox {
   readonly #elementsByOrigin: Map<string, OriginTreeElement>;
   readonly #mainViewReloadMessage: UI.TreeOutline.TreeElement;
   #mainOrigin: string|null;
-  readonly #revealOrigin: (arg0: Origin) => void;
 
-  constructor(revealOrigin: (arg0: Origin) => void, revealMainView: () => void) {
-    super();
+  constructor(element?: HTMLElement) {
+    super(undefined, undefined, element);
 
     this.#mainOrigin = null;
-    this.#revealOrigin = revealOrigin;
 
     this.sidebarTree = new UI.TreeOutline.TreeOutlineInShadow(UI.TreeOutline.TreeVariant.NAVIGATION_TREE);
     this.sidebarTree.element.classList.add('security-sidebar');
     this.contentElement.appendChild(this.sidebarTree.element);
 
+    if (Common.Settings.Settings.instance().getHostConfig().devToolsPrivacyUI?.enabled) {
+      const privacyTreeSection = this.#addSidebarSection(i18nString(UIStrings.privacy), 'privacy');
+      privacyTreeSection.appendChild(new CookieReportTreeElement(i18nString(UIStrings.cookieReport)));
+    }
+
     const securitySectionTitle = i18nString(UIStrings.security);
-    const securityTreeElement = this.#addSidebarSection(securitySectionTitle, 'security');
+    const securityTreeSection = this.#addSidebarSection(securitySectionTitle, 'security');
 
     this.securityOverviewElement =
-        new OriginTreeElement('security-main-view-sidebar-tree-item', revealMainView, this.#renderTreeElement);
+        new OriginTreeElement('security-main-view-sidebar-tree-item', this.#renderTreeElement);
     this.securityOverviewElement.tooltip = i18nString(UIStrings.overview);
-    securityTreeElement.appendChild(this.securityOverviewElement);
+    securityTreeSection.appendChild(this.securityOverviewElement);
 
     this.#originGroupTitles = new Map([
       [OriginGroup.MainOrigin, i18nString(UIStrings.mainOrigin)],
@@ -100,7 +112,7 @@ export class SecurityAndPrivacyPanelSidebar extends UI.Widget.VBox {
     for (const group of Object.values(OriginGroup)) {
       const element = this.#createOriginGroupElement(this.#originGroupTitles.get(group) as string);
       this.#originGroups.set(group, element);
-      securityTreeElement.appendChild(element);
+      securityTreeSection.appendChild(element);
     }
 
     this.#mainViewReloadMessage = new UI.TreeOutline.TreeElement(i18nString(UIStrings.reloadToViewDetails));
@@ -151,8 +163,7 @@ export class SecurityAndPrivacyPanelSidebar extends UI.Widget.VBox {
 
   addOrigin(origin: Platform.DevToolsPath.UrlString, securityState: Protocol.Security.SecurityState): void {
     this.#mainViewReloadMessage.hidden = true;
-    const originElement = new OriginTreeElement(
-        'security-sidebar-tree-item', this.#revealOrigin.bind(this, origin), this.#renderTreeElement, origin);
+    const originElement = new OriginTreeElement('security-sidebar-tree-item', this.#renderTreeElement, origin);
     originElement.tooltip = origin;
     this.#elementsByOrigin.set(origin, originElement);
     this.updateOrigin(origin, securityState);

package/front_end/panels/security/SecurityPanelSidebarTreeElement.ts

@@ -3,20 +3,9 @@
 // found in the LICENSE file.
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {SecurityPanel} from './SecurityPanel.js';
-
 export class SecurityPanelSidebarTreeElement extends UI.TreeOutline.TreeElement {
-  protected readonly securityPanel: SecurityPanel|undefined;
-
-  constructor(securityPanel: SecurityPanel|undefined, title: string = '', expandable: boolean = false) {
+  constructor(title: string = '', expandable: boolean = false) {
     super(title, expandable);
-    this.securityPanel = securityPanel;
     UI.ARIAUtils.setLabel(this.listItemElement, title);
   }
-
-  showView(view: UI.Widget.VBox): void {
-    if (this.securityPanel) {
-      this.securityPanel.setVisibleView(view);
-    }
-  }
 }

package/front_end/panels/security/sidebar.css

@@ -4,6 +4,10 @@
  * found in the LICENSE file.
  */
 
+.tree-outline-disclosure {
+  width: 100%;
+}
+
 .tree-outline li.security-group-list-item {
   & + ol {
     padding-left: 0;
@@ -12,16 +16,51 @@
   &::before {
     display: none;
   }
+
+  &:not(:first-child) {
+    margin-top: var(--sys-size-6);
+  }
 }
 
 .security-main-view-reload-message {
   color: var(--sys-color-token-subtle);
 }
 
+.tree-outline li.security-sidebar-origins + .children > li {
+  &.selected {
+    .url-scheme-secure {
+      color: var(--sys-color-green);
+    }
+
+    .url-scheme-neutral,
+    .url-scheme-insecure,
+    .url-scheme-insecure-broken {
+      color: var(--sys-color-error);
+    }
+  }
+}
+
 .security-main-view-reload-message,
 .tree-outline li.security-sidebar-origins,
-.tree-outline li.security-group-list-item {
+.tree-outline li.security-group-list-item,
+.tree-outline span  {
+
+  font: var(--sys-typescale-body4-medium);
+
   &:hover:not(:has(span[is="dt-checkbox"])) .selection {
     background: transparent;
   }
 }
+
+.tree-outline li {
+  & .leading-icons {
+    flex: none;
+  }
+
+  & .tree-element-title,
+  .highlighted-url,
+  .title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

package/front_end/panels/sensors/SensorsView.ts

@@ -118,6 +118,10 @@ const UIStrings = {
    *@description Description of the Emulate Idle State select in Sensors tab
    */
   forcesSelectedIdleStateEmulation: 'Forces selected idle state emulation',
+  /**
+   *@description Description of the Emulate CPU Pressure State select in Sensors tab
+   */
+  forcesSelectedPressureStateEmulation: 'Forces selected pressure state emulation',
   /**
    *@description Title for a group of configuration options in a drop-down input.
    */
@@ -232,6 +236,10 @@ export class SensorsView extends UI.Widget.VBox {
     this.createHardwareConcurrencySection();
 
     this.createPanelSeparator();
+
+    this.createPressureSection();
+
+    this.createPanelSeparator();
   }
 
   override wasShown(): void {
@@ -509,6 +517,17 @@ export class SensorsView extends UI.Widget.VBox {
     this.setBoxOrientation(this.deviceOrientation, false);
   }
 
+  private createPressureSection(): void {
+    const container = this.contentElement.createChild('div', 'pressure-section');
+    const control = UI.SettingsUI.createControlForSetting(
+        Common.Settings.Settings.instance().moduleSetting('emulation.cpu-pressure'),
+        i18nString(UIStrings.forcesSelectedPressureStateEmulation));
+
+    if (control) {
+      container.appendChild(control);
+    }
+  }
+
   private enableOrientationFields(disable: boolean|null): void {
     if (disable) {
       this.deviceOrientationFieldset.disabled = true;
@@ -789,6 +808,14 @@ export const enum DeviceOrientationModificationSource {
   SELECT_PRESET = 'selectPreset',
 }
 
+export const PressureOptions = {
+  NoOverride: 'no-override',
+  Nominal: 'nominal',
+  Fair: 'fair',
+  Serious: 'serious',
+  Critical: 'critical',
+};
+
 export const NonPresetOptions = {
   NoOverride: 'noOverride',
   Custom: 'custom',