chrome-devtools-frontend 1.0.995629 → 1.0.997048

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/bindings/BreakpointManager.ts

@@ -100,11 +100,12 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
 
   modelAdded(debuggerModel: SDK.DebuggerModel.DebuggerModel): void {
     if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.INSTRUMENTATION_BREAKPOINTS)) {
-      debuggerModel.setSynchronizeBreakpointsCallback(this.#restoreBreakpointsForScript.bind(this));
+      debuggerModel.setSynchronizeBreakpointsCallback(this.restoreBreakpointsForScript.bind(this));
     }
   }
 
-  modelRemoved(): void {
+  modelRemoved(debuggerModel: SDK.DebuggerModel.DebuggerModel): void {
+    debuggerModel.setSynchronizeBreakpointsCallback(null);
   }
 
   async copyBreakpoints(fromURL: Platform.DevToolsPath.UrlString, toSourceCode: Workspace.UISourceCode.UISourceCode):
@@ -117,7 +118,7 @@ export class BreakpointManager extends Common.ObjectWrapper.ObjectWrapper<EventT
 
   // This method explicitly awaits the source map (if necessary) and the uiSourceCodes
   // required to set all breakpoints that are related to this script.
-  async #restoreBreakpointsForScript(script: SDK.Script.Script): Promise<void> {
+  async restoreBreakpointsForScript(script: SDK.Script.Script): Promise<void> {
     if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.INSTRUMENTATION_BREAKPOINTS)) {
       return;
     }
@@ -416,6 +417,10 @@ export class Breakpoint implements SDK.TargetManager.SDKModelObserver<SDK.Debugg
     modelBreakpoint.removeEventListeners();
   }
 
+  modelBreakpoint(debuggerModel: SDK.DebuggerModel.DebuggerModel): ModelBreakpoint|undefined {
+    return this.#modelBreakpoints.get(debuggerModel);
+  }
+
   addUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
     if (!this.uiSourceCodes.has(uiSourceCode)) {
       this.uiSourceCodes.add(uiSourceCode);
@@ -626,6 +631,10 @@ export class ModelBreakpoint {
     }
   }
 
+  get currentState(): Breakpoint.State|null {
+    return this.#currentState;
+  }
+
   resetLocations(): void {
     for (const uiLocation of this.#uiLocations.values()) {
       this.#breakpoint.uiLocationRemoved(uiLocation);

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.',
@@ -110,7 +110,7 @@ const UIStrings = {
   obsoleteWebRtcCipherSuite:
       'Your partner is negotiating an obsolete (D)TLS version. Please check with your partner to have this fixed.',
   /**
-   *@description TODO(crbug.com/1318868): Description needed for translation
+   *@description This issue indicates that a `<source>` element with a `<picture>` parent was using an `src` attribute, which is not valid and is ignored by the browser. The `srcset` attribute should be used instead.
    */
   pictureSourceSrc:
       '`<source src>` with a `<picture>` parent is invalid and therefore ignored. Please use `<source srcset>` instead.',

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,48 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       }
     }
 
-    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 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),
+      };
+    });
+
+    const otherPseudoRulesets: {
+      highlightName: string|null,
+      pseudoType: Protocol.DOM.PseudoType,
+      pseudoStyles: SDK.CSSStyleDeclaration.CSSStyleDeclaration[],
+    }[] = [...matchedStyles.pseudoTypes()].map(pseudoType => {
+      return {'highlightName': null, 'pseudoType': pseudoType, 'pseudoStyles': matchedStyles.pseudoStyles(pseudoType)};
+    });
+
+    const pseudoRulesets = customHighlightPseudoRulesets.concat(otherPseudoRulesets).sort((a, b) => {
+      // We want to show the ::before pseudos first, followed by the remaining pseudos
+      // in alphabetical order.
+      if (a.pseudoType === Protocol.DOM.PseudoType.Before && b.pseudoType !== Protocol.DOM.PseudoType.Before) {
+        return -1;
+      }
+      if (a.pseudoType !== Protocol.DOM.PseudoType.Before && b.pseudoType === Protocol.DOM.PseudoType.Before) {
+        return 1;
+      }
+      if (a.pseudoType < b.pseudoType) {
+        return -1;
+      }
+      if (a.pseudoType > b.pseudoType) {
+        return 1;
+      }
+      return 0;
+    });
+
+    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 +908,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 +921,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 +1317,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/components/adornerSettingsPane.css

@@ -57,6 +57,11 @@
   border-radius: 2px;
 }
 
+.close:hover,
+.close:focus {
+  background-color: var(--color-background-elevation-2);
+}
+
 .close::before {
   transform: rotate(45deg);
 }

package/front_end/panels/elements/stylesSectionTree.css

@@ -126,10 +126,15 @@ ol.expanded {
   opacity: 50%;
 }
 
