chrome-devtools-frontend 1.0.1030457 → 1.0.1031822

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -14,53 +14,53 @@ import {
 
 const UIStrings = {
   /**
-    *@description Hint prefix for deprecated properties.
+    *@description The type of the CSS rule validation message that is shown in the Style panel. "Deprecated property" means that the property in the declaration is deprecated and should not be used.
     */
-  deprecatedPropertyHintPrefix: 'Deprecated Property',
+  deprecatedPropertyHintPrefix: 'Deprecated property',
   /**
-    *@description Hint prefix for rule validation.
+    *@description The type of the CSS rule validation message that is shown in the Style panel. "Inactive property" means that a property declaration was valid syntactially but didn't have expected effect.
     */
-  ruleValidationHintPrefix: 'Inactive rule',
+  inactivePropertyHintPrefix: 'Inactive property',
   /**
-    *@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
+    *@description The message that is shown in the Style panel when the user hovers over a property that has not effect due to some other property.
+    *@example {flex-wrap: nowrap} REASON_PROPERTY_DECLARATION_CODE
+    *@example {align-content} AFFECTED_PROPERTY_DECLARATION_CODE
     */
   ruleViolatedBySameElementRuleReason:
-      'This element has {REASON_RULE_CODE} rule, therefore {AFFECTED_RULE_CODE} has no effect.',
+      'This element has the {REASON_PROPERTY_DECLARATION_CODE} property and therefore, {AFFECTED_PROPERTY_DECLARATION_CODE} has no effect.',
   /**
-    *@description Possible fix for rules that was violated because of same elements rule.
-    *@example {flex-wrap: nowrap} REASON_RULE_CODE
+    *@description The message that is shown in the Style panel when the user hovers over a property declaration that has not effect due to some other property.
+    *@example {flex-wrap: nowrap} REASON_PROPERTY_DECLARATION_CODE
     */
   ruleViolatedBySameElementRuleFix:
-      'For this property to work, please remove or change the value of {REASON_RULE_CODE}',
+      'For this property to work, please remove or change the value of {REASON_PROPERTY_DECLARATION_CODE}.',
   /**
-    *@description Possible fix for rules that was violated because of same elements rule.
-    *@example {display: block} EXISTING_RULE
-    *@example {display: flex} TARGET_RULE
+    *@description The message that is shown in the Style panel when the user hovers over a property declaration that has not effect due to the current property value.
+    *@example {display: block} EXISTING_PROPERTY_DECLARATION
+    *@example {display: flex} TARGET_PROPERTY_DECLARATION
     */
   ruleViolatedBySameElementRuleChangeSuggestion:
-      'For this property to work, please change the {EXISTING_RULE} rule to {TARGET_RULE}',
+      'For this property to work, please change the {EXISTING_PROPERTY_DECLARATION} rule to {TARGET_PROPERTY_DECLARATION}.',
   /**
-    *@description Hint for rules that was violated because of parent element rule.
-    *@example {display: block} REASON_RULE_CODE
-    *@example {flex} AFFECTED_RULE_CODE
+    *@description The message that is shown in the Style panel when the user hovers over a property declaration that has not effect due to properties of the parent element.
+    *@example {display: block} REASON_PROPERTY_DECLARATION_CODE
+    *@example {flex} AFFECTED_PROPERTY_DECLARATION_CODE
     */
   ruleViolatedByParentElementRuleReason:
-      'Parent element has {REASON_RULE_CODE} rule, therefore this elements {AFFECTED_RULE_CODE} has no effect',
+      'The parent element has the {REASON_PROPERTY_DECLARATION_CODE} property and therefore, this element\'s property {AFFECTED_PROPERTY_DECLARATION_CODE} has no effect.',
   /**
-    *@description Posible fix for rules that was violated because of parent element rule.
+    *@description The message that is shown in the Style panel when the user hovers over a property declaration that has not effect due to the properties of the parent element.
     *@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.',
+      'Please change the parent element\'s property declaration from {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',
+  INACTIVE_PROPERTY = 'ruleValidation',
   DEPRECATED_PROPERTY = 'deprecatedProperty',
 }
 
@@ -68,19 +68,20 @@ export class AuthoringHint {
   readonly #hintType: AuthoringHintType;
   readonly #hintMessage: string;
   readonly #possibleFixMessage: string|null;
-  readonly #learnMore: string|null;
+  readonly #learnMoreLink: string|undefined;
 
-  constructor(property: string, hintType: AuthoringHintType, hintMessage: string, possibleFixMessage: string|null, showLearnMore: boolean) {
+  constructor(
+      hintType: AuthoringHintType, hintMessage: string, possibleFixMessage: string|null, learnMoreLink?: string) {
     this.#hintType = hintType;
     this.#hintMessage = hintMessage;
     this.#possibleFixMessage = possibleFixMessage;
-    this.#learnMore = showLearnMore ? property : null; // TODO: Add Goo.gle short link base url
+    this.#learnMoreLink = learnMoreLink;
   }
 
   getHintPrefix(): string {
     switch (this.#hintType) {
-      case AuthoringHintType.RULE_VALIDATION:
-        return i18nString(UIStrings.ruleValidationHintPrefix);
+      case AuthoringHintType.INACTIVE_PROPERTY:
+        return i18nString(UIStrings.inactivePropertyHintPrefix);
       case AuthoringHintType.DEPRECATED_PROPERTY:
         return i18nString(UIStrings.deprecatedPropertyHintPrefix);
     }
@@ -94,8 +95,8 @@ export class AuthoringHint {
     return this.#possibleFixMessage;
   }
 
-  getLearnMoreLink(): string|null {
-    return this.#learnMore;
+  getLearnMoreLink(): string|undefined {
+    return this.#learnMoreLink;
   }
 }
 
@@ -106,6 +107,9 @@ export abstract class CSSRuleValidator {
     this.#affectedProperties = affectedProperties;
   }
 
+  /**
+   * If `isRuleValid` returns false, it means there is a hint to be shown. The hint is retrieved by invoking `getAuthoringHint`.
+   */
   abstract isRuleValid(computedStyles: Map<String, String>|null, parentsComputedStyles?: Map<String, String>|null):
       boolean;
 
@@ -134,20 +138,18 @@ export class AlignContentValidator extends CSSRuleValidator {
   }
 
   getAuthoringHint(): AuthoringHint {
-    const reasonRuleCode = buildStyledPropertyText('flex-wrap');
-    const affectedRuleCode = buildStyledPropertyText('align-content');
+    const reasonPropertyDeclaration = buildStyledPropertyText('flex-wrap');
+    const affectedPropertyDeclarationCode = buildStyledPropertyText('align-content');
 
     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,
+        AuthoringHintType.INACTIVE_PROPERTY,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+        }),
     );
   }
 }
