Settings WebUI: replace paper-tabs with cr-tabs

Bug: 960564
Change-Id: Ica6b02cfca8e95e5e41871153359fe36f33c0599
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1613372
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#660951}

chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_tabs_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_tabs/cr_tabs.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-tabs/paper-tabs.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="clear_browsing_data_browser_proxy.html">
 <link rel="import" href="history_deletion_dialog.html">
@@ -19,7 +18,7 @@
 
 <dom-module id="settings-clear-browsing-data-dialog">
   <template>
-    <style include="settings-shared paper-tabs-style">
+    <style include="settings-shared">
       :host {
         /* Fixed height to allow multiple tabs with different height.
          * The last entry in the advanced tab should show half an entry.
@@ -84,11 +83,9 @@
         --settings-checkbox-margin-top: 12px;
       }
 
-      paper-tabs {
-        --paper-tabs: {
-          font-size: 100%;
-          height: 40px;
-        }
+      cr-tabs {
+        --cr-tabs-font-size: 100%;
+        --cr-tabs-height: 40px;
       }
 
       .time-range-row {
@@ -121,11 +118,9 @@
         <div>$i18n{clearBrowsingData}</div>
       </div>
       <div slot="header">
-        <paper-tabs noink on-selected-changed="recordTabChange_" autoselect
-            selected="{{prefs.browser.last_clear_browsing_data_tab.value}}">
-          <paper-tab id="basicTabTitle">$i18n{basicPageTitle}</paper-tab>
-          <paper-tab id="advancedTabTitle">$i18n{advancedPageTitle}</paper-tab>
-        </paper-tabs>
+        <cr-tabs tab-names="[[tabsNames_]]"
+            selected="{{prefs.browser.last_clear_browsing_data_tab.value}}"
+            on-selected-changed="recordTabChange_"></cr-tabs>
       </div>
       <div slot="body">
         <iron-pages id="tabs"

chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.js

@@ -9,7 +9,10 @@
 Polymer({
   is: 'settings-clear-browsing-data-dialog',
 
-  behaviors: [WebUIListenerBehavior, settings.RouteObserverBehavior],
+  behaviors: [
+    WebUIListenerBehavior,
+    settings.RouteObserverBehavior,
+  ],
 
   properties: {
     /**
@@ -145,7 +148,16 @@ Polymer({
     dialogOpenedTime_: {
       type: Number,
       value: 0,
-    }
+    },
+
+    /** @private {Array<string>} */
+    tabsNames_: {
+      type: Array,
+      value: () =>
+          [loadTimeData.getString('basicPageTitle'),
+           loadTimeData.getString('advancedPageTitle'),
+],
+    },
   },
 
   listeners: {'settings-boolean-control-change': 'updateClearButtonState_'},

chrome/browser/resources/settings/device_page/display.html

@@ -2,8 +2,8 @@
 
 <link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_tabs/cr_tabs.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_tabs_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
@@ -11,7 +11,6 @@
 <link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-tabs/paper-tabs.html">
 <link rel="import" href="display_layout.html">
 <link rel="import" href="display_overscan_dialog.html">
 <link rel="import" href="night_light_slider.html">
@@ -23,7 +22,7 @@
 
 <dom-module id="settings-display">
   <template>
