chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/panels/explain/components/consoleInsight.css

@@ -18,7 +18,7 @@
 
   .wrapper {
     background-color: var(--sys-color-cdt-base-container);
-    border-radius: 16px;
+    border-radius: var(--sys-shape-corner-medium);
     container-type: inline-size;
     display: grid;
     animation: expand var(--sys-motion-duration-medium2) var(--sys-motion-easing-emphasized) forwards;
@@ -56,20 +56,20 @@
   }
 
   .wrapper.top {
-    border-radius: 16px 16px 4px 4px;
+    border-radius: var(--sys-shape-corner-medium) var(--sys-shape-corner-medium) var(--sys-shape-corner-extra-small) var(--sys-shape-corner-extra-small);
   }
 
   .wrapper.bottom {
     margin-top: 5px;
-    border-radius: 4px 4px 16px 16px;
+    border-radius: var(--sys-shape-corner-extra-small) var(--sys-shape-corner-extra-small) var(--sys-shape-corner-medium) var(--sys-shape-corner-medium);
   }
 
   header {
     display: flex;
     flex-direction: row;
-    gap: 6px;
+    gap: var(--sys-size-4);
     color: var(--sys-color-on-surface);
-    font-size: 13px;
+    font-size: var(--sys-typescale-body3-size);
     font-style: normal;
     font-weight: 500;
     margin-bottom: var(--sys-size-6);
@@ -112,10 +112,10 @@
     --override-markdown-view-message-color: var(--sys-color-on-surface);
 
     color: var(--sys-color-on-surface);
-    font-size: 12px;
+    font-size: var(--sys-typescale-body4-size);
     font-style: normal;
     font-weight: 400;
-    line-height: 20px;
+    line-height: var(--sys-size-9);
 
     p {
       margin-block: 1em;
@@ -134,7 +134,7 @@
       }
 
       li::marker {
-        font-size: 11px;
+        font-size: var(--sys-typescale-body5-size);
         line-height: 1;
       }
     }
@@ -161,7 +161,7 @@
   }
 
   devtools-markdown-view {
-    margin-bottom: 12px;
+    margin-bottom: var(--sys-size-6);
   }
 
   footer {
@@ -172,13 +172,13 @@
     font-style: normal;
     font-weight: 400;
     line-height: normal;
-    margin-top: 14px;
-    gap: 32px;
+    margin-top: var(--sys-size-7);
+    gap: var(--sys-size-13);
   }
 
   @container (max-width: 600px) {
     footer {
-      gap: 8px;
+      gap: var(--sys-size-5);
     }
   }
 
@@ -189,14 +189,14 @@
   footer .rating {
     display: flex;
     flex-direction: row;
-    gap: 8px;
+    gap: var(--sys-size-5);
   }
 
   textarea {
     height: 84px;
     padding: 10px;
-    border-radius: 8px;
-    border: 1px solid var(--sys-color-neutral-outline);
+    border-radius: var(--sys-shape-corner-small);
+    border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
     width: 100%;
     font-family: var(--default-font-family);
     font-size: inherit;
@@ -214,14 +214,14 @@
   }
 
   main .buttons {
-    margin-top: 12px;
+    margin-top: var(--sys-size-6);
   }
 
   .disclaimer {
     display: flex;
-    gap: 2px;
+    gap: var(--sys-size-2);
     color: var(--sys-color-on-surface-subtle);
-    font-size: 11px;
+    font-size: var(--sys-typescale-body5-size);
     align-items: flex-start;
     flex-direction: column;
   }
@@ -232,8 +232,8 @@
 
     devtools-icon {
       color: var(--sys-color-primary);
-      width: 14px;
-      height: 14px;
+      width: var(--sys-size-7);
+      height: var(--sys-size-7);
     }
   }
 
@@ -266,10 +266,10 @@
   }
 
   summary {
-    font-size: 12px;
+    font-size: var(--sys-typescale-body4-size);
     font-style: normal;
     font-weight: 400;
-    line-height: 20px;
+    line-height: var(--sys-size-9);
   }
 
   details {
@@ -312,8 +312,8 @@
   }
 
   .info {
-    width: 20px;
-    height: 20px;
+    width: var(--sys-size-9);
+    height: var(--sys-size-9);
   }
 
   .badge {
@@ -404,11 +404,11 @@
 
     ul {
       color: var(--sys-color-primary);
-      font-size: 12px;
+      font-size: var(--sys-typescale-body4-size);
       font-style: normal;
       font-weight: 400;
       line-height: 18px;
-      margin-top: 8px;
+      margin-top: var(--sys-size-5);
       padding-left: var(--sys-size-6);
     }
 
@@ -420,13 +420,13 @@
       color: var(--sys-color-primary);
       display: inline-flex !important; /* stylelint-disable-line declaration-no-important */
       align-items: center;
-      gap: 4px;
+      gap: var(--sys-size-3);
       text-decoration-line: underline;
     }
 
     devtools-icon {
-      height: 16px;
-      width: 16px;
+      height: var(--sys-size-8);
+      width: var(--sys-size-8);
       margin-right: var(--sys-size-1);
     }
 