@@ -167,22 +169,20 @@ export class FlexItemValidator extends CSSRuleValidator {
   getAuthoringHint(
       property: string, computedStyles: Map<String, String>|null,
       parentsComputedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonRuleCode = buildStyledRuleText('display', parentsComputedStyles?.get('display'));
-    const affectedRuleCode = buildStyledPropertyText(property);
-    const targetParentRuleCode = buildStyledRuleText('display', 'flex');
+    const reasonPropertyDeclaration = buildStyledRuleText('display', parentsComputedStyles?.get('display'));
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
+    const targeParentPropertyDeclaration = buildStyledRuleText('display', 'flex');
 
     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,
+        AuthoringHintType.INACTIVE_PROPERTY,
+        i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
+        }),
+        i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
+          'EXISTING_PARENT_ELEMENT_RULE': reasonPropertyDeclaration,
+          'TARGET_PARENT_ELEMENT_RULE': targeParentPropertyDeclaration,
+        }),
     );
   }
 }
@@ -200,22 +200,20 @@ export class FlexContainerValidator extends CSSRuleValidator {
   }
 
   getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
+    const reasonPropertyDeclaration = buildStyledRuleText('display', computedStyles?.get('display'));
     const targetRuleCode = buildStyledRuleText('display', 'flex');
