chrome-devtools-frontend 1.0.1024166 → 1.0.1024644

package/front_end/core/i18n/locales/en-US.json

@@ -8951,9 +8951,6 @@
   "panels/security/SecurityPanel.ts | keyExchange": {
     "message": "Key exchange"
   },
-  "panels/security/SecurityPanel.ts | keyExchangeGroup": {
-    "message": "Key exchange group"
-  },
   "panels/security/SecurityPanel.ts | logId": {
     "message": "Log ID"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -8951,9 +8951,6 @@
   "panels/security/SecurityPanel.ts | keyExchange": {
     "message": "K̂éŷ éx̂ćĥán̂ǵê"
   },
-  "panels/security/SecurityPanel.ts | keyExchangeGroup": {
-    "message": "K̂éŷ éx̂ćĥán̂ǵê ǵr̂óûṕ"
-  },
   "panels/security/SecurityPanel.ts | logId": {
     "message": "L̂óĝ ÍD̂"
   },

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -25,13 +25,14 @@ export class CSSMatchedStyles {
   readonly #pseudoDOMCascades: Map<Protocol.DOM.PseudoType, DOMInheritanceCascade>;
   readonly #customHighlightPseudoDOMCascades: Map<string, DOMInheritanceCascade>;
   readonly #styleToDOMCascade: Map<CSSStyleDeclaration, DOMInheritanceCascade>;
+  readonly #parentLayoutNodeId: Protocol.DOM.NodeId|undefined;
 
   constructor(
       cssModel: CSSModel, node: DOMNode, inlinePayload: Protocol.CSS.CSSStyle|null,
       attributesPayload: Protocol.CSS.CSSStyle|null, matchedPayload: Protocol.CSS.RuleMatch[],
       pseudoPayload: Protocol.CSS.PseudoElementMatches[], inheritedPayload: Protocol.CSS.InheritedStyleEntry[],
       inheritedPseudoPayload: Protocol.CSS.InheritedPseudoElementMatches[],
-      animationsPayload: Protocol.CSS.CSSKeyframesRule[]) {
+      animationsPayload: Protocol.CSS.CSSKeyframesRule[], parentLayoutNodeId: Protocol.DOM.NodeId|undefined) {
     this.#cssModelInternal = cssModel;
     this.#nodeInternal = node;
     this.#addedStyles = new Map();
@@ -40,6 +41,7 @@ export class CSSMatchedStyles {
     if (animationsPayload) {
       this.#keyframesInternal = animationsPayload.map(rule => new CSSKeyframesRule(cssModel, rule));
     }
+    this.#parentLayoutNodeId = parentLayoutNodeId;
 
     this.#nodeForStyleInternal = new Map();
     this.#inheritedStyles = new Set();
@@ -411,6 +413,10 @@ export class CSSMatchedStyles {
     return matchingSelectors.length > 0 && this.queryMatches(rule.style);
   }
 
+  getParentLayoutNodeId(): Protocol.DOM.NodeId|undefined {
+    return this.#parentLayoutNodeId;
+  }
+
   getMatchingSelectors(rule: CSSStyleRule): number[] {
     const node = this.nodeForStyle(rule.style);
     if (!node || typeof node.id !== 'number') {

package/front_end/core/sdk/CSSModel.ts

@@ -305,7 +305,7 @@ export class CSSModel extends SDKModel<EventTypes> {
     return new CSSMatchedStyles(
         this, (node as DOMNode), response.inlineStyle || null, response.attributesStyle || null,
         response.matchedCSSRules || [], response.pseudoElements || [], response.inherited || [],
-        response.inheritedPseudoElements || [], response.cssKeyframesRules || []);
+        response.inheritedPseudoElements || [], response.cssKeyframesRules || [], response.parentLayoutNodeId);
   }
 
   async getClassNames(styleSheetId: Protocol.CSS.StyleSheetId): Promise<string[]> {

package/front_end/models/bindings/DebuggerLanguagePlugins.ts

@@ -351,6 +351,10 @@ class FormattedValueNode extends ValueNode {
     this.#evalOptions = evalOptions;
   }
 
+  get sourceType(): SourceType {
+    return this.#sourceType;
+  }
+
   async findProperties(...properties: string[]): Promise<{
     [x: string]: FormattedValueNode | undefined,
   }> {

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -348,7 +348,7 @@ export class DeprecationIssue extends Issue {
         break;
       case Protocol.Audits.DeprecationIssueType.CrossOriginAccessBasedOnDocumentDomain:
         messageFunction = i18nLazyString(UIStrings.crossOriginAccessBasedOnDocumentDomain);
-        milestone = 106;
+        milestone = 109;
         break;
       case Protocol.Audits.DeprecationIssueType.CrossOriginWindowAlert:
         messageFunction = i18nLazyString(UIStrings.crossOriginWindowApi, {PH1: 'window.alert'});
@@ -367,7 +367,7 @@ export class DeprecationIssue extends Issue {
         break;
       case Protocol.Audits.DeprecationIssueType.DocumentDomainSettingWithoutOriginAgentClusterHeader:
         messageFunction = i18nLazyString(UIStrings.documentDomainSettingWithoutOriginAgentClusterHeader);
-        milestone = 106;
+        milestone = 109;
         break;
       case Protocol.Audits.DeprecationIssueType.EventPath:
         messageFunction = i18nLazyString(UIStrings.eventPath);

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -594,18 +594,17 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       }, 200 /* only spin for loading time > 200ms to avoid unpleasant render flashes */);
     }
 
-    const node = this.node();
-    // TODO: Fetch the parent node id using CDP command
-    const parentNode = node ? node.parentNode : null;
-
-    const [computedStyles, parentsComputedStyles] =
-        await Promise.all([this.fetchComputedStylesFor(node), this.fetchComputedStylesFor(parentNode)]);
+    const matchedStyles = await this.fetchMatchedCascade();
 
     if (signal.aborted) {
       return;
     }
 
-    const matchedStyles = await this.fetchMatchedCascade();
+    const nodeId = this.node()?.id;
+    const parentNodeId = matchedStyles?.getParentLayoutNodeId();
+
+    const [computedStyles, parentsComputedStyles] =
+        await Promise.all([this.fetchComputedStylesFor(nodeId), this.fetchComputedStylesFor(parentNodeId)]);
 
     if (signal.aborted) {
       return;
@@ -633,11 +632,12 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.dispatchEventToListeners(Events.StylesUpdateCompleted, {hasMatchedStyles: this.hasMatchedStyles});
   }
 
-  private async fetchComputedStylesFor(node: SDK.DOMModel.DOMNode|null): Promise<Map<string, string>|null> {
-    if (!node) {
+  private async fetchComputedStylesFor(nodeId: Protocol.DOM.NodeId|undefined): Promise<Map<string, string>|null> {
+    const node = this.node();
+    if (node === null || nodeId === undefined) {
       return null;
     }
-    return await node.domModel().cssModel().getComputedStyle(node.id);
+    return await node.domModel().cssModel().getComputedStyle(nodeId);
   }
 
   onResize(): void {

package/front_end/panels/security/SecurityPanel.ts

@@ -319,15 +319,13 @@ const UIStrings = {
   */
   protocol: 'Protocol',
   /**
-  *@description Text in Security Panel of the Security panel
+  *@description Text in the Security panel that refers to how the TLS handshake
+  *established encryption keys.
   */
   keyExchange: 'Key exchange',
   /**
-  *@description Text in Security Panel of the Security panel
-  */
-  keyExchangeGroup: 'Key exchange group',
-  /**
-  *@description Text in Security Panel of the Security panel
+  *@description Text in Security Panel that refers to how the TLS handshake
+  *encrypted data.
   */
   cipher: 'Cipher',
   /**
@@ -1439,12 +1437,35 @@ export class SecurityOriginView extends UI.Widget.VBox {
       let table: SecurityDetailsTable = new SecurityDetailsTable();
       connectionSection.appendChild(table.element());
       table.addRow(i18nString(UIStrings.protocol), originState.securityDetails.protocol);
-      if (originState.securityDetails.keyExchange) {
+
+      // 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.keyExchangeGroup) {
-        table.addRow(i18nString(UIStrings.keyExchangeGroup), originState.securityDetails.keyExchangeGroup);
-      }
+
       table.addRow(
           i18nString(UIStrings.cipher),
           originState.securityDetails.cipher +
@@ -1645,14 +1666,14 @@ export class SecurityDetailsTable {
   }
 
   addRow(key: string, value: string|Node): void {
-    const row = this.elementInternal.createChild('div', 'details-table-row');
-    row.createChild('div').textContent = key;
+    const row = this.elementInternal.createChild('tr', 'details-table-row');
+    row.createChild('td').textContent = key;
 
-    const valueDiv = row.createChild('div');
+    const valueCell = row.createChild('td');
     if (typeof value === 'string') {
-      valueDiv.textContent = value;
+      valueCell.textContent = value;
     } else {
-      valueDiv.appendChild(value);
+      valueCell.appendChild(value);
     }
   }
 }

package/front_end/panels/security/originView.css

@@ -62,37 +62,38 @@
   font-weight: bold;
 }
 
+.security-origin-view .details-table {
+  border-spacing: 0;
+}
+
 .security-origin-view .details-table-row {
-  display: flex;
   white-space: nowrap;
   overflow: hidden;
   line-height: 22px;
+  vertical-align: top;
 }
 
-.security-origin-view .details-table-row > div {
-  align-items: flex-start;
+.security-origin-view .details-table-row > td {
+  padding: 0;
 }
 
-.security-origin-view .details-table-row > div:first-child {
+.security-origin-view .details-table-row > td:first-child {
   color: var(--color-text-secondary);
-  width: 110px;
-  margin-right: 1em;
-  flex: none;
-  display: flex;
-  justify-content: flex-end;
+  width: calc(110px + 1em);
+  text-align: right;
+  padding-right: 1em;
 }
 
-.security-origin-view .details-table-row > div:nth-child(2) {
-  flex: auto;
+.security-origin-view .details-table-row > td:nth-child(2) {
   white-space: normal;
 }
 
-.security-origin-view .sct-details .details-table .details-table-row:last-child div:last-child {
+.security-origin-view .sct-details .details-table .details-table-row:last-child td:last-child {
   border-bottom: 1px solid var(--color-background-elevation-2);
   padding-bottom: 10px;
 }
 
-.security-origin-view .sct-details .details-table:last-child .details-table-row:last-child div:last-child {
+.security-origin-view .sct-details .details-table:last-child .details-table-row:last-child td:last-child {
   border-bottom: none;
   padding-bottom: 0;
 }

package/front_end/ui/components/linear_memory_inspector/LinearMemoryInspectorController.ts

@@ -217,6 +217,33 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     return {obj, address};
   }
 
+  // This function returns the size of the source language value represented
+  // by the ValueNode. If the value is a pointer, the function returns the size of
+  // the pointed-to value. If the pointed-to value is also a pointer, it returns
+  // the size of the pointer (usually 4 bytes) to stay consistent with the DWARF extension.
+  // > double x = 42.0;
+  // > double *ptr = &x;
+  // > double **dblptr = &ptr;
+  //
+  // retrieveObjectSize(ptr_ValueNode) -> 8, the size of a double
+  // retrieveObjectSize(dblptr_ValueNode) -> 4, the size of a pointer
+  static retrieveObjectSize(obj: Bindings.DebuggerLanguagePlugins.ValueNode): number {
+    let typeInfo = obj.sourceType.typeInfo;
+    const pointerMembers = typeInfo.members.filter(member => member.name === '*');
+    if (pointerMembers.length === 1) {
+      const typeId = pointerMembers[0].typeId;
+      const newTypeInfo = obj.sourceType.typeMap.get(typeId)?.typeInfo;
+      if (newTypeInfo !== undefined) {
+        typeInfo = newTypeInfo;
+      } else {
+        throw new Error(`Cannot find the source type information for typeId ${typeId}.`);
+      }
+    } else if (pointerMembers.length > 1) {
+      throw new Error('The number of pointers in typeInfo.members should not be greater than one.');
+    }
+    return typeInfo.size;
+  }
+
   async openInspectorView(obj: SDK.RemoteObject.RemoteObject, address?: number): Promise<void> {
     const response = await LinearMemoryInspectorController.retrieveDWARFMemoryObjectAndAddress(obj);
     let memoryObj = obj;
@@ -268,14 +295,13 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
   #extractHighlightInfo(obj: SDK.RemoteObject.RemoteObject, memoryAddress?: number): HighlightInfo|undefined {
     let highlightInfo;
     if (obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode) {
-      // Currently, only the StaticallyTypedValueNode subclass implements the sourceType getter.
-      // The other subclasses throw a 'Not Implemented' Error.
       try {
         highlightInfo = {
           startAddress: memoryAddress || 0,
-          size: obj.sourceType.typeInfo.size,
+          size: LinearMemoryInspectorController.retrieveObjectSize(obj),
         };
-      } catch (unusedError) {
+      } catch (err) {
+        highlightInfo = undefined;
       }
     }
     return highlightInfo;

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1024166"
+  "version": "1.0.1024644"
 }