package/front_end/panels/issues/components/elementsPanelLink.css

@@ -6,8 +6,8 @@
 
 .element-reveal-icon {
   display: inline-block;
-  width: 20px;
-  height: 20px;
+  width: var(--sys-size-9);
+  height: var(--sys-size-9);
   mask-image: var(--image-file-select-element);
   background-color: var(--icon-default);
 }

package/front_end/panels/issues/components/hideIssuesMenu.css

@@ -12,7 +12,7 @@
   align-items: center;
   justify-content: center;
   padding: 0;
-  margin: 0 -2px 0 4px;
+  margin: 0 calc(-1 * var(--sys-size-2)) 0 var(--sys-size-3);
   overflow: hidden;
   border-radius: 0;
   border: none;

package/front_end/panels/issues/issuesPane.css

@@ -15,7 +15,7 @@
 
 .issues-toolbar-container > devtools-toolbar {
   background-color: var(--sys-color-cdt-base-container);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .issues-toolbar-left {
@@ -23,5 +23,5 @@
 }
 
 .issues-toolbar-right {
-  padding-right: 6px;
+  padding-right: var(--sys-size-4);
 }

package/front_end/panels/issues/issuesTree.css

@@ -13,7 +13,7 @@
 }
 
 .issues {
-  --issue-indent: 8px;
+  --issue-indent: var(--sys-size-5);
 }
 
 /* The top most parents need to be larger, as they may include an unhide button. */
@@ -43,18 +43,18 @@
 .issue-category,
 .issue-kind,
 .issue {
-  padding: 0 8px;
+  padding: 0 var(--sys-size-5);
   padding-left: var(--issue-indent);
   overflow: hidden;
   flex: none;
   transition: background-color 200ms;
-  border: 1px solid var(--sys-color-divider);
-  border-width: 0 0 1px;
+  border: var(--sys-size-1) solid var(--sys-color-divider);
+  border-width: 0 0 var(--sys-size-1);
 }
 
 .issue-category.hidden-issues.parent.expanded,
 .issue-kind.parent.expanded {
-  border-width: 0 0 1px;
+  border-width: 0 0 var(--sys-size-1);
   background-color: var(--sys-color-surface2);
 }
 
@@ -93,7 +93,7 @@
 }
 
 p {
-  margin-block: 2px;
+  margin-block: var(--sys-size-2);
 }
 
 /* Override selected tree item styles for issues to avoid changing width. */
