chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

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/SecurityPanelSidebar.ts

@@ -274,38 +274,6 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
-  // Used in web tests
-  elementsByOrigin(): Map<string, {
-    select: (omitFocus?: boolean, selectedByUser?: boolean) => void,
-    showElement: () => void,
-    origin: () => string,
-    securityState: () => Protocol.Security.SecurityState | undefined,
-  }> {
-    const map = new Map<string, {
-      select: (omitFocus?: boolean, selectedByUser?: boolean) => void,
-      showElement: () => void,
-      origin: () => string,
-      securityState: () => Protocol.Security.SecurityState | undefined,
-    }>();
-    for (const [origin, state] of this.#origins.entries()) {
-      const element = {
-        select: () => {
-          this.#selectedElementId = origin;
-          this.#securitySidebarLastItemSetting.set(origin);
-          this.requestUpdate();
-          this.#onShowOrigin?.(origin);
-        },
-        showElement: () => {
-          this.#onShowOrigin?.(origin);
-        },
-        origin: () => origin,
-        securityState: () => state,
-      };
-      map.set(origin, element);
-    }
-    return map;
-  }
-
   set selectedOrigin(origin: Platform.DevToolsPath.UrlString|null) {
     this.#selectedElementId = origin ?? 'overview';
     this.#securitySidebarLastItemSetting.set(this.#selectedElementId);

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 {

package/front_end/panels/sensors/sensors.css

@@ -5,7 +5,7 @@
  */
 
 .sensors-view {
-  padding: 12px;
+  padding: var(--sys-size-6);
   display: block;
 }
 
@@ -60,8 +60,8 @@
 }
 
 .sensors-group-title {
-  width: 80px;
-  line-height: 24px;
+  width: var(--sys-size-19);
+  line-height: var(--sys-typescale-body1-line-height);
 }
 
 .sensors-group {
@@ -110,7 +110,7 @@
 
   perspective: 700px;
   perspective-origin: 50% 50%;
-  width: 160px;
+  width: var(--sys-size-23);
   height: 150px;
   background: linear-gradient(var(--override-gradient-color-1) 0%, var(--override-gradient-color-1) 64%, var(--override-gradient-color-2) 64%, var(--override-gradient-color-1) 100%);
   transition: 0.2s ease opacity, 0.2s ease filter;
@@ -163,7 +163,7 @@
 .orientation-back {
   width: 62px;
   height: 122px;
-  border-radius: 8px;
+  border-radius: var(--sys-shape-corner-small);
 }
 
 .orientation-front {
@@ -177,21 +177,21 @@
 
 .orientation-left,
 .orientation-right {
-  width: 8px;
+  width: var(--sys-size-5);
   height: 106px;
-  top: 8px;
+  top: var(--sys-size-5);
   background-position: center center;
 }
 
 .orientation-left {
-  left: -8px;
+  left: calc(-1 * var(--sys-size-5));
   transform-origin: right center;
   transform: rotateY(-90deg);
   background-image: var(--image-file-accelerometer-left);
 }
 
 .orientation-right {
-  right: -8px;
+  right: calc(-1 * var(--sys-size-5));
   transform-origin: left center;
   transform: rotateY(90deg);
   background-image: var(--image-file-accelerometer-right);
@@ -202,8 +202,8 @@
 .orientation-right::before,
 .orientation-right::after {
   content: "";
-  width: 8px;
-  height: 6px;
+  width: var(--sys-size-5);
+  height: var(--sys-size-4);
 }
 
 .orientation-left::before,
@@ -218,7 +218,7 @@
 
 .orientation-left::before,
 .orientation-right::before {
-  top: -6px;
+  top: calc(-1 * var(--sys-size-4));
   transform-origin: center bottom;
   transform: rotateX(26deg);
   background-position: center top;
@@ -226,7 +226,7 @@
 
 .orientation-left::after,
 .orientation-right::after {
-  bottom: -6px;
+  bottom: calc(-1 * var(--sys-size-4));
   transform-origin: center top;
   transform: rotateX(-25deg);
   background-position: center bottom;
@@ -235,20 +235,20 @@
 .orientation-top,
 .orientation-bottom {
   width: 50px;
-  height: 8px;
-  left: 8px;
+  height: var(--sys-size-5);
+  left: var(--sys-size-5);
   background-position: center center;
 }
 
 .orientation-top {
-  top: -8px;
+  top: calc(-1 * var(--sys-size-5));
   transform-origin: center bottom;
   transform: rotateX(90deg);
   background-image: var(--image-file-accelerometer-top);
 }
 
 .orientation-bottom {
-  bottom: -8px;
+  bottom: calc(-1 * var(--sys-size-5));
   transform-origin: center top;
   transform: rotateX(-90deg);
   background-image: var(--image-file-accelerometer-bottom);
@@ -259,8 +259,8 @@
 .orientation-bottom::before,
 .orientation-bottom::after {
   content: "";
-  width: 8px;
-  height: 8px;
+  width: var(--sys-size-5);
+  height: var(--sys-size-5);
 }
 
 .orientation-top::before,
@@ -275,7 +275,7 @@
 
 .orientation-top::before,
 .orientation-bottom::before {
-  left: -6px;
+  left: calc(-1 * var(--sys-size-4));
   transform-origin: right center;
   transform: rotateY(-26deg);
   background-position: left center;
@@ -283,7 +283,7 @@
 
 .orientation-top::after,
 .orientation-bottom::after {
-  right: -6px;
+  right: calc(-1 * var(--sys-size-4));
   transform-origin: left center;
   transform: rotateY(26deg);
   background-position: right center;
@@ -294,7 +294,7 @@
 }
 
 .orientation-reset-button {
-  min-width: 80px;
+  min-width: var(--sys-size-19);
 }
 
 fieldset.device-orientation-override-section {
@@ -303,15 +303,15 @@ fieldset.device-orientation-override-section {
 }
 
 .panel-section-separator {
-  height: 1px;
-  margin-bottom: 20px;
-  margin-left: -12px;
-  margin-right: -12px;
+  height: var(--sys-size-1);
+  margin-bottom: var(--sys-size-9);
+  margin-left: calc(-1 * var(--sys-size-6));
+  margin-right: calc(-1 * var(--sys-size-6));
   background: var(--sys-color-divider);
 }
 
 button.text-button {
-  margin: 4px 0 0 10px;
+  margin: var(--sys-size-3) 0 0 10px;
 }
 
 @media (forced-colors: active) {
@@ -321,5 +321,5 @@ button.text-button {
 }
 
 .chrome-select-label {
-  margin-bottom: 16px;
+  margin-bottom: var(--sys-size-8);
 }

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -11,6 +11,7 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 import {createIcon, type Icon, Link} from '../../ui/kit/kit.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Settings from '../../ui/settings/settings.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import keybindsSettingsTabStyles from './keybindsSettingsTab.css.js';
@@ -121,8 +122,10 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
         this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
     settingsContent.classList.add('settings-card-container');
 
-    const keybindsSetSetting = Common.Settings.Settings.instance().moduleSetting('active-keybind-set');
-    const userShortcutsSetting = Common.Settings.Settings.instance().moduleSetting('user-shortcuts');
+    const keybindsSetSetting =
+        Common.Settings.Settings.instance().resolve(Settings.MainSettings.activeKeybindSetSettingDescriptor);
+    const userShortcutsSetting =
+        Common.Settings.Settings.instance().resolve(Settings.MainSettings.userShortcutsSettingDescriptor);
     keybindsSetSetting.addChangeListener(this.update, this);
     const keybindsSetSelect = SettingsUI.SettingsUI.createControlForSetting(
         keybindsSetSetting, i18nString(UIStrings.matchShortcutsFromPreset));