chrome-devtools-frontend 1.0.1020771 → 1.0.1022059

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -170,6 +170,20 @@ const UIStrings = {
   *@description Default name for worker
   */
   worker: 'worker',
+  /**
+   * @description Aria text for screen reader to announce they can scroll to top of manifest if invoked
+   */
+  onInvokeManifestAlert: 'Manifest: Invoke to scroll to the top of manifest',
+  /**
+   * @description Aria text for screen reader to announce they can scroll to a section if invoked
+   * @example {"Identity"} PH1
+   */
+  beforeInvokeAlert: '{PH1}: Invoke to scroll to this section in manifest',
+  /**
+   * @description Alert message for screen reader to announce which subsection is being scrolled to
+   * @example {"Identity"} PH1
+   */
+  onInvokeAlert: 'Scrolled to {PH1}',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/ApplicationPanelSidebar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -233,6 +247,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.applicationTreeElement = this.addSidebarSection(applicationSectionTitle);
     const manifestTreeElement = new AppManifestTreeElement(panel);
     this.applicationTreeElement.appendChild(manifestTreeElement);
+    manifestTreeElement.generateChildren();
     this.serviceWorkersTreeElement = new ServiceWorkersTreeElement(panel);
     this.applicationTreeElement.appendChild(this.serviceWorkersTreeElement);
     const clearStorageTreeElement = new ClearStorageTreeElement(panel);
@@ -930,11 +945,18 @@ export class ServiceWorkersTreeElement extends ApplicationPanelTreeElement {
 }
 
 export class AppManifestTreeElement extends ApplicationPanelTreeElement {
-  private view?: AppManifestView;
+  private view: AppManifestView;
   constructor(storagePanel: ResourcesPanel) {
-    super(storagePanel, i18nString(UIStrings.manifest), false);
+    super(storagePanel, i18nString(UIStrings.manifest), true);
     const icon = UI.Icon.Icon.create('mediumicon-manifest', 'resource-tree-item');
     this.setLeadingIcons([icon]);
+    self.onInvokeElement(this.listItemElement, this.onInvoke.bind(this));
+    this.view = new AppManifestView();
+    UI.ARIAUtils.setAccessibleName(this.listItemElement, i18nString(UIStrings.onInvokeManifestAlert));
+    const handleExpansion = (evt: Event): void => {
+      this.setExpandable((evt as CustomEvent).detail);
+    };
+    this.view.contentElement.addEventListener('manifestDetection', handleExpansion);
   }
 
   get itemURL(): Platform.DevToolsPath.UrlString {
@@ -943,13 +965,53 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
 
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
-    if (!this.view) {
-      this.view = new AppManifestView();
-    }
     this.showView(this.view);
     Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.app_manifest]);
     return false;
   }
