chrome-devtools-frontend 1.0.937775 → 1.0.939144

package/front_end/generated/InspectorBackendCommands.js

@@ -276,7 +276,8 @@ export function registerCommands(inspectorBackend) {
     QuirksModeIssue: 'QuirksModeIssue',
     NavigatorUserAgentIssue: 'NavigatorUserAgentIssue',
     WasmCrossOriginModuleSharingIssue: 'WasmCrossOriginModuleSharingIssue',
-    GenericIssue: 'GenericIssue'
+    GenericIssue: 'GenericIssue',
+    DeprecationIssue: 'DeprecationIssue'
   });
   inspectorBackend.registerEvent('Audits.issueAdded', ['issue']);
   inspectorBackend.registerEnum('Audits.GetEncodedResponseRequestEncoding', {Webp: 'webp', Jpeg: 'jpeg', Png: 'png'});
@@ -890,6 +891,14 @@ export function registerCommands(inspectorBackend) {
   inspectorBackend.registerCommand(
       'DOMDebugger.setXHRBreakpoint', [{'name': 'url', 'type': 'string', 'optional': false}], []);
 
+  // EventBreakpoints.
+  inspectorBackend.registerCommand(
+      'EventBreakpoints.setInstrumentationBreakpoint', [{'name': 'eventName', 'type': 'string', 'optional': false}],
+      []);
+  inspectorBackend.registerCommand(
+      'EventBreakpoints.removeInstrumentationBreakpoint', [{'name': 'eventName', 'type': 'string', 'optional': false}],
+      []);
+
   // DOMSnapshot.
   inspectorBackend.registerCommand('DOMSnapshot.disable', [], []);
   inspectorBackend.registerCommand('DOMSnapshot.enable', [], []);
@@ -1630,13 +1639,14 @@ export function registerCommands(inspectorBackend) {
   ]);
   inspectorBackend.registerEvent('Network.requestServedFromCache', ['requestId']);
   inspectorBackend.registerEvent('Network.requestWillBeSent', [
-    'requestId', 'loaderId', 'documentURL', 'request', 'timestamp', 'wallTime', 'initiator', 'redirectResponse', 'type',
-    'frameId', 'hasUserGesture'
+    'requestId', 'loaderId', 'documentURL', 'request', 'timestamp', 'wallTime', 'initiator', 'redirectHasExtraInfo',
+    'redirectResponse', 'type', 'frameId', 'hasUserGesture'
   ]);
   inspectorBackend.registerEvent('Network.resourceChangedPriority', ['requestId', 'newPriority', 'timestamp']);
   inspectorBackend.registerEvent('Network.signedExchangeReceived', ['requestId', 'info']);
   inspectorBackend.registerEvent(
-      'Network.responseReceived', ['requestId', 'loaderId', 'timestamp', 'type', 'response', 'frameId']);
+      'Network.responseReceived',
+      ['requestId', 'loaderId', 'timestamp', 'type', 'response', 'hasExtraInfo', 'frameId']);
   inspectorBackend.registerEvent('Network.webSocketClosed', ['requestId', 'timestamp']);
   inspectorBackend.registerEvent('Network.webSocketCreated', ['requestId', 'url', 'initiator']);
   inspectorBackend.registerEvent('Network.webSocketFrameError', ['requestId', 'timestamp', 'errorMessage']);