-    const affectedRuleCode = buildStyledPropertyText(property);
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
 
     return new AuthoringHint(
-        property,
-        AuthoringHintType.RULE_VALIDATION,
+        AuthoringHintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
-          'REASON_RULE_CODE': reasonRuleCode,
-          'AFFECTED_RULE_CODE': affectedRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion, {
-          'EXISTING_RULE': reasonRuleCode,
-          'TARGET_RULE': targetRuleCode,
+          'EXISTING_PROPERTY_DECLARATION': reasonPropertyDeclaration,
+          'TARGET_PROPERTY_DECLARATION': targetRuleCode,
         }),
-        true,
     );
   }
 }
@@ -242,22 +240,20 @@ export class GridContainerValidator extends CSSRuleValidator {
   }
 
   getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
+    const reasonPropertyDeclaration = buildStyledRuleText('display', computedStyles?.get('display'));
     const targetRuleCode = buildStyledRuleText('display', 'grid');
-    const affectedRuleCode = buildStyledPropertyText(property);
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
 
     return new AuthoringHint(
-        property,
-        AuthoringHintType.RULE_VALIDATION,
+        AuthoringHintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
-          'REASON_RULE_CODE': reasonRuleCode,
-          'AFFECTED_RULE_CODE': affectedRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion, {
-          'EXISTING_RULE': reasonRuleCode,
-          'TARGET_RULE': targetRuleCode,
+          'EXISTING_PROPERTY_DECLARATION': reasonPropertyDeclaration,
+          'TARGET_PROPERTY_DECLARATION': targetRuleCode,
         }),
-        true,
     );
   }
 }
@@ -283,22 +279,20 @@ export class GridItemValidator extends CSSRuleValidator {
   getAuthoringHint(
       property: string, computedStyles: Map<String, String>|null,
       parentComputedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonRuleCode = buildStyledRuleText('display', parentComputedStyles?.get('display'));
-    const targetParentRuleCode = buildStyledRuleText('display', 'grid');
-    const affectedRuleCode = buildStyledPropertyText(property);
+    const reasonPropertyDeclaration = buildStyledRuleText('display', parentComputedStyles?.get('display'));
+    const targeParentPropertyDeclaration = buildStyledRuleText('display', 'grid');
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
 
     return new AuthoringHint(
-        property,
-        AuthoringHintType.RULE_VALIDATION,
+        AuthoringHintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
-          'REASON_RULE_CODE': reasonRuleCode,
-          'AFFECTED_RULE_CODE': affectedRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
-          'EXISTING_PARENT_ELEMENT_RULE': reasonRuleCode,
-          'TARGET_PARENT_ELEMENT_RULE': targetParentRuleCode,
+          'EXISTING_PARENT_ELEMENT_RULE': reasonPropertyDeclaration,
+          'TARGET_PARENT_ELEMENT_RULE': targeParentPropertyDeclaration,
         }),
-        true,
     );
   }
 }
@@ -321,20 +315,18 @@ export class FlexGridValidator extends CSSRuleValidator {
   }
 
   getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
-    const affectedRuleCode = buildStyledPropertyText(property);
+    const reasonPropertyDeclaration = buildStyledRuleText('display', computedStyles?.get('display'));
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
 
     return new AuthoringHint(
-        property,
-        AuthoringHintType.RULE_VALIDATION,
+        AuthoringHintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
-          'REASON_RULE_CODE': reasonRuleCode,
-          'AFFECTED_RULE_CODE': affectedRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_RULE_CODE': reasonRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
         }),
-        true,
     );
   }
 }
@@ -360,20 +352,18 @@ export class MulticolFlexGridValidator extends CSSRuleValidator {
   }
 
   getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