+
+  generateChildren(): void {
+    const staticSections = this.view.getStaticSections();
+    for (const section of staticSections) {
+      const sectionElement = section.getTitleElement();
+      const childTitle = section.title();
+      const child = new ManifestChildTreeElement(this.resourcesPanel, sectionElement, childTitle);
+      this.appendChild(child);
+    }
+  }
+
+  onInvoke(): void {
+    this.view.getManifestElement().scrollIntoView();
+    UI.ARIAUtils.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
+  }
+
+  showManifestView(): void {
+    this.showView(this.view);
+  }
+}
+
+export class ManifestChildTreeElement extends ApplicationPanelTreeElement {
+  #sectionElement: Element;
+  constructor(storagePanel: ResourcesPanel, element: Element, childTitle: string) {
+    super(storagePanel, childTitle, false);
+    const icon = UI.Icon.Icon.create('mediumicon-manifest', 'resource-tree-item');
+    this.setLeadingIcons([icon]);
+    this.#sectionElement = element;
+    self.onInvokeElement(this.listItemElement, this.onInvoke.bind(this));
+    UI.ARIAUtils.setAccessibleName(
+        this.listItemElement, i18nString(UIStrings.beforeInvokeAlert, {PH1: this.listItemElement.title}));
+  }
+
+  get itemURL(): Platform.DevToolsPath.UrlString {
+    return 'manifest://' + this.title as Platform.DevToolsPath.UrlString;
+  }
+
+  onInvoke(): void {
+    (this.parent as AppManifestTreeElement)?.showManifestView();
+    this.#sectionElement.scrollIntoView();
+    UI.ARIAUtils.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
+    Host.userMetrics.manifestSectionSelected(this.listItemElement.title);
+  }
 }
 
 export class ClearStorageTreeElement extends ApplicationPanelTreeElement {

package/front_end/panels/application/components/FrameDetailsView.ts

@@ -27,6 +27,7 @@ import {OriginTrialTreeView} from './OriginTrialTreeView.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import frameDetailsReportViewStyles from './frameDetailsReportView.css.js';
+import {Prerender2ReasonDescription} from './Prerender2.js';
 
 const UIStrings = {
   /**
@@ -791,14 +792,14 @@ export class FrameDetailsReportView extends HTMLElement {
     if (!this.#frame || !this.#frame.prerenderFinalStatus) {
       return LitHtml.nothing;
     }
-
+    const finalStatus = Prerender2ReasonDescription[this.#frame.prerenderFinalStatus].name();
     return LitHtml.html`
       <${ReportView.ReportView.ReportSectionHeader.litTagName}>
       ${i18nString(UIStrings.prerendering)}</${ReportView.ReportView.ReportSectionHeader.litTagName}>
       <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.prerenderingStatus)}</${
         ReportView.ReportView.ReportKey.litTagName}>
       <${ReportView.ReportView.ReportValue.litTagName}>
-        <div class="text-ellipsis" title=${this.#frame.prerenderFinalStatus}>${this.#frame.prerenderFinalStatus}</div>
+      <div class="text-ellipsis" title=${finalStatus}>${finalStatus}</div>
       </${ReportView.ReportView.ReportValue.litTagName}>
       <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
         ReportView.ReportView.ReportSectionDivider.litTagName}>`;

package/front_end/panels/application/components/Prerender2.ts

@@ -0,0 +1,188 @@
+// 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.
+
+import * as i18n from '../../../core/i18n/i18n.js';
+
+const UIStrings = {
+  /**
+    *@description  Description text for Prerender2 status Activated.
+    */
+  Activated: 'Activated.',
+  /**
+    *@description  Description text for Prerender2 cancellation status Destroyed.
+    */
+  Destroyed: 'A prerendered page was abandoned for unknown reasons.',
+  /**
+    *@description  Description text for Prerender2 cancellation status LowEndDevice.
+    */
+  LowEndDevice: 'Prerendering is not supported for low-memory devices.',
+  /**
+    *@description  Description text for Prerender2 cancellation status CrossOriginRedirect.
+    */
+  CrossOriginRedirect:
+      'Attempted to prerender a URL which redirected to a cross-origin URL. Currently prerendering cross-origin pages is disallowed.',
+  /**
+    *@description  Description text for Prerender2 cancellation status CrossOriginNavigation.
+    */
+  CrossOriginNavigation:
+      'The prerendered page navigated to a cross-origin URL after loading. Currently prerendering cross-origin pages is disallowed.',
+  /**
+    *@description  Description text for Prerender2 cancellation status InvalidSchemeRedirect.
+    */
+  InvalidSchemeRedirect:
+      'Attempted to prerender a URL that redirected to a non-HTTP(S) URL. Only HTTP(S) pages can be prerendered.',
+  /**
+    *@description  Description text for Prerender2 cancellation status InvalidSchemeNavigation.
+    */
+  InvalidSchemeNavigation: 'Only HTTP(S) navigation allowed for Prerender.',
+  /**
+    *@description  Description text for Prerender2 cancellation status InProgressNavigation.
+    */
+  InProgressNavigation: 'InProgressNavigation.',
+  /**
+    *@description  Description text for Prerender2 cancellation status NavigationRequestBlockedByCsp.
+    */
+  NavigationRequestBlockedByCsp: 'Navigation request is blocked by CSP.',
+  /**
+    *@description  Description text for Prerender2 cancellation status MainFrameNavigation.
+    */
+  MainFrameNavigation: 'Navigations after the initial prerendering navigation are disallowed',
+  /**
+    *@description  Description text for Prerender2 cancellation status MojoBinderPolicy.
+    */
+  MojoBinderPolicy: 'A disallowed API was used by the prerendered page',
+  /**
+    *@description  Description text for Prerender2 cancellation status RendererProcessCrashed.
+    */
+  RendererProcessCrashed: 'The prerendered page crashed.',
+  /**
+    *@description  Description text for Prerender2 cancellation status RendererProcessKilled.
+    */
+  RendererProcessKilled: 'The renderer process for the prerendering page was killed.',
+  /**
+    *@description  Description text for Prerender2 cancellation status Download.
+    */
+  Download: 'Download is disallowed in Prerender.',
+  /**
+    *@description  Description text for Prerender2 cancellation status TriggerDestroyed.
+    */
+  TriggerDestroyed: 'Prerender is not activated and destroyed with the trigger.',
+  /**
+    *@description  Description text for Prerender2 cancellation status NavigationNotCommitted.
+    */
+  NavigationNotCommitted: 'The prerendering page is not committed in the end.',
+  /**
+    *@description  Description text for Prerender2 cancellation status NavigationBadHttpStatus.
+    */
+  NavigationBadHttpStatus:
+      'The initial prerendering navigation was not successful due to the server returning a non-200/204/205 status code.',
+  /**
+    *@description  Description text for Prerender2 cancellation status ClientCertRequested.
+    */
+  ClientCertRequested: 'The page is requesting client cert, which is not suitable for a hidden page like prerendering.',
+  /**
+    *@description  Description text for Prerender2 cancellation status NavigationRequestNetworkError.
+    */
+  NavigationRequestNetworkError: 'Encountered a network error during prerendering.',
+  /**
+    *@description  Description text for Prerender2 cancellation status MaxNumOfRunningPrerendersExceeded.
+    */
+  MaxNumOfRunningPrerendersExceeded: 'Max number of prerendering exceeded.',
+  /**
+    *@description  Description text for Prerender2 cancellation status CancelAllHostsForTesting.
+    */
+  CancelAllHostsForTesting: 'CancelAllHostsForTesting.',
+  /**
+    *@description  Description text for Prerender2 cancellation status DidFailLoad.
+    */
+  DidFailLoad: 'DidFailLoadWithError happened during prerendering.',
+  /**
+    *@description  Description text for Prerender2 cancellation status Stop.
+    */
+  Stop: 'The tab is stopped.',
+  /**
+    *@description  Description text for Prerender2 cancellation status SslCertificateError.
+    */
+  SslCertificateError: 'SSL certificate error.',
+  /**
+    *@description  Description text for Prerender2 cancellation status LoginAuthRequested.
+    */
+  LoginAuthRequested: 'Prerender does not support auth requests from UI.',
+  /**
+    *@description  Description text for Prerender2 cancellation status UaChangeRequiresReload.
+    */
+  UaChangeRequiresReload: 'Reload is needed after UserAgentOverride.',
+  /**
+    *@description  Description text for Prerender2 cancellation status BlockedByClient.
+    */
+  BlockedByClient: 'Resource load is blocked by the client.',
+  /**
+    *@description  Description text for Prerender2 cancellation status AudioOutputDeviceRequested.
+    */
+  AudioOutputDeviceRequested: 'Prerendering has not supported the AudioContext API yet.',
+  /**
+    *@description  Description text for Prerender2 cancellation status MixedContent.
+    */
+  MixedContent: 'Prerendering is canceled by a mixed content frame.',
+  /**
+    *@description  Description text for Prerender2 cancellation status TriggerBackgrounded.
+    */
+  TriggerBackgrounded: 'The tab is in the background',
+  /**
+    *@description  Description text for Prerender2 cancellation status EmbedderTriggeredAndSameOriginRedirected.
+    */
+  EmbedderTriggeredAndSameOriginRedirected:
+      'Prerendering triggered by Chrome internal (e.g., Omnibox prerendering) is canceled because the navigation is redirected to another same-origin page.',
+  /**
+    *@description  Description text for Prerender2 cancellation status EmbedderTriggeredAndCrossOriginRedirected.
+    */
+  EmbedderTriggeredAndCrossOriginRedirected:
+      'Prerendering triggered by Chrome internal (e.g., Omnibox prerendering) is is canceled because the navigation is redirected to another cross-origin page.',
+  /**
+    *@description  Description text for Prerender2 cancellation status EmbedderTriggeredAndDestroyed.
+    */
+  EmbedderTriggeredAndDestroyed:
+      'Prerendering triggered by Chrome internal (e.g., Omnibox prerendering) is is destroyed in the destructor.',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/application/components/Prerender2.ts', UIStrings);
+const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
+
+export const Prerender2ReasonDescription = {
+  'Activated': {name: i18nLazyString(UIStrings.Activated)},
+  'Destroyed': {name: i18nLazyString(UIStrings.Destroyed)},
+  'LowEndDevice': {name: i18nLazyString(UIStrings.LowEndDevice)},
+  'CrossOriginRedirect': {name: i18nLazyString(UIStrings.CrossOriginRedirect)},
+  'CrossOriginNavigation': {name: i18nLazyString(UIStrings.CrossOriginNavigation)},
+  'InvalidSchemeRedirect': {name: i18nLazyString(UIStrings.InvalidSchemeRedirect)},
+  'InvalidSchemeNavigation': {name: i18nLazyString(UIStrings.InvalidSchemeNavigation)},
+  'InProgressNavigation': {name: i18nLazyString(UIStrings.InProgressNavigation)},
+  'NavigationRequestBlockedByCsp': {name: i18nLazyString(UIStrings.NavigationRequestBlockedByCsp)},
+  'MainFrameNavigation': {name: i18nLazyString(UIStrings.MainFrameNavigation)},
+  'MojoBinderPolicy': {name: i18nLazyString(UIStrings.MojoBinderPolicy)},
+  'RendererProcessCrashed': {name: i18nLazyString(UIStrings.RendererProcessCrashed)},
+  'RendererProcessKilled': {name: i18nLazyString(UIStrings.RendererProcessKilled)},
+  'Download': {name: i18nLazyString(UIStrings.Download)},
+  'TriggerDestroyed': {name: i18nLazyString(UIStrings.TriggerDestroyed)},
+  'NavigationNotCommitted': {name: i18nLazyString(UIStrings.NavigationNotCommitted)},
+  'NavigationBadHttpStatus': {name: i18nLazyString(UIStrings.NavigationBadHttpStatus)},
+  'ClientCertRequested': {name: i18nLazyString(UIStrings.ClientCertRequested)},
+  'NavigationRequestNetworkError': {name: i18nLazyString(UIStrings.NavigationRequestNetworkError)},
+  'MaxNumOfRunningPrerendersExceeded': {name: i18nLazyString(UIStrings.MaxNumOfRunningPrerendersExceeded)},
+  'CancelAllHostsForTesting': {name: i18nLazyString(UIStrings.CancelAllHostsForTesting)},
+  'DidFailLoad': {name: i18nLazyString(UIStrings.DidFailLoad)},
+  'Stop': {name: i18nLazyString(UIStrings.Stop)},
+  'SslCertificateError': {name: i18nLazyString(UIStrings.SslCertificateError)},
+  'LoginAuthRequested': {name: i18nLazyString(UIStrings.LoginAuthRequested)},
+  'UaChangeRequiresReload': {name: i18nLazyString(UIStrings.UaChangeRequiresReload)},
+  'BlockedByClient': {name: i18nLazyString(UIStrings.BlockedByClient)},
+  'AudioOutputDeviceRequested': {name: i18nLazyString(UIStrings.AudioOutputDeviceRequested)},
+  'MixedContent': {name: i18nLazyString(UIStrings.MixedContent)},
+  'TriggerBackgrounded': {name: i18nLazyString(UIStrings.TriggerBackgrounded)},
+  'EmbedderTriggeredAndSameOriginRedirected':
+      {name: i18nLazyString(UIStrings.EmbedderTriggeredAndSameOriginRedirected)},
+  'EmbedderTriggeredAndCrossOriginRedirected':
+      {name: i18nLazyString(UIStrings.EmbedderTriggeredAndCrossOriginRedirected)},
+  'EmbedderTriggeredAndDestroyed': {name: i18nLazyString(UIStrings.EmbedderTriggeredAndDestroyed)},
+};

package/front_end/panels/application/components/protocolHandlersView.css

@@ -11,6 +11,10 @@
   padding: 2px 0; /* adjust focus ring size */
 }
 
+.devtools-link:focus-visible {
+  outline-width: unset;
+}
+
 input.devtools-text-input[type="text"] {
   padding: 3px 6px;
   margin-left: 4px;

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -6,18 +6,80 @@ import * as i18n from '../../core/i18n/i18n.js';
 
 const UIStrings = {
   /**
-    *@description Hint for Align-content rule where element also has flex-wrap nowrap rule.
+    *@description Hint prefix for deprecated properties.
     */
-  alignContentRuleOnNoWrapFlex: 'This element has flex-wrap: nowrap rule, therefore \'align-content\' has no effect.',
+  deprecatedPropertyHintPrefix: 'Deprecated Property',
   /**
-    *@description Hint for element that does not have effect if parent container is not flex.
-    *@example {flex} PH1
+    *@description Hint prefix for rule validation.
     */
-  notFlexItemHint: 'Parent of this element is not flex container, therefore {PH1} property has no effect.',
-};
+  ruleValidationHintPrefix: 'Inactive rule',
+  /**
+    *@description Hint for rules that was violated because of same elements rule.
+    *@example {flex-wrap: nowrap} REASON_RULE_CODE
+    *@example {align-content} AFFECTED_RULE_CODE
+    */
+  ruleViolatedBySameElementRuleReason: 'This element has {REASON_RULE_CODE} rule, therefore {AFFECTED_RULE_CODE} has no effect.',
+  /**
+    *@description Possible fix for rules that was violated because of same elements rule.
+    *@example {flex-wrap: nowrap} REASON_RULE_CODE
+    */
+  ruleViolatedBySameElementRuleFix: 'For this property to work, please remove or change the value of {REASON_RULE_CODE}',
+  /**
+    *@description Hint for rules that was violated because of parent element rule.
+    *@example {display: block} REASON_RULE_CODE
+    *@example {flex} AFFECTED_RULE_CODE
+    */
+  ruleViolatedByParentElementRuleReason: 'Parent element has {REASON_RULE_CODE} rule, therefore this elements {AFFECTED_RULE_CODE} has no effect',
+  /**
+    *@description Posible fix for rules that was violated because of parent element rule.
+    *@example {display: block} EXISTING_PARENT_ELEMENT_RULE
+    *@example {display: flex} TARGET_PARENT_ELEMENT_RULE
+    */
+  ruleViolatedByParentElementRuleFix: 'Please change parent elements {EXISTING_PARENT_ELEMENT_RULE} to {TARGET_PARENT_ELEMENT_RULE} to fix this issue.',
+  };
 const str_ = i18n.i18n.registerUIStrings('panels/elements/CSSRuleValidator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+export const enum AuthoringHintType {
+  RULE_VALIDATION = 'ruleValidation',
+  DEPRECATED_PROPERTY = 'deprecatedProperty',
+}
+
+export class AuthoringHint {
+  readonly #hintType: AuthoringHintType;
+  readonly #hintMessage: string;
+  readonly #possibleFixMessage: string|null;
+  readonly #learnMore: string|null;
+
+  constructor(property: string, hintType: AuthoringHintType, hintMessage: string, possibleFixMessage: string|null, showLearnMore: boolean) {
+    this.#hintType = hintType;
+    this.#hintMessage = hintMessage;
+    this.#possibleFixMessage = possibleFixMessage;
+    this.#learnMore = showLearnMore ? property : null; // TODO: Add Goo.gle short link base url
+  }
+
+  getHintPrefix(): string {
+    switch (this.#hintType) {
+      case AuthoringHintType.RULE_VALIDATION:
+        return i18nString(UIStrings.ruleValidationHintPrefix);
+      case AuthoringHintType.DEPRECATED_PROPERTY:
+        return i18nString(UIStrings.deprecatedPropertyHintPrefix);
+    }
+  }
+
+  getHintMessage(): string {
+    return this.#hintMessage;
+  }
+
+  getPossibleFixMessage(): string|null {
+    return this.#possibleFixMessage;
+  }
+
+  getLearnMoreLink(): string|null {
+    return this.#learnMore;
+  }
+}
+
 export abstract class CSSRuleValidator {
   readonly #affectedProperties: string[];
 
@@ -32,7 +94,7 @@ export abstract class CSSRuleValidator {
     return this.#affectedProperties;
   }
 
-  abstract getHintMessage(propertyName: string): string;
+  abstract getAuthoringHint(propertyName: string, parentComputedStyles: Map<String, String>|null): AuthoringHint;
 }
 
 export class AlignContentValidator extends CSSRuleValidator {
@@ -51,8 +113,22 @@ export class AlignContentValidator extends CSSRuleValidator {
     return computedStyles.get('flex-wrap') !== 'nowrap';
   }
 
-  getHintMessage(): string {
-    return i18nString(UIStrings.alignContentRuleOnNoWrapFlex);
+  getAuthoringHint(): AuthoringHint {
+    const reasonRuleCode = '<code class="unbreakable-text"><span class="property">flex-wrap</span>: nowrap</code>';
+    const affectedRuleCode = '<code class="unbreakable-text"><span class="property">align-content</span></code>';
+
+    return new AuthoringHint(
+      'align-content',
+      AuthoringHintType.RULE_VALIDATION,
+      i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+        'REASON_RULE_CODE': reasonRuleCode,
+        'AFFECTED_RULE_CODE': affectedRuleCode,
+      }),
+      i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+        'REASON_RULE_CODE': reasonRuleCode,
+      }),
+      true,
+    );
   }
 }
 
