chrome-devtools-frontend 1.0.1021097 → 1.0.1022409

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/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/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/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;
       },
     };

package/front_end/panels/elements/TopLayerContainer.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as ElementsComponents from './components/components.js';
@@ -79,7 +80,14 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
     const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
         ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
     const adornerContent = document.createElement('span');
-    adornerContent.textContent = ` top-layer (${topLayerElementIndex}) `;
+    adornerContent.classList.add('adorner-with-icon');
+    const linkIcon = new IconButton.Icon.Icon();
+    linkIcon
+        .data = {iconName: 'ic_show_node_16x16', color: 'var(--color-text-disabled)', width: '12px', height: '12px'};
+    const adornerText = document.createElement('span');
+    adornerText.textContent = ` top-layer (${topLayerElementIndex}) `;
+    adornerContent.append(linkIcon);
+    adornerContent.append(adornerText);
     const adorner = element?.adorn(config, adornerContent);
     if (adorner) {
       const onClick = (((): void => {

package/front_end/panels/elements/components/AdornerManager.ts

@@ -31,6 +31,7 @@ export enum RegisteredAdorners {
   CONTAINER = 'container',
   SLOT = 'slot',
   TOP_LAYER = 'top-layer',
+  REVEAL = 'reveal',
 }
 
 // This enum-like const object serves as the authoritative registry for all the
@@ -79,6 +80,12 @@ export function getRegisteredAdorner(which: RegisteredAdorners): RegisteredAdorn
         category: AdornerCategories.LAYOUT,
         enabledByDefault: true,
       };
+    case RegisteredAdorners.REVEAL:
+      return {
+        name: 'reveal',
+        category: AdornerCategories.DEFAULT,
+        enabledByDefault: true,
+      };
   }
 }
 

package/front_end/panels/elements/components/CSSHintDetailsView.ts

@@ -0,0 +1,71 @@
+// 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 ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+
+import cssHintDetailsViewStyles from './cssHintDetailsView.css.js';
+
+const UIStrings = {
+  /**
+    *@description Text for button that redirects to CSS property documentation.
+    */
+    learnMore: 'Learn More',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/elements/components/CSSHintDetailsView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const {render, html, Directives} = LitHtml;
+
+interface Hint {
+    getHintPrefix(): string;
+    getHintMessage(): string;
+    getPossibleFixMessage(): string|null;
+    getLearnMoreLink(): string|null;
+}
+
+export class CSSHintDetailsView extends HTMLElement {
+    static readonly litTagName = LitHtml.literal`devtools-css-hint-details-view`;
+    readonly #shadow = this.attachShadow({mode: 'open'});
+    readonly #authoringHint: Hint;
+
+    constructor(authoringHint: Hint) {
+        super();
+        this.#authoringHint = authoringHint;
+        this.#shadow.adoptedStyleSheets = [cssHintDetailsViewStyles];
+        this.#render();
+    }
+
+    #render(): void {
+        render(html`
+            <div class="hint-popup-wrapper">
+                <div class="hint-popup-reason">
+                    <strong>${this.#authoringHint.getHintPrefix()}:</strong> ${Directives.unsafeHTML(this.#authoringHint.getHintMessage())}
+                </div>
+                ${this.#authoringHint.getPossibleFixMessage() ? html`
+                    <div class="hint-popup-possible-fix">
+                        ${Directives.unsafeHTML(this.#authoringHint.getPossibleFixMessage())}
+                        ${this.#authoringHint.getLearnMoreLink() ? html`
+                            <x-link id='learn-more' href='${this.#authoringHint.getLearnMoreLink()}' class='clickable underlined unbreakable-text'}>
+                                ${i18nString(UIStrings.learnMore)}
+                            </x-link>
+                        `: ''}
+                    </div>
+                ` : ''}
+            </div>
+        `, this.#shadow, {
+            host: this,
+          });
+    }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-css-hint-details-view', CSSHintDetailsView);
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface HTMLElementTagNameMap {
+      'devtools-css-hint-details-view': CSSHintDetailsView;
+    }
+}

package/front_end/panels/elements/components/components.ts

@@ -5,6 +5,7 @@
 import * as AccessibilityTreeNode from './AccessibilityTreeNode.js';
 import * as AdornerManager from './AdornerManager.js';
 import * as AdornerSettingsPane from './AdornerSettingsPane.js';
+import * as CSSHintDetailsView from './CSSHintDetailsView.js';
 import * as ComputedStyleProperty from './ComputedStyleProperty.js';
 import * as ComputedStyleTrace from './ComputedStyleTrace.js';
 import * as CSSPropertyIconResolver from './CSSPropertyIconResolver.js';
@@ -22,6 +23,7 @@ export {
   AccessibilityTreeNode,
   AdornerManager,
   AdornerSettingsPane,
+  CSSHintDetailsView,
   ComputedStyleProperty,
   ComputedStyleTrace,
   CSSPropertyIconResolver,

package/front_end/panels/elements/components/cssHintDetailsView.css

@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+
+.hint-popup-wrapper {
+  width: 400px;
+  line-height: 1.1;
+  font-size: 12px;
+}
+
+code {
+  background-color: var(--color-background-elevation-1);
+  padding: 0 2px;
+}
+
+.property {
+  color: var(--color-syntax-1);
+}
+
+.hint-popup-possible-fix {
+  margin-top: 8px;
+}
+
+.clickable {
+  color: var(--color-link);
+}
+
+.underlined {
+  text-decoration: underline;
+}
+
+.unbreakable-text {
+  white-space: nowrap;
+}

package/front_end/panels/elements/elementsTreeOutline.css

@@ -27,6 +27,10 @@
   display: none;
 }
 
+.adorner-reveal {
+  margin: 3px;
+}
+
 .adorner-with-icon {
   display: flex;
   justify-content: center;

package/front_end/panels/elements/stylesSectionTree.css

@@ -159,7 +159,7 @@ ol.expanded {
   position: absolute;
   top: 0;
   bottom: 0;
-  margin: auto;
+  margin: auto auto auto 5px;
   display: inline-block;
   cursor: pointer;
   transform: scale(0.9);