-    const affectedRuleCode = buildStyledPropertyText(property);
+    const reasonPropertyDeclaration = buildStyledRuleText('display', computedStyles?.get('display'));
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
 
     return new AuthoringHint(
-        property,
-        AuthoringHintType.RULE_VALIDATION,
+        AuthoringHintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
-          'REASON_RULE_CODE': reasonRuleCode,
-          'AFFECTED_RULE_CODE': affectedRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_RULE_CODE': reasonRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
         }),
-        true,
     );
   }
 }
@@ -400,20 +390,18 @@ export class PaddingValidator extends CSSRuleValidator {
   }
 
   getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonRuleCode = buildStyledRuleText('display', computedStyles?.get('display'));
-    const affectedRuleCode = buildStyledPropertyText(property);
+    const reasonPropertyDeclaration = buildStyledRuleText('display', computedStyles?.get('display'));
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
 
     return new AuthoringHint(
-        property,
-        AuthoringHintType.RULE_VALIDATION,
+        AuthoringHintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
-          'REASON_RULE_CODE': reasonRuleCode,
-          'AFFECTED_RULE_CODE': affectedRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_RULE_CODE': reasonRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
         }),
-        true,
     );
   }
 }
@@ -437,20 +425,18 @@ export class PositionValidator extends CSSRuleValidator {
   }
 
   getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonRuleCode = buildStyledRuleText('position', computedStyles?.get('position'));
-    const affectedRuleCode = buildStyledPropertyText(property);
+    const reasonPropertyDeclaration = buildStyledRuleText('position', computedStyles?.get('position'));
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
 
     return new AuthoringHint(
-        property,
-        AuthoringHintType.RULE_VALIDATION,
+        AuthoringHintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
-          'REASON_RULE_CODE': reasonRuleCode,
-          'AFFECTED_RULE_CODE': affectedRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_RULE_CODE': reasonRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
         }),
-        true,
     );
   }
 }
@@ -472,20 +458,18 @@ export class ZIndexValidator extends CSSRuleValidator {
   }
 
   getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonRuleCode = buildStyledRuleText('position', computedStyles?.get('position'));
-    const affectedRuleCode = buildStyledPropertyText(property);
+    const reasonPropertyDeclaration = buildStyledRuleText('position', computedStyles?.get('position'));
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
 
     return new AuthoringHint(
-        property,
-        AuthoringHintType.RULE_VALIDATION,
+        AuthoringHintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
-          'REASON_RULE_CODE': reasonRuleCode,
-          'AFFECTED_RULE_CODE': affectedRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_RULE_CODE': reasonRuleCode,
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
         }),
-        true,
     );
   }
 }

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -103,7 +103,7 @@ export class ElementsTreeOutline extends
   private treeElementBeingDragged?: ElementsTreeElement;
   private dragOverTreeElement?: ElementsTreeElement;
   private updateModifiedNodesTimeout?: number;
-  private topLayerContainer?: TopLayerContainer;
+  #topLayerContainerByParent: Map<UI.TreeOutline.TreeElement, TopLayerContainer> = new Map();
 
   constructor(omitRootDOMNode?: boolean, selectEnabled?: boolean, hideGutter?: boolean) {
     super();
@@ -453,7 +453,7 @@ export class ElementsTreeOutline extends
       }
     }
 
-    this.createTopLayerContainer();
+    void this.createTopLayerContainer(this.rootElement(), this.rootDOMNode.domModel());
 
     if (selectedNode) {
       this.revealAndSelectNode(selectedNode, true);
@@ -1183,9 +1183,16 @@ export class ElementsTreeOutline extends
     });
   }
 