@@ -70,10 +146,24 @@ export class FlexItemValidator extends CSSRuleValidator {
     return parentDisplay === 'flex' || parentDisplay === 'inline-flex';
   }
 
-  getHintMessage(property: string): string {
-    return i18nString(UIStrings.notFlexItemHint, {
-      'PH1': property,
-    });
+  getAuthoringHint(property: string, parentsComputedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonRuleCode = '<code class="unbreakable-text"><span class="property">display</span>:' + parentsComputedStyles?.get('display') + '</code>';
+    const affectedRuleCode = '<code class="unbreakable-text"><span class="property">' + property + '</span></code>';
+    const targetParentRuleCode = '<code class="unbreakable-text"><span class="property">display</span>: flex</code>';
+
+    return new AuthoringHint(
+      property,
+      AuthoringHintType.RULE_VALIDATION,
+      i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
+        'REASON_RULE_CODE': reasonRuleCode,
+        'AFFECTED_RULE_CODE': affectedRuleCode,
+      }),
+      i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
+        'EXISTING_PARENT_ELEMENT_RULE': reasonRuleCode,
+        'TARGET_PARENT_ELEMENT_RULE': targetParentRuleCode,
+      }),
+      true,
+    );
   }
 }
 

package/front_end/panels/elements/ElementsPanel.ts

