WebUI tabstrip: Add $() $all() helpers in CustomElement superclass.

These are simply convenience methods to avoid repeating
this.shadowRoot.querySelector() and this.shadowRoot.querySelectorAll().

Bug: None
Change-Id: I850c7953a258feeede334687069f0a0764b698e6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2021189
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#735567}

chrome/browser/resources/tab_strip/alert_indicators.js

@@ -15,8 +15,7 @@ export class AlertIndicatorsElement extends CustomElement {
     super();
 
     /** @private {!HTMLElement} */
-    this.containerEl_ = /** @type {!HTMLElement} */ (
-        this.shadowRoot.querySelector('#container'));
+    this.containerEl_ = /** @type {!HTMLElement} */ (this.$('#container'));
 
     const audioIndicator = new AlertIndicatorElement();
     const recordingIndicator = new AlertIndicatorElement();

chrome/browser/resources/tab_strip/custom_element.js

@@ -14,4 +14,20 @@ export class CustomElement extends HTMLElement {
     template.innerHTML = this.constructor.template || '';
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
+
+  /**
+   * @param {string} query
+   * @return {?Element}
+   */
+  $(query) {
+    return this.shadowRoot.querySelector(query);
+  }
+
+  /**
+   * @param {string} query
+   * @return {!NodeList<!Element>}
+   */
+  $all(query) {
+    return this.shadowRoot.querySelectorAll(query);
+  }
 }

chrome/browser/resources/tab_strip/tab.js

@@ -53,39 +53,32 @@ export class TabElement extends CustomElement {
     super();
 
     this.alertIndicatorsEl_ = /** @type {!AlertIndicatorsElement} */
-        (this.shadowRoot.querySelector('tabstrip-alert-indicators'));
+        (this.$('tabstrip-alert-indicators'));
     // Normally, custom elements will get upgraded automatically once added to
     // the DOM, but TabElement may need to update properties on
     // AlertIndicatorElement before this happens, so upgrade it manually.
     customElements.upgrade(this.alertIndicatorsEl_);
 
     /** @private {!HTMLElement} */
-    this.closeButtonEl_ =
-        /** @type {!HTMLElement} */ (this.shadowRoot.querySelector('#close'));
+    this.closeButtonEl_ = /** @type {!HTMLElement} */ (this.$('#close'));
     this.closeButtonEl_.setAttribute(
         'aria-label', loadTimeData.getString('closeTab'));
 
     /** @private {!HTMLElement} */
-    this.dragImageEl_ =
-        /** @type {!HTMLElement} */ (
-            this.shadowRoot.querySelector('#dragImage'));
+    this.dragImageEl_ = /** @type {!HTMLElement} */ (this.$('#dragImage'));
 
     /** @private {!HTMLElement} */
-    this.tabEl_ =
-        /** @type {!HTMLElement} */ (this.shadowRoot.querySelector('#tab'));
+    this.tabEl_ = /** @type {!HTMLElement} */ (this.$('#tab'));
 
     /** @private {!HTMLElement} */
-    this.faviconEl_ =
-        /** @type {!HTMLElement} */ (this.shadowRoot.querySelector('#favicon'));
+    this.faviconEl_ = /** @type {!HTMLElement} */ (this.$('#favicon'));
 
     /** @private {!HTMLElement} */
     this.thumbnailContainer_ =
-        /** @type {!HTMLElement} */ (
-            this.shadowRoot.querySelector('#thumbnail'));
+        /** @type {!HTMLElement} */ (this.$('#thumbnail'));
 
     /** @private {!Image} */
-    this.thumbnail_ =
-        /** @type {!Image} */ (this.shadowRoot.querySelector('#thumbnailImg'));
+    this.thumbnail_ = /** @type {!Image} */ (this.$('#thumbnailImg'));
 
     /** @private {!TabData} */
     this.tab_;
@@ -97,8 +90,7 @@ export class TabElement extends CustomElement {
     this.embedderApi_ = TabStripEmbedderProxy.getInstance();
 
     /** @private {!HTMLElement} */
-    this.titleTextEl_ = /** @type {!HTMLElement} */ (
-        this.shadowRoot.querySelector('#titleText'));
+    this.titleTextEl_ = /** @type {!HTMLElement} */ (this.$('#titleText'));
 
     this.tabEl_.addEventListener('click', () => this.onClick_());
     this.tabEl_.addEventListener('contextmenu', e => this.onContextMenu_(e));

chrome/browser/resources/tab_strip/tab_group.js

@@ -14,7 +14,7 @@ export class TabGroupElement extends CustomElement {
    * @param {!TabGroupVisualData} visualData
    */
   updateVisuals(visualData) {
-    this.shadowRoot.querySelector('#title').innerText = visualData.title;
+    this.$('#title').innerText = visualData.title;
     this.style.setProperty('--tabstrip-tab-group-color-rgb', visualData.color);
     this.style.setProperty(
         '--tabstrip-tab-group-text-color-rgb', visualData.textColor);

chrome/browser/resources/tab_strip/tab_list.js

@@ -126,12 +126,10 @@ class TabListElement extends CustomElement {
 
     /** @private {!Element} */
     this.newTabButtonElement_ =
-        /** @type {!Element} */ (
-            this.shadowRoot.querySelector('#newTabButton'));
+        /** @type {!Element} */ (this.$('#newTabButton'));
 
     /** @private {!Element} */
-    this.pinnedTabsElement_ =
-        /** @type {!Element} */ (this.shadowRoot.querySelector('#pinnedTabs'));
+    this.pinnedTabsElement_ = /** @type {!Element} */ (this.$('#pinnedTabs'));
 
     /** @private {!TabStripEmbedderProxy} */
     this.tabStripEmbedderProxy_ = TabStripEmbedderProxy.getInstance();
@@ -141,8 +139,7 @@ class TabListElement extends CustomElement {
 
     /** @private {!Element} */
     this.unpinnedTabsElement_ =
-        /** @type {!Element} */ (
-            this.shadowRoot.querySelector('#unpinnedTabs'));
+        /** @type {!Element} */ (this.$('#unpinnedTabs'));
 
     /** @private {!Array<!WebUIListener>} */
     this.webUIListeners_ = [];
@@ -183,10 +180,9 @@ class TabListElement extends CustomElement {
     });
 
     if (loadTimeData.getBoolean('showDemoOptions')) {
-      this.shadowRoot.querySelector('#demoOptions').style.display = 'block';
+      this.$('#demoOptions').style.display = 'block';
 
-      const autoCloseCheckbox =
-          this.shadowRoot.querySelector('#autoCloseCheckbox');
+      const autoCloseCheckbox = this.$('#autoCloseCheckbox');
       autoCloseCheckbox.checked = tabStripOptions.autoCloseEnabled;
       autoCloseCheckbox.addEventListener('change', () => {
         tabStripOptions.autoCloseEnabled = autoCloseCheckbox.checked;
@@ -335,7 +331,7 @@ class TabListElement extends CustomElement {
    */
   findTabElement_(tabId) {
     return /** @type {?TabElement} */ (
-        this.shadowRoot.querySelector(`tabstrip-tab[data-tab-id="${tabId}"]`));
+        this.$(`tabstrip-tab[data-tab-id="${tabId}"]`));
   }
 
   /**
@@ -344,8 +340,8 @@ class TabListElement extends CustomElement {
    * @private
    */
   findTabGroupElement_(groupId) {
-    return /** @type {?TabGroupElement} */ (this.shadowRoot.querySelector(
-        `tabstrip-tab-group[data-group-id="${groupId}"]`));
+    return /** @type {?TabGroupElement} */ (
+        this.$(`tabstrip-tab-group[data-group-id="${groupId}"]`));
   }
 
   /** @private */
@@ -356,8 +352,7 @@ class TabListElement extends CustomElement {
 
   /** @private */
   fetchAndUpdateGroupData_() {
-    const tabGroupElements =
-        this.shadowRoot.querySelectorAll('tabstrip-tab-group');
+    const tabGroupElements = this.$all('tabstrip-tab-group');
     this.tabsApi_.getGroupVisualData().then(data => {
       tabGroupElements.forEach(tabGroupElement => {
         tabGroupElement.updateVisuals(
@@ -371,8 +366,7 @@ class TabListElement extends CustomElement {
    * @private
    */
   getActiveTab_() {
-    return /** @type {?TabElement} */ (
-        this.shadowRoot.querySelector('tabstrip-tab[active]'));
+    return /** @type {?TabElement} */ (this.$('tabstrip-tab[active]'));
   }
 
   /**
@@ -399,8 +393,7 @@ class TabListElement extends CustomElement {
           tabElement, this.pinnedTabsElement_.childNodes[modelIndex]);
     } else {
       let elementToInsert = tabElement;
-      let elementAtIndex =
-          this.shadowRoot.querySelectorAll('tabstrip-tab').item(modelIndex);
+      let elementAtIndex = this.$all('tabstrip-tab').item(modelIndex);
       let parentElement = this.unpinnedTabsElement_;
 
       if (tabElement.tab.groupId) {
@@ -526,8 +519,7 @@ class TabListElement extends CustomElement {
     }
 
     const dragOverIndex =
-        Array.from(this.shadowRoot.querySelectorAll('tabstrip-tab'))
-            .indexOf(dragOverTabElement);
+        Array.from(this.$all('tabstrip-tab')).indexOf(dragOverTabElement);
     this.tabsApi_.moveTab(this.draggedItem_.tab.id, dragOverIndex);
   }
 
@@ -556,7 +548,7 @@ class TabListElement extends CustomElement {
     // document. When the tab strip first gains keyboard focus, no such event
     // exists yet, so the outline needs to be explicitly set to visible.
     this.focusOutlineManager_.visible = true;
-    this.shadowRoot.querySelector('tabstrip-tab').focus();
+    this.$('tabstrip-tab').focus();
   }
 
   /**
@@ -575,8 +567,7 @@ class TabListElement extends CustomElement {
     // have updated a Tab to have an active state. For example, if a
     // tab is created with an already active state, there may be 2 active
     // TabElements: the newly created tab and the previously active tab.
-    this.shadowRoot.querySelectorAll('tabstrip-tab[active]')
-        .forEach((previouslyActiveTab) => {
+    this.$all('tabstrip-tab[active]').forEach((previouslyActiveTab) => {
       if (previouslyActiveTab.tab.id !== tabId) {
         previouslyActiveTab.tab = /** @type {!TabData} */ (
             Object.assign({}, previouslyActiveTab.tab, {active: false}));
@@ -644,8 +635,7 @@ class TabListElement extends CustomElement {
     }
     tabGroupElement.remove();
 
-    let elementAtIndex =
-        this.shadowRoot.querySelectorAll('tabstrip-tab')[index];
+    let elementAtIndex = this.$all('tabstrip-tab')[index];
     if (elementAtIndex && elementAtIndex.parentElement &&
         isTabGroupElement(elementAtIndex.parentElement)) {
       elementAtIndex = elementAtIndex.parentElement;