@@ -101,14 +101,14 @@ p {
 .tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) .tree-outline.hide-selection-when-blurred .issue-kind.selected:focus-visible,
 .tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) .tree-outline.hide-selection-when-blurred .issue.selected:focus-visible {
   width: auto;
-  padding-right: 8px;
+  padding-right: var(--sys-size-5);
 }
 
 .header {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  padding: 4px 0;
+  padding: var(--sys-size-3) 0;
   cursor: pointer;
   width: 100%;
 
@@ -128,11 +128,11 @@ p {
 
 .title {
   flex: 1;
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   color: var(--sys-color-on-surface);
   font-weight: normal;
   user-select: text;
-  padding-top: 2px;
+  padding-top: var(--sys-size-2);
 }
 
 .issue.expanded .title {
@@ -140,17 +140,17 @@ p {
 }
 
 .issue-body.children {
-  border-bottom: 1px solid var(--sys-color-divider);
-  padding: 6px 0;
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  padding: var(--sys-size-4) 0;
   position: relative;
   padding-left: calc(var(--issue-indent) + 43px);
   padding-bottom: 26px;
-  padding-right: 8px;
+  padding-right: var(--sys-size-5);
 }
 
 .issue-category + .children,
 .issue-kind + .children {
-  --issue-indent: 24px;
+  --issue-indent: var(--sys-size-11);
 
   padding-left: 0;
 }
@@ -162,20 +162,20 @@ p {
   position: absolute;
   left: calc(var(--issue-indent) + 23px);
   top: 0;
-  bottom: 20px;
-  width: 2px;
+  bottom: var(--sys-size-9);
+  width: var(--sys-size-2);
 }
 
 .issue-kind-breaking-change.issue-body::before {
-  border-left: 2px solid var(--issue-color-yellow);
+  border-left: var(--sys-size-2) solid var(--issue-color-yellow);
 }
 
 .issue-kind-page-error.issue-body::before {
-  border-left: 2px solid var(--issue-color-red);
+  border-left: var(--sys-size-2) solid var(--issue-color-red);
 }
 
 .issue-kind-improvement.issue-body::before {
-  border-left: 2px solid var(--issue-color-blue);
+  border-left: var(--sys-size-2) solid var(--issue-color-blue);
 }
 
 .tree-outline .issue-body li:hover:not(:has(devtools-checkbox)) .selection {
@@ -183,29 +183,29 @@ p {
 }
 
 devtools-icon.leading-issue-icon {
-  margin: 1px 0 -1px 7px;
+  margin: var(--sys-size-1) 0 calc(-1 * var(--sys-size-1)) 7px;
 }
 
 .message {
   line-height: 18px;
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   color: var(--sys-color-token-subtle);
-  margin-bottom: 4px;
+  margin-bottom: var(--sys-size-3);
   user-select: text;
 }
 
 .message p {
-  margin-bottom: 16px;
+  margin-bottom: var(--sys-size-8);
 }
 
 .message li {
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
 }
 
 .message code {
   color: var(--sys-color-on-surface);
-  padding: 0 2px;
-  font-size: 12px;
+  padding: 0 var(--sys-size-2);
+  font-size: var(--sys-typescale-body4-size);
   user-select: text;
   cursor: text;
   background: var(--sys-color-surface2);
@@ -218,7 +218,7 @@ devtools-icon.leading-issue-icon {
 }
 
 .link {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   color: var(--sys-color-primary);
 }
 
@@ -261,7 +261,7 @@ devtools-icon.leading-issue-icon {
   mask-image: none;
   padding-right: 5px;
   position: relative;
-  top: -1px;
+  top: calc(-1 * var(--sys-size-1));
 }
 
 .resolutions-list li {
@@ -288,7 +288,7 @@ ul > li.plain-enum::before {
 }
 
 .affected-resource-label {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 18px;
   color: var(--sys-color-on-surface);
   position: relative;
@@ -296,14 +296,14 @@ ul > li.plain-enum::before {
 }
 
 .affected-resource-cookie {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 18px;
   border: 0;
   border-collapse: collapse;
 }
 
 .affected-resource-element {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 18px;
   color: var(--sys-color-primary);
   border: 0;
@@ -311,7 +311,7 @@ ul > li.plain-enum::before {
 }
 
 .affected-resource-row {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 18px;
   border: 0;
   border-collapse: collapse;
@@ -319,28 +319,28 @@ ul > li.plain-enum::before {
 }
 
 .affected-resource-mixed-content {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 18px;
   border: 0;
   border-collapse: collapse;
 }
 
 .affected-resource-heavy-ad {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 18px;
   border: 0;
   border-collapse: collapse;
 }
 
 .affected-resource-request {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 18px;
   border: 0;
   border-collapse: collapse;
 }
 
 .affected-resource-source {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 18px;
   color: var(--sys-color-primary);
   border: 0;
@@ -349,13 +349,13 @@ ul > li.plain-enum::before {
 
 .affected-resource-list {
   border-spacing: 10px 0;
-  margin-left: -12px;
+  margin-left: calc(-1 * var(--sys-size-6));
 }
 
 .affected-resource-header {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   color: var(--sys-color-on-surface);
-  padding-left: 2px;
+  padding-left: var(--sys-size-2);
 }
 
 .code-example {
@@ -373,7 +373,7 @@ ul > li.plain-enum::before {
 
 .affected-resource-cookie-info {
   color: var(--sys-color-token-subtle);
-  padding: 2px;
+  padding: var(--sys-size-2);
   text-align: right;
 }
 
@@ -383,24 +383,24 @@ ul > li.plain-enum::before {
 
 .affected-resource-mixed-content-info {
   color: var(--sys-color-token-subtle);
-  padding: 2px;
+  padding: var(--sys-size-2);
 }
 
 .affected-resource-heavy-ad-info {
   color: var(--sys-color-token-subtle);
-  padding: 2px;
+  padding: var(--sys-size-2);
 }
 
 .affected-resource-heavy-ad-info-frame {
   display: flex;
   align-items: center;
   color: var(--sys-color-token-subtle);
-  padding: 2px;
+  padding: var(--sys-size-2);
 }
 
 .affected-resource-cell {
   color: var(--sys-color-token-subtle);
-  padding: 2px;
+  padding: var(--sys-size-2);
 }
 
 .affected-resource-cell.link {
@@ -414,7 +414,7 @@ ul > li.plain-enum::before {
 
 .affected-resources > .parent {
   margin-top: 0;
-  padding: 2px 5px 0;
+  padding: var(--sys-size-2) 5px 0;
 }
 
 .affected-resources > .parent.expanded {
@@ -423,7 +423,7 @@ ul > li.plain-enum::before {
 
 .affected-resources > .children.expanded {
   background: var(--sys-color-cdt-base-container);
-  padding: 6px 0 9px 5px;
+  padding: var(--sys-size-4) 0 9px 5px;
 }
 
 .aggregated-issues-count {
@@ -435,7 +435,7 @@ ul > li.plain-enum::before {
 }
 
 .affected-resource-directive {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   line-height: 18px;
   border: 0;
   border-collapse: collapse;
@@ -443,12 +443,12 @@ ul > li.plain-enum::before {
 
 .affected-resource-directive-info {
   color: var(--sys-color-token-subtle);
-  padding: 2px;
+  padding: var(--sys-size-2);
   text-align: left;
 }
 
 .devtools-link {
-  padding-top: 4px;
+  padding-top: var(--sys-size-3);
 }
 
 devtools-icon.link-icon {
@@ -460,7 +460,7 @@ devtools-icon.elements-panel,
 devtools-icon.network-panel {
   margin-right: 0.5ex;
   vertical-align: baseline;
-  height: 14px;
+  height: var(--sys-size-7);
 }
 
 @media (forced-colors: active) {

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -103,18 +103,17 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       header: i18nString(UIStrings.noLayerInformation),
       text: i18nString(UIStrings.layerExplanation),
     })}</div>` : Lit.nothing}
-    ${input.error === 'webgl-disabled' ? html`<div>${widget(UI.EmptyWidget.EmptyWidget, {
+    ${input.error === 'webgl-disabled' ? html`<div><devtools-widget ${widget(UI.EmptyWidget.EmptyWidget, {
       header: i18nString(UIStrings.cantDisplayLayers),
       text: i18nString(UIStrings.webglSupportIsDisabledInYour),
-      extraElements: [
-        uiI18n.getFormatLocalizedString(
-          str_, UIStrings.checkSForPossibleReasons,
-          {
-            PH1: Link.create('chrome://gpu', undefined, undefined, 'about-gpu', 0, true),
-          },
-        ),
-      ],
-    })}</div>` : Lit.nothing}
+    })}>
+      ${uiI18n.getFormatLocalizedString(
+        str_, UIStrings.checkSForPossibleReasons,
+        {
+          PH1: Link.create('chrome://gpu', undefined, undefined, 'about-gpu', 0, true),
+        },
+      )}
+    </devtools-widget></div>` : Lit.nothing}
     <canvas
       tabindex="0"
       jslog=${VisualLogging.canvas('layers').track({

package/front_end/panels/layer_viewer/layerDetailsView.css

@@ -37,6 +37,6 @@ ul {
 }
 
 .devtools-link.link-margin, .devtools-link.link-margin:hover {
-  margin: 8px;
+  margin: var(--sys-size-5);
   display: inline-block;
 }

package/front_end/panels/layer_viewer/layerTreeOutline.css

@@ -6,9 +6,9 @@
 
 @scope to (devtools-widget > *) {
   .layer-summary {
-    border-top: 1px solid var(--sys-color-divider);
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
     justify-content: space-between;
-    padding: 4px 10px;
+    padding: var(--sys-size-3) 10px;
     flex-shrink: 0;
   }
 

package/front_end/panels/layer_viewer/layers3DView.css

@@ -17,7 +17,7 @@
 
 devtools-toolbar {
   background-color: var(--sys-color-cdt-base-container);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 canvas {

package/front_end/panels/layer_viewer/paintProfiler.css

@@ -19,7 +19,7 @@
   .paint-profiler-pie-chart {
     width: 60px !important; /* stylelint-disable-line declaration-no-important */
     height: 60px !important; /* stylelint-disable-line declaration-no-important */
-    padding: 2px;
+    padding: var(--sys-size-2);
     overflow: hidden;
     font-size: 10px;
   }

package/front_end/panels/lighthouse/LighthouseReportSelector.ts

@@ -40,7 +40,7 @@ export class ReportSelector {
 
     this.#comboBox.setEnabled(false);
     this.newLighthouseItem = document.createElement('option');
-    this.newLighthouseItem.label = i18nString(UIStrings.newReport);
+    this.newLighthouseItem.textContent = i18nString(UIStrings.newReport);
     this.#comboBox.addOption(this.newLighthouseItem);
     this.#comboBox.select(this.newLighthouseItem);
   }
@@ -127,7 +127,7 @@ export class Item {
     const url = new Common.ParsedURL.ParsedURL(finalDisplayedUrl);
     const timestamp = lighthouseResult.fetchTime;
     this.element = document.createElement('option');
-    this.element.label = `${new Date(timestamp).toLocaleTimeString()} - ${url.domain()}`;
+    this.element.textContent = `${new Date(timestamp).toLocaleTimeString()} - ${url.domain()}`;
   }
 
   select(): void {