@@ -56,6 +56,7 @@ import {ElementsTreeElementHighlighter} from './ElementsTreeElementHighlighter.j
 import {ElementsTreeOutline} from './ElementsTreeOutline.js';
 import type {MarkerDecorator} from './MarkerDecorator.js';
 import {MetricsSidebarPane} from './MetricsSidebarPane.js';
+import {LayoutSidebarPane} from './LayoutSidebarPane.js';
 import {Events as StylesSidebarPaneEvents, StylesSidebarPane} from './StylesSidebarPane.js';
 import type {StylesUpdateCompletedEvent} from './StylesSidebarPane.js';
 
@@ -1143,6 +1144,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       if (treeElement) {
         void treeElement.updateStyleAdorners();
       }
+
+      LayoutSidebarPane.instance().update();
     }
   }
 

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1538,7 +1538,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
 
     const nodeName = node ? node.nodeName().toLowerCase() : '';
-    if (nodeName && (name === 'src' || name === 'href')) {
+    // If the href/src attribute has a value, attempt to link it.
+    // There's no point trying to link it if the value is empty (e.g. <a href=''>).
+    if (nodeName && (name === 'src' || name === 'href') && value) {
       attrValueElement.appendChild(linkifyValue.call(this, value));
     } else if ((nodeName === 'img' || nodeName === 'source') && name === 'srcset') {
       attrValueElement.appendChild(linkifySrcset.call(this, value));

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -35,10 +35,12 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {linkifyDeferredNodeReference} from './DOMLinkifier.js';
+import * as ElementsComponents from './components/components.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsTreeElement, InitialChildrenLimit} from './ElementsTreeElement.js';
 import elementsTreeOutlineStyles from './elementsTreeOutline.css.js';
@@ -1629,13 +1631,45 @@ export class ShortcutTreeElement extends UI.TreeOutline.TreeElement {
       text = '<' + text + '>';
     }
     title.textContent = '\u21AA ' + text;
-
-    const link = (linkifyDeferredNodeReference(nodeShortcut.deferredNode) as Element);
-    UI.UIUtils.createTextChild(this.listItemElement, ' ');
-    link.classList.add('elements-tree-shortcut-link');
-    link.textContent = i18nString(UIStrings.reveal);
-    this.listItemElement.appendChild(link);
     this.nodeShortcut = nodeShortcut;
+    this.addRevealAdorner();
+  }
+
+  addRevealAdorner(): void {
+    const adorner = new Adorners.Adorner.Adorner();
+    adorner.classList.add('adorner-reveal');
+    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
+        ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL);
+    const name = config.name;
+    const adornerContent = document.createElement('span');
+    const linkIcon = new IconButton.Icon.Icon();
+    linkIcon
+        .data = {iconName: 'ic_show_node_16x16', color: 'var(--color-text-disabled)', width: '12px', height: '12px'};
+    const slotText = document.createElement('span');
+    slotText.textContent = name;
+    adornerContent.append(linkIcon);
+    adornerContent.append(slotText);
+    adornerContent.classList.add('adorner-with-icon');
+    adorner.data = {
+      name,
+      content: adornerContent,
+    };
+    this.listItemElement.appendChild(adorner);
+    const onClick = (((): void => {
+                       this.nodeShortcut.deferredNode.resolve(
+                           node => {
+                             void Common.Revealer.reveal(node);
+                           },
+                       );
+                     }) as EventListener);
+    adorner.addInteraction(onClick, {
+      isToggle: false,
+      shouldPropagateOnKeydown: false,
+      ariaLabelDefault: i18nString(UIStrings.reveal),
+      ariaLabelActive: i18nString(UIStrings.reveal),
+    });
+    adorner.addEventListener('mousedown', e => e.consume(), false);
+    ElementsPanel.instance().registerAdorner(adorner);
   }
 
   get hovered(): boolean {

package/front_end/panels/elements/LayoutSidebarPane.ts

@@ -61,8 +61,6 @@ const gridNodesToElements = (nodes: SDK.DOMModel.DOMNode[]): ElementsComponents.
   });
 };
 
