chrome-devtools-frontend 1.0.996044 → 1.0.996595

package/AUTHORS

@@ -26,6 +26,7 @@ Edward Trist <edwardtrist@gmail.com>
 Ergün Erdoğmuş <erdogmusergun@gmail.com>
 Eric Rannaud <eric.rannaud@gmail.com>
 Feng Lu <lufengd3@gmail.com>
+Feng Yu <f3n67u@gmail.com>
 Gabriel Luong <gabriel.luong@gmail.com>
 Gautham Banasandra <gautham.bangalore@gmail.com>
 Jacky Hu <flameddd@gmail.com>

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

@@ -12563,6 +12563,9 @@
   "ui/legacy/TargetCrashedScreen.ts | oncePageIsReloadedDevtoolsWill": {
     "message": "Once page is reloaded, DevTools will automatically reconnect."
   },
+  "ui/legacy/Toolbar.ts | clearInput": {
+    "message": "Clear input"
+  },
   "ui/legacy/Toolbar.ts | notPressed": {
     "message": "not pressed"
   },

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

@@ -12563,6 +12563,9 @@
   "ui/legacy/TargetCrashedScreen.ts | oncePageIsReloadedDevtoolsWill": {
     "message": "Ôńĉé p̂áĝé îś r̂él̂óâd́êd́, D̂év̂T́ôól̂ś ŵíl̂ĺ âút̂óm̂át̂íĉál̂ĺŷ ŕêćôńn̂éĉt́."
   },
+  "ui/legacy/Toolbar.ts | clearInput": {
+    "message": "Ĉĺêár̂ ín̂ṕût́"
+  },
   "ui/legacy/Toolbar.ts | notPressed": {
     "message": "n̂ót̂ ṕr̂éŝśêd́"
   },

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -2,10 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Protocol from '../../generated/protocol.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
-import type * as Protocol from '../../generated/protocol.js';
 
 import {cssMetadata, CustomVariableRegex, VariableRegex} from './CSSMetadata.js';
+
 import type {CSSModel} from './CSSModel.js';
 import type {CSSProperty} from './CSSProperty.js';
 import {CSSKeyframesRule, CSSStyleRule} from './CSSRule.js';