-    <style include="settings-shared md-select iron-flex iron-flex-alignment paper-tabs-style">
+    <style include="settings-shared md-select iron-flex iron-flex-alignment">
       .indented {
         align-self: stretch;
         margin-inline-start: var(--cr-section-indent-padding);
@@ -93,12 +92,9 @@
 
     </div>
     <div hidden="[[!hasMultipleDisplays_(displays)]]" class="settings-box">
-      <paper-tabs noink selected="[[selectedDisplay.id]]" class="display-tabs"
-          on-iron-select="onSelectDisplayTab_" attr-for-selected="display-id">
-        <template is="dom-repeat" items="[[displays]]">
-          <paper-tab display-id="[[item.id]]">[[item.name]]</paper-tab>
-        </template>
-      </paper-tabs>
+      <cr-tabs selected="[[selectedTab_]]" class="display-tabs"
+          on-selected-changed="onSelectDisplayTab_"
+          tab-names="[[displayTabNames_]]"></cr-tabs>
     </div>
     <div hidden="[[hasMultipleDisplays_(displays)]]"
         class="settings-box line-only"></div>

chrome/browser/resources/settings/device_page/display.js

@@ -182,6 +182,12 @@ Polymer({
 
     /** @private */
     logicalResolutionText_: String,
+
+    /** @private {!Array<string>} */
+    displayTabNames_: Array,
+
+    /** @private */
+    selectedTab_: Number,
   },
 
   observers: [
@@ -275,6 +281,7 @@ Polymer({
   displayLayoutFetched_: function(displays, layouts) {
     this.layouts = layouts;
     this.displays = displays;
+    this.displayTabNames_ = displays.map(({name}) => name);
     this.updateDisplayInfo_();
   },
 
@@ -458,6 +465,7 @@ Polymer({
     // Set |selectedDisplay| first since only the resolution slider depends
     // on |selectedModePref_|.
     this.selectedDisplay = selectedDisplay;
+    this.selectedTab_ = this.displays.indexOf(this.selectedDisplay);
 
     // Now that everything is in sync, set the selected mode to its correct
     // value right before updating the pref.
@@ -739,14 +747,12 @@ Polymer({
     }
   },
 
-  /**
-   * Handles event when a display tab is selected.
-   * @param {!CustomEvent<!{item: !{displayId: string}}>} e
-   * @private
-   */
-  onSelectDisplayTab_: function(e) {
-    this.onSelectDisplay_(
-        new CustomEvent('select-display', {detail: e.detail.item.displayId}));
+  /** @private */
+  onSelectDisplayTab_: function() {
+    const {selected} = this.$$('cr-tabs');
+    if (this.selectedTab_ != selected) {
+      this.setSelectedDisplay_(this.displays[selected]);
+    }
   },
 
   /**

chrome/test/data/webui/cr_elements/cr_tabs_test.js

@@ -40,7 +40,13 @@ suite('cr_tabs_test', function() {
     const tabElement = getTabElement(expectedSelection);
     assertTrue(!!tabElement);
     assertTrue(tabElement.classList.contains('selected'));
+    assertEquals('0', tabElement.getAttribute('tabindex'));
     assertEquals(getDeepActiveElement(), tabElement);
+    const notSelected = tabs.shadowRoot.querySelectorAll('.tab:not(.selected)');
+    assertEquals(2, notSelected.length);
+    notSelected.forEach(tab => {
+      assertEquals('-1', tab.getAttribute('tabindex'));
+    });
   }
 
   /**

chrome/test/data/webui/settings/certificate_manager_test.js

@@ -648,7 +648,7 @@ cr.define('certificate_manager', function() {
      */
     test('Initialization', function() {
       // Trigger all category tabs to be added to the DOM.
-      const paperTabsElement = page.shadowRoot.querySelector('paper-tabs');
+      const paperTabsElement = page.shadowRoot.querySelector('cr-tabs');
       paperTabsElement.selected = CertificateCategoryIndex.PERSONAL;
       Polymer.dom.flush();
       paperTabsElement.selected = CertificateCategoryIndex.SERVER;

chrome/test/data/webui/settings/privacy_page_test.js

@@ -477,10 +477,6 @@ cr.define('settings_privacy_page', function() {
         assertTrue(!!actionButton);
         const cookieCheckboxBasic = element.$$('#cookiesCheckboxBasic');
         assertTrue(!!cookieCheckboxBasic);
-        const basicTab = element.$$('#basicTabTitle');
-        assertTrue(!!basicTab);
-        const advancedTab = element.$$('#advancedTabTitle');
-        assertTrue(!!advancedTab);
         // Initially the button is disabled because all checkboxes are off.
         assertTrue(actionButton.disabled);
         // The button gets enabled if any checkbox is selected.
@@ -488,10 +484,10 @@ cr.define('settings_privacy_page', function() {
         assertTrue(cookieCheckboxBasic.checked);
         assertFalse(actionButton.disabled);
         // Switching to advanced disables the button.
-        advancedTab.click();
+        element.$$('cr-tabs').selected = 1;
         assertTrue(actionButton.disabled);
         // Switching back enables it again.
-        basicTab.click();
+        element.$$('cr-tabs').selected = 0;
         assertFalse(actionButton.disabled);
       });
 

ui/webui/resources/cr_components/certificate_manager/certificate_manager.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_tabs/cr_tabs.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_tabs_style_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-tabs/paper-tabs.html">
 <link rel="import" href="ca_trust_edit_dialog.html">
 <link rel="import" href="certificate_delete_confirmation_dialog.html">
 <link rel="import" href="certificate_list.html">
@@ -19,10 +18,10 @@
 
 <dom-module id="certificate-manager">
   <template>
-    <style include="cr-hidden-style paper-tabs-style">
-      paper-tabs {
-        font-size: inherit;
-        height: 40px;
+    <style include="cr-hidden-style">
+      cr-tabs {
+        --cr-tabs-font-size: inherit;
+        --cr-tabs-height: 40px;
         margin-bottom: 24px;
       }
     </style>
@@ -51,14 +50,7 @@
       </certificates-error-dialog>
     </template>
 
-    <paper-tabs noink selected="{{selected}}">
-      <paper-tab>[[i18n('certificateManagerYourCertificates')]]</paper-tab>
-      <paper-tab hidden="[[isKiosk_]]">[[i18n('certificateManagerServers')]]
-      </paper-tab>
-      <paper-tab hidden="[[isKiosk_]]">[[i18n('certificateManagerAuthorities')]]
-      </paper-tab>
-      <paper-tab>[[i18n('certificateManagerOthers')]]</paper-tab>
-    </paper-tabs>
+    <cr-tabs selected="{{selected}}" tab-names="[[tabNames_]]"></cr-tabs>
     <iron-pages selected="[[selected]]">
       <div>
         <certificate-list id="personalCerts"

ui/webui/resources/cr_components/certificate_manager/certificate_manager.js

@@ -115,6 +115,12 @@ Polymer({
             loadTimeData.getBoolean('isKiosk');
       },
     },
+
+    /** @private {!Array<string>} */
+    tabNames_: {
+      type: Array,
+      computed: 'computeTabNames_(isKiosk_)',
+    },
   },
 
   /** @override */
@@ -214,4 +220,21 @@ Polymer({
       });
     });
   },
+
+  /**
+   * @return {!Array<string>}
+   * @private
+   */
+  computeTabNames_: function() {
+    return [
+      loadTimeData.getString('certificateManagerYourCertificates'),
+      ...(this.isKiosk_ ?
+              [] :
+              [
+                loadTimeData.getString('certificateManagerServers'),
+                loadTimeData.getString('certificateManagerAuthorities'),
+              ]),
+      loadTimeData.getString('certificateManagerOthers'),
+    ];
+  },
 });

ui/webui/resources/cr_elements/cr_tabs/cr_tabs.html

@@ -72,13 +72,8 @@
         transition-timing-function: cubic-bezier(0, 0, .2, 1);
       }
     </style>
-    <template is="dom-repeat" items="[[tabNames]]"
-        on-dom-change="updateSelectionBar_">
-      <div class$="tab [[getCssClass_(index, selected)]]" role="tab"
-          aria-selected$="[[getAriaSelected_(index, selected)]]"
-          tabindex$="[[getTabIndex_(index, selected)]]" on-click="onTabClick_">
-        [[item]]
-      </div>
+    <template is="dom-repeat" items="[[tabNames]]" on-dom-change="updateUi_">
+      <div class="tab" role="tab" on-click="onTabClick_">[[item]]</div>
     </template>
     <div id="selectionBar"></div>
   </template>

ui/webui/resources/cr_elements/cr_tabs/cr_tabs.js

@@ -36,7 +36,7 @@ Polymer({
     selected: {
       type: Number,
       notify: true,
-      observer: 'updateSelectionBar_',
+      observer: 'updateUi_',
     },
   },
 
@@ -59,33 +59,6 @@ Polymer({
     this.isRtl_ = this.matches(':host-context([dir=rtl]) cr-tabs');
   },
 
-  /**
-   * @param {number} index
-   * @return {string}
-   * @private
-   */
-  getAriaSelected_: function(index) {
-    return this.selected == index ? 'true' : 'false';
-  },
-
-  /**
-   * @param {number} index
-   * @return {string}
-   * @private
-   */
-  getCssClass_: function(index) {
-    return this.selected == index ? 'selected' : '';
-  },
-
-  /**
-   * @param {number} index
-   * @return {number}
-   * @private
-   */
-  getTabIndex_: function(index) {
-    return this.selected == index ? 0 : -1;
-  },
-
   /**
    * @param {!KeyboardEvent} e
    * @private
@@ -122,7 +95,7 @@ Polymer({
    * @param {number} width
    * @private
    */
-  transformSelectionBar_: function(left, width) {
+  updateSelectionBar_: function(left, width) {
     const containerWidth = this.offsetWidth;
     const leftPercent = 100 * left / containerWidth;
     const widthRatio = width / containerWidth;
@@ -131,38 +104,59 @@ Polymer({
   },
 
   /** @private */
-  updateSelectionBar_: function() {
-    const selectedTab = this.$$('.selected');
-    if (!selectedTab) {
+  updateUi_: function() {
+    const tabs = this.shadowRoot.querySelectorAll('.tab');
+    // Tabs are not rendered yet by dom-repeat. Skip this update since
+    // dom-repeat will fire a dom-change event when it is ready.
+    if (tabs.length == 0) {
+      return;
+    }
+
+    tabs.forEach((tab, i) => {
+      const isSelected = this.selected == i;
+      if (isSelected) {
+        tab.focus();
+      }
+      tab.classList.toggle('selected', isSelected);
+      tab.setAttribute('aria-selected', isSelected);
+      tab.setAttribute('tabindex', isSelected ? 0 : -1);
+    });
+
+    if (this.selected == undefined) {
       return;
     }
 
-    selectedTab.focus();
     this.$.selectionBar.classList.remove('expand', 'contract');
-    const {offsetLeft: selectedLeft, offsetWidth: selectedWidth} = selectedTab;
     const oldValue = this.lastSelected_;
     this.lastSelected_ = this.selected;
 
     // If there is no previously selected tab or the tab has not changed,
     // underline the selected tab instantly.
     if (oldValue == null || oldValue == this.selected) {
-      this.transformSelectionBar_(selectedLeft, selectedWidth);
+      // When handling the initial 'dom-change' event, it's possible for the
+      // selected tab to exist and not yet be fully rendered. This will result
+      // in the selection bar not rendering correctly.
+      setTimeout(() => {
+        const {offsetLeft, offsetWidth} = tabs[this.selected];
+        this.updateSelectionBar_(offsetLeft, offsetWidth);
+      });
       return;
     }
 
+    const {offsetLeft: newLeft, offsetWidth: newWidth} = tabs[this.selected];
+    const {offsetLeft: oldLeft, offsetWidth: oldWidth} = tabs[oldValue];
+
     // Expand bar to underline the last selected tab, the newly selected tab and
     // everything in between. After expansion is complete, contract bar to
     // underline the selected tab.
     this.$.selectionBar.classList.add('expand');
     this.$.selectionBar.addEventListener('transitionend', () => {
       this.$.selectionBar.classList.replace('expand', 'contract');
-      this.transformSelectionBar_(selectedLeft, selectedWidth);
+      this.updateSelectionBar_(newLeft, newWidth);
     }, {once: true});
 
-    const {offsetLeft: lastLeft, offsetWidth: lastWidth} =
-        this.$$(`.tab:nth-of-type(${oldValue + 1})`);
-    const left = Math.min(selectedLeft, lastLeft);
-    const right = Math.max(selectedLeft + selectedWidth, lastLeft + lastWidth);
-    this.transformSelectionBar_(left, right - left);
+    const left = Math.min(newLeft, oldLeft);
+    const right = Math.max(newLeft + newWidth, oldLeft + oldWidth);
+    this.updateSelectionBar_(left, right - left);
   },
 });