chrome-devtools-frontend 1.0.938678 → 1.0.939473

package/front_end/core/sdk/Target.ts

@@ -67,7 +67,7 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
         this.#capabilitiesMask = Capability.JS;
         break;
       case Type.AuctionWorklet:
-        this.#capabilitiesMask = Capability.JS;
+        this.#capabilitiesMask = Capability.JS | Capability.EventBreakpoints;
         break;
       case Type.Browser:
         this.#capabilitiesMask = Capability.Target | Capability.IO;
@@ -249,5 +249,6 @@ export enum Capability {
   WebAuthn = 1 << 16,
   IO = 1 << 17,
   Media = 1 << 18,
+  EventBreakpoints = 1 << 19,
   None = 0,
 }

package/front_end/core/sdk/sdk-meta.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as Common from '../common/common.js';
-
 import * as i18n from '../i18n/i18n.js';
+
 const UIStrings = {
   /**
   *@description Title of a setting under the Console category that can be invoked through the Command Menu
@@ -746,6 +746,35 @@ Common.Settings.registerSettingExtension({
   title: i18nLazyString(UIStrings.emulateCssMediaFeature, {PH1: 'prefers-color-scheme'}),
 });
 
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.RENDERING,
+  settingName: 'emulatedCSSMediaFeatureForcedColors',
+  settingType: Common.Settings.SettingType.ENUM,
+  storageType: Common.Settings.SettingStorageType.Session,
+  defaultValue: '',
+  options: [
+    {
+      title: i18nLazyString(UIStrings.doNotEmulateCss, {PH1: 'forced-colors'}),
+      text: i18nLazyString(UIStrings.noEmulation),
+      value: '',
+    },
+    {
+      title: i18nLazyString(UIStrings.emulateCss, {PH1: 'forced-colors: active'}),
+      text: i18n.i18n.lockedLazyString('forced-colors: active'),
+      value: 'active',
+    },
+    {
+      title: i18nLazyString(UIStrings.emulateCss, {PH1: 'forced-colors: none'}),
+      text: i18n.i18n.lockedLazyString('forced-colors: none'),
+      value: 'none',
+    },
+  ],
+  tags: [
+    i18nLazyString(UIStrings.query),
+  ],
+  title: i18nLazyString(UIStrings.emulateCssMediaFeature, {PH1: 'forced-colors'}),
+});
+
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.RENDERING,
   settingName: 'emulatedCSSMediaFeaturePrefersReducedMotion',

package/front_end/core/sdk/sdk.ts

@@ -11,6 +11,7 @@ import './NetworkManager.js';
 import './RuntimeModel.js';
 
 import * as AccessibilityModel from './AccessibilityModel.js';
+import * as CategorizedBreakpoint from './CategorizedBreakpoint.js';
 import * as ChildTargetManager from './ChildTargetManager.js';
 import * as CompilerSourceMappingContentProvider from './CompilerSourceMappingContentProvider.js';
 import * as Connections from './Connections.js';
@@ -37,6 +38,7 @@ import * as DebuggerModel from './DebuggerModel.js';
 import * as DOMDebuggerModel from './DOMDebuggerModel.js';
 import * as DOMModel from './DOMModel.js';
 import * as EmulationModel from './EmulationModel.js';
+import * as EventBreakpointsModel from './EventBreakpointsModel.js';
 import * as FilmStripModel from './FilmStripModel.js';
 import * as FrameManager from './FrameManager.js';
 import * as HeapProfilerModel from './HeapProfilerModel.js';
@@ -76,6 +78,7 @@ import * as WebAuthnModel from './WebAuthnModel.js';
 
 export {
   AccessibilityModel,
+  CategorizedBreakpoint,
   ChildTargetManager,
   CompilerSourceMappingContentProvider,
   Connections,
@@ -102,6 +105,7 @@ export {
   DOMDebuggerModel,
   DOMModel,
   EmulationModel,
+  EventBreakpointsModel,
   FilmStripModel,
   FrameManager,
   HeapProfilerModel,

package/front_end/entrypoints/inspector_main/RenderingOptions.ts

@@ -187,6 +187,10 @@ const UIStrings = {
   * page from loading images with the WebP format.
   */
   disableWebpImageFormat: 'Disable `WebP` image format',
+  /**
+   * @description Explanation text for the 'Forces CSS forced-colors' setting in the Rendering tool.
+   */
+  forcesCssForcedColors: 'Forces CSS forced-colors media feature',
 };
 const str_ = i18n.i18n.registerUIStrings('entrypoints/inspector_main/RenderingOptions.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -263,13 +267,16 @@ export class RenderingOptionsView extends UI.Widget.VBox {
         i18nString(UIStrings.forcesCssPreferscolorschemeMedia),
         Common.Settings.Settings.instance().moduleSetting('emulatedCSSMediaFeaturePrefersColorScheme'));
     this.appendSelect(
-        i18nString(UIStrings.forcesCssPrefersreducedmotion),
-        Common.Settings.Settings.instance().moduleSetting('emulatedCSSMediaFeaturePrefersReducedMotion'));
+        i18nString(UIStrings.forcesCssForcedColors),
+        Common.Settings.Settings.instance().moduleSetting('emulatedCSSMediaFeatureForcedColors'));
     if (supportsPrefersContrast()) {
       this.appendSelect(
           i18nString(UIStrings.forcesCssPreferscontrastMedia),
           Common.Settings.Settings.instance().moduleSetting('emulatedCSSMediaFeaturePrefersContrast'));
     }
