Use paper-tabs for download commands

Bug: Issue 9175
Change-Id: Ie283da74e96ea0b426836edbd686fa9b52ded96c

polygerrit-ui/app/elements/shared/gr-download-commands/gr-download-commands.html

@@ -15,8 +15,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="../../../behaviors/rest-client-behavior/rest-client-behavior.html">
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
+
+
+<link rel="import" href="../../../behaviors/rest-client-behavior/rest-client-behavior.html">
+<link rel="import" href="../../../bower_components/paper-tabs/paper-tabs.html">
 <link rel="import" href="../../shared/gr-copy-clipboard/gr-copy-clipboard.html">
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
 <link rel="import" href="../../../styles/shared-styles.html">
@@ -24,17 +27,15 @@ limitations under the License.
 <dom-module id="gr-download-commands">
   <template>
     <style include="shared-styles">
-      ul {
-        list-style: none;
+      paper-tabs {
+        height: 3rem;
         margin-bottom: .5em;
+        --paper-tabs-selection-bar-color: var(--link-color);
       }
-      li {
-        display: inline-block;
-        margin: 0;
-        padding: 0;
-      }
-      li gr-button {
-        margin-right: 1em;
+      paper-tab {
+        max-width: 15rem;
+        text-transform: uppercase;
+        --paper-tab-ink: var(--link-color);
       }
       label,
       input {
@@ -43,11 +44,6 @@ limitations under the License.
       label {
         font-family: var(--font-family-bold);
       }
-      li[selected] gr-button {
-        color: var(--primary-text-color);
-        font-family: var(--font-family-bold);
-        text-decoration: none;
-      }
       .schemes {
         display: flex;
         justify-content: space-between;
@@ -55,23 +51,25 @@ limitations under the License.
       .commands {
         display: flex;
         flex-direction: column;
-        padding: .5em;
       }
       gr-copy-clipboard {
         width: 60em;
         margin-bottom: .5em;
       }
+      .hidden {
+        display: none;
+      }
     </style>
     <div class="schemes">
-      <ul hidden$="[[!schemes.length]]" hidden>
+      <paper-tabs
+          id="downloadTabs"
+          class$="[[_computeShowTabs(schemes)]]"
+          selected="[[_computeSelected(schemes, selectedScheme)]]"
+          on-selected-changed="_handleTabChange">
         <template is="dom-repeat" items="[[schemes]]" as="scheme">
-          <li selected$="[[_computeSelected(scheme, selectedScheme)]]">
-            <gr-button link data-scheme$="[[scheme]]" on-tap="_handleSchemeTap">
-              [[scheme]]
-            </gr-button>
-          </li>
+          <paper-tab data-scheme$="[[scheme]]">[[scheme]]</paper-tab>
         </template>
-      </ul>
+      </paper-tabs>
     </div>
     <div class="commands" hidden$="[[!schemes.length]]" hidden>
       <template is="dom-repeat"

polygerrit-ui/app/elements/shared/gr-download-commands/gr-download-commands.js

@@ -61,17 +61,24 @@
       });
     },
 
-    _computeSelected(item, selectedItem) {
-      return item === selectedItem;
+    _handleTabChange(e) {
+      const scheme = this.schemes[e.detail.value];
+      if (scheme && scheme !== this.selectedScheme) {
+        this.set('selectedScheme', scheme);
+        if (this._loggedIn) {
+          this.$.restAPI.savePreferences(
+              {download_scheme: this.selectedScheme});
+        }
+      }
     },
 
-    _handleSchemeTap(e) {
-      e.preventDefault();
-      const el = Polymer.dom(e).localTarget;
-      this.selectedScheme = el.getAttribute('data-scheme');
-      if (this._loggedIn) {
-        this.$.restAPI.savePreferences({download_scheme: this.selectedScheme});
-      }
+    _computeSelected(schemes, selectedScheme) {
+      return (schemes.findIndex(scheme => scheme === selectedScheme) || 0)
+          + '';
+    },
+
+    _computeShowTabs(schemes) {
+      return schemes.length > 1 ? '' : 'hidden';
     },
   });
 })();

polygerrit-ui/app/elements/shared/gr-download-commands/gr-download-commands_test.html

@@ -81,30 +81,21 @@ limitations under the License.
       });
 
       test('element visibility', () => {
-        assert.isFalse(element.$$('ul').hasAttribute('hidden'));
-        assert.isFalse(element.$$('.commands').hasAttribute('hidden'));
+        assert.isFalse(isHidden(element.$$('paper-tabs')));
+        assert.isFalse(isHidden(element.$$('.commands')));
 
         element.schemes = [];
-        assert.isTrue(element.$$('ul').hasAttribute('hidden'));
-        assert.isTrue(element.$$('.commands').hasAttribute('hidden'));
+        assert.isTrue(isHidden(element.$$('paper-tabs')));
+        assert.isTrue(isHidden(element.$$('.commands')));
       });
 
       test('tab selection', () => {
-        flushAsynchronousOperations();
-        let el = element.$$('[data-scheme="http"]').parentElement;
-        assert.isTrue(el.hasAttribute('selected'));
-        for (const scheme of ['repo', 'ssh']) {
-          const el = element.$$('[data-scheme="' + scheme + '"]').parentElement;
-          assert.isFalse(el.hasAttribute('selected'));
-        }
-
+        assert.equal(element.$.downloadTabs.selected, '0');
         MockInteractions.tap(element.$$('[data-scheme="ssh"]'));
-        el = element.$$('[data-scheme="ssh"]').parentElement;
-        assert.isTrue(el.hasAttribute('selected'));
-        for (const scheme of ['http', 'repo']) {
-          const el = element.$$('[data-scheme="' + scheme + '"]').parentElement;
-          assert.isFalse(el.hasAttribute('selected'));
-        }
+        flushAsynchronousOperations();
+
+        assert.equal(element.selectedScheme, 'ssh');
+        assert.equal(element.$.downloadTabs.selected, '2');
       });
 
       test('loads scheme from preferences', done => {
@@ -136,18 +127,18 @@ limitations under the License.
 
       test('saves scheme to preferences', () => {
         element._loggedIn = true;
-        const savePrefsStub = sinon.stub(element.$.restAPI, 'savePreferences',
+        const savePrefsStub = sandbox.stub(element.$.restAPI, 'savePreferences',
             () => { return Promise.resolve(); });
 
         flushAsynchronousOperations();
 
-        const firstSchemeButton = element.$$('li gr-button[data-scheme]');
+        const repoTab = element.$$('paper-tab[data-scheme="repo"]');
 
-        MockInteractions.tap(firstSchemeButton);
+        MockInteractions.tap(repoTab);
 
         assert.isTrue(savePrefsStub.called);
         assert.equal(savePrefsStub.lastCall.args[0].download_scheme,
-            firstSchemeButton.getAttribute('data-scheme'));
+            repoTab.getAttribute('data-scheme'));
       });
     });
   });