@@ -2176,7 +2186,6 @@ export function registerCommands(inspectorBackend) {
     ContentWebUSB: 'ContentWebUSB',
     ContentMediaSession: 'ContentMediaSession',
     ContentMediaSessionService: 'ContentMediaSessionService',
-    ContentMediaPlay: 'ContentMediaPlay',
     EmbedderPopupBlockerTabHelper: 'EmbedderPopupBlockerTabHelper',
     EmbedderSafeBrowsingTriggeredPopupBlocker: 'EmbedderSafeBrowsingTriggeredPopupBlocker',
     EmbedderSafeBrowsingThreatDetails: 'EmbedderSafeBrowsingThreatDetails',

package/front_end/generated/SupportedCSSProperties.js

@@ -489,7 +489,7 @@ export const generatedProperties = [
   },
   {'name': 'font-variation-settings', 'inherited': true, 'keywords': ['normal']},
   {'name': 'font-weight', 'inherited': true, 'keywords': ['normal', 'bold', 'bolder', 'lighter']},
-  {'name': 'forced-color-adjust', 'inherited': true, 'keywords': ['auto', 'none']},
+  {'name': 'forced-color-adjust', 'inherited': true, 'keywords': ['auto', 'none', 'preserve-parent-color']},
   {'longhands': ['row-gap', 'column-gap'], 'name': 'gap'},
   {
     'longhands': [
@@ -764,7 +764,10 @@ export const generatedProperties = [
     'name': 'text-decoration'
   },
   {'name': 'text-decoration-color', 'keywords': ['currentcolor']},
-  {'name': 'text-decoration-line', 'keywords': ['none', 'underline', 'overline', 'line-through', 'blink']},
+  {
+    'name': 'text-decoration-line',
+    'keywords': ['none', 'underline', 'overline', 'line-through', 'blink', 'spelling-error', 'grammar-error']
+  },
   {'name': 'text-decoration-skip-ink', 'inherited': true, 'keywords': ['none', 'auto']},
   {'name': 'text-decoration-style', 'keywords': ['solid', 'double', 'dotted', 'dashed', 'wavy']},
   {'name': 'text-decoration-thickness', 'inherited': true, 'keywords': ['auto', 'from-font']},
@@ -1041,7 +1044,7 @@ export const generatedPropertyValues = {
   },
   'font-variation-settings': {'values': ['normal']},
   'font-weight': {'values': ['normal', 'bold', 'bolder', 'lighter']},
-  'forced-color-adjust': {'values': ['auto', 'none']},
+  'forced-color-adjust': {'values': ['auto', 'none', 'preserve-parent-color']},
   'grid-auto-columns': {'values': ['auto', 'min-content', 'max-content']},
   'grid-auto-flow': {'values': ['row', 'column']},
   'grid-auto-rows': {'values': ['auto', 'min-content', 'max-content']},
@@ -1152,7 +1155,8 @@ export const generatedPropertyValues = {
   'text-anchor': {'values': ['start', 'middle', 'end']},
   'text-combine-upright': {'values': ['none', 'all']},
   'text-decoration-color': {'values': ['currentcolor']},
-  'text-decoration-line': {'values': ['none', 'underline', 'overline', 'line-through', 'blink']},
+  'text-decoration-line':
+      {'values': ['none', 'underline', 'overline', 'line-through', 'blink', 'spelling-error', 'grammar-error']},
   'text-decoration-skip-ink': {'values': ['none', 'auto']},
   'text-decoration-style': {'values': ['solid', 'double', 'dotted', 'dashed', 'wavy']},
   'text-decoration-thickness': {'values': ['auto', 'from-font']},

package/front_end/generated/protocol-mapping.d.ts

@@ -1361,6 +1361,16 @@ export namespace ProtocolMapping {
      * Sets breakpoint on XMLHttpRequest.
      */
     'DOMDebugger.setXHRBreakpoint': {paramsType: [Protocol.DOMDebugger.SetXHRBreakpointRequest]; returnType: void;};
+    /**
+     * Sets breakpoint on particular native event.
+     */
+    'EventBreakpoints.setInstrumentationBreakpoint':
+        {paramsType: [Protocol.EventBreakpoints.SetInstrumentationBreakpointRequest]; returnType: void;};
+    /**
+     * Removes breakpoint on particular native event.
+     */
+    'EventBreakpoints.removeInstrumentationBreakpoint':
+        {paramsType: [Protocol.EventBreakpoints.RemoveInstrumentationBreakpointRequest]; returnType: void;};
     /**
      * Disables DOM snapshot agent for the given page.
      */

package/front_end/generated/protocol-proxy-api.d.ts

@@ -37,6 +37,8 @@ declare namespace ProtocolProxyApi {
 
     DOMDebugger: DOMDebuggerApi;
 
+    EventBreakpoints: EventBreakpointsApi;
+
     DOMSnapshot: DOMSnapshotApi;
 
     DOMStorage: DOMStorageApi;
@@ -127,6 +129,8 @@ declare namespace ProtocolProxyApi {
 
     DOMDebugger: DOMDebuggerDispatcher;
 
+    EventBreakpoints: EventBreakpointsDispatcher;
+
     DOMSnapshot: DOMSnapshotDispatcher;
 
     DOMStorage: DOMStorageDispatcher;
@@ -1164,6 +1168,21 @@ declare namespace ProtocolProxyApi {
   }
   export interface DOMDebuggerDispatcher {}
 
+  export interface EventBreakpointsApi {
+    /**
+     * Sets breakpoint on particular native event.
+     */
+    invoke_setInstrumentationBreakpoint(params: Protocol.EventBreakpoints.SetInstrumentationBreakpointRequest):
+        Promise<Protocol.ProtocolResponseWithError>;
+
+    /**
+     * Removes breakpoint on particular native event.
+     */
+    invoke_removeInstrumentationBreakpoint(params: Protocol.EventBreakpoints.RemoveInstrumentationBreakpointRequest):
+        Promise<Protocol.ProtocolResponseWithError>;
+  }
+  export interface EventBreakpointsDispatcher {}
+
   export interface DOMSnapshotApi {
     /**
      * Disables DOM snapshot agent for the given page.

package/front_end/generated/protocol.d.ts

@@ -964,6 +964,26 @@ declare namespace Protocol {
       frameId?: Page.FrameId;
     }
 
+    /**
+     * This issue tracks information needed to print a deprecation message.
+     * The formatting is inherited from the old console.log version, see more at:
+     * https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/frame/deprecation.cc
+     * TODO(crbug.com/1264960): Re-work format to add i18n support per:
+     * https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/public/devtools_protocol/README.md
+     */
+    export interface DeprecationIssueDetails {
+      affectedFrame?: AffectedFrame;
+      sourceCodeLocation: SourceCodeLocation;
+      /**
+       * The content of the deprecation issue (this won't be translated),
+       * e.g. "window.inefficientLegacyStorageMethod will be removed in M97,
+       * around January 2022. Please use Web Storage or Indexed Database
+       * instead. This standard was abandoned in January, 1970. See
+       * https://www.chromestatus.com/feature/5684870116278272 for more details."
+       */
+      message?: string;
+    }
+
     /**
      * A unique identifier for the type of issue. Each type may use one of the
      * optional fields in InspectorIssueDetails to convey more specific
@@ -984,6 +1004,7 @@ declare namespace Protocol {
       NavigatorUserAgentIssue = 'NavigatorUserAgentIssue',
       WasmCrossOriginModuleSharingIssue = 'WasmCrossOriginModuleSharingIssue',
       GenericIssue = 'GenericIssue',
+      DeprecationIssue = 'DeprecationIssue',
     }
 
     /**
@@ -1006,6 +1027,7 @@ declare namespace Protocol {
       navigatorUserAgentIssueDetails?: NavigatorUserAgentIssueDetails;
       wasmCrossOriginModuleSharingIssue?: WasmCrossOriginModuleSharingIssueDetails;
       genericIssueDetails?: GenericIssueDetails;
+      deprecationIssueDetails?: DeprecationIssueDetails;
     }
 
     /**
@@ -4074,6 +4096,29 @@ declare namespace Protocol {
     }
   }
 
+  /**
+   * EventBreakpoints permits setting breakpoints on particular operations and
+   * events in targets that run JavaScript but do not have a DOM.
+   * JavaScript execution will stop on these operations as if there was a regular
+   * breakpoint set.
+   */
+  export namespace EventBreakpoints {
+
+    export interface SetInstrumentationBreakpointRequest {
+      /**
+       * Instrumentation name to stop on.
+       */
+      eventName: string;
+    }
+
+    export interface RemoveInstrumentationBreakpointRequest {
+      /**
+       * Instrumentation name to stop on.
+       */
+      eventName: string;
+    }
+  }
+
   /**
    * This domain facilitates obtaining document snapshots with DOM, layout, and style information.
    */
@@ -8528,6 +8573,12 @@ declare namespace Protocol {
        * Request initiator.
        */
       initiator: Initiator;
+      /**
+       * In the case that redirectResponse is populated, this flag indicates whether
+       * requestWillBeSentExtraInfo and responseReceivedExtraInfo events will be or were emitted
+       * for the request which was just redirected.
+       */
+      redirectHasExtraInfo: boolean;
       /**
        * Redirect response data.
        */
@@ -8602,6 +8653,11 @@ declare namespace Protocol {
        * Response data.
        */
       response: Response;
+      /**
+       * Indicates whether requestWillBeSentExtraInfo and responseReceivedExtraInfo events will be
+       * or were emitted for this request.
+       */
+      hasExtraInfo: boolean;
       /**
        * Frame identifier.
        */
@@ -10492,7 +10548,6 @@ declare namespace Protocol {
       ContentWebUSB = 'ContentWebUSB',
       ContentMediaSession = 'ContentMediaSession',
       ContentMediaSessionService = 'ContentMediaSessionService',
-      ContentMediaPlay = 'ContentMediaPlay',
       EmbedderPopupBlockerTabHelper = 'EmbedderPopupBlockerTabHelper',
       EmbedderSafeBrowsingTriggeredPopupBlocker = 'EmbedderSafeBrowsingTriggeredPopupBlocker',
       EmbedderSafeBrowsingThreatDetails = 'EmbedderSafeBrowsingThreatDetails',

package/front_end/legacy_test_runner/test_runner/test_runner.js

@@ -59,15 +59,13 @@ export async function _executeTestScript() {
 
     // Auto-start unit tests
     self.test = async function() {
-      // TODO(crbug.com/1011811): Remove eval when we use TypeScript which does support dynamic imports
-      await eval(`import("${testScriptURL}")`);
+      await import(testScriptURL);
     };
     return;
   }
 
   try {
-    // TODO(crbug.com/1011811): Remove eval when we use TypeScript which does support dynamic imports
-    await eval(`import("${testScriptURL}")`);
+    await import(testScriptURL);
   } catch (err) {
     TestRunner.addResult('TEST ENDED EARLY DUE TO UNCAUGHT ERROR:');
     TestRunner.addResult(err && err.stack || err);

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -0,0 +1,67 @@
+// Copyright 2021 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 type * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
+
+import {Issue, IssueCategory, IssueKind} from './Issue.js';
+import type {MarkdownIssueDescription} from './MarkdownIssueDescription.js';
+
+export const enum IssueCode {
+  DeprecationIssue = 'DeprecationIssue',
+}
+
+export class DeprecationIssue extends Issue<IssueCode> {
+  private issueDetails: Protocol.Audits.DeprecationIssueDetails;
+
+  constructor(issueDetails: Protocol.Audits.DeprecationIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel) {
+    super(IssueCode.DeprecationIssue, issuesModel);
+    this.issueDetails = issueDetails;
+  }
+
+  getCategory(): IssueCategory {
+    return IssueCategory.Other;
+  }
+
+  details(): Protocol.Audits.DeprecationIssueDetails {
+    return this.issueDetails;
+  }
+
+  getDescription(): MarkdownIssueDescription|null {
+    return {
+      file: 'deprecation.md',
+      substitutions: new Map([
+        // TODO(crbug.com/1264960): Re-work format to add i18n support per:
+        // https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/public/devtools_protocol/README.md
+        ['PLACEHOLDER_message', String(this.issueDetails.message)],
+      ]),
+      links: [],
+    };
+  }
+
+  sources(): Iterable<Protocol.Audits.SourceCodeLocation> {
+    if (this.issueDetails.sourceCodeLocation) {
+      return [this.issueDetails.sourceCodeLocation];
+    }
+    return [];
+  }
+
+  primaryKey(): string {
+    return JSON.stringify(this.issueDetails);
+  }
+
+  getKind(): IssueKind {
+    return IssueKind.BreakingChange;
+  }
+
+  static fromInspectorIssue(issuesModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue):
+      DeprecationIssue[] {
+    const details = inspectorIssue.details.deprecationIssueDetails;
+    if (!details) {
+      console.warn('Deprecation issue without details received.');
+      return [];
+    }
+    return [new DeprecationIssue(details, issuesModel)];
+  }
+}

package/front_end/models/issues_manager/IssuesManager.ts

@@ -11,6 +11,7 @@ import {AttributionReportingIssue} from './AttributionReportingIssue.js';
 import {ContentSecurityPolicyIssue} from './ContentSecurityPolicyIssue.js';
 import {CorsIssue} from './CorsIssue.js';
 import {CrossOriginEmbedderPolicyIssue, isCrossOriginEmbedderPolicyIssue} from './CrossOriginEmbedderPolicyIssue.js';
+import {DeprecationIssue} from './DeprecationIssue.js';
 import {GenericIssue} from './GenericIssue.js';
 import {HeavyAdIssue} from './HeavyAdIssue.js';
 import type {Issue, IssueKind} from './Issue.js';
@@ -99,6 +100,10 @@ const issueCodeHandlers = new Map<
     Protocol.Audits.InspectorIssueCode.GenericIssue,
     GenericIssue.fromInspectorIssue,
   ],
+  [
+    Protocol.Audits.InspectorIssueCode.DeprecationIssue,
+    DeprecationIssue.fromInspectorIssue,
+  ],
 ]);
 
 /**

package/front_end/models/issues_manager/descriptions/deprecation.md

@@ -0,0 +1,3 @@
+# Deprecated Feature Used
+
+{PLACEHOLDER_message}

package/front_end/models/issues_manager/issues_manager.ts

@@ -7,6 +7,7 @@ import * as ContentSecurityPolicyIssue from './ContentSecurityPolicyIssue.js';
 import * as ContrastCheckTrigger from './ContrastCheckTrigger.js';
 import * as CorsIssue from './CorsIssue.js';
 import * as CrossOriginEmbedderPolicyIssue from './CrossOriginEmbedderPolicyIssue.js';
+import * as DeprecationIssue from './DeprecationIssue.js';
 import * as GenericIssue from './GenericIssue.js';
 import * as HeavyAdIssue from './HeavyAdIssue.js';
 import * as Issue from './Issue.js';
@@ -30,6 +31,7 @@ export {
   ContrastCheckTrigger,
   CorsIssue,
   CrossOriginEmbedderPolicyIssue,
+  DeprecationIssue,
   GenericIssue,
   HeavyAdIssue,
   Issue,

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/module.json

@@ -2,7 +2,6 @@
   "dependencies": [
     "ui/legacy",
     "ui/legacy/components/perf_ui",
-    "panels/network",
-    "panels/sources"
+    "panels/network"
   ]
 }

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/browser_debugger-meta.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -83,8 +82,6 @@ let loadedBrowserDebuggerModule: (typeof BrowserDebugger|undefined);
 
 async function loadBrowserDebuggerModule(): Promise<typeof BrowserDebugger> {
   if (!loadedBrowserDebuggerModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/browser_debugger');
     loadedBrowserDebuggerModule = await import('./browser_debugger.js');
   }
   return loadedBrowserDebuggerModule;
@@ -99,8 +96,6 @@ let loadedSourcesModule: (typeof Sources|undefined);
 //  collision with node_app as a separate view with the same id is registered in it.
 async function loadSourcesModule(): Promise<typeof Sources> {
   if (!loadedSourcesModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('sources');
     loadedSourcesModule = await import('../sources/sources.js');
   }
   return loadedSourcesModule;

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