chrome-devtools-frontend 1.0.1024166 → 1.0.1025068

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/core/sdk/SourceMap.ts

@@ -88,6 +88,8 @@ export class SourceMapV3 {
   sourceRoot!: Platform.DevToolsPath.UrlString|undefined;
   names!: string[]|undefined;
   sourcesContent!: string|undefined;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  x_google_ignoreList!: number[]|undefined;
   constructor() {
   }
 }
@@ -432,6 +434,7 @@ export class TextSourceMap implements SourceMap {
   private parseSources(sourceMap: SourceMapV3): void {
     const sourcesList = [];
     const sourceRoot = sourceMap.sourceRoot || Platform.DevToolsPath.EmptyUrlString;
+    const ignoreList = new Set(sourceMap.x_google_ignoreList);
     for (let i = 0; i < sourceMap.sources.length; ++i) {
       let href = sourceMap.sources[i];
       // The source map v3 proposal says to prepend the sourceRoot to the source URL
@@ -453,7 +456,9 @@ export class TextSourceMap implements SourceMap {
       }
       sourcesList.push(url);
       if (!this.#sourceInfos.has(url)) {
-        this.#sourceInfos.set(url, new TextSourceMap.SourceInfo(source ?? null));
+        const content = source ?? null;
+        const ignoreListHint = ignoreList.has(i);
+        this.#sourceInfos.set(url, new TextSourceMap.SourceInfo(content, ignoreListHint));
       }
     }
     sourceMapToSourceList.set(sourceMap, sourcesList);
@@ -584,6 +589,40 @@ export class TextSourceMap implements SourceMap {
     }
     return false;
   }
+
+  hasIgnoreListHint(sourceURL: Platform.DevToolsPath.UrlString): boolean {
+    return this.#sourceInfos.get(sourceURL)?.ignoreListHint ?? false;
+  }
+
+  /**
+   * Returns a list of ranges in the generated script, which are known to be
+   * third-party code that should be ignore-listed. Each range is a [begin, end)
+   * pair, meaning that code at the beginning location, up to but not including
+   * the end location, is known to be third-party code.
+   */
+  ignoreListRanges(): TextUtils.TextRange.TextRange[] {
+    const mappings = this.mappings();
+    const ranges = [];
+
+    let current: TextUtils.TextRange.TextRange|null = null;
+
+    for (const {sourceURL, lineNumber, columnNumber} of mappings) {
+      const ignoreListHint = sourceURL && this.hasIgnoreListHint(sourceURL);
+
+      if (!current && ignoreListHint) {
+        current = TextUtils.TextRange.TextRange.createUnboundedFromLocation(lineNumber, columnNumber);
+        ranges.push(current);
+        continue;
+      }
+      if (current && !ignoreListHint) {
+        current.endLine = lineNumber;
+        current.endColumn = columnNumber;
+        current = null;
+      }
+    }
+
+    return ranges;
+  }
 }
 
 export namespace TextSourceMap {
@@ -620,11 +659,9 @@ export namespace TextSourceMap {
   }
 
   export class SourceInfo {
-    content: string|null;
     reverseMappings: number[]|null = null;
 
-    constructor(content: string|null) {
-      this.content = content;
+    constructor(public content: string|null, public ignoreListHint: boolean) {
     }
   }
 }

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/models/text_utils/TextRange.ts

@@ -30,6 +30,8 @@
 
 import * as Platform from '../../core/platform/platform.js';
 
+const MAX_SAFE_INT32 = 2 ** 31 - 1;
+
 export interface SerializedTextRange {
   startLine: number;
   startColumn: number;
@@ -45,6 +47,10 @@ export class TextRange {
     return new TextRange(line, column, line, column);
   }
 
+  static createUnboundedFromLocation(line: number, column: number): TextRange {
+    return new TextRange(line, column, MAX_SAFE_INT32, MAX_SAFE_INT32);
+  }
+
   static fromObject(serializedTextRange: SerializedTextRange): TextRange {
     return new TextRange(
         serializedTextRange.startLine, serializedTextRange.startColumn, serializedTextRange.endLine,

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/performance_monitor/performanceMonitor.css

@@ -83,10 +83,7 @@
   width: 210px;
 }
 
-.perfmon-indicator:hover {
-  background-color: var(--color-background-elevation-0);
-}
-
+.perfmon-indicator:hover,
 .perfmon-indicator:focus-visible {
   background-color: var(--color-background-elevation-1);
 }

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/front_end/ui/components/linear_memory_inspector/LinearMemoryInspectorPane.ts

@@ -238,6 +238,7 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
         address: address,
         memoryOffset: start,
         outerMemoryLength: this.#memoryWrapper.length(),
+        highlightInfo: this.#highlightInfo,
       };
     });
   }

package/front_end/ui/legacy/inspectorSyntaxHighlight.css

@@ -31,7 +31,6 @@
 }
 
 .webkit-html-comment {
-  /* Keep this in sync with view-source.css (.webkit-html-comment) */
   color: var(--color-token-comment);
 }
 

package/front_end/ui/legacy/themeColors.css

@@ -231,7 +231,7 @@
   --color-syntax-3: rgb(242 151 102);
   --color-syntax-4: rgb(155 187 220);
   --color-syntax-5: rgb(132 240 255);
-  --color-syntax-6: rgb(137 137 137);
+  --color-syntax-6: rgb(171 171 171);
   --color-syntax-7: rgb(207 208 208);
   --color-syntax-8: rgb(93 176 215);
   --drop-shadow:
@@ -301,7 +301,7 @@
   --color-token-string-special: var(--color-token-string);
   --color-token-atom: rgb(161 247 181);
   --color-token-number: var(--color-token-atom);
-  --color-token-comment: rgb(137 137 137);
+  --color-token-comment: var(--color-syntax-6);
   --color-token-tag: rgb(93 176 215);
   --color-token-attribute: rgb(155 187 220);
   --color-token-attribute-value: rgb(242 151 102);

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.1025068"
 }