+.changed {
+  background-color: var(--color-accent-green-background);
+}
+
 .changed::after {
   content: "";
   position: absolute;
   left: -4px;
+  top: 0;
   width: 2px;
   height: 100%;
   background-color: var(--color-accent-green);
@@ -139,10 +144,6 @@ ol.expanded {
   display: none;
 }
 
-.changed:hover {
-  background-color: var(--color-accent-green-background);
-}
-
 .changed:hover .copy {
   position: absolute;
   right: -4px;

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/lighthouse/LighthouseController.ts

@@ -113,17 +113,29 @@ const UIStrings = {
    */
   runLighthouseInMode: 'Run Lighthouse in navigation, timespan, or snapshot mode',
   /**
-   * @description Label of a radio option for a Lighthouse mode that audits a page navigation.
+   * @description Label of a radio option for a Lighthouse mode that audits a page navigation. This should be marked as the default radio option.
    */
-  navigation: 'Navigation',
+  navigation: 'Navigation (Default)',
+  /**
+   * @description Tooltip description of a radio option for a Lighthouse mode that audits a page navigation.
+   */
+  navigationTooltip: 'Navigation mode analyzes a page load, exactly like the original Lighthouse reports.',
   /**
    * @description Label of a radio option for a Lighthouse mode that audits user interactions over a period of time.
    */
   timespan: 'Timespan',
+  /**
+   * @description Tooltip description of a radio option for a Lighthouse mode that audits user interactions over a period of time.
+   */
+  timespanTooltip: 'Timespan mode analyzes an arbitrary period of time, typically containing user interactions.',
   /**
    * @description Label of a radio option for a Lighthouse mode that audits the current page state.
    */
   snapshot: 'Snapshot',
+  /**
+   * @description Tooltip description of a radio option for a Lighthouse mode that audits the current page state.
+   */
+  snapshotTooltip: 'Snapshot mode analyzes the page in a particular state, typically after user interactions.',
   /**
   *@description Text for the mobile platform, as opposed to desktop
   */
@@ -364,6 +376,9 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     this.dispatchEventToListeners(Events.PageAuditabilityChanged, {helpText});
 
     void this.hasImportantResourcesNotCleared().then(warning => {
+      if (this.getFlags().mode !== 'navigation') {
+        warning = '';
+      }
       this.dispatchEventToListeners(Events.PageWarningsChanged, {warning});
     });
   }
@@ -456,11 +471,23 @@ export const RuntimeSettings: RuntimeSetting[] = [
       flags.mode = value;
     },
     options: [
-      {label: i18nLazyString(UIStrings.navigation), value: 'navigation'},
-      {label: i18nLazyString(UIStrings.timespan), value: 'timespan'},
-      {label: i18nLazyString(UIStrings.snapshot), value: 'snapshot'},
+      {
+        label: i18nLazyString(UIStrings.navigation),
+        tooltip: i18nLazyString(UIStrings.navigationTooltip),
+        value: 'navigation',
+      },
+      {
+        label: i18nLazyString(UIStrings.timespan),
+        tooltip: i18nLazyString(UIStrings.timespanTooltip),
+        value: 'timespan',
+      },
+      {
+        label: i18nLazyString(UIStrings.snapshot),
+        tooltip: i18nLazyString(UIStrings.snapshotTooltip),
+        value: 'snapshot',
+      },
     ],
-    learnMore: undefined,
+    learnMore: 'https://web.dev/lighthouse-user-flows/',
   },
   {
     // This setting is disabled, but we keep it around to show in the UI.
@@ -545,7 +572,11 @@ export interface RuntimeSetting {
   setting: Common.Settings.Setting<string|boolean>;
   description: () => Common.UIString.LocalizedString;
   setFlags: (flags: Flags, value: string|boolean) => void;
-  options?: {label: () => Common.UIString.LocalizedString, value: string}[];
+  options?: {
+    label: () => Common.UIString.LocalizedString,
+    value: string,
+    tooltip?: () => Common.UIString.LocalizedString,
+  }[];
   title?: () => Common.UIString.LocalizedString;
   learnMore?: string;
 }

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -174,7 +174,7 @@ export class LighthousePanel extends UI.Panel.Panel {
       return;
     }
 
-    this.startView.updateStartButton();
+    this.startView.updateMode();
 
     this.unauditableExplanation = evt.data.helpText;
     this.startView.setUnauditableExplanation(evt.data.helpText);

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -44,8 +44,8 @@ export class StartView extends UI.Widget.Widget {
   protected controller: LighthouseController;
   private readonly settingsToolbarInternal: UI.Toolbar.Toolbar;
   protected startButton!: HTMLButtonElement;
-  private helpText?: Element;
-  private warningText?: Element;
+  protected helpText?: Element;
+  protected warningText?: Element;
   private shouldConfirm?: boolean;
 
   constructor(controller: LighthouseController) {
@@ -66,6 +66,17 @@ export class StartView extends UI.Widget.Widget {
       throw new Error(`${settingName} is not a setting with options`);
     }
 
+    const labelEl = document.createElement('div');
+    labelEl.classList.add('lighthouse-form-section-label');
+    labelEl.textContent = label;
+
+    if (runtimeSetting.learnMore) {
+      const link =
+          UI.XLink.XLink.create(runtimeSetting.learnMore, i18nString(UIStrings.learnMore), 'lighthouse-learn-more');
+      labelEl.append(link);
+    }
+    parentElement.appendChild(labelEl);
+
     const control = new RadioSetting(
         runtimeSetting.options, runtimeSetting.setting as Common.Settings.Setting<string>,
         runtimeSetting.description());
@@ -91,7 +102,7 @@ export class StartView extends UI.Widget.Widget {
     }
   }
 
-  private populateFormControls(fragment: UI.Fragment.Fragment): void {
+  protected populateFormControls(fragment: UI.Fragment.Fragment): void {
     // Populate the device type
     const deviceTypeFormElements = fragment.$('device-type-form-elements');
     this.populateRuntimeSettingAsRadio('lighthouse.device_type', i18nString(UIStrings.device), deviceTypeFormElements);
@@ -157,9 +168,6 @@ export class StartView extends UI.Widget.Widget {
   </div>
   </div>
   <div class="lighthouse-form-section">
-  <div class="lighthouse-form-section-label">
-  ${i18nString(UIStrings.device)}
-  </div>
   <div class="lighthouse-form-elements" $="device-type-form-elements"></div>
   </div>
   </form>
@@ -173,7 +181,7 @@ export class StartView extends UI.Widget.Widget {
     this.contentElement.style.overflow = 'auto';
   }
 
-  updateStartButton(): void {
+  updateMode(): void {
     // Do nothing in default case.
   }