-  createTopLayerContainer(): void {
-    this.topLayerContainer = new TopLayerContainer(this);
-    void this.topLayerContainer.throttledUpdateTopLayerElements();
+  async createTopLayerContainer(parent: UI.TreeOutline.TreeElement, domModel: SDK.DOMModel.DOMModel): Promise<void> {
+    if (!parent.treeOutline || !(parent.treeOutline instanceof ElementsTreeOutline)) {
+      return;
+    }
+    const container = new TopLayerContainer(parent.treeOutline, domModel);
+    await container.throttledUpdateTopLayerElements();
+    if (container.currentTopLayerElements.size > 0) {
+      parent.appendChild(container);
+    }
+    this.#topLayerContainerByParent.set(parent, container);
   }
 
   private createElementTreeElement(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean): ElementsTreeElement {
@@ -1342,6 +1349,9 @@ export class ElementsTreeOutline extends
       isClosingTag?: boolean): ElementsTreeElement {
     const newElement = this.createElementTreeElement(child, isClosingTag);
     treeElement.insertChild(newElement, index);
+    if (child.nodeType() === Node.DOCUMENT_NODE) {
+      void this.createTopLayerContainer(newElement, child.domModel());
+    }
     return newElement;
   }
 
@@ -1447,8 +1457,14 @@ export class ElementsTreeOutline extends
     }
   }
 