+    this.appendSelect(
+        i18nString(UIStrings.forcesCssPrefersreducedmotion),
+        Common.Settings.Settings.instance().moduleSetting('emulatedCSSMediaFeaturePrefersReducedMotion'));
     if (supportsPrefersReducedData()) {
       this.appendSelect(
           i18nString(UIStrings.forcesCssPrefersreduceddataMedia),

package/front_end/entrypoints/inspector_main/renderingOptions.css

@@ -8,8 +8,8 @@
   padding: 12px;
 }
 
-[is=dt-checkbox] {
-  margin: 0 0 10px 0;
+[is="dt-checkbox"] {
+  margin: 0 0 10px;
   flex: none;
 }
 

package/front_end/entrypoints/main/main-meta.ts

@@ -223,8 +223,6 @@ let loadedInspectorMainModule: (typeof InspectorMain|undefined);
 
 async function loadMainModule(): Promise<typeof Main> {
   if (!loadedMainModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('entrypoints/main');
     loadedMainModule = await import('./main.js');
   }
   return loadedMainModule;
@@ -237,8 +235,6 @@ async function loadMainModule(): Promise<typeof Main> {
 
 async function loadInspectorMainModule(): Promise<typeof InspectorMain> {
   if (!loadedInspectorMainModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('entrypoints/inspector_main');
     loadedInspectorMainModule = await import('../inspector_main/inspector_main.js');
   }
   return loadedInspectorMainModule;

package/front_end/entrypoints/node_main/nodeConnectionsPanel.css

@@ -13,7 +13,7 @@
   flex: none;
   max-width: 600px;
   max-height: 202px;
-  margin: 20px 0 5px 0;
+  margin: 20px 0 5px;
 }
 
 .network-discovery-list-empty {
@@ -25,7 +25,7 @@
 }
 
 .network-discovery-list-item {
-  padding: 3px 5px 3px 5px;
+  padding: 3px 5px;
   height: 30px;
   display: flex;
   align-items: center;

package/front_end/entrypoints/shell/shell.js

@@ -20,4 +20,5 @@ import '../../models/persistence/persistence-legacy.js';
 import '../../models/extensions/extensions-legacy.js';
 
 import './shell-meta-files.js';
+import '../main/main.js';
 // We generate the descriptors in this file, which depend on the runtime.

package/front_end/entrypoints/shell/shell.json

@@ -1,6 +1,5 @@
 {
   "modules": [
-    { "name": "entrypoints/main", "type": "autostart" },
     { "name": "ui/legacy", "type": "autostart" },
     { "name": "ui/legacy/components/text_editor", "type": "autostart" },
     { "name": "ui/legacy/components/source_frame", "type": "autostart" },

package/front_end/models/persistence/editFileSystemView.css

@@ -35,7 +35,7 @@
 }
 
 .file-system-list-item {
-  padding: 3px 5px 3px 5px;
+  padding: 3px 5px;
   height: 30px;
   display: flex;
   align-items: center;

package/front_end/models/persistence/workspaceSettingsTab.css

@@ -109,6 +109,6 @@
  * Always show an outline. Needed because we have a white background here.
  */
 
-.workspace-settings-tab .harmony-input[type=text]:not(.error-input):not(:invalid) {
+.workspace-settings-tab .harmony-input[type="text"]:not(.error-input):not(:invalid) {
   box-shadow: var(--legacy-focus-ring-inactive-shadow);
 }

package/front_end/panels/accessibility/accessibilityNode.css

@@ -34,7 +34,7 @@ span.ax-value-undefined {
   text-decoration: line-through;
 }
 
-.tree-outline span[is=dt-icon-label] {
+.tree-outline span[is="dt-icon-label"] {
   position: relative;
   left: -11px;
 }
@@ -60,7 +60,7 @@ span.ax-value-undefined {
   left: -2px;
 }
 
-.tree-outline span[is=dt-icon-label] + .ax-name {
+.tree-outline span[is="dt-icon-label"] + .ax-name {
   margin-left: -11px;
 }
 

package/front_end/panels/accessibility/axBreadcrumbs.css

@@ -45,7 +45,7 @@
   -webkit-mask-size: 30px 10px;
   -webkit-mask-repeat: no-repeat;
   background-color: var(--color-syntax-7);
-  content: '';
+  content: "";
   text-shadow: none;
   margin-right: -2px;
   height: 12px;

package/front_end/panels/animation/animationTimeline.css

@@ -112,7 +112,7 @@ circle.animation-keyframe-point:active {
 }
 
 .animation-timeline-header::after {
-  content: '';
+  content: "";
   height: calc(100% - 48px - 28px);
   position: absolute;
   width: 150px;
@@ -184,14 +184,14 @@ circle.animation-keyframe-point:active {
   height: 100%;
   width: 100%;
   top: 28px;
-  border-left: 1px solid var(--color-syntax-1);
+  border-left: 1px solid var(--color-red);
   z-index: 2;
   cursor: col-resize;
 }
 
 .animation-scrubber-line {
   width: 11px;
-  background: linear-gradient(to right, transparent 5px, var(--color-syntax-1) 5px, var(--color-syntax-1) 6px, transparent 6px);
+  background: linear-gradient(to right, transparent 5px, var(--color-red) 5px, var(--color-red) 6px, transparent 6px);
   position: absolute;
   top: -28px;
   height: 28px;
@@ -204,7 +204,7 @@ circle.animation-keyframe-point:active {
   width: 7px;
   height: 7px;
   transform: rotate(45deg);
-  background: var(--color-syntax-1);
+  background: var(--color-red);
   position: absolute;
   left: 2px;
   top: 1px;
@@ -361,7 +361,7 @@ text.animation-timeline-grid-label {
 
 .animation-paused::before,
 .animation-paused::after {
-  content: '';
+  content: "";
   background: var(--color-background);
   width: 7px;
   height: 20px;

package/front_end/panels/application/components/frameDetailsReportView.css

@@ -54,7 +54,7 @@ button.link {
 }
 
 .inline-name::after {
-  content: ':\u00a0';
+  content: ":\u00a0";
 }
 
 .inline-items {

package/front_end/panels/application/resourcesPanel.css

@@ -122,7 +122,7 @@
 
 .database-query-result {
   position: relative;
-  padding: 1px 22px 1px 22px;
+  padding: 1px 22px;
   min-height: 16px;
   margin-left: -22px;
   padding-right: 0;

package/front_end/panels/application/resourcesSidebar.css

@@ -18,7 +18,7 @@
 }
 
 li.storage-group-list-item {
-  padding: 10px 8px 6px 8px;
+  padding: 10px 8px 6px;
 }
 
 li.storage-group-list-item:not(:first-child) {

package/front_end/panels/browser_debugger/CSPViolationBreakpointsSidebarPane.ts

@@ -26,14 +26,14 @@ export class CSPViolationBreakpointsSidebarPane extends CategorizedBreakpointsSi
   }
 
   protected getBreakpointFromPausedDetails(details: SDK.DebuggerModel.DebuggerPausedDetails):
-      SDK.DOMDebuggerModel.CategorizedBreakpoint|null {
+      SDK.CategorizedBreakpoint.CategorizedBreakpoint|null {
     const breakpointType = details.auxData && details.auxData['violationType'] ? details.auxData['violationType'] : '';
     const breakpoints = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().cspViolationBreakpoints();
     const breakpoint = breakpoints.find(x => x.type() === breakpointType);
     return breakpoint ? breakpoint : null;
   }
 
-  protected toggleBreakpoint(breakpoint: SDK.DOMDebuggerModel.CategorizedBreakpoint, enabled: boolean): void {
+  protected toggleBreakpoint(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint, enabled: boolean): void {
     breakpoint.setEnabled(enabled);
     SDK.DOMDebuggerModel.DOMDebuggerManager.instance().updateCSPViolationBreakpoints();
   }

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -24,10 +24,10 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
   readonly #viewId: string;
   readonly #detailsPausedReason: Protocol.Debugger.PausedEventReason;
   readonly #categories: Map<string, Item>;
-  readonly #breakpoints: Map<SDK.DOMDebuggerModel.CategorizedBreakpoint, Item>;
+  readonly #breakpoints: Map<SDK.CategorizedBreakpoint.CategorizedBreakpoint, Item>;
   #highlightedElement?: HTMLLIElement;
   constructor(
-      categories: string[], breakpoints: SDK.DOMDebuggerModel.CategorizedBreakpoint[], viewId: string,
+      categories: string[], breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[], viewId: string,
       detailsPausedReason: Protocol.Debugger.PausedEventReason) {
     super(true);
     this.#categoriesTreeOutline = new UI.TreeOutline.TreeOutlineInShadow();
@@ -66,7 +66,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     return this.#categories;
   }
 
-  get breakpoints(): Map<SDK.DOMDebuggerModel.CategorizedBreakpoint, Item> {
+  get breakpoints(): Map<SDK.CategorizedBreakpoint.CategorizedBreakpoint, Item> {
     return this.#breakpoints;
   }
 
@@ -96,7 +96,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     this.#categories.set(name, {element: treeElement, checkbox: labelNode.checkboxElement});
   }
 
-  protected createBreakpoint(breakpoint: SDK.DOMDebuggerModel.CategorizedBreakpoint): void {
+  protected createBreakpoint(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint): void {
     const labelNode = UI.UIUtils.CheckboxLabel.create(breakpoint.title());
     labelNode.classList.add('source-code');
     labelNode.checkboxElement.addEventListener('click', this.breakpointCheckboxClicked.bind(this, breakpoint), true);
@@ -124,7 +124,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
   }
 
   protected getBreakpointFromPausedDetails(_details: SDK.DebuggerModel.DebuggerPausedDetails):
-      SDK.DOMDebuggerModel.CategorizedBreakpoint|null {
+      SDK.CategorizedBreakpoint.CategorizedBreakpoint|null {
     return null;
   }
 
@@ -180,11 +180,11 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     }
   }
 
-  protected toggleBreakpoint(breakpoint: SDK.DOMDebuggerModel.CategorizedBreakpoint, enabled: boolean): void {
+  protected toggleBreakpoint(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint, enabled: boolean): void {
     breakpoint.setEnabled(enabled);
   }
 
-  private breakpointCheckboxClicked(breakpoint: SDK.DOMDebuggerModel.CategorizedBreakpoint): void {
+  private breakpointCheckboxClicked(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint): void {
     const item = this.#breakpoints.get(breakpoint);
     if (!item) {
       return;

package/front_end/panels/browser_debugger/EventListenerBreakpointsSidebarPane.ts

@@ -11,10 +11,13 @@ let eventListenerBreakpointsSidebarPaneInstance: EventListenerBreakpointsSidebar
 
 export class EventListenerBreakpointsSidebarPane extends CategorizedBreakpointsSidebarPane {
   private constructor() {
-    const categories = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().eventListenerBreakpoints().map(
-        breakpoint => breakpoint.category());
+    let breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[] =
+        SDK.DOMDebuggerModel.DOMDebuggerManager.instance().eventListenerBreakpoints();
+    const nonDomBreakpoints = SDK.EventBreakpointsModel.EventBreakpointsManager.instance().eventListenerBreakpoints();
+    breakpoints = breakpoints.concat(nonDomBreakpoints);
+
+    const categories = breakpoints.map(breakpoint => breakpoint.category());
     categories.sort();
-    const breakpoints = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().eventListenerBreakpoints();
     super(
         categories, breakpoints, 'sources.eventListenerBreakpoints', Protocol.Debugger.PausedEventReason.EventListener);
   }
@@ -27,10 +30,15 @@ export class EventListenerBreakpointsSidebarPane extends CategorizedBreakpointsS
   }
 
   getBreakpointFromPausedDetails(details: SDK.DebuggerModel.DebuggerPausedDetails):
-      SDK.DOMDebuggerModel.CategorizedBreakpoint|null {
-    return SDK.DOMDebuggerModel.DOMDebuggerManager.instance().resolveEventListenerBreakpoint(details.auxData as {
+      SDK.CategorizedBreakpoint.CategorizedBreakpoint|null {
+    const auxData = details.auxData as {
       eventName: string,
       targetName: string,
-    });
+    };
+    const domBreakpoint = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().resolveEventListenerBreakpoint(auxData);
+    if (domBreakpoint) {
+      return domBreakpoint;
+    }
+    return SDK.EventBreakpointsModel.EventBreakpointsManager.instance().resolveEventListenerBreakpoint(auxData);
   }
 }

package/front_end/panels/browser_debugger/xhrBreakpointsSidebarPane.css

@@ -15,10 +15,7 @@
 
 .breakpoint-condition {
   display: block;
-  margin-top: 4px;
-  margin-bottom: 4px;
-  margin-left: 23px;
-  margin-right: 8px;
+  margin: 4px 8px 4px 23px;
 }
 
 .breakpoint-condition-input {
@@ -42,7 +39,7 @@
   background-color: var(--legacy-focus-bg-color);
 }
 
-.breakpoint-entry [is=dt-checkbox] {
+.breakpoint-entry [is="dt-checkbox"] {
   max-width: 100%;
 }
 

package/front_end/panels/changes/changesSidebar.css

@@ -23,7 +23,7 @@
 }
 
 li .icon {
-  margin: -3px -5px -3px -5px;
+  margin: -3px -5px;
   background: var(--color-background-elevation-2);
 }
 

package/front_end/panels/changes/changesView.css

@@ -4,12 +4,12 @@
  * found in the LICENSE file.
  */
 
-[slot=insertion-point-main] {
+[slot="insertion-point-main"] {
   flex-direction: column;
   display: flex;
 }
 
-[slot=insertion-point-sidebar] {
+[slot="insertion-point-sidebar"] {
   overflow: auto;
 }
 

package/front_end/panels/console/consolePrompt.css

@@ -5,7 +5,7 @@
  */
 
 #console-prompt .CodeMirror {
-  padding: 3px 0 1px 0;
+  padding: 3px 0 1px;
 }
 
 #console-prompt .CodeMirror-line {

package/front_end/panels/console/consoleSidebar.css

@@ -19,7 +19,7 @@
   margin: 0 8px;
 }
 
-[is=ui-icon] {
+[is="ui-icon"] {
   margin: 0 5px;
 }
 
@@ -48,7 +48,7 @@ li .largeicon-navigator-folder {
 }
 
 @media (forced-colors: active) {
-  [is=ui-icon].icon-mask {
+  [is="ui-icon"].icon-mask {
     background-color: ButtonText;
   }
 
@@ -65,8 +65,8 @@ li .largeicon-navigator-folder {
     color: HighlightText;
   }
 
-  .tree-outline li:hover [is=ui-icon].icon-mask,
-  .tree-outline li.selected [is=ui-icon].icon-mask,
+  .tree-outline li:hover [is="ui-icon"].icon-mask,
+  .tree-outline li.selected [is="ui-icon"].icon-mask,
   .tree-outline li.selected:focus .spritesheet-mediumicons:not(.icon-mask) {
     background-color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
   }

package/front_end/panels/console/consoleView.css

@@ -462,7 +462,7 @@
 
 @media (forced-colors: active) {
   .console-message-expand-icon,
-  .console-warning-level [is=ui-icon].icon-mask.expand-group-icon {
+  .console-warning-level [is="ui-icon"].icon-mask.expand-group-icon {
     forced-color-adjust: none;
     background-color: ButtonText;
   }
@@ -493,7 +493,7 @@
     color: HighlightText;
   }
 
-  .console-message-wrapper:focus [is=ui-icon].icon-mask {
+  .console-message-wrapper:focus [is="ui-icon"].icon-mask {
     background-color: HighlightText;
   }
 

package/front_end/panels/css_overview/components/cssOverviewStartView.css

@@ -84,7 +84,7 @@ h1 {
   font-size: 13px;
   line-height: 20px;
   letter-spacing: 0.01em;
-  margin: 9px 0 14px 0;
+  margin: 9px 0 14px;
 }
 
 .preview-icon {

package/front_end/panels/css_overview/cssOverviewCompletedView.css

@@ -28,7 +28,7 @@
 
 .overview-completed-view .colors ul li {
   display: inline-block;
-  margin: 0 0 16px 0;
+  margin: 0 0 16px;
   padding: 0 8px 0 0;
 }
 
@@ -111,7 +111,7 @@
   font-size: 15px;
   font-weight: normal;
   padding: 0;
-  margin: 0 0 20px 0;
+  margin: 0 0 20px;
   padding-left: calc(var(--overview-default-padding) + var(--overview-icon-padding));
   position: relative;
   height: 26px;
@@ -119,7 +119,7 @@
 }
 
 .results-section h1::before {
-  content: '';
+  content: "";
   display: block;
   position: absolute;
   left: var(--overview-default-padding);
@@ -264,14 +264,14 @@
 .overview-completed-view .font-info h2 {
   font-size: 14px;
   font-weight: bold;
-  margin: 0 0 1em 0;
+  margin: 0 0 1em;
 }
 
 .overview-completed-view .font-info h3 {
   font-size: 13px;
   font-weight: normal;
   font-style: italic;
-  margin: 0 0 0.5em 0;
+  margin: 0 0 0.5em;
 }
 
 .overview-completed-view .font-info {
@@ -300,7 +300,7 @@
   width: 30px;
 }
 
-.contrast-warning [is=ui-icon] {
+.contrast-warning [is="ui-icon"] {
   margin-left: 5px;
 }
 
@@ -318,11 +318,11 @@
   min-width: initial;
 }
 
-[is=ui-icon].smallicon-checkmark-square {
+[is="ui-icon"].smallicon-checkmark-square {
   background-color: var(--color-green);
 }
 
-[is=ui-icon].smallicon-no {
+[is="ui-icon"].smallicon-no {
   background-color: var(--color-red);
 }
 

package/front_end/panels/elements/classesPaneWidget.css

@@ -16,7 +16,7 @@
   justify-content: flex-start;
 }
 
-.styles-element-classes-pane [is=dt-checkbox] {
+.styles-element-classes-pane [is="dt-checkbox"] {
   margin-right: 15px;
 }
 

package/front_end/panels/elements/components/adornerSettingsPane.css

@@ -44,7 +44,7 @@
 
 .close::before,
 .close::after {
-  content: '';
+  content: "";
   display: inline-block;
   position: absolute;
   left: 0;

package/front_end/panels/elements/computedStyleWidgetTree.css

@@ -32,7 +32,7 @@
 }
 
 .group-title > h1 {
-  margin: 1px 0 0 0;
+  margin: 1px 0 0;
   padding: 1em 0;
   width: 100%;
   cursor: pointer;

package/front_end/panels/elements/elementsPanel.css

@@ -30,7 +30,7 @@
 #elements-content {
   flex: 1 1;
   overflow: auto;
-  padding: 2px 0 0 0;
+  padding: 2px 0 0;
 }
 
 .style-panes-wrapper {

package/front_end/panels/elements/elementsTreeOutline.css

@@ -67,7 +67,7 @@
   user-select: none;
   -webkit-mask-image: var(--image-file-treeoutlineTriangles);
   -webkit-mask-size: 32px 24px;
-  content: '\A0\A0';
+  content: "\A0\A0";
   color: transparent;
   text-shadow: none;
   margin-right: -3px;

package/front_end/panels/elements/layoutPane.css

@@ -160,7 +160,7 @@
 }
 /* We set dimensions for the invisible input to support quick highlight a11y feature
 that uses the dimensions to draw an outline around the element. */
-.color-picker-label input[type=color] {
+.color-picker-label input[type="color"] {
   width: 100%;
   height: 100%;
   position: absolute;