Add anchor element to webui iph bubble

Gives the iph bubble an anchor id property, and finds and highlights the
anchor element when the bubble is shown. Does not include positioning
based on the anchor.

Bug: 1266520
Change-Id: Iecb2c3bc6c1b48a289a0c1afbaaefcb4d76672a4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3260746
Reviewed-by: John Lee <johntlee@chromium.org>
Reviewed-by: Dana Fried <dfried@chromium.org>
Commit-Queue: Emily Shack <emshack@chromium.org>
Cr-Commit-Position: refs/heads/main@{#940561}

chrome/browser/resources/settings/privacy_page/privacy_page.html

@@ -61,6 +61,7 @@
           </cr-link-row>
         </template>
         <iph-bubble id="iphBubble"
+            anchor-id="cookiesLinkRow"
             body="Click on the &quot;Cookies and other site data&quot; section">
         </iph-bubble>
         <cr-link-row id="cookiesLinkRow" start-icon="settings:cookie"

ui/webui/resources/cr_components/iph_bubble/iph_bubble.ts

@@ -7,6 +7,8 @@
  */
 import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+const ANCHOR_HIGHLIGHT_CLASS = 'iph-anchor-highlight';
+
 export interface IPHBubbleElement {
   open: boolean;
   _setOpen(open: boolean): void;
@@ -24,6 +26,16 @@ export class IPHBubbleElement extends PolymerElement {
 
   static get properties() {
     return {
+      /**
+       * The id of the element that the iph is anchored to. This element
+       * must be a sibling of the iph. If this property is not set,
+       * then the iph will be anchored to the parent node containing it.
+       */
+      anchorId: {
+        type: String,
+        value: '',
+      },
+
       /**
        * The main promo text. Required.
        */
@@ -41,13 +53,24 @@ export class IPHBubbleElement extends PolymerElement {
     };
   }
 
+  anchorId?: string;
+
+  /**
+   * HTMLElement corresponding to |this.anchorId|.
+   */
+  private anchorElement_?: HTMLElement;
+
   /**
    * Shows the bubble.
    */
   show() {
+    if (!this.anchorElement_) {
+      this.anchorElement_ = this.findAnchorElement_();
+    }
     // Reset the aria-hidden attribute as screen readers need to access the
     // contents of an opened bubble.
     this.removeAttribute('aria-hidden');
+    this.highlightAnchor_();
     this._setOpen(true);
   }
 
@@ -57,7 +80,44 @@ export class IPHBubbleElement extends PolymerElement {
    */
   hide() {
     this.setAttribute('aria-hidden', 'true');
+    this.unhighlightAnchor_();
     this._setOpen(false);
   }
+
+  /**
+   * Returns the element that this iph is anchored to. It is either the element
+   * given by |this.anchorId|, or the immediate parent of the iph.
+   */
+  private findAnchorElement_(): HTMLElement {
+    const parentNode: any = this.parentNode;
+    if (this.anchorId) {
+      return parentNode.querySelector(`#${this.anchorId}`);
+    } else if (parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+      return parentNode.host;
+    } else {
+      return parentNode;
+    }
+  }
+
+  /**
+   * Styles the anchor element to appear highlighted while the bubble is open.
+   */
+  private highlightAnchor_() {
+    if (!this.anchorElement_) {
+      return;
+    }
+    this.anchorElement_.classList.add(ANCHOR_HIGHLIGHT_CLASS);
+  }
+
+  /**
+   * Resets the anchor element to its original styling while the bubble is
+   * closed.
+   */
+  private unhighlightAnchor_() {
+    if (!this.anchorElement_) {
+      return;
+    }
+    this.anchorElement_.classList.remove(ANCHOR_HIGHLIGHT_CLASS);
+  }
 }
 customElements.define(IPHBubbleElement.is, IPHBubbleElement);

ui/webui/resources/cr_elements/shared_style_css.html

@@ -182,6 +182,10 @@
         /* Border-radius based on block/inline is not yet supported. */
         transform: scaleX(-1);
       }
+
+      .iph-anchor-highlight {
+        background-color: var(--cr-iph-anchor-highlight-color);
+      }
     </style>
   </template>
 </dom-module>

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -104,6 +104,7 @@
     --cr-focused-item-color: var(--google-grey-300);
     --cr-form-field-label-color: var(--google-grey-refresh-700);
     --cr-hairline-rgb: 0, 0, 0;
+    --cr-iph-anchor-highlight-color: rgba(var(--google-blue-600-rgb), 0.1);
     --cr-link-color: var(--google-blue-700);
     --cr-menu-background-color: white;
     --cr-menu-background-focus-color: var(--google-grey-400);
@@ -135,6 +136,7 @@
       --cr-focused-item-color: var(--google-grey-800);
       --cr-form-field-label-color: var(--dark-secondary-color);
       --cr-hairline-rgb: 255, 255, 255;
+      --cr-iph-anchor-highlight-color: rgba(var(--google-grey-100-rgb), 0.1);
       --cr-link-color: var(--google-blue-refresh-300);
       --cr-menu-background-color: var(--google-grey-900);
       --cr-menu-background-focus-color: var(--google-grey-refresh-700);