-  private topLayerElementsChanged(): void {
-    void this.topLayerContainer?.throttledUpdateTopLayerElements();
+  private async topLayerElementsChanged(): Promise<void> {
+    for (const [parent, container] of this.#topLayerContainerByParent) {
+      await container.throttledUpdateTopLayerElements();
+      if (container.currentTopLayerElements.size > 0 && container.parent !== parent) {
+        parent.appendChild(container);
+      }
+      container.hidden = container.currentTopLayerElements.size === 0;
+    }
   }
 
   private static treeOutlineSymbol = Symbol('treeOutline');

package/front_end/panels/elements/TopLayerContainer.ts

@@ -14,23 +14,24 @@ import {type ElementsTreeElement} from './ElementsTreeElement.js';
 
 const UIStrings = {
   /**
-   * @description Top layer is rendered closest to the user within a viewport, therefore its elements always appear on top of all other content
-   */
-  topLayer: 'top-layer',
+  *@description Link text content in Elements Tree Outline of the Elements panel. When clicked, it "reveals" the true location of an element.
+  */
+  reveal: 'reveal',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/TopLayerContainer.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class TopLayerContainer extends UI.TreeOutline.TreeElement {
-  domContainer: ElementsTreeOutline.ElementsTreeOutline;
+  tree: ElementsTreeOutline.ElementsTreeOutline;
+  domModel: SDK.DOMModel.DOMModel;
   currentTopLayerElements: Set<ElementsTreeElement>;
   topLayerUpdateThrottler: Common.Throttler.Throttler;
-  #inserted = false;
 
-  constructor(domContainer: ElementsTreeOutline.ElementsTreeOutline) {
+  constructor(tree: ElementsTreeOutline.ElementsTreeOutline, domModel: SDK.DOMModel.DOMModel) {
     super('#top-layer');
-    this.domContainer = domContainer;
+    this.tree = tree;
+    this.domModel = domModel;
     this.currentTopLayerElements = new Set();
     this.topLayerUpdateThrottler = new Common.Throttler.Throttler(1);
   }
@@ -44,26 +45,19 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
     this.removeCurrentTopLayerElementsAdorners();
     this.currentTopLayerElements = new Set();
 
-    const domModel = this.domContainer.rootDOMNode?.domModel();
-    if (!domModel) {
-      this.hidden = true;
-      return;
-    }
-
-    const newTopLayerElementsIDs = await domModel.getTopLayerElements();
+    const newTopLayerElementsIDs = await this.domModel.getTopLayerElements();
     if (!newTopLayerElementsIDs || newTopLayerElementsIDs.length === 0) {
-      this.hidden = true;
       return;
     }
 
     let topLayerElementIndex = 0;
     for (let i = 0; i < newTopLayerElementsIDs.length; i++) {
-      const topLayerDOMNode = domModel.idToDOMNode.get(newTopLayerElementsIDs[i]);
+      const topLayerDOMNode = this.domModel.idToDOMNode.get(newTopLayerElementsIDs[i]);
       if (topLayerDOMNode && topLayerDOMNode.nodeName() !== '::backdrop') {
         const topLayerElementShortcut = new SDK.DOMModel.DOMNodeShortcut(
-            domModel.target(), topLayerDOMNode.backendNodeId(), 0, topLayerDOMNode.nodeName());
+            this.domModel.target(), topLayerDOMNode.backendNodeId(), 0, topLayerDOMNode.nodeName());
         const topLayerElementRepresentation = new ElementsTreeOutline.ShortcutTreeElement(topLayerElementShortcut);
-        const topLayerTreeElement = this.domContainer.treeElementByNode.get(topLayerDOMNode);
+        const topLayerTreeElement = this.tree.treeElementByNode.get(topLayerDOMNode);
         if (!topLayerTreeElement) {
           continue;
         }
@@ -73,21 +67,16 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
         this.currentTopLayerElements.add(topLayerTreeElement);
         this.appendChild(topLayerElementRepresentation);
         // Add the element's backdrop if previous top layer element is a backdrop.
-        const previousTopLayerDOMNode = (i > 0) ? domModel.idToDOMNode.get(newTopLayerElementsIDs[i - 1]) : undefined;
+        const previousTopLayerDOMNode =
+            (i > 0) ? this.domModel.idToDOMNode.get(newTopLayerElementsIDs[i - 1]) : undefined;
         if (previousTopLayerDOMNode && previousTopLayerDOMNode.nodeName() === '::backdrop') {
           const backdropElementShortcut = new SDK.DOMModel.DOMNodeShortcut(
-              domModel.target(), previousTopLayerDOMNode.backendNodeId(), 0, previousTopLayerDOMNode.nodeName());
+              this.domModel.target(), previousTopLayerDOMNode.backendNodeId(), 0, previousTopLayerDOMNode.nodeName());
           const backdropElementRepresentation = new ElementsTreeOutline.ShortcutTreeElement(backdropElementShortcut);
           topLayerElementRepresentation.appendChild(backdropElementRepresentation);
         }
       }
     }
-
-    this.hidden = topLayerElementIndex <= 0;
-    if (!this.hidden && !this.#inserted) {
-      this.domContainer.appendChild(this);
-      this.#inserted = true;
-    }
   }
 
   private removeCurrentTopLayerElementsAdorners(): void {
@@ -118,8 +107,8 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
       adorner.addInteraction(onClick, {
         isToggle: false,
         shouldPropagateOnKeydown: false,
-        ariaLabelDefault: i18nString(UIStrings.topLayer),
-        ariaLabelActive: i18nString(UIStrings.topLayer),
+        ariaLabelDefault: i18nString(UIStrings.reveal),
+        ariaLabelActive: i18nString(UIStrings.reveal),
       });
       adorner.addEventListener('mousedown', e => e.consume(), false);
     }

package/front_end/panels/elements/accessibilityTreeView.css

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+.accessibility-tree-view-container {
+  height: 100%;
+  overflow: auto;
+}

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

@@ -77,16 +77,15 @@ export class AccessibilityTreeNode extends HTMLElement {
     const name = LitHtml.html`"<span class='attribute-value'>${this.#name}</span>"`;
     const properties = this.#properties.map(
         ({name, value}) => isPrintable(value.type) ?
-            LitHtml.html`&nbsp<span class='attribute-name'>${name}</span>:&nbsp<span class='attribute-value'>${
+            LitHtml.html` <span class='attribute-name'>${name}</span>:&nbsp;<span class='attribute-value'>${
                 value.value}</span>` :
             LitHtml.nothing);
-
+    const content = this.#ignored ? LitHtml.html`<span>${i18nString(UIStrings.ignored)}</span>` :
+                                    LitHtml.html`${role}&nbsp;${name}${properties}`;
     await Coordinator.RenderCoordinator.RenderCoordinator.instance().write('Accessibility node render', () => {
       // clang-format off
       LitHtml.render(
-        this.#ignored ?
-          LitHtml.html`<span>${i18nString(UIStrings.ignored)}</span>` :
-          LitHtml.html`${role}&nbsp${name}${properties}`,
+        LitHtml.html`<div class='container'>${content}</div>`,
         this.#shadow,
         {host: this});
       // clang-format on