-let layoutSidebarPaneInstance: LayoutSidebarPane;
-
 const flexContainerNodesToElements = (nodes: SDK.DOMModel.DOMNode[]): ElementsComponents.LayoutPane.LayoutElement[] => {
   return nodes.map(node => {
     const layoutElement = nodeToLayoutElement(node);
@@ -86,6 +84,7 @@ const flexContainerNodesToElements = (nodes: SDK.DOMModel.DOMNode[]): ElementsCo
   });
 };
 
+let layoutSidebarPaneInstance: LayoutSidebarPane;
 export class LayoutSidebarPane extends UI.ThrottledWidget.ThrottledWidget {
   private layoutPane: ElementsComponents.LayoutPane.LayoutPane;
   private readonly settings: string[];

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -22,6 +22,7 @@ import type {StylePropertiesSection} from './StylePropertiesSection.js';
 import {CSSPropertyPrompt, StylesSidebarPane, StylesSidebarPropertyRenderer} from './StylesSidebarPane.js';
 import {getCssDeclarationAsJavascriptProperty} from './StylePropertyUtils.js';
 import {cssRuleValidatorsMap} from './CSSRuleValidator.js';
+import type {AuthoringHint} from './CSSRuleValidator.js';
 
 const FlexboxEditor = ElementsComponents.StylePropertyEditor.FlexboxEditor;
 const GridEditor = ElementsComponents.StylePropertyEditor.GridEditor;
@@ -715,11 +716,11 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       }
     }
 
