Save diff mode preference when toggled

Introduce the gr-diff-mode-selector which componentizes the diff mode
buttons already used in the file list and adds them to the diff view.
With this new component, when authenticated users change their diff
preference using the new selector (or by the 'm' keyboard shortcut), the
new mode is saved to their preferences. Unauthenticated users see no
change in diff mode preference persistence.

The diff selector is now consistently labeled as "Diff view" rather than
as "Diff views".

Bug: Issue 8144
Change-Id: I4b30714deb9a466e707b3d4ae90c1d4c60222c64

polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html

@@ -18,6 +18,7 @@ limitations under the License.
 <link rel="import" href="../../../behaviors/gr-patch-set-behavior/gr-patch-set-behavior.html">
 <link rel="import" href="../../../styles/shared-styles.html">
 <link rel="import" href="../../core/gr-navigation/gr-navigation.html">
+<link rel="import" href="../../diff/gr-diff-mode-selector/gr-diff-mode-selector.html">
 <link rel="import" href="../../diff/gr-patch-range-select/gr-patch-range-select.html">
 <link rel="import" href="../../edit/gr-edit-controls/gr-edit-controls.html">
 <link rel="import" href="../../shared/gr-editable-label/gr-editable-label.html">
@@ -99,9 +100,6 @@ limitations under the License.
       .expanded #expandBtn {
         display: none;
       }
-      gr-button.selected iron-icon {
-        color: var(--color-link);
-      }
       gr-linked-chip {
         --linked-chip-text-color: black;
       }
@@ -232,21 +230,11 @@ limitations under the License.
         </template>
         <div class="fileViewActions">
           <span class="separator"></span>
-          <span>Diff Views:</span>
-          <gr-button
-              id="sideBySideBtn"
-              link
-              has-tooltip
-              title="Side-by-side diff"
-              class$="[[_computeSelectedClass(diffViewMode, _VIEW_MODES.SIDE_BY_SIDE)]]"
-              on-tap="_handleSideBySideTap"><iron-icon icon="gr-icons:side-by-side"></iron-icon></gr-button>
-          <gr-button
-              id="unifiedBtn"
-              link
-              has-tooltip
-              title="Unified dff"
-              class$="[[_computeSelectedClass(diffViewMode, _VIEW_MODES.UNIFIED)]]"
-              on-tap="_handleUnifiedTap"><iron-icon icon="gr-icons:unified"></iron-icon></gr-button>
+          <span>Diff view:</span>
+          <gr-diff-mode-selector
+              id="modeSelect"
+              mode="{{diffViewMode}}"
+              save-on-change="[[loggedIn]]"></gr-diff-mode-selector>
           <span id="diffPrefsContainer"
               class="hideOnEdit"
               hidden$="[[_computePrefsButtonHidden(diffPrefs, loggedIn)]]"

polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.js

@@ -56,15 +56,6 @@
         type: Boolean,
         computed: '_computeDescriptionReadOnly(loggedIn, change, account)',
       },
-      /** @type {?} */
-      _VIEW_MODES: {
-        type: Object,
-        readOnly: true,
-        value: {
-          SIDE_BY_SIDE: 'SIDE_BY_SIDE',
-          UNIFIED: 'UNIFIED_DIFF',
-        },
-      },
       _revisionInfo: {
         type: Object,
         computed: '_getRevisionInfo(change)',
@@ -79,6 +70,10 @@
       '_computePatchSetDescription(change, patchNum)',
     ],
 
+    setDiffViewMode(mode) {
+      this.$.modeSelect.setMode(mode);
+    },
+
     _expandAllDiffs() {
       this._expanded = true;
       this.fire('expand-diffs');
@@ -89,10 +84,6 @@
       this.fire('collapse-diffs');
     },
 
-    _computeSelectedClass(diffViewMode, buttonViewMode) {
-      return buttonViewMode === diffViewMode ? 'selected' : '';
-    },
-
     _computeExpandedClass(filesExpanded) {
       const classes = [];
       if (filesExpanded === GrFileListConstants.FilesExpandedState.ALL) {
@@ -105,14 +96,6 @@
       return classes.join(' ');
     },
 
-    _handleSideBySideTap() {
-      this.diffViewMode = this._VIEW_MODES.SIDE_BY_SIDE;
-    },
-
-    _handleUnifiedTap() {
-      this.diffViewMode = this._VIEW_MODES.UNIFIED;
-    },
-
     _computeDescriptionPlaceholder(readOnly) {
       return (readOnly ? 'No' : 'Add') + ' patchset description';
     },

polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_test.html

@@ -194,19 +194,6 @@ limitations under the License.
       });
     });
 
-    test('diff mode selector is set correctly', () => {
-      const sideBySideBtn = element.$.sideBySideBtn;
-      const unifiedBtn = element.$.unifiedBtn;
-      element.diffViewMode = 'SIDE_BY_SIDE';
-      flushAsynchronousOperations();
-      assert.isTrue(sideBySideBtn.classList.contains('selected'));
-      assert.isFalse(unifiedBtn.classList.contains('selected'));
-      element.diffViewMode = 'UNIFIED_DIFF';
-      flushAsynchronousOperations();
-      assert.isFalse(sideBySideBtn.classList.contains('selected'));
-      assert.isTrue(unifiedBtn.classList.contains('selected'));
-    });
-
     test('fileViewActions are properly hidden', () => {
       const actions = element.$$('.fileViewActions');
       assert.equal(getComputedStyle(actions).display, 'none');