chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/panels/screencast/screencastView.css

@@ -16,19 +16,19 @@
     display: flex;
     align-items: center;
     position: relative;
-    padding-left: 1px;
-    border-bottom: 1px solid var(--sys-color-divider);
+    padding-left: var(--sys-size-1);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     background-origin: padding-box;
     background-clip: padding-box;
   }
 
   .screencast-navigation devtools-button {
-    padding: 2px;
+    padding: var(--sys-size-2);
   }
 
   .screencast-navigation input {
     flex: 1;
-    margin: 2px;
+    margin: var(--sys-size-2);
     max-height: 19px;
   }
 
@@ -44,10 +44,10 @@
 
   .screencast-viewport {
     display: flex;
-    border: 1px solid var(--sys-color-divider);
-    border-radius: 20px;
+    border: var(--sys-size-1) solid var(--sys-color-divider);
+    border-radius: var(--sys-size-9);
     flex: none;
-    padding: 20px;
+    padding: var(--sys-size-9);
     margin: auto;
     background-color: var(--sys-color-surface-variant);
   }
@@ -55,7 +55,7 @@
   .screencast-canvas-container {
     flex: auto;
     display: flex;
-    border: 1px solid var(--sys-color-divider);
+    border: var(--sys-size-1) solid var(--sys-color-divider);
     position: relative;
   }
 
@@ -73,8 +73,8 @@
     position: absolute;
     z-index: 10;
     background-color: var(--sys-color-yellow-container);
-    border: 1px solid var(--sys-color-outline);
-    padding: 2px 4px;
+    border: var(--sys-size-1) solid var(--sys-color-outline);
+    padding: var(--sys-size-2) var(--sys-size-3);
     white-space: nowrap;
   }
 
@@ -82,7 +82,7 @@
     content: "";
     position: absolute;
     bottom: 100%;
-    left: 14px;
+    left: var(--sys-size-7);
     border: 7px solid transparent;
     border-bottom-color: var(--sys-color-yellow-container);
   }
@@ -91,7 +91,7 @@
     content: "";
     position: absolute;
     top: 100%;
-    left: 14px;
+    left: var(--sys-size-7);
     border: 7px solid transparent;
     border-top-color: var(--sys-color-yellow-container);
   }

package/front_end/panels/search/searchResultsPane.css

@@ -19,14 +19,14 @@
 }
 
 .tree-outline li {
-  height: 16px;
+  height: var(--sys-size-8);
 }
 
 li.search-result {
   cursor: pointer;
-  font-size: 12px;
-  margin-top: 8px;
-  padding: 2px 0 2px 4px;
+  font-size: var(--sys-typescale-body4-size);
+  margin-top: var(--sys-size-5);
+  padding: var(--sys-size-2) 0 var(--sys-size-2) var(--sys-size-3);
   overflow-wrap: normal;
   white-space: pre;
 }