-    const hintMessage = this.getHintMessage(this.computedStyles, this.parentsComputedStyles);
-    if (hintMessage !== null) {
+    const authoringHint = this.getAuthoringHint(this.computedStyles, this.parentsComputedStyles);
+    if (authoringHint !== null) {
       const hintIcon = UI.Icon.Icon.create('mediumicon-info', 'hint');
       const hintPopover =
-          new UI.PopoverHelper.PopoverHelper(hintIcon, event => this.handleHintPopoverRequest(hintMessage, event));
+          new UI.PopoverHelper.PopoverHelper(hintIcon, event => this.handleHintPopoverRequest(authoringHint, event));
       hintPopover.setHasPadding(true);
       hintPopover.setTimeout(0, 100);
 
@@ -817,8 +818,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
         StylesSidebarPane.createExclamationMark(this.property, warnings.join(' ')), this.listItemElement.firstChild);
   }
 
-  private getHintMessage(computedStyles: Map<string, string>|null, parentComputedStyles: Map<string, string>|null):
-      string|null {
+  private getAuthoringHint(computedStyles: Map<string, string>|null, parentComputedStyles: Map<string, string>|null):
+      AuthoringHint|null {
     const propertyName = this.property.name;
 
     if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.CSS_AUTHORING_HINTS) ||
@@ -828,14 +829,14 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
     for (const validator of cssRuleValidatorsMap.get(propertyName) || []) {
       if (!validator.isRuleValid(computedStyles, parentComputedStyles)) {
-        return validator.getHintMessage(propertyName);
+        return validator.getAuthoringHint(propertyName, this.parentsComputedStyles);
       }
     }
 
     return null;
   }
 
-  private handleHintPopoverRequest(hintMessageContent: string, event: Event): UI.PopoverHelper.PopoverRequest|null {
+  private handleHintPopoverRequest(authoringHint: AuthoringHint, event: Event): UI.PopoverHelper.PopoverRequest|null {
     const link = event.composedPath()[0];
     Platform.DCHECK(() => link instanceof Element, 'Link is not an instance of Element');
 
@@ -846,7 +847,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
         if (!node) {
           return false;
         }
-        popover.contentElement.insertAdjacentHTML('beforeend', hintMessageContent);
+        const popupElement = new ElementsComponents.CSSHintDetailsView.CSSHintDetailsView(authoringHint);
+        popover.contentElement.insertAdjacentElement('beforeend', popupElement);
         return true;
       },
     };