@@ -22,6 +23,7 @@ export class CSSMatchedStyles {
   readonly #inheritedStyles: Set<CSSStyleDeclaration>;
   readonly #mainDOMCascade: DOMInheritanceCascade;
   readonly #pseudoDOMCascades: Map<Protocol.DOM.PseudoType, DOMInheritanceCascade>;
+  readonly #customHighlightPseudoDOMCascades: Map<string, DOMInheritanceCascade>;
   readonly #styleToDOMCascade: Map<CSSStyleDeclaration, DOMInheritanceCascade>;
 
   constructor(
@@ -48,10 +50,13 @@ export class CSSMatchedStyles {
     }
 
     this.#mainDOMCascade = this.buildMainCascade(inlinePayload, attributesPayload, matchedPayload, inheritedPayload);
-    this.#pseudoDOMCascades = this.buildPseudoCascades(pseudoPayload, inheritedPseudoPayload);
+    [this.#pseudoDOMCascades, this.#customHighlightPseudoDOMCascades] =
+        this.buildPseudoCascades(pseudoPayload, inheritedPseudoPayload);
 
     this.#styleToDOMCascade = new Map();
-    for (const domCascade of Array.from(this.#pseudoDOMCascades.values()).concat(this.#mainDOMCascade)) {
+    for (const domCascade of Array.from(this.#customHighlightPseudoDOMCascades.values())
+             .concat(Array.from(this.#pseudoDOMCascades.values()))
+             .concat(this.#mainDOMCascade)) {
       for (const style of domCascade.styles()) {
         this.#styleToDOMCascade.set(style, domCascade);
       }
@@ -206,36 +211,133 @@ export class CSSMatchedStyles {
     }
   }
 
+  /**
+   * Pseudo rule matches received via the inspector protocol are grouped by pseudo type.
+   * For custom highlight pseudos, we need to instead group the rule matches by highlight
+   * name in order to produce separate cascades for each highlight name. This is necessary
+   * so that styles of ::highlight(foo) are not shown as overriding styles of ::highlight(bar).
+   *
+   * This helper function takes a list of rule matches and generates separate NodeCascades
+   * for each custom highlight name that was matched.
+   */
+  private buildSplitCustomHighlightCascades(
+      rules: Protocol.CSS.RuleMatch[], node: DOMNode, isInherited: boolean,
+      pseudoCascades: Map<string, NodeCascade[]>): void {
+    const splitHighlightRules = new Map<string, CSSStyleDeclaration[]>();
+
+    for (let j = rules.length - 1; j >= 0; --j) {
+      const highlightNamesToMatchingSelectorIndices = this.customHighlightNamesToMatchingSelectorIndices(rules[j]);
+
+      for (const [highlightName, matchingSelectors] of highlightNamesToMatchingSelectorIndices) {
+        const pseudoRule = new CSSStyleRule(this.#cssModelInternal, rules[j].rule);
+        this.#nodeForStyleInternal.set(pseudoRule.style, node);
+        if (isInherited) {
+          this.#inheritedStyles.add(pseudoRule.style);
+        }
+        this.addMatchingSelectors(node, pseudoRule, matchingSelectors);
+
+        const ruleListForHighlightName = splitHighlightRules.get(highlightName);
+        if (ruleListForHighlightName) {
+          ruleListForHighlightName.push(pseudoRule.style);
+        } else {
+          splitHighlightRules.set(highlightName, [pseudoRule.style]);
+        }
+      }
+    }
+
+    for (const [highlightName, highlightStyles] of splitHighlightRules) {
+      const nodeCascade = new NodeCascade(this, highlightStyles, isInherited, true /* #isHighlightPseudoCascade*/);
+      const cascadeListForHighlightName = pseudoCascades.get(highlightName);
+      if (cascadeListForHighlightName) {
+        cascadeListForHighlightName.push(nodeCascade);
+      } else {
+        pseudoCascades.set(highlightName, [nodeCascade]);
+      }
+    }
+  }
+
+  /**
+   * Return a mapping of the highlight names in the specified RuleMatch to
+   * the indices of selectors in that selector list with that highlight name.
+   *
+   * For example, consider the following ruleset:
+   * span::highlight(foo), div, #mySpan::highlight(bar), .highlighted::highlight(foo) {
+   *   color: blue;
+   * }
+   *
+   * For a <span id="mySpan" class="highlighted"></span>, a RuleMatch for that span
+   * would have matchingSelectors [0, 2, 3] indicating that the span
+   * matches all of the highlight selectors.
+   *
+   * For that RuleMatch, this function would produce the following map:
+   * {
+   *  "foo": [0, 3],
+   *  "bar": [2]
+   * }
+   *
+   * @param ruleMatch
+   * @returns A mapping of highlight names to lists of indices into the selector
+   * list associated with ruleMatch. The indices correspond to the selectors in the rule
+   * associated with the key's highlight name.
+   */
+  private customHighlightNamesToMatchingSelectorIndices(ruleMatch: Protocol.CSS.RuleMatch): Map<string, number[]> {
+    const highlightNamesToMatchingSelectors = new Map<string, number[]>();
+
+    for (let i = 0; i < ruleMatch.matchingSelectors.length; i++) {
+      const matchingSelectorIndex = ruleMatch.matchingSelectors[i];
+      const selectorText = ruleMatch.rule.selectorList.selectors[matchingSelectorIndex].text;
+      const highlightNameMatch = selectorText.match(/::highlight\((.*)\)/);
+      if (highlightNameMatch) {
+        const highlightName = highlightNameMatch[1];
+        const selectorsForName = highlightNamesToMatchingSelectors.get(highlightName);
+        if (selectorsForName) {
+          selectorsForName.push(matchingSelectorIndex);
+        } else {
+          highlightNamesToMatchingSelectors.set(highlightName, [matchingSelectorIndex]);
+        }
+      }
+    }
+    return highlightNamesToMatchingSelectors;
+  }
+
   private buildPseudoCascades(
       pseudoPayload: Protocol.CSS.PseudoElementMatches[],
       inheritedPseudoPayload: Protocol.CSS.InheritedPseudoElementMatches[]):
-      Map<Protocol.DOM.PseudoType, DOMInheritanceCascade> {
+      [Map<Protocol.DOM.PseudoType, DOMInheritanceCascade>, Map<string, DOMInheritanceCascade>] {
     const pseudoInheritanceCascades = new Map<Protocol.DOM.PseudoType, DOMInheritanceCascade>();
+    const customHighlightPseudoInheritanceCascades = new Map<string, DOMInheritanceCascade>();
     if (!pseudoPayload) {
-      return pseudoInheritanceCascades;
+      return [pseudoInheritanceCascades, customHighlightPseudoInheritanceCascades];
     }
 
     const pseudoCascades = new Map<Protocol.DOM.PseudoType, NodeCascade[]>();
+    const customHighlightPseudoCascades = new Map<string, NodeCascade[]>();
     for (let i = 0; i < pseudoPayload.length; ++i) {
       const entryPayload = pseudoPayload[i];
       // PseudoElement nodes are not created unless "content" css property is set.
       const pseudoElement = this.#nodeInternal.pseudoElements().get(entryPayload.pseudoType) || null;
       const pseudoStyles = [];
       const rules = entryPayload.matches || [];
-      for (let j = rules.length - 1; j >= 0; --j) {
-        const pseudoRule = new CSSStyleRule(this.#cssModelInternal, rules[j].rule);
-        pseudoStyles.push(pseudoRule.style);
-        const nodeForStyle =
-            cssMetadata().isHighlightPseudoType(entryPayload.pseudoType) ? this.#nodeInternal : pseudoElement;
-        this.#nodeForStyleInternal.set(pseudoRule.style, nodeForStyle);
-        if (nodeForStyle) {
-          this.addMatchingSelectors(nodeForStyle, pseudoRule, rules[j].matchingSelectors);
+
+      if (entryPayload.pseudoType === Protocol.DOM.PseudoType.Highlight) {
+        this.buildSplitCustomHighlightCascades(
+            rules, this.#nodeInternal, false /* #isInherited */, customHighlightPseudoCascades);
+      } else {
+        for (let j = rules.length - 1; j >= 0; --j) {
+          const pseudoRule = new CSSStyleRule(this.#cssModelInternal, rules[j].rule);
+          pseudoStyles.push(pseudoRule.style);
+          const nodeForStyle =
+              cssMetadata().isHighlightPseudoType(entryPayload.pseudoType) ? this.#nodeInternal : pseudoElement;
+          this.#nodeForStyleInternal.set(pseudoRule.style, nodeForStyle);
+          if (nodeForStyle) {
+            this.addMatchingSelectors(nodeForStyle, pseudoRule, rules[j].matchingSelectors);
+          }
         }
+        const isHighlightPseudoCascade = cssMetadata().isHighlightPseudoType(entryPayload.pseudoType);
+        const nodeCascade = new NodeCascade(
+            this, pseudoStyles, false /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
+        pseudoCascades.set(entryPayload.pseudoType, [nodeCascade]);
       }
-      const isHighlightPseudoCascade = cssMetadata().isHighlightPseudoType(entryPayload.pseudoType);
-      const nodeCascade = new NodeCascade(
-          this, pseudoStyles, false /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
-      pseudoCascades.set(entryPayload.pseudoType, [nodeCascade]);
     }
 
     if (inheritedPseudoPayload) {
@@ -244,24 +346,30 @@ export class CSSMatchedStyles {
         const inheritedPseudoMatches = inheritedPseudoPayload[i].pseudoElements;
         for (let j = 0; j < inheritedPseudoMatches.length; ++j) {
           const inheritedEntryPayload = inheritedPseudoMatches[j];
-          const pseudoStyles = [];
           const rules = inheritedEntryPayload.matches || [];
-          for (let k = rules.length - 1; k >= 0; --k) {
-            const pseudoRule = new CSSStyleRule(this.#cssModelInternal, rules[k].rule);
-            pseudoStyles.push(pseudoRule.style);
-            this.#nodeForStyleInternal.set(pseudoRule.style, parentNode);
-            this.#inheritedStyles.add(pseudoRule.style);
-            this.addMatchingSelectors(parentNode, pseudoRule, rules[k].matchingSelectors);
-          }
 
-          const isHighlightPseudoCascade = cssMetadata().isHighlightPseudoType(inheritedEntryPayload.pseudoType);
-          const nodeCascade = new NodeCascade(
-              this, pseudoStyles, true /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
-          const cascadeListForPseudoType = pseudoCascades.get(inheritedEntryPayload.pseudoType);
-          if (cascadeListForPseudoType) {
-            cascadeListForPseudoType.push(nodeCascade);
+          if (inheritedEntryPayload.pseudoType === Protocol.DOM.PseudoType.Highlight) {
+            this.buildSplitCustomHighlightCascades(
+                rules, parentNode, true /* #isInherited */, customHighlightPseudoCascades);
           } else {
-            pseudoCascades.set(inheritedEntryPayload.pseudoType, [nodeCascade]);
+            const pseudoStyles = [];
+            for (let k = rules.length - 1; k >= 0; --k) {
+              const pseudoRule = new CSSStyleRule(this.#cssModelInternal, rules[k].rule);
+              pseudoStyles.push(pseudoRule.style);
+              this.#nodeForStyleInternal.set(pseudoRule.style, parentNode);
+              this.#inheritedStyles.add(pseudoRule.style);
+              this.addMatchingSelectors(parentNode, pseudoRule, rules[k].matchingSelectors);
+            }
+
+            const isHighlightPseudoCascade = cssMetadata().isHighlightPseudoType(inheritedEntryPayload.pseudoType);
+            const nodeCascade = new NodeCascade(
+                this, pseudoStyles, true /* #isInherited */, isHighlightPseudoCascade /* #isHighlightPseudoCascade*/);
+            const cascadeListForPseudoType = pseudoCascades.get(inheritedEntryPayload.pseudoType);
+            if (cascadeListForPseudoType) {
+              cascadeListForPseudoType.push(nodeCascade);
+            } else {
+              pseudoCascades.set(inheritedEntryPayload.pseudoType, [nodeCascade]);
+            }
           }
         }
 
@@ -275,7 +383,11 @@ export class CSSMatchedStyles {
       pseudoInheritanceCascades.set(pseudoType, new DOMInheritanceCascade(nodeCascade));
     }
 
-    return pseudoInheritanceCascades;
+    for (const [highlightName, nodeCascade] of customHighlightPseudoCascades.entries()) {
+      customHighlightPseudoInheritanceCascades.set(highlightName, new DOMInheritanceCascade(nodeCascade));
+    }
+
+    return [pseudoInheritanceCascades, customHighlightPseudoInheritanceCascades];
   }
 
   private addMatchingSelectors(
@@ -405,6 +517,15 @@ export class CSSMatchedStyles {
     return new Set(this.#pseudoDOMCascades.keys());
   }
 
+  customHighlightPseudoStyles(highlightName: string): CSSStyleDeclaration[] {
+    const domCascade = this.#customHighlightPseudoDOMCascades.get(highlightName);
+    return domCascade ? domCascade.styles() : [];
+  }
+
+  customHighlightPseudoNames(): Set<string> {
+    return new Set(this.#customHighlightPseudoDOMCascades.keys());
+  }
+
   private containsInherited(style: CSSStyleDeclaration): boolean {
     const properties = style.allProperties();
     for (let i = 0; i < properties.length; ++i) {
@@ -462,6 +583,10 @@ export class CSSMatchedStyles {
     for (const domCascade of this.#pseudoDOMCascades.values()) {
       domCascade.reset();
     }
+
+    for (const domCascade of this.#customHighlightPseudoDOMCascades.values()) {
+      domCascade.reset();
+    }
   }
 }
 

package/front_end/core/sdk/CSSMetadata.ts

@@ -313,15 +313,8 @@ export class CSSMetadata {
   }
 
   isHighlightPseudoType(pseudoType: Protocol.DOM.PseudoType): boolean {
-    // TODO(crbug.com/1164461) Currently devtools-frontend groups all custom highlight
-    // pseudos together in the same pseudo cascade, regardless of highlight name. This means that
-    // the result of displaying "overloaded" highlight styles as crossed-out can produce
-    // misleading results, because properties from highlights with one name can be shown as overloaded by
-    // properties from highlights with another name.
-    // So until that is fixed, don't include custom highlights among the highlight pseudos
-    // for which we apply overloaded property annotations.
     return (
-        /* pseudoType === Protocol.DOM.PseudoType.Highlight || */ pseudoType === Protocol.DOM.PseudoType.Selection ||
+        pseudoType === Protocol.DOM.PseudoType.Highlight || pseudoType === Protocol.DOM.PseudoType.Selection ||
         pseudoType === Protocol.DOM.PseudoType.TargetText || pseudoType === Protocol.DOM.PseudoType.GrammarError ||
         pseudoType === Protocol.DOM.PseudoType.SpellingError);
   }

package/front_end/generated/InspectorBackendCommands.js

@@ -273,38 +273,69 @@ export function registerCommands(inspectorBackend) {
       'Audits.GenericIssueErrorType', {CrossOriginPortalPostMessageError: 'CrossOriginPortalPostMessageError'});
   inspectorBackend.registerEnum('Audits.DeprecationIssueType', {
     AuthorizationCoveredByWildcard: 'AuthorizationCoveredByWildcard',
+    BatteryStatusInsecureOrigin: 'BatteryStatusInsecureOrigin',
+    CanRequestURLHTTPContainingNewline: 'CanRequestURLHTTPContainingNewline',
+    ChromeLoadTimesConnectionInfo: 'ChromeLoadTimesConnectionInfo',
+    ChromeLoadTimesFirstPaintAfterLoadTime: 'ChromeLoadTimesFirstPaintAfterLoadTime',
+    ChromeLoadTimesWasAlternateProtocolAvailable: 'ChromeLoadTimesWasAlternateProtocolAvailable',
     CookieWithTruncatingChar: 'CookieWithTruncatingChar',
     CrossOriginAccessBasedOnDocumentDomain: 'CrossOriginAccessBasedOnDocumentDomain',
     CrossOriginWindowAlert: 'CrossOriginWindowAlert',
     CrossOriginWindowConfirm: 'CrossOriginWindowConfirm',
+    CSSSelectorInternalMediaControlsOverlayCastButton: 'CSSSelectorInternalMediaControlsOverlayCastButton',
+    CustomCursorIntersectsViewport: 'CustomCursorIntersectsViewport',
     DeprecationExample: 'DeprecationExample',
     DocumentDomainSettingWithoutOriginAgentClusterHeader: 'DocumentDomainSettingWithoutOriginAgentClusterHeader',
+    EventPath: 'EventPath',
     GeolocationInsecureOrigin: 'GeolocationInsecureOrigin',
     GeolocationInsecureOriginDeprecatedNotRemoved: 'GeolocationInsecureOriginDeprecatedNotRemoved',
     GetUserMediaInsecureOrigin: 'GetUserMediaInsecureOrigin',
+    HostCandidateAttributeGetter: 'HostCandidateAttributeGetter',
+    InsecurePrivateNetworkSubresourceRequest: 'InsecurePrivateNetworkSubresourceRequest',
     LegacyConstraintGoogCpuOveruseDetection: 'LegacyConstraintGoogCpuOveruseDetection',
     LegacyConstraintGoogIPv6: 'LegacyConstraintGoogIPv6',
     LegacyConstraintGoogScreencastMinBitrate: 'LegacyConstraintGoogScreencastMinBitrate',
     LegacyConstraintGoogSuspendBelowMinBitrate: 'LegacyConstraintGoogSuspendBelowMinBitrate',
     LocalCSSFileExtensionRejected: 'LocalCSSFileExtensionRejected',
+    MediaElementAudioSourceNode: 'MediaElementAudioSourceNode',
+    MediaSourceAbortRemove: 'MediaSourceAbortRemove',
+    MediaSourceDurationTruncatingBuffered: 'MediaSourceDurationTruncatingBuffered',
+    NoSysexWebMIDIWithoutPermission: 'NoSysexWebMIDIWithoutPermission',
     NotificationInsecureOrigin: 'NotificationInsecureOrigin',
+    NotificationPermissionRequestedIframe: 'NotificationPermissionRequestedIframe',
     ObsoleteWebRtcCipherSuite: 'ObsoleteWebRtcCipherSuite',
+    PaymentRequestBasicCard: 'PaymentRequestBasicCard',
+    PaymentRequestShowWithoutGesture: 'PaymentRequestShowWithoutGesture',
     PictureSourceSrc: 'PictureSourceSrc',
     PrefixedCancelAnimationFrame: 'PrefixedCancelAnimationFrame',
     PrefixedRequestAnimationFrame: 'PrefixedRequestAnimationFrame',
+    PrefixedStorageInfo: 'PrefixedStorageInfo',
+    PrefixedVideoDisplayingFullscreen: 'PrefixedVideoDisplayingFullscreen',
+    PrefixedVideoEnterFullscreen: 'PrefixedVideoEnterFullscreen',
+    PrefixedVideoEnterFullScreen: 'PrefixedVideoEnterFullScreen',
+    PrefixedVideoExitFullscreen: 'PrefixedVideoExitFullscreen',
+    PrefixedVideoExitFullScreen: 'PrefixedVideoExitFullScreen',
+    PrefixedVideoSupportsFullscreen: 'PrefixedVideoSupportsFullscreen',
+    RangeExpand: 'RangeExpand',
+    RequestedSubresourceWithEmbeddedCredentials: 'RequestedSubresourceWithEmbeddedCredentials',
     RTCConstraintEnableDtlsSrtpFalse: 'RTCConstraintEnableDtlsSrtpFalse',
     RTCConstraintEnableDtlsSrtpTrue: 'RTCConstraintEnableDtlsSrtpTrue',
     RTCPeerConnectionComplexPlanBSdpUsingDefaultSdpSemantics:
         'RTCPeerConnectionComplexPlanBSdpUsingDefaultSdpSemantics',
     RTCPeerConnectionLegacyCreateWithMediaConstraints: 'RTCPeerConnectionLegacyCreateWithMediaConstraints',
+    RTCPeerConnectionSdpSemanticsPlanB: 'RTCPeerConnectionSdpSemanticsPlanB',
+    RtcpMuxPolicyNegotiate: 'RtcpMuxPolicyNegotiate',
     RTPDataChannel: 'RTPDataChannel',
+    SelectionAddRangeIntersect: 'SelectionAddRangeIntersect',
     SharedArrayBufferConstructedWithoutIsolation: 'SharedArrayBufferConstructedWithoutIsolation',
+    TextToSpeech_DisallowedByAutoplay: 'TextToSpeech_DisallowedByAutoplay',
     Untranslated: 'Untranslated',
     V8SharedArrayBufferConstructedInExtensionWithoutIsolation:
         'V8SharedArrayBufferConstructedInExtensionWithoutIsolation',
     WebCodecsVideoFrameDefaultTimestamp: 'WebCodecsVideoFrameDefaultTimestamp',
     XHRJSONEncodingDetection: 'XHRJSONEncodingDetection',
-    XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload: 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload'
+    XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload: 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload',
+    XRSupportsSession: 'XRSupportsSession'
   });
   inspectorBackend.registerEnum(
       'Audits.ClientHintIssueReason',
@@ -2103,6 +2134,7 @@ export function registerCommands(inspectorBackend) {
     InterestCohort: 'interest-cohort',
     JoinAdInterestGroup: 'join-ad-interest-group',
     KeyboardMap: 'keyboard-map',
+    LocalFonts: 'local-fonts',
     Magnetometer: 'magnetometer',
     Microphone: 'microphone',
     Midi: 'midi',
@@ -2450,7 +2482,6 @@ export function registerCommands(inspectorBackend) {
         {'name': 'marginLeft', 'type': 'number', 'optional': true},
         {'name': 'marginRight', 'type': 'number', 'optional': true},
         {'name': 'pageRanges', 'type': 'string', 'optional': true},
-        {'name': 'ignoreInvalidPageRanges', 'type': 'boolean', 'optional': true},
         {'name': 'headerTemplate', 'type': 'string', 'optional': true},
         {'name': 'footerTemplate', 'type': 'string', 'optional': true},
         {'name': 'preferCSSPageSize', 'type': 'boolean', 'optional': true},

package/front_end/generated/protocol.ts

@@ -1020,38 +1020,69 @@ export namespace Audits {
 
   export const enum DeprecationIssueType {
     AuthorizationCoveredByWildcard = 'AuthorizationCoveredByWildcard',
+    BatteryStatusInsecureOrigin = 'BatteryStatusInsecureOrigin',
+    CanRequestURLHTTPContainingNewline = 'CanRequestURLHTTPContainingNewline',
+    ChromeLoadTimesConnectionInfo = 'ChromeLoadTimesConnectionInfo',
+    ChromeLoadTimesFirstPaintAfterLoadTime = 'ChromeLoadTimesFirstPaintAfterLoadTime',
+    ChromeLoadTimesWasAlternateProtocolAvailable = 'ChromeLoadTimesWasAlternateProtocolAvailable',
     CookieWithTruncatingChar = 'CookieWithTruncatingChar',
     CrossOriginAccessBasedOnDocumentDomain = 'CrossOriginAccessBasedOnDocumentDomain',
     CrossOriginWindowAlert = 'CrossOriginWindowAlert',
     CrossOriginWindowConfirm = 'CrossOriginWindowConfirm',
+    CSSSelectorInternalMediaControlsOverlayCastButton = 'CSSSelectorInternalMediaControlsOverlayCastButton',
+    CustomCursorIntersectsViewport = 'CustomCursorIntersectsViewport',
     DeprecationExample = 'DeprecationExample',
     DocumentDomainSettingWithoutOriginAgentClusterHeader = 'DocumentDomainSettingWithoutOriginAgentClusterHeader',
+    EventPath = 'EventPath',
     GeolocationInsecureOrigin = 'GeolocationInsecureOrigin',
     GeolocationInsecureOriginDeprecatedNotRemoved = 'GeolocationInsecureOriginDeprecatedNotRemoved',
     GetUserMediaInsecureOrigin = 'GetUserMediaInsecureOrigin',
+    HostCandidateAttributeGetter = 'HostCandidateAttributeGetter',
+    InsecurePrivateNetworkSubresourceRequest = 'InsecurePrivateNetworkSubresourceRequest',
     LegacyConstraintGoogCpuOveruseDetection = 'LegacyConstraintGoogCpuOveruseDetection',
     LegacyConstraintGoogIPv6 = 'LegacyConstraintGoogIPv6',
     LegacyConstraintGoogScreencastMinBitrate = 'LegacyConstraintGoogScreencastMinBitrate',
     LegacyConstraintGoogSuspendBelowMinBitrate = 'LegacyConstraintGoogSuspendBelowMinBitrate',
     LocalCSSFileExtensionRejected = 'LocalCSSFileExtensionRejected',
+    MediaElementAudioSourceNode = 'MediaElementAudioSourceNode',
+    MediaSourceAbortRemove = 'MediaSourceAbortRemove',
+    MediaSourceDurationTruncatingBuffered = 'MediaSourceDurationTruncatingBuffered',
+    NoSysexWebMIDIWithoutPermission = 'NoSysexWebMIDIWithoutPermission',
     NotificationInsecureOrigin = 'NotificationInsecureOrigin',
+    NotificationPermissionRequestedIframe = 'NotificationPermissionRequestedIframe',
     ObsoleteWebRtcCipherSuite = 'ObsoleteWebRtcCipherSuite',
+    PaymentRequestBasicCard = 'PaymentRequestBasicCard',
+    PaymentRequestShowWithoutGesture = 'PaymentRequestShowWithoutGesture',
     PictureSourceSrc = 'PictureSourceSrc',
     PrefixedCancelAnimationFrame = 'PrefixedCancelAnimationFrame',
     PrefixedRequestAnimationFrame = 'PrefixedRequestAnimationFrame',
+    PrefixedStorageInfo = 'PrefixedStorageInfo',
+    PrefixedVideoDisplayingFullscreen = 'PrefixedVideoDisplayingFullscreen',
+    PrefixedVideoEnterFullscreen = 'PrefixedVideoEnterFullscreen',
+    PrefixedVideoEnterFullScreen = 'PrefixedVideoEnterFullScreen',
+    PrefixedVideoExitFullscreen = 'PrefixedVideoExitFullscreen',
+    PrefixedVideoExitFullScreen = 'PrefixedVideoExitFullScreen',
+    PrefixedVideoSupportsFullscreen = 'PrefixedVideoSupportsFullscreen',
+    RangeExpand = 'RangeExpand',
+    RequestedSubresourceWithEmbeddedCredentials = 'RequestedSubresourceWithEmbeddedCredentials',
     RTCConstraintEnableDtlsSrtpFalse = 'RTCConstraintEnableDtlsSrtpFalse',
     RTCConstraintEnableDtlsSrtpTrue = 'RTCConstraintEnableDtlsSrtpTrue',
     RTCPeerConnectionComplexPlanBSdpUsingDefaultSdpSemantics =
         'RTCPeerConnectionComplexPlanBSdpUsingDefaultSdpSemantics',
     RTCPeerConnectionLegacyCreateWithMediaConstraints = 'RTCPeerConnectionLegacyCreateWithMediaConstraints',
+    RTCPeerConnectionSdpSemanticsPlanB = 'RTCPeerConnectionSdpSemanticsPlanB',
+    RtcpMuxPolicyNegotiate = 'RtcpMuxPolicyNegotiate',
     RTPDataChannel = 'RTPDataChannel',
+    SelectionAddRangeIntersect = 'SelectionAddRangeIntersect',
     SharedArrayBufferConstructedWithoutIsolation = 'SharedArrayBufferConstructedWithoutIsolation',
+    TextToSpeech_DisallowedByAutoplay = 'TextToSpeech_DisallowedByAutoplay',
     Untranslated = 'Untranslated',
     V8SharedArrayBufferConstructedInExtensionWithoutIsolation =
         'V8SharedArrayBufferConstructedInExtensionWithoutIsolation',
     WebCodecsVideoFrameDefaultTimestamp = 'WebCodecsVideoFrameDefaultTimestamp',
     XHRJSONEncodingDetection = 'XHRJSONEncodingDetection',
     XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload = 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload',
+    XRSupportsSession = 'XRSupportsSession',
   }
 
   /**
@@ -5162,6 +5193,8 @@ export namespace Emulation {
     architecture: string;
     model: string;
     mobile: boolean;
+    bitness?: string;
+    wow64?: boolean;
   }
 
   /**
@@ -10200,6 +10233,7 @@ export namespace Page {
     InterestCohort = 'interest-cohort',
     JoinAdInterestGroup = 'join-ad-interest-group',
     KeyboardMap = 'keyboard-map',
+    LocalFonts = 'local-fonts',
     Magnetometer = 'magnetometer',
     Microphone = 'microphone',
     Midi = 'midi',
@@ -11300,15 +11334,16 @@ export namespace Page {
      */
     marginRight?: number;
     /**
-     * Paper ranges to print, e.g., '1-5, 8, 11-13'. Defaults to the empty string, which means
-     * print all pages.
+     * Paper ranges to print, one based, e.g., '1-5, 8, 11-13'. Pages are
+     * printed in the document order, not in the order specified, and no
+     * more than once.
+     * Defaults to empty string, which implies the entire document is printed.
+     * The page numbers are quietly capped to actual page count of the
+     * document, and ranges beyond the end of the document are ignored.
+     * If this results in no pages to print, an error is reported.
+     * It is an error to specify a range with start greater than end.
      */
     pageRanges?: string;
-    /**
-     * Whether to silently ignore invalid but successfully parsed page ranges, such as '3-2'.
-     * Defaults to false.
-     */
-    ignoreInvalidPageRanges?: boolean;
     /**
      * HTML template for the print header. Should be valid HTML markup with following
      * classes used to inject printing values into them:

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -61,12 +61,12 @@ const UIStrings = {
   documentDomainSettingWithoutOriginAgentClusterHeader:
       'Relaxing the same-origin policy by setting `document.domain` is deprecated, and will be disabled by default. To continue using this feature, please opt-out of origin-keyed agent clusters by sending an `Origin-Agent-Cluster: ?0` header along with the HTTP response for the document and frames. See https://developer.chrome.com/blog/immutable-document-domain/ for more details.',
   /**
-   *@description TODO(crbug.com/1318853): Description needed for translation
+   *@description Warning displayed to developers when the Geolocation API is used from an insecure origin (one that isn't localhost or doesn't use HTTPS) to notify them that this use is no longer supported.
    */
   geolocationInsecureOrigin:
       '`getCurrentPosition()` and `watchPosition()` no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.',
   /**
-   *@description TODO(crbug.com/1318855): Description needed for translation
+   *@description Warning displayed to developers when the Geolocation API is used from an insecure origin (one that isn't localhost or doesn't use HTTPS) to notify them that this use is deprecated.
    */
   geolocationInsecureOriginDeprecatedNotRemoved:
       '`getCurrentPosition()` and `watchPosition()` are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.',

package/front_end/panels/changes/ChangesView.ts

@@ -6,6 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
+import type * as Formatter from '../../models/formatter/formatter.js';
 import {formatCSSChangesFromDiff} from '../../panels/utils/utils.js';
 import * as Diff from '../../third_party/diff/diff.js';
 import * as DiffView from '../../ui/components/diff_view/diff_view.js';
@@ -72,6 +73,7 @@ export class ChangesView extends UI.Widget.VBox {
   private readonly workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl;
   readonly changesSidebar: ChangesSidebar;
   private selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null;
+  #selectedSourceCodeFormattedMapping?: Formatter.ScriptFormatter.FormatterSourceMapping;
   private readonly diffContainer: HTMLElement;
   private readonly toolbar: UI.Toolbar.Toolbar;
   private readonly diffStats: UI.Toolbar.ToolbarText;
@@ -167,16 +169,27 @@ export class ChangesView extends UI.Widget.VBox {
     if (!this.selectedUISourceCode) {
       return;
     }
-    for (let target: HTMLElement|null = event.target as HTMLElement; target; target = target.parentElement) {
-      if (target.classList.contains('diff-line-content')) {
-        const number = target.getAttribute('data-line-number');
-        if (number) {
-          // Unfortunately, caretRangeFromPoint is broken in shadow
-          // roots, which makes determining the character offset more
-          // work than justified here.
-          void Common.Revealer.reveal(this.selectedUISourceCode.uiLocation(Number(number) - 1, 0), false);
-          event.consume(true);
+
+    for (const target of event.composedPath()) {
+      if (!(target instanceof HTMLElement)) {
+        continue;
+      }
+      const selection = target.ownerDocument.getSelection();
+      if (selection?.toString()) {
+        // We abort source revelation when user has text selection.
+        break;
+      }
+      if (target.classList.contains('diff-line-content') && target.hasAttribute('data-line-number')) {
+        let lineNumber = Number(target.dataset.lineNumber) - 1;
+        // Unfortunately, caretRangeFromPoint is broken in shadow
+        // roots, which makes determining the character offset more
+        // work than justified here.
+        if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.PRECISE_CHANGES) &&
+            this.#selectedSourceCodeFormattedMapping) {
+          lineNumber = this.#selectedSourceCodeFormattedMapping.formattedToOriginal(lineNumber, 0)[0];
         }
+        void Common.Revealer.reveal(this.selectedUISourceCode.uiLocation(lineNumber, 0), false);
+        event.consume(true);
         break;
       } else if (target.classList.contains('diff-listing')) {
         break;
@@ -220,10 +233,12 @@ export class ChangesView extends UI.Widget.VBox {
       return;
     }
     const diffResponse = await this.workspaceDiff.requestDiff(
-        uiSourceCode, {shouldFormatDiff: Root.Runtime.experiments.isEnabled('preciseChanges')});
+        uiSourceCode,
+        {shouldFormatDiff: Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.PRECISE_CHANGES)});
     if (this.selectedUISourceCode !== uiSourceCode) {
       return;
     }
+    this.#selectedSourceCodeFormattedMapping = diffResponse?.formattedCurrentMapping;
     this.renderDiffRows(diffResponse?.diff);
   }
 

package/front_end/panels/elements/ElementsPanel.ts

@@ -878,18 +878,19 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     return node;
   }
 
-  async revealAndSelectNode(node: SDK.DOMModel.DOMNode, focus: boolean, omitHighlight?: boolean): Promise<void> {
+  async revealAndSelectNode(nodeToReveal: SDK.DOMModel.DOMNode, focus: boolean, omitHighlight?: boolean):
+      Promise<void> {
     this.omitDefaultSelection = true;
 
-    node = Common.Settings.Settings.instance().moduleSetting('showUAShadowDOM').get() ?
-        node :
-        this.leaveUserAgentShadowDOM(node);
+    const node = Common.Settings.Settings.instance().moduleSetting('showUAShadowDOM').get() ?
+        nodeToReveal :
+        this.leaveUserAgentShadowDOM(nodeToReveal);
     if (!omitHighlight) {
       node.highlightForTwoSeconds();
     }
 
     if (this.accessibilityTreeView) {
-      void this.accessibilityTreeView.revealAndSelectNode(node);
+      void this.accessibilityTreeView.revealAndSelectNode(nodeToReveal);
     }
 
     await UI.ViewManager.ViewManager.instance().showView('elements', false, !focus);
@@ -1029,7 +1030,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     };
 
     this.sidebarPaneView = UI.ViewManager.ViewManager.instance().createTabbedLocation(
-        () => UI.ViewManager.ViewManager.instance().showView('elements'));
+        () => UI.ViewManager.ViewManager.instance().showView('elements'), 'Styles-pane-sidebar', false, true);
     const tabbedPane = this.sidebarPaneView.tabbedPane();
     if (this.splitMode !== _splitMode.Vertical) {
       this.splitWidget.installResizer(tabbedPane.headerElement());

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -859,17 +859,38 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       }
     }
 
+    const customHighlightPseudoRulesets: {
+      highlightName: string|null,
+      pseudoType: Protocol.DOM.PseudoType,
+      pseudoStyles: SDK.CSSStyleDeclaration.CSSStyleDeclaration[],
+    }[] = Array.from(matchedStyles.customHighlightPseudoNames()).map(highlightName => {
+      return {
+        'highlightName': highlightName,
+        'pseudoType': Protocol.DOM.PseudoType.Highlight,
+        'pseudoStyles': matchedStyles.customHighlightPseudoStyles(highlightName),
+      };
+    });
+
     let pseudoTypes: Protocol.DOM.PseudoType[] = [];
     const keys = matchedStyles.pseudoTypes();
     if (keys.delete(Protocol.DOM.PseudoType.Before)) {
       pseudoTypes.push(Protocol.DOM.PseudoType.Before);
     }
     pseudoTypes = pseudoTypes.concat([...keys].sort());
-    for (const pseudoType of pseudoTypes) {
+
+    const otherPseudoRulesets: {
+      highlightName: string|null,
+      pseudoType: Protocol.DOM.PseudoType,
+      pseudoStyles: SDK.CSSStyleDeclaration.CSSStyleDeclaration[],
+    }[] = pseudoTypes.map(pseudoType => {
+      return {'highlightName': null, 'pseudoType': pseudoType, 'pseudoStyles': matchedStyles.pseudoStyles(pseudoType)};
+    });
+
+    const pseudoRulesets = customHighlightPseudoRulesets.concat(otherPseudoRulesets);
+    for (const pseudo of pseudoRulesets) {
       lastParentNode = null;
-      const pseudoStyles = matchedStyles.pseudoStyles(pseudoType);
-      for (let i = 0; i < pseudoStyles.length; ++i) {
-        const style = pseudoStyles[i];
+      for (let i = 0; i < pseudo.pseudoStyles.length; ++i) {
+        const style = pseudo.pseudoStyles[i];
         const parentNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
 
         // Start a new SectionBlock if this is the first rule for this pseudo type, or if this
@@ -877,10 +898,11 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
         if (i === 0 || parentNode !== lastParentNode) {
           lastLayers = null;
           if (parentNode) {
-            const block = await SectionBlock.createInheritedPseudoTypeBlock(pseudoType, parentNode);
+            const block =
+                await SectionBlock.createInheritedPseudoTypeBlock(pseudo.pseudoType, pseudo.highlightName, parentNode);
             blocks.push(block);
           } else {
-            const block = SectionBlock.createPseudoTypeBlock(pseudoType);
+            const block = SectionBlock.createPseudoTypeBlock(pseudo.pseudoType, pseudo.highlightName);
             blocks.push(block);
           }
         }
@@ -889,9 +911,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
         addLayerSeparator(style);
         const lastBlock = blocks[blocks.length - 1];
         this.idleCallbackManager.schedule(() => {
-          const section = SDK.CSSMetadata.cssMetadata().isHighlightPseudoType(pseudoType) ?
-              new HighlightPseudoStylePropertiesSection(this, matchedStyles, style, sectionIdx) :
-              new StylePropertiesSection(this, matchedStyles, style, sectionIdx);
+          const section = new HighlightPseudoStylePropertiesSection(this, matchedStyles, style, sectionIdx);
           sectionIdx++;
           lastBlock.sections.push(section);
         });
@@ -1287,19 +1307,23 @@ export class SectionBlock {
     this.sections = [];
   }
 
-  static createPseudoTypeBlock(pseudoType: Protocol.DOM.PseudoType): SectionBlock {
+  static createPseudoTypeBlock(pseudoType: Protocol.DOM.PseudoType, pseudoArgument: string|null): SectionBlock {
     const separatorElement = document.createElement('div');
     separatorElement.className = 'sidebar-separator';
-    separatorElement.textContent = i18nString(UIStrings.pseudoSElement, {PH1: pseudoType});
+    const pseudoArgumentString = pseudoArgument ? `(${pseudoArgument})` : '';
+    const pseudoTypeString = `${pseudoType}${pseudoArgumentString}`;
+    separatorElement.textContent = i18nString(UIStrings.pseudoSElement, {PH1: pseudoTypeString});
     return new SectionBlock(separatorElement);
   }
 
-  static async createInheritedPseudoTypeBlock(pseudoType: Protocol.DOM.PseudoType, node: SDK.DOMModel.DOMNode):
-      Promise<SectionBlock> {
+  static async createInheritedPseudoTypeBlock(
+      pseudoType: Protocol.DOM.PseudoType, pseudoArgument: string|null,
+      node: SDK.DOMModel.DOMNode): Promise<SectionBlock> {
     const separatorElement = document.createElement('div');
     separatorElement.className = 'sidebar-separator';
-
-    UI.UIUtils.createTextChild(separatorElement, i18nString(UIStrings.inheritedFromSPseudoOf, {PH1: pseudoType}));
+    const pseudoArgumentString = pseudoArgument ? `(${pseudoArgument})` : '';
+    const pseudoTypeString = `${pseudoType}${pseudoArgumentString}`;
+    UI.UIUtils.createTextChild(separatorElement, i18nString(UIStrings.inheritedFromSPseudoOf, {PH1: pseudoTypeString}));
     const link = await Common.Linkifier.Linkifier.linkify(node, {
       preventKeyboardFocus: true,
       tooltip: undefined,

package/front_end/panels/elements/stylesSectionTree.css

@@ -130,6 +130,7 @@ ol.expanded {
   content: "";
   position: absolute;
   left: -4px;
+  top: 0;
   width: 2px;
   height: 100%;
   background-color: var(--color-accent-green);

package/front_end/panels/elements/stylesSidebarPane.css

@@ -226,7 +226,7 @@
 .sidebar-pane-section-toolbar {
   position: absolute;
   right: 0;
-  bottom: 0;
+  bottom: -5px;
   z-index: 0;
 }
 

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -572,6 +572,7 @@ export abstract class HeapSnapshotGenericObjectNode extends HeapSnapshotGridNode
         valueStyle = 'number';
         break;
       case 'hidden':
+      case 'object shape':
         valueStyle = 'null';
         break;
       case 'array':

package/front_end/ui/components/diff_view/diffView.css

@@ -11,12 +11,14 @@
   font-size: var(--source-code-font-size);
   white-space: pre;
   line-height: 1.2em;
+  user-select: text;
 }
 
 .diff-line-number {
   color: var(--color-line-number);
   padding: 0 3px 0 9px;
   text-align: right;
+  user-select: none;
 }
 
 .diff-line-marker {

package/front_end/ui/components/tree_outline/TreeOutline.ts

@@ -255,25 +255,36 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     return this.#selectedTreeNode;
   }
 
-  async #fetchNodeChildren(node: TreeNodeWithChildren<TreeNodeDataType>): Promise<TreeNode<TreeNodeDataType>[]> {
+  async #flattenSubtree(node: TreeNodeWithChildren<TreeNodeDataType>, filter: (node: TreeNodeDataType) => FilterOption):
+      Promise<TreeNode<TreeNodeDataType>[]> {
     const children = await getNodeChildren(node);
-    if (!this.#nodeFilter) {
-      return children;
-    }
     const filteredChildren = [];
     for (const child of children) {
-      const filtering = this.#nodeFilter(child.treeNodeData);
+      const filtering = filter(child.treeNodeData);
       // We always include the selected node in the tree, regardless of its filtering status.
-      if (filtering === FilterOption.SHOW || this.#isSelectedNode(child) || child.id === this.#nodeIdPendingFocus) {
+      const toBeSelected = this.#isSelectedNode(child) || child.id === this.#nodeIdPendingFocus;
+      // If a node is already expanded we should not flatten it away.
+      const expanded = this.#nodeExpandedMap.get(child.id);
+      if (filtering === FilterOption.SHOW || toBeSelected || expanded) {
         filteredChildren.push(child);
       } else if (filtering === FilterOption.FLATTEN && isExpandableNode(child)) {
-        const grandChildren = await this.#fetchNodeChildren(child);
+        const grandChildren = await this.#flattenSubtree(child, filter);
         filteredChildren.push(...grandChildren);
       }
     }
     return filteredChildren;
   }
 
+  async #fetchNodeChildren(node: TreeNodeWithChildren<TreeNodeDataType>): Promise<TreeNode<TreeNodeDataType>[]> {
+    const children = await getNodeChildren(node);
+    const filter = this.#nodeFilter;
+    if (!filter) {
+      return children;
+    }
+    const filteredDescendants = await this.#flattenSubtree(node, filter);
+    return filteredDescendants.length ? filteredDescendants : children;
+  }
+
   #setNodeExpandedState(node: TreeNode<TreeNodeDataType>, newExpandedState: boolean): void {
     this.#nodeExpandedMap.set(node.id, newExpandedState);
   }

package/front_end/ui/legacy/Toolbar.ts

@@ -57,6 +57,10 @@ const UIStrings = {
   *@description Announced screen reader message for ToolbarSettingToggle when the setting is toggled off.
   */
   notPressed: 'not pressed',
+  /**
+  *@description Tooltip shown when the user hovers over the clear icon to empty the text input.
+  */
+  clearInput: 'Clear input',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/Toolbar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -701,6 +705,7 @@ export class ToolbarInput extends ToolbarItem<ToolbarInput.EventTypes> {
     }
 
     const clearButton = this.element.createChild('div', 'toolbar-input-clear-button');
+    clearButton.title = UIStrings.clearInput;
     clearButton.appendChild(Icon.create('mediumicon-gray-cross-active', 'search-cancel-button'));
     clearButton.addEventListener('click', () => {
       this.setValue('', true);

package/front_end/ui/legacy/softDropDownButton.css

@@ -23,6 +23,10 @@ button.soft-dropdown > .title {
   text-overflow: ellipsis;
 }
 
+button.soft-dropdown:hover:not(:active) > .title {
+  color: var(--color-text-primary);
+}
+
 @media (forced-colors: active) {
   button.soft-dropdown {
     border: 1px solid ButtonText;

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.996044"
+  "version": "1.0.996595"
 }

package/scripts/eslint_rules/lib/inline_type_imports.js

@@ -0,0 +1,158 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+'use strict';
+
+module.exports = {
+  meta: {
+    type: 'problem',
+
+    docs: {
+      description: 'Inline type imports.',
+      category: 'Possible Errors',
+    },
+    fixable: 'code',
+    messages: {
+      inlineTypeImport: 'Type imports must be imported in the same import statement as values, using the type keyword',
+      convertTypeImport: 'Type imports must use the type modifier on each item, not on the overall import statement',
+    },
+    schema: []  // no options
+  },
+  create: function(context) {
+    // Stores any type imports (import type {} from ...).
+    // The key is the literal import path ("../foo.js");
+    const typeImports = new Map();
+    // Stores any value imports (import {} from ...).
+    // The key is the literal import path ("../foo.js");
+    const valueImports = new Map();
+
+    // Takes the node that represents an import ("Foo", "Foo as Bar") and
+    // return the literal text.
+    function getTextForImportSpecifier(specifier) {
+      // import {Foo as Bar} from 'foo';
+      // Foo = imported name
+      // Bar = local name
+      const localName = specifier.local.name;
+      const importedName = specifier.imported.name;
+      if (localName === importedName) {
+        // No `X as Y`, so just use either name.
+        return localName;
+      }
+      return `${importedName} as ${localName}`;
+    }
+
+    function mergeImports(fixer, typeImportNode, valueImportNode) {
+      // Get all the references from the type import node that we need to add to the value import node.
+      const typeImportSpecifiers = typeImportNode.specifiers.map(spec => {
+        return getTextForImportSpecifier(spec);
+      });
+
+      // Find the last value specifier, which we will then insert the type imports to.
+      const lastValueSpecifier = valueImportNode.specifiers[valueImportNode.specifiers.length - 1];
+
+      // Remember that we don't need to concern ourselves with indentation: in
+      // PRESUBMIT clang-format runs _after_ ESLint, so we can let Clang tidy
+      // up any rough edges.
+      const textToImport = ', ' +
+          typeImportSpecifiers
+              .map(spec => `type ${spec}`)
+              .join(', ');
+
+      return [
+        // Remove the type import
+        fixer.remove(typeImportNode),
+        // Add the type imports to the existing import
+        fixer.insertTextAfter(lastValueSpecifier, textToImport)
+      ];
+    }
+
+    function inlineTypeImportKeyword(fixer, typeImportNode) {
+      // We need to remove the " type" text after "import".
+      const importStart = typeImportNode.range[0];
+      const typeImportStart = importStart + 6;    // 6 here = length of "import"
+      const typeImportEnd = typeImportStart + 5;  // 5 here = length of "type" + 1 to remove the space after it.
+
+      const addTypeToSpecifiersFixers = typeImportNode.specifiers.map(spec => {
+        const newText = getTextForImportSpecifier(spec);
+
+        return fixer.replaceText(spec, `type ${newText}`);
+      });
+
+      return [
+        ...addTypeToSpecifiersFixers,
+        fixer.removeRange([typeImportStart, typeImportEnd]),
+      ];
+    }
+
+    return {
+      ImportDeclaration(node) {
+        // Note that we only care about named imports: import {} from 'foo.js'.
+        // This is because:
+        // 1: if we have `import type * as SDK from '../` that means we know we
+        // aren't using `SDK` for any values, otherwise we wouldn't have the
+        // `type` modifier.
+        // 2: similarly, `import type Foo from './foo'` follows (1). We also
+        // don't use this pattern in DevTools, but even if we did we don't have
+        // to worry about it.
+        // 3: Any side-effect imports (import './foo.js') are irrelevant.
+
+        if (!node.specifiers || node.specifiers.length < 1) {
+          // import './foo.js';
+          return;
+        }
+
+        if (node.specifiers[0].type === 'ImportDefaultSpecifier') {
+          // import Foo from './foo.js';
+          return;
+        }
+
+        if (node.specifiers[0].type === 'ImportNamespaceSpecifier') {
+          // import * as Foo from './foo.js';
+          return;
+        }
+
+        // Store the import
+        const importFilePath = node.source.value;
+        if (node.importKind === 'type') {
+          typeImports.set(importFilePath, node);
+        } else if (node.importKind === 'value') {
+          valueImports.set(importFilePath, node);
+        }
+      },
+      'Program:exit'() {
+        // Loop over the type imports and see if there are any matching value
+        // imports.
+        // Looping this way means if there are any value imports without a
+        // matching type import, we leave them alone.
+        for (const [typeImportFilePath, typeImportNode] of typeImports) {
+          const valueImportNodeForFilePath = valueImports.get(typeImportFilePath);
+          if (valueImportNodeForFilePath) {
+          // If we've got here, we have two imports for the same file-path, one
+          // for types, and one for values, so let's merge them.
+            context.report({
+              node: typeImportNode,
+              messageId: 'inlineTypeImport',
+              fix(fixer) {
+                return mergeImports(fixer, typeImportNode, valueImportNodeForFilePath);
+              }
+            });
+            continue;
+          }
+
+          // At this point we have just a type import and no matching file
+          // import, but we still want to convert the import so that each
+          // imported reference uses the type modifier:
+          // BEFORE: import type {A, B} from '...';
+          // AFTER: import {type A, type B} from '...';
+          context.report({
+            node: typeImportNode,
+            messageId: 'convertTypeImport',
+            fix(fixer) {
+              return inlineTypeImportKeyword(fixer, typeImportNode);
+            }
+          });
+        }
+      },
+    };
+  }
+};

package/scripts/eslint_rules/tests/inline_type_imports_test.js

@@ -0,0 +1,106 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+'use strict';
+
+const rule = require('../lib/inline_type_imports.js');
+const ruleTester = new (require('eslint').RuleTester)({
+  parserOptions: {ecmaVersion: 9, sourceType: 'module'},
+  parser: require.resolve('@typescript-eslint/parser'),
+});
+
+ruleTester.run('inline_type_imports', rule, {
+  valid: [
+    {
+      code: 'import \'./foo.js\'',
+    },
+    {
+      code: 'import type * as Foo from \'./foo.js\'',
+    },
+    {
+      code: 'import * as Foo from \'./foo.js\'',
+    },
+    {
+      code: 'import Foo from \'./foo.js\'',
+    },
+    {
+      code: 'import type Foo from \'./foo.js\'',
+    },
+    {
+      code: 'import {type Foo} from \'./foo.js\'',
+    },
+    {
+      code: 'import {type Foo as Foo2} from \'./foo.js\'',
+    },
+    {
+      code: 'import {SomeValue, type Foo as Foo2} from \'./foo.js\'',
+    },
+    {
+      code: 'import {type Bar, type Foo as Foo2} from \'./foo.js\'',
+    },
+  ],
+  invalid: [
+    {
+      code: `import type {AType} from './foo.js';
+  import {AValue} from './foo.js';`,
+      output: `
+  import {AValue, type AType} from './foo.js';`,
+      filename: 'front_end/components/test.ts',
+      errors: [{messageId: 'inlineTypeImport'}],
+    },
+    {
+      code: `import type {AType} from './foo.js';
+  import {AValue} from './foo.js';
+  import type {Foo} from './blah.js'`,
+      output: `
+  import {AValue, type AType} from './foo.js';
+  import {type Foo} from './blah.js'`,
+      filename: 'front_end/components/test.ts',
+      errors: [{messageId: 'inlineTypeImport'}, {messageId: 'convertTypeImport'}],
+    },
+    {
+      code: `import type {AType} from './foo.js';
+  import {AValue} from './foo.js';
+  import {Foo} from './blah.js'`,
+      output: `
+  import {AValue, type AType} from './foo.js';
+  import {Foo} from './blah.js'`,
+      filename: 'front_end/components/test.ts',
+      errors: [{messageId: 'inlineTypeImport'}],
+    },
+    {
+      code: 'import type {AType} from \'./foo.js\';',
+      output: 'import {type AType} from \'./foo.js\';',
+      filename: 'front_end/components/test.ts',
+      errors: [{messageId: 'convertTypeImport'}],
+    },
+    {
+      code: 'import type {Foo as Bar} from \'./foo.js\';',
+      output: 'import {type Foo as Bar} from \'./foo.js\';',
+      filename: 'front_end/components/test.ts',
+      errors: [{messageId: 'convertTypeImport'}],
+    },
+    {
+      code: `import {SomeValue} from './foo.js';
+import type {Foo as Bar} from './foo.js';`,
+      output: 'import {SomeValue, type Foo as Bar} from \'./foo.js\';\n',
+      filename: 'front_end/components/test.ts',
+      errors: [{messageId: 'inlineTypeImport'}],
+    },
+    {
+      code: `import {SomeValue} from './foo.js';
+import type {Foo as Bar, Baz} from './foo.js';`,
+      output: 'import {SomeValue, type Foo as Bar, type Baz} from \'./foo.js\';\n',
+      filename: 'front_end/components/test.ts',
+      errors: [{messageId: 'inlineTypeImport'}],
+    },
+    {
+      code: `import type {SomeValue} from './baz.js';
+import type {Foo as Bar, Baz} from './foo.js';`,
+      output: `import {type SomeValue} from './baz.js';
+import {type Foo as Bar, type Baz} from './foo.js';`,
+      filename: 'front_end/components/test.ts',
+      errors: [{messageId: 'convertTypeImport'}, {messageId: 'convertTypeImport'}],
+    },
+  ]
+});

package/scripts/javascript_natives/index.js

@@ -4,7 +4,6 @@
 
 import * as fs from 'fs';
 import glob from 'glob';
-import * as path from 'path';
 import ts from 'typescript';
 import * as WebIDL2 from 'webidl2';
 
@@ -45,7 +44,7 @@ for (const file of files) {
   if (file.includes('testing')) {
     continue;
   }
-  const data = fs.readFileSync(path.join(process.env.PWD, file), 'utf8');
+  const data = fs.readFileSync(file, 'utf8');
   const lines = data.split('\n');
   const newLines = [];
   for (const line of lines) {