@@ -50,7 +50,7 @@ li.search-result .search-result-file-name {
 
 li.search-result .search-result-matches-count {
   color: var(--sys-color-token-subtle);
-  margin: 0 8px;
+  margin: 0 var(--sys-size-5);
 }
 
 li.search-result.expanded .search-result-matches-count {
@@ -60,7 +60,7 @@ li.search-result.expanded .search-result-matches-count {
 li.show-more-matches {
   color: var(--sys-color-on-surface);
   cursor: pointer;
-  margin: 8px 0 0 -4px;
+  margin: var(--sys-size-5) 0 0 calc(-1 * var(--sys-size-3));
 }
 
 li.show-more-matches:hover {
@@ -68,7 +68,7 @@ li.show-more-matches:hover {
 }
 
 li.search-match {
-  margin: 2px 0;
+  margin: var(--sys-size-2) 0;
   overflow-wrap: normal;
   white-space: pre;
 }
@@ -90,7 +90,7 @@ li.search-match .search-match-line-number {
   text-align: right;
   vertical-align: top;
   word-break: normal;
-  padding: 2px 4px 2px 6px;
+  padding: var(--sys-size-2) var(--sys-size-3) var(--sys-size-2) var(--sys-size-4);
   margin-right: 5px;
 }
 
@@ -105,7 +105,7 @@ li.search-match .search-match-content {
 }
 
 ol.children.expanded {
-  padding-bottom: 4px;
+  padding-bottom: var(--sys-size-3);
 }
 
 li.search-match .link-style.search-match-link {
@@ -121,5 +121,5 @@ li.search-match .link-style.search-match-link {
 
 .search-result-dash {
   color: var(--sys-color-surface-variant);
-  margin: 0 4px;
+  margin: 0 var(--sys-size-3);
 }

package/front_end/panels/search/searchView.css

@@ -11,7 +11,7 @@
   min-width: 150px;
 
   .search-container {
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     display: flex;
     align-items: center;
     flex-grow: 1;
@@ -19,19 +19,19 @@
 
   .toolbar-item-search {
     flex-grow: 1;
-    box-shadow: inset 0 0 0 2px transparent;
+    box-shadow: inset 0 0 0 var(--sys-size-2) transparent;
     box-sizing: border-box;
     height: var(--sys-size-9);
     margin-left: var(--sys-size-3);
     padding: 0 var(--sys-size-2) 0 var(--sys-size-5);
-    border-radius: 100px;
+    border-radius: var(--sys-shape-corner-full);
     position: relative;
     display: flex;
     align-items: center;
     background-color: var(--sys-color-cdt-base);
 
     &:has(input:focus) {
-      box-shadow: inset 0 0 0 2px var(--sys-color-state-focus-ring);
+      box-shadow: inset 0 0 0 var(--sys-size-2) var(--sys-color-state-focus-ring);
     }
 
     &:has(input:hover)::before {
@@ -40,7 +40,7 @@
       height: 100%;
       width: 100%;
       position: absolute;
-      border-radius: 100px;
+      border-radius: var(--sys-shape-corner-full);
       left: 0;
       background-color: var(--sys-color-state-hover-on-subtle);
     }
@@ -81,24 +81,24 @@
 
 .search-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);
 }
 
 .search-toolbar-summary {
   background-color: var(--sys-color-cdt-base-container);
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
   padding-left: 5px;
   flex: 0 0 19px;
   display: flex;
   padding-right: 5px;
 }
 
-.search-results:has(.empty-state) + .search-toolbar-summary {
+.search-results:has(.empty-widget-container) + .search-toolbar-summary {
   display: none;
 }
 
 .search-toolbar-summary .search-message {
-  padding-top: 2px;
+  padding-top: var(--sys-size-2);
   padding-left: 1ex;
   text-overflow: ellipsis;
   white-space: nowrap;

package/front_end/panels/security/SecurityPanel.ts

@@ -1344,6 +1344,86 @@ function renderSan(sanList: string[], isSanListTruncatable: boolean, isSanListTr
   // clang-format on
 }
 
+interface DetailsTableRow {
+  key: string;
+  value: string;
+}
+
+function renderDetailsTable(rows: DetailsTableRow[]): TemplateResult {
+  // clang-format off
+  return html`
+    <table class="details-table">
+      ${rows.map(row => html`
+        <tr class="details-table-row">
+          <td>${row.key}</td>
+          <td>${row.value}</td>
+        </tr>`)}
+    </table>`;
+  // clang-format on
+}
+
+function formatKeyExchange(securityDetails: Protocol.Network.SecurityDetails): string|null {
+  // A TLS connection negotiates a cipher suite and, when doing an ephemeral
+  // ECDH key exchange, a "named group". In TLS 1.2, the cipher suite is
+  // named like TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256. The DevTools protocol
+  // tried to decompose this name and calls the "ECDHE_RSA" portion the
+  // "keyExchange", because it determined the rough shape of the key
+  // exchange portion of the handshake. (A keyExchange of "RSA" meant a very
+  // different handshake set.) But ECDHE_RSA was still parameterized by a
+  // named group (e.g. X25519), which the DevTools protocol exposes as
+  // "keyExchangeGroup".
+  //
+  // Then, starting TLS 1.3, the cipher suites are named like
+  // TLS_AES_128_GCM_SHA256. The handshake shape is implicit in the
+  // protocol. keyExchange is empty and we only have keyExchangeGroup.
+  //
+  // "Key exchange group" isn't common terminology and, in TLS 1.3,
+  // something like "X25519" is better labelled as "key exchange" than "key
+  // exchange group" anyway. So combine the two fields when displaying in
+  // the UI.
+  if (securityDetails.keyExchange && securityDetails.keyExchangeGroup) {
+    return securityDetails.keyExchange + ' with ' + securityDetails.keyExchangeGroup;
+  }
+  return securityDetails.keyExchange || securityDetails.keyExchangeGroup || null;
+}
+
+function buildConnectionDetailsRows(securityDetails: Protocol.Network.SecurityDetails): DetailsTableRow[] {
+  const rows: DetailsTableRow[] = [{key: i18nString(UIStrings.protocol), value: securityDetails.protocol}];
+
+  const keyExchange = formatKeyExchange(securityDetails);
+  if (keyExchange) {
+    rows.push({key: i18nString(UIStrings.keyExchange), value: keyExchange});
+  }
+
+  if (securityDetails.serverSignatureAlgorithm) {
+    // See https://www.iana.org/assignments/tls-parameters/tls-parameters.xhtml#tls-signaturescheme
+    let sigString = SignatureSchemeStrings.get(securityDetails.serverSignatureAlgorithm);
+    sigString ??= i18nString(UIStrings.unknownField) + ' (' + securityDetails.serverSignatureAlgorithm + ')';
+    rows.push({key: i18nString(UIStrings.serverSignature), value: sigString});
+  }
+
+  rows.push({
+    key: i18nString(UIStrings.cipher),
+    value: securityDetails.cipher + (securityDetails.mac ? ' with ' + securityDetails.mac : ''),
+  });
+
+  if (securityDetails.encryptedClientHello) {
+    rows.push({key: i18nString(UIStrings.encryptedClientHello), value: i18nString(UIStrings.enabled)});
+  }
+
+  return rows;
+}
+
+function renderConnectionSection(securityDetails: Protocol.Network.SecurityDetails): TemplateResult {
+  const rows = buildConnectionDetailsRows(securityDetails);
+
+  // clang-format off
+  return html`
+    <div class="origin-view-section-title" role="heading" aria-level="2">${i18nString(UIStrings.connection)}</div>
+    ${renderDetailsTable(rows)}`;
+  // clang-format on
+}
+
 export class SecurityOriginView extends UI.Widget.VBox {
   readonly #origin: Platform.DevToolsPath.UrlString;
   readonly #originDisplay: HTMLElement;
@@ -1377,59 +1457,9 @@ export class SecurityOriginView extends UI.Widget.VBox {
     UI.ARIAUtils.markAsLink(originNetworkButton);
 
     if (originState.securityDetails) {
-      const connectionSection = this.element.createChild('div', 'origin-view-section');
-      const connectionDiv = connectionSection.createChild('div', 'origin-view-section-title');
-      connectionDiv.textContent = i18nString(UIStrings.connection);
-      UI.ARIAUtils.markAsHeading(connectionDiv, 2);
-
-      let table: SecurityDetailsTable = new SecurityDetailsTable();
-      connectionSection.appendChild(table.element());
-      table.addRow(i18nString(UIStrings.protocol), originState.securityDetails.protocol);
-
-      // A TLS connection negotiates a cipher suite and, when doing an ephemeral
-      // ECDH key exchange, a "named group". In TLS 1.2, the cipher suite is
-      // named like TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256. The DevTools protocol
-      // tried to decompose this name and calls the "ECDHE_RSA" portion the
-      // "keyExchange", because it determined the rough shape of the key
-      // exchange portion of the handshake. (A keyExchange of "RSA" meant a very
-      // different handshake set.) But ECDHE_RSA was still parameterized by a
-      // named group (e.g. X25519), which the DevTools protocol exposes as
-      // "keyExchangeGroup".
-      //
-      // Then, starting TLS 1.3, the cipher suites are named like
-      // TLS_AES_128_GCM_SHA256. The handshake shape is implicit in the
-      // protocol. keyExchange is empty and we only have keyExchangeGroup.
-      //
-      // "Key exchange group" isn't common terminology and, in TLS 1.3,
-      // something like "X25519" is better labelled as "key exchange" than "key
-      // exchange group" anyway. So combine the two fields when displaying in
-      // the UI.
-      if (originState.securityDetails.keyExchange && originState.securityDetails.keyExchangeGroup) {
-        table.addRow(
-            i18nString(UIStrings.keyExchange),
-            originState.securityDetails.keyExchange + ' with ' + originState.securityDetails.keyExchangeGroup);
-      } else if (originState.securityDetails.keyExchange) {
-        table.addRow(i18nString(UIStrings.keyExchange), originState.securityDetails.keyExchange);
-      } else if (originState.securityDetails.keyExchangeGroup) {
-        table.addRow(i18nString(UIStrings.keyExchange), originState.securityDetails.keyExchangeGroup);
-      }
-
-      if (originState.securityDetails.serverSignatureAlgorithm) {
-        // See https://www.iana.org/assignments/tls-parameters/tls-parameters.xhtml#tls-signaturescheme
-        let sigString = SignatureSchemeStrings.get(originState.securityDetails.serverSignatureAlgorithm);
-        sigString ??=
-            i18nString(UIStrings.unknownField) + ' (' + originState.securityDetails.serverSignatureAlgorithm + ')';
-        table.addRow(i18nString(UIStrings.serverSignature), sigString);
-      }
-
-      table.addRow(
-          i18nString(UIStrings.cipher),
-          originState.securityDetails.cipher +
-              (originState.securityDetails.mac ? ' with ' + originState.securityDetails.mac : ''));
-
-      if (originState.securityDetails.encryptedClientHello) {
-        table.addRow(i18nString(UIStrings.encryptedClientHello), i18nString(UIStrings.enabled));
-      }
+      const connectionSection = this.element.createChild('div', 'origin-view-section connection-section');
+      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+      render(renderConnectionSection(originState.securityDetails), connectionSection);
 
       // Create the certificate section outside the callback, so that it appears in the right place.
       const certificateSection = this.element.createChild('div', 'origin-view-section');
@@ -1452,7 +1482,7 @@ export class SecurityOriginView extends UI.Widget.VBox {
       const validFromString = new Date(1000 * originState.securityDetails.validFrom).toUTCString();
       const validUntilString = new Date(1000 * originState.securityDetails.validTo).toUTCString();
 
-      table = new SecurityDetailsTable();
+      const table = new SecurityDetailsTable();
       certificateSection.appendChild(table.element());
       table.addRow(i18nString(UIStrings.subject), originState.securityDetails.subjectName);
       table.addRow(i18n.i18n.lockedString('SAN'), sanDiv);

package/front_end/panels/security/mainView.css

@@ -19,26 +19,26 @@
 
 .security-summary-section-title {
   font-size: 15px;
-  margin: 12px 16px;
+  margin: var(--sys-size-6) var(--sys-size-8);
   user-select: text;
 }
 
 .lock-spectrum {
-  margin: 8px 16px;
+  margin: var(--sys-size-5) var(--sys-size-8);
   display: flex;
   align-items: flex-start;
 }
 
 .security-summary .lock-icon {
   flex: none;
-  width: 16px;
-  height: 16px;
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
   margin: 0;
 }
 /* Separate the middle icon from the other two. */
 
 .security-summary .lock-icon-neutral {
-  margin: 0 16px;
+  margin: 0 var(--sys-size-8);
 }
 
 .security-summary:not(.security-summary-secure) .lock-icon-secure,
@@ -62,7 +62,7 @@
 }
 
 .triangle-pointer-container {
-  margin: 8px 24px 0;
+  margin: var(--sys-size-5) var(--sys-size-11) 0;
   padding: 0;
 }
 
@@ -73,13 +73,13 @@
 }
 
 .triangle-pointer {
-  width: 12px;
-  height: 12px;
-  margin-bottom: -6px;
-  margin-left: -6px;
+  width: var(--sys-size-6);
+  height: var(--sys-size-6);
+  margin-bottom: calc(-1 * var(--sys-size-4));
+  margin-left: calc(-1 * var(--sys-size-4));
   transform: rotate(-45deg);
   border-style: solid;
-  border-width: 1px 1px 0 0;
+  border-width: var(--sys-size-1) var(--sys-size-1) 0 0;
   background: var(--sys-color-cdt-base-container);
   border-color: var(--sys-color-neutral-outline);
 }
@@ -89,21 +89,21 @@
 }
 
 .security-summary-neutral .triangle-pointer-wrapper {
-  transform: translateX(32px);
+  transform: translateX(var(--sys-size-13));
 }
 
 .security-summary-insecure .triangle-pointer-wrapper {
-  transform: translateX(64px);
+  transform: translateX(var(--sys-size-18));
 }
 
 .security-summary-insecure-broken .triangle-pointer-wrapper {
-  transform: translateX(64px);
+  transform: translateX(var(--sys-size-18));
 }
 
 .security-summary-text {
-  padding: 16px 24px;
+  padding: var(--sys-size-8) var(--sys-size-11);
   border-style: solid;
-  border-width: 1px 0;
+  border-width: var(--sys-size-1) 0;
   font-size: 15px;
   background: var(--sys-color-cdt-base-container);
   border-color: var(--sys-color-neutral-outline);
@@ -125,7 +125,7 @@
 }
 
 .security-explanation-list {
-  padding-bottom: 16px;
+  padding-bottom: var(--sys-size-8);
 }
 
 .security-explanation-list:empty {
@@ -136,7 +136,7 @@
 .security-explanations-main {
   margin-top: -5px;
   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);
 }
 
 .security-explanations-extra {
@@ -163,25 +163,25 @@
 
 .security-explanation .security-property {
   flex: none;
-  width: 16px;
-  height: 16px;
-  margin-right: 16px;
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
+  margin-right: var(--sys-size-8);
 }
 
 .security-explanation-title {
   color: var(--sys-color-token-subtle);
-  margin-top: 1px;
-  margin-bottom: 8px;
+  margin-top: var(--sys-size-1);
+  margin-bottom: var(--sys-size-5);
 }
 
 .security-mixed-content {
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
 }
 
 .security-explanation-recommendations {
-  padding-inline-start: 16px;
+  padding-inline-start: var(--sys-size-8);
 }
 
 .security-explanation-recommendations > li {
-  margin-bottom: 4px;
+  margin-bottom: var(--sys-size-3);
 }

package/front_end/panels/security/originView.css

@@ -5,14 +5,14 @@
  */
 
 .title-section {
-  padding: 16px 0 24px;
-  border-bottom: 1px solid var(--sys-color-divider);
+  padding: var(--sys-size-8) 0 var(--sys-size-11);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .title-section-header {
-  padding-left: 16px;
+  padding-left: var(--sys-size-8);
   padding-bottom: 10px;
-  font-size: 14px;
+  font-size: var(--sys-typescale-body2-size);
 }
 
 .security-origin-view {
@@ -22,30 +22,30 @@
 }
 
 .security-origin-view .origin-view-section {
-  border-bottom: 1px solid var(--sys-color-divider);
-  padding: 12px 6px 12px  24px;
-  font-size: 12px;
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  padding: var(--sys-size-6) var(--sys-size-4) var(--sys-size-6) var(--sys-size-11);
+  font-size: var(--sys-typescale-body4-size);
 }
 
 .origin-view-notes {
-  margin-top: 2px;
+  margin-top: var(--sys-size-2);
   color: var(--sys-color-token-subtle);
 }
 
 .origin-view-section-notes {
-  margin-top: 6px;
+  margin-top: var(--sys-size-4);
   color: var(--sys-color-token-subtle);
 }
 
 .security-origin-view .origin-display {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   padding-left: var(--sys-size-8);
   display: flex;
   align-items: center;
 }
 
 .title-section > .view-network-button {
-  padding: 6px 0 0 16px;
+  padding: var(--sys-size-4) 0 0 var(--sys-size-8);
 }
 
 .security-origin-view .origin-display devtools-icon {
@@ -55,8 +55,8 @@
 }
 
 .security-origin-view .origin-view-section-title {
-  margin-top: 4px;
-  margin-bottom: 4px;
+  margin-top: var(--sys-size-3);
+  margin-bottom: var(--sys-size-3);
   font-weight: bold;
 }
 
@@ -67,7 +67,7 @@
 .security-origin-view .details-table-row {
   white-space: nowrap;
   overflow: hidden;
-  line-height: 22px;
+  line-height: var(--sys-size-10);
   vertical-align: top;
 }
 
@@ -87,7 +87,7 @@
 }
 
 .security-origin-view .sct-details .details-table .details-table-row:last-child td:last-child {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   padding-bottom: 10px;
 }
 

package/front_end/panels/sensors/locationsSettingsTab.css

@@ -15,11 +15,11 @@ devtools-list.locations-list,
   margin-top: var(--sys-size-3);
   flex: auto;
   display: flex;
-  border: 1px solid var(--sys-color-divider);
+  border: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .locations-list-item {
-  padding: 3px 6px;
+  padding: 3px var(--sys-size-4);
   height: 30px;
   display: flex;
   align-items: center;
@@ -49,10 +49,10 @@ devtools-list.locations-list,
 }
 
 .locations-list-separator {
-  flex: 0 0 1px;
+  flex: 0 0 var(--sys-size-1);
   background-color: var(--sys-color-divider);
   height: 30px;
-  margin: 0 4px;
+  margin: 0 var(--sys-size-3);
 }
 
 .locations-list-separator-invisible {
@@ -63,7 +63,7 @@ devtools-list.locations-list,
 .locations-edit-row {
   display: flex;
   flex-direction: row;
-  margin: 6px 5px;
+  margin: var(--sys-size-4) 5px;
 }
 
 .locations-edit-row input {
@@ -72,7 +72,7 @@ devtools-list.locations-list,
 }
 
 .locations-input-container {
-  padding: 1px;
+  padding: var(--sys-size-1);
 }
 
 .settings-card-container-wrapper {