chrome-devtools-frontend 1.0.938150 → 1.0.939277

package/front_end/panels/sources/javaScriptBreakpointsSidebarPane.css

@@ -5,7 +5,7 @@
  */
 
 .breakpoint-entry {
-  padding: 3px 8px 3px 8px;
+  padding: 3px 0;
   min-height: 18px;
   line-height: 15px;
   border-top: 1px solid var(--color-details-hairline-light);
@@ -15,71 +15,45 @@
   background-color: var(--legacy-focus-bg-color);
 }
 
-.breakpoint-entry [is=dt-checkbox] {
+.breakpoint-entry [is="dt-checkbox"] {
   max-width: 100%;
   white-space: nowrap;
+  border-left-width: 3px;
 }
 
 :not(.breakpoints-list-deactivated) > .breakpoint-entry:hover {
   background-color: var(--color-background-elevation-1);
 }
 
-.breakpoint-entry > .decoration-and-source {
-  display: flex;
-}
-
-.breakpoint-entry .breakpoint {
-  content: var(--inline-breakpoint-enabled);
-  height: 12px;
-  top: 1px;
-  position: relative;
-  width: 11px;
-  margin-left: 3px;
-  margin-right: 3px;
-
-  --inline-breakpoint-enabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="%234285F4" stroke="%231A73E8"/></svg>');
-  --inline-breakpoint-disabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="%234285F4" fill-opacity="0.2" stroke="%231A73E8"/></svg>');
-  --inline-conditional-breakpoint-enabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.75489 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.75489 11.2583 6.29382 11.5 5.80138 11.5H0.5V0.5Z" fill="%23F29900" stroke="%23E37400"/><path d="M3.51074 7.75635H4.68408V9H3.51074V7.75635ZM4.68408 7.23779H3.51074V6.56104C3.51074 6.271 3.55615 6.02344 3.64697 5.81836C3.73779 5.61328 3.90039 5.39648 4.13477 5.16797L4.53027 4.77686C4.71484 4.59814 4.83936 4.4502 4.90381 4.33301C4.97119 4.21582 5.00488 4.09424 5.00488 3.96826C5.00488 3.77197 4.9375 3.62402 4.80273 3.52441C4.66797 3.4248 4.46582 3.375 4.19629 3.375C3.9502 3.375 3.69238 3.42773 3.42285 3.5332C3.15625 3.63574 2.88232 3.78955 2.60107 3.99463V2.81689C2.88818 2.65283 3.17822 2.52979 3.47119 2.44775C3.76709 2.36279 4.06299 2.32031 4.35889 2.32031C4.95068 2.32031 5.41504 2.45801 5.75195 2.7334C6.08887 3.00879 6.25732 3.38818 6.25732 3.87158C6.25732 4.09424 6.20752 4.30225 6.10791 4.49561C6.0083 4.68604 5.8208 4.91602 5.54541 5.18555L5.15869 5.56348C4.95947 5.75684 4.83203 5.91504 4.77637 6.03809C4.7207 6.16113 4.69287 6.31201 4.69287 6.49072C4.69287 6.51709 4.69141 6.54785 4.68848 6.58301C4.68848 6.61816 4.68701 6.65625 4.68408 6.69727V7.23779Z" fill="white"/></svg>');
-  --inline-conditional-breakpoint-disabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.75489 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.75489 11.2583 6.29382 11.5 5.80138 11.5H0.5V0.5Z" fill="%23F9AB00" fill-opacity="0.2" stroke="%23E37400"/><path d="M3.51074 7.75635H4.68408V9H3.51074V7.75635ZM4.68408 7.23779H3.51074V6.56104C3.51074 6.271 3.55615 6.02344 3.64697 5.81836C3.73779 5.61328 3.90039 5.39648 4.13477 5.16797L4.53027 4.77686C4.71484 4.59814 4.83936 4.4502 4.90381 4.33301C4.97119 4.21582 5.00488 4.09424 5.00488 3.96826C5.00488 3.77197 4.9375 3.62402 4.80273 3.52441C4.66797 3.4248 4.46582 3.375 4.19629 3.375C3.9502 3.375 3.69238 3.42773 3.42285 3.5332C3.15625 3.63574 2.88232 3.78955 2.60107 3.99463V2.81689C2.88818 2.65283 3.17822 2.52979 3.47119 2.44775C3.76709 2.36279 4.06299 2.32031 4.35889 2.32031C4.95068 2.32031 5.41504 2.45801 5.75195 2.7334C6.08887 3.00879 6.25732 3.38818 6.25732 3.87158C6.25732 4.09424 6.20752 4.30225 6.10791 4.49561C6.0083 4.68604 5.8208 4.91602 5.54541 5.18555L5.15869 5.56348C4.95947 5.75684 4.83203 5.91504 4.77637 6.03809C4.7207 6.16113 4.69287 6.31201 4.69287 6.49072C4.69287 6.51709 4.69141 6.54785 4.68848 6.58301C4.68848 6.61816 4.68701 6.65625 4.68408 6.69727V7.23779Z" fill="%23E37400"/></svg>');
-  --inline-logpoint-enabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="%23F439A0" stroke="%23D01884"/><circle cx="3" cy="6" r="1" fill="white"/><circle cx="7" cy="6" r="1" fill="white"/></svg>');
-  --inline-logpoint-disabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="%23F439A0" fill-opacity="0.2" stroke="%23D01884"/><circle cx="3" cy="6" r="1" fill="%23D01884"/><circle cx="7" cy="6" r="1" fill="%23D01884"/></svg>');
-}
-
-.breakpoint-entry .breakpoint.disabled,
-.breakpoints-list-deactivated .breakpoint-entry .breakpoint {
-  content: var(--inline-breakpoint-disabled);
-}
-
-:host-context(.-theme-with-dark-background) .breakpoint-entry .breakpoint {
-  --inline-breakpoint-enabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="%235186EC" stroke="%231A73E8"/></svg>');
-  --inline-conditional-breakpoint-enabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.75489 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.75489 11.2583 6.29382 11.5 5.80138 11.5H0.5V0.5Z" fill="%23e9a33a" stroke="%23E37400"/><path d="M3.51074 7.75635H4.68408V9H3.51074V7.75635ZM4.68408 7.23779H3.51074V6.56104C3.51074 6.271 3.55615 6.02344 3.64697 5.81836C3.73779 5.61328 3.90039 5.39648 4.13477 5.16797L4.53027 4.77686C4.71484 4.59814 4.83936 4.4502 4.90381 4.33301C4.97119 4.21582 5.00488 4.09424 5.00488 3.96826C5.00488 3.77197 4.9375 3.62402 4.80273 3.52441C4.66797 3.4248 4.46582 3.375 4.19629 3.375C3.9502 3.375 3.69238 3.42773 3.42285 3.5332C3.15625 3.63574 2.88232 3.78955 2.60107 3.99463V2.81689C2.88818 2.65283 3.17822 2.52979 3.47119 2.44775C3.76709 2.36279 4.06299 2.32031 4.35889 2.32031C4.95068 2.32031 5.41504 2.45801 5.75195 2.7334C6.08887 3.00879 6.25732 3.38818 6.25732 3.87158C6.25732 4.09424 6.20752 4.30225 6.10791 4.49561C6.0083 4.68604 5.8208 4.91602 5.54541 5.18555L5.15869 5.56348C4.95947 5.75684 4.83203 5.91504 4.77637 6.03809C4.7207 6.16113 4.69287 6.31201 4.69287 6.49072C4.69287 6.51709 4.69141 6.54785 4.68848 6.58301C4.68848 6.61816 4.68701 6.65625 4.68408 6.69727V7.23779Z" fill="white"/></svg>');
-  --inline-logpoint-enabled: url('data:image/svg+xml,<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H5.80139C6.29382 0.5 6.7549 0.741701 7.03503 1.14669L10.392 6L7.03503 10.8533C6.7549 11.2583 6.29382 11.5 5.80139 11.5H0.5V0.5Z" fill="%23E54D9B" stroke="%23D01884"/><circle cx="3" cy="6" r="1" fill="white"/><circle cx="7" cy="6" r="1" fill="white"/></svg>');
-}
+.decoration-and-content {
+  --override-color-breakpoint-conditional: #f29900;
+  --override-color-logpoint: #f439a0;
 
-.breakpoint-entry .breakpoint-conditional {
-  content: var(--inline-conditional-breakpoint-enabled);
+  padding: 0 8px;
+  border-left: 4px solid;
+  border-color: transparent;
 }
 
-.breakpoint-entry .breakpoint-conditional.disabled,
-.breakpoints-list-deactivated .breakpoint-entry .breakpoint-conditional {
-  content: var(--inline-conditional-breakpoint-disabled);
+.-theme-with-dark-background .decoration-and-content,
+:host-context(.-theme-with-dark-background) .decoration-and-content {
+  --override-color-breakpoint-conditional: #e9a33a;
+  --override-color-logpoint: #e54d9b;
 }
 
-.breakpoint-entry .logpoint {
-  content: var(--inline-logpoint-enabled);
+.decoration-and-content.breakpoint-conditional {
+  border-color: var(--override-color-breakpoint-conditional);
 }
 
-.breakpoint-entry .logpoint.disabled,
-.breakpoints-list-deactivated .breakpoint-entry .logpoint {
-  content: var(--inline-logpoint-disabled);
+.decoration-and-content.logpoint {
+  border-color: var(--override-color-logpoint);
 }
 
-.breakpoint-entry .source-text {
+.decoration-and-content > .source-text {
   cursor: pointer;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-  margin-left: 4px;
+  margin-left: 22px;
 }
 
 .breakpoints-list-deactivated {

package/front_end/panels/sources/navigatorTree.css

@@ -33,7 +33,7 @@
 
 .icon,
 .icon-badge {
-  margin: -3px -5px -3px -5px;
+  margin: -3px -5px;
 }
 
 .icon-stack {
@@ -41,7 +41,7 @@
   display: inline-flex;
 }
 
-.icon-stack > [is=ui-icon]:not(:first-child) {
+.icon-stack > [is="ui-icon"]:not(:first-child) {
   position: absolute;
   left: 0;
   top: 0;
@@ -124,7 +124,7 @@
 }
 
 @media (forced-colors: active) {
-  .tree-outline li .leading-icons [is=ui-icon].icon-mask {
+  .tree-outline li .leading-icons [is="ui-icon"].icon-mask {
     background: ButtonText;
   }
 
@@ -134,7 +134,7 @@
   }
 
   .tree-outline:not(.hide-selection-when-blurred) li.parent:hover:not(.selected)::before,
-  .tree-outline:not(.hide-selection-when-blurred) li:hover:not(.selected) [is=ui-icon].icon-mask {
+  .tree-outline:not(.hide-selection-when-blurred) li:hover:not(.selected) [is="ui-icon"].icon-mask {
     background-color: HighlightText;
   }
 

package/front_end/panels/sources/sourcesPanel.css

@@ -51,13 +51,13 @@
   margin-top: 0;
 }
 
-.scripts-debug-toolbar-drawer > [is=dt-checkbox] {
+.scripts-debug-toolbar-drawer > [is="dt-checkbox"] {
   display: none;
   padding-left: 3px;
   height: 28px;
 }
 
-.scripts-debug-toolbar-drawer.expanded > [is=dt-checkbox] {
+.scripts-debug-toolbar-drawer.expanded > [is="dt-checkbox"] {
   display: flex;
 }
 

package/front_end/panels/sources/threadsSidebarPane.css

@@ -35,7 +35,7 @@
 .thread-item-paused-state {
   color: var(--color-text-disabled);
   margin-left: auto;
-  padding: 0 10px 0 10px;
+  padding: 0 10px;
 }
 
 .selected-thread-icon {

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

@@ -59,7 +59,7 @@
 .bad {
   display: block;
   border: 1px solid transparent;
-  border-width: 0 6px 12px 6px;
+  border-width: 0 6px 12px;
   border-bottom-color: var(--lighthouse-red);
   width: 0;
 }

package/front_end/panels/timeline/historyToolbarButton.css

@@ -45,7 +45,7 @@
     opacity: 100%;
   }
 
-  .history-dropdown-button[disabled] [is=ui-icon].icon-mask {
+  .history-dropdown-button[disabled] [is="ui-icon"].icon-mask {
     background-color: GrayText;
   }
 }

package/front_end/panels/timeline/timelineStatusDialog.css

@@ -7,7 +7,7 @@
 .timeline-status-dialog {
   display: flex;
   flex-direction: column;
-  padding: 16px 16px 12px 16px;
+  padding: 16px 16px 12px;
   align-self: center;
   background-color: var(--color-background);
   box-shadow: var(--drop-shadow);

package/front_end/panels/webauthn/webauthnPane.css

@@ -39,7 +39,7 @@
 
 .new-authenticator-container {
   display: none;
-  margin: 10px 10px;
+  margin: 10px;
 }
 
 .webauthn-pane.enabled .new-authenticator-container {
@@ -97,7 +97,7 @@
 }
 
 .authenticator-field-value {
-  padding: 5px 0 5px 0;
+  padding: 5px 0;
   display: inline-block;
   font-family: monospace;
 }

package/front_end/ui/components/adorners/adorner.css

@@ -33,7 +33,7 @@ slot {
   border-color: var(--override-adorner-focus-border-color, var(--color-primary));
 }
 
-:host([aria-pressed=true]) slot {
+:host([aria-pressed="true"]) slot {
   color: var(--override-adorner-active-text-color, var(--color-background));
   background-color: var(--override-adorner-active-background-color, var(--color-primary));
   border: 1px solid var(--override-adorner-active-background-color, var(--color-primary));

package/front_end/ui/components/expandable_list/expandableList.css

@@ -17,7 +17,7 @@ div {
 
 .arrow-icon {
   display: inline-block;
-  -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+  -webkit-mask-image: url("Images/treeoutlineTriangles.svg");
   -webkit-mask-size: 32px 24px;
   -webkit-mask-position: 0 0;
   background-color: var(--color-text-primary);

package/front_end/ui/components/linear_memory_inspector/valueInterpreterDisplay.css

@@ -17,8 +17,7 @@
   width: 100%;
   display: grid;
   grid-template-columns: auto auto 1fr;
-  grid-column-gap: 24px;
-  grid-row-gap: 4px;
+  gap: 4px 24px;
   min-height: 24px;
   overflow: hidden;
   padding: 2px 12px;

package/front_end/ui/components/linear_memory_inspector/valueInterpreterSettings.css

@@ -13,7 +13,7 @@
 .settings {
   display: flex;
   flex-wrap: wrap;
-  margin: 0 12px 12px 12px;
+  margin: 0 12px 12px;
   column-gap: 45px;
   row-gap: 15px;
 }

package/front_end/ui/components/report_view/reportKey.css

@@ -6,7 +6,7 @@
 
 :host {
   line-height: 28px;
-  margin: 0 0 8px 0;
+  margin: 0 0 8px;
 }
 
 .key {

package/front_end/ui/components/report_view/reportValue.css

@@ -6,7 +6,7 @@
 
 :host {
   line-height: 28px;
-  margin: 0 0 8px 0;
+  margin: 0 0 8px;
   min-width: 150px;
 }
 

package/front_end/ui/components/settings/settingCheckbox.css

@@ -24,3 +24,8 @@ label {
 p {
   margin: 12px 0;
 }
+
+/* Preserve look of legacy checkboxes in dark mode */
+:host-context(.-theme-with-dark-background) input[type="checkbox"]:not(.-theme-preserve) {
+  accent-color: var(--color-checkbox-accent-color);
+}

package/front_end/ui/legacy/ContextMenu.ts

@@ -137,8 +137,11 @@ export class Section {
     this.items = [];
   }
 
-  appendItem(label: string, handler: () => void, disabled?: boolean): Item {
+  appendItem(label: string, handler: () => void, disabled?: boolean, additionalElement?: Element): Item {
     const item = new Item(this.contextMenu, 'item', label, disabled);
+    if (additionalElement) {
+      item.customElement = additionalElement;
+    }
     this.items.push(item);
     if (this.contextMenu) {
       this.contextMenu.setHandler(item.id(), handler);
@@ -147,7 +150,7 @@ export class Section {
   }
 
   appendCustomItem(element: Element): Item {
-    const item = new Item(this.contextMenu, 'item', '<custom>');
+    const item = new Item(this.contextMenu, 'item');
     item.customElement = element;
     this.items.push(item);
     return item;
@@ -331,6 +334,7 @@ export class SubMenu extends Item {
 
 export interface ContextMenuOptions {
   useSoftMenu?: boolean;
+  onSoftMenuClosed?: () => void;
   x?: number;
   y?: number;
 }
@@ -344,6 +348,7 @@ export class ContextMenu extends SubMenu {
   private readonly useSoftMenu: boolean;
   private x: number;
   private y: number;
+  private onSoftMenuClosed?: () => void;
   private readonly handlers: Map<number, () => void>;
   idInternal: number;
   private softMenu?: SoftContextMenu;
@@ -360,6 +365,7 @@ export class ContextMenu extends SubMenu {
     this.useSoftMenu = Boolean(options.useSoftMenu);
     this.x = options.x === undefined ? mouseEvent.x : options.x;
     this.y = options.y === undefined ? mouseEvent.y : options.y;
+    this.onSoftMenuClosed = options.onSoftMenuClosed;
     this.handlers = new Map();
     this.idInternal = 0;
 
@@ -431,7 +437,8 @@ export class ContextMenu extends SubMenu {
     const ownerDocument = (eventTarget as HTMLElement).ownerDocument;
     if (this.useSoftMenu || ContextMenu.useSoftMenu ||
         Host.InspectorFrontendHost.InspectorFrontendHostInstance.isHostedMode()) {
-      this.softMenu = new SoftContextMenu((menuObject as SoftContextMenuDescriptor[]), this.itemSelected.bind(this));
+      this.softMenu = new SoftContextMenu(
+          (menuObject as SoftContextMenuDescriptor[]), this.itemSelected.bind(this), undefined, this.onSoftMenuClosed);
       this.softMenu.show((ownerDocument as Document), new AnchorBox(this.x, this.y, 0, 0));
     } else {
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.showContextMenuAtPoint(

package/front_end/ui/legacy/SoftContextMenu.ts

@@ -77,15 +77,18 @@ export class SoftContextMenu {
   private hideOnUserGesture?: ((event: Event) => void);
   private activeSubMenuElement?: HTMLElement;
   private subMenu?: SoftContextMenu;
+  private onMenuClosed?: () => void;
 
   constructor(
-      items: SoftContextMenuDescriptor[], itemSelectedCallback: (arg0: number) => void, parentMenu?: SoftContextMenu) {
+      items: SoftContextMenuDescriptor[], itemSelectedCallback: (arg0: number) => void, parentMenu?: SoftContextMenu,
+      onMenuClosed?: () => void) {
     this.items = items;
     this.itemSelectedCallback = itemSelectedCallback;
     this.parentMenu = parentMenu;
     this.highlightedMenuItemElement = null;
 
     this.detailsForElementMap = new WeakMap();
+    this.onMenuClosed = onMenuClosed;
   }
 
   show(document: Document, anchorBox: AnchorBox): void {
@@ -165,6 +168,7 @@ export class SoftContextMenu {
         delete this.parentMenu.activeSubMenuElement;
       }
     }
+    this.onMenuClosed?.();
   }
 
   private createMenuItem(item: SoftContextMenuDescriptor): HTMLElement {
@@ -193,7 +197,7 @@ export class SoftContextMenu {
       subMenuTimer: undefined,
     };
 
-    if (item.element) {
+    if (item.element && !item.label) {
       const wrapper = menuItemElement.createChild('div', 'soft-context-menu-custom-item');
       wrapper.appendChild(item.element);
       detailsForElement.customElement = (item.element as HTMLElement);
@@ -205,6 +209,9 @@ export class SoftContextMenu {
       menuItemElement.classList.add('soft-context-menu-disabled');
     }
     createTextChild(menuItemElement, item.label || '');
+    if (item.element) {
+      menuItemElement.appendChild(item.element);
+    }
     menuItemElement.createChild('span', 'soft-context-menu-shortcut').textContent = item.shortcut || '';
 
     menuItemElement.addEventListener('mousedown', this.menuItemMouseDown.bind(this), false);

package/front_end/ui/legacy/checkboxTextLabel.css

@@ -44,7 +44,7 @@ input.dt-checkbox-themed {
 }
 
 input.dt-checkbox-themed::after {
-  content: '';
+  content: "";
   line-height: 10px;
   position: absolute;
   cursor: pointer;
@@ -60,6 +60,10 @@ input.dt-checkbox-themed:checked::after {
   background-color: var(--color-background-inverted);
 }
 
+:host-context(.-theme-with-dark-background) input:not(.dt-checkbox-themed) {
+  accent-color: var(--color-checkbox-accent-color);
+}
+
 .dt-checkbox-text {
   margin-left: 3px;
   overflow: hidden;

package/front_end/ui/legacy/components/color_picker/spectrum.css

@@ -242,26 +242,26 @@
   user-select: text;
 }
 
-.contrast-details-value [is=ui-icon] {
+.contrast-details-value [is="ui-icon"] {
   display: none;
   margin-left: 5px;
   background-color: var(--color-text-primary);
 }
 
-.spectrum-contrast-details .toolbar-state-on [is=ui-icon] {
+.spectrum-contrast-details .toolbar-state-on [is="ui-icon"] {
   background-color: var(--color-text-secondary);
 }
 
-[is=ui-icon].smallicon-no {
+[is="ui-icon"].smallicon-no {
   background-color: var(--color-accent-red);
 }
 
-.contrast-pass-fail span[is=ui-icon] {
+.contrast-pass-fail span[is="ui-icon"] {
   margin-left: 5px;
 }
 
-[is=ui-icon].smallicon-checkmark-square,
-[is=ui-icon].smallicon-checkmark-behind {
+[is="ui-icon"].smallicon-checkmark-square,
+[is="ui-icon"].smallicon-checkmark-behind {
   background-color: var(--color-accent-green);
 }
 
@@ -328,7 +328,7 @@
   background-color: var(--color-background-inverted-opacity-50);
 }
 
-[is=ui-icon].icon-mask.copy-color-icon {
+[is="ui-icon"].icon-mask.copy-color-icon {
   background-color: var(--color-background);
 }
 
@@ -461,7 +461,7 @@
 }
 
 .palette-color-shades > .spectrum-palette-color {
-  margin: 8px 0 0 0;
+  margin: 8px 0 0;
   margin-left: 8px;
   width: 12px;
 }
@@ -644,7 +644,7 @@ div.palette-preview {
   padding-bottom: 2px;
 }
 
-.swatch.contrast [is=ui-icon] {
+.swatch.contrast [is="ui-icon"] {
   margin: -2px;
 }
 

package/front_end/ui/legacy/components/data_grid/dataGrid.css

@@ -292,7 +292,7 @@
 }
 
 @media (forced-colors: active) {
-  .sort-order-icon-container [is=ui-icon].icon-mask,
+  .sort-order-icon-container [is="ui-icon"].icon-mask,
   .data-grid td.disclosure::before {
     forced-color-adjust: none;
     background-color: ButtonText;
@@ -303,7 +303,7 @@
   }
 
   .data-grid th.sortable:hover *,
-  .data-grid th.sortable:hover .sort-order-icon-container [is=ui-icon].icon-mask,
+  .data-grid th.sortable:hover .sort-order-icon-container [is="ui-icon"].icon-mask,
   .data-grid tr.parent.selected td.disclosure::before,
   .data-grid:focus tr.parent.selected td.disclosure::before,
   .data-grid table.data tr.parent.revealed:hover td.disclosure::before {

package/front_end/ui/legacy/components/inline_editor/cssAngleEditor.css

@@ -5,7 +5,7 @@
  */
 
 .editor.interacting::before {
-  content: '';
+  content: "";
   position: fixed;
   inset: 0;
 }
@@ -42,7 +42,7 @@
   width: 0;
   height: 0;
   border-style: solid;
-  border-width: 0 0.9em 0.9em 0.9em;
+  border-width: 0 0.9em 0.9em;
   border-color: transparent transparent var(--color-background-elevation-1) transparent;
 }
 
@@ -76,7 +76,7 @@
 }
 
 .hand::before {
-  content: '';
+  content: "";
   display: inline-block;
   position: absolute;
   top: -0.6em;

package/front_end/ui/legacy/components/inline_editor/cssLength.css

@@ -33,7 +33,7 @@
   -webkit-mask-size: 19px 6px;
   -webkit-mask-repeat: no-repeat;
   background-color: var(--color-text-primary);
-  content: '';
+  content: "";
   height: 1em;
   width: 1em;
 }

package/front_end/ui/legacy/components/inline_editor/cssShadowEditor.css

@@ -6,7 +6,7 @@
 
 :host {
   user-select: none;
-  padding: 4px 12px 12px 12px;
+  padding: 4px 12px 12px;
   border: 1px solid transparent;
 }
 

package/front_end/ui/legacy/components/inline_editor/fontEditor.css

@@ -6,7 +6,7 @@
 
 :host {
   user-select: none;
-  padding: 4px 12px 12px 12px;
+  padding: 4px 12px 12px;
 }
 
 .error-input {

package/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css

@@ -9,7 +9,7 @@
 }
 
 .object-properties-section {
-  padding: 0 0 0 0;
+  padding: 0;
   color: var(--color-text-primary);
   display: flex;
   flex-direction: column;
@@ -25,7 +25,7 @@
 
 .object-properties-section li.editing-sub-part {
   padding: 3px 12px 8px 6px;
-  margin: -1px -6px -8px -6px;
+  margin: -1px -6px -8px;
   text-overflow: clip;
 }
 

package/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -334,14 +334,20 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
         break;
       }
     }
-    if (!completion) {
-      return false;
+    // If there is an auto-completion, press 'tab' first time will show the auto-completion, second time will rewrite
+    // the query. Otherwise it will select the next item.
+    if (completion) {
+      const selection = this.inputBoxElement.getComponentSelection();
+      if (selection && selection.toString().trim() !== '') {
+        this.setQuery(completion);
+        return true;
+      }
+      this.inputBoxElement.focus();
+      this.inputBoxElement.setText(completion);
+      this.setQuerySelectedRange(userEnteredText.length, completion.length);
+      return true;
     }
-    this.inputBoxElement.focus();
-    this.inputBoxElement.setText(completion);
-    this.inputBoxElement.setSelectedRange(userEnteredText.length, completion.length);
-    this.scheduleFilter();
-    return true;
+    return this.list.selectNextItem(true, false);
   }
 
   private itemsFilteredForTest(): void {

package/front_end/ui/legacy/components/quick_open/filteredListWidget.css

@@ -30,7 +30,7 @@
 devtools-text-prompt {
   flex: 0 0 40px;
   font-size: 14px;
-  font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
+  font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
   line-height: 16px;
   padding: 12px;
 }
@@ -80,7 +80,7 @@ devtools-text-prompt {
   color: var(--color-text-primary);
   display: flex;
   border-bottom: 1px solid var(--color-details-hairline-light);
-  font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
+  font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
   padding-left: 8px;
   padding-right: 8px;
 }

package/front_end/ui/legacy/components/source_frame/imageView.css

@@ -9,7 +9,7 @@
 }
 
 .image-view > .image {
-  padding: 20px 20px 10px 20px;
+  padding: 20px 20px 10px;
   text-align: center;
 }