Update the diff mode switcher to use gr-select

Change-Id: I8cdbd4954be759a2fd3901e987b4d73c50983443

polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html

@@ -20,6 +20,7 @@ limitations under the License.
 <link rel="import" href="../../shared/gr-button/gr-button.html">
 <link rel="import" href="../../shared/gr-overlay/gr-overlay.html">
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
+<link rel="import" href="../../shared/gr-select/gr-select.html">
 <link rel="import" href="../gr-diff/gr-diff.html">
 <link rel="import" href="../gr-diff-cursor/gr-diff-cursor.html">
 <link rel="import" href="../gr-diff-preferences/gr-diff-preferences.html">
@@ -176,7 +177,8 @@ limitations under the License.
         <div>
           <select
               id="modeSelect"
-              on-change="_handleModeChange"
+              is="gr-select"
+              bind-value="{{changeViewState.diffMode}}"
               hidden$="[[_computeModeSelectHidden(_isImageDiff)]]">
             <option value="SIDE_BY_SIDE">Side By Side</option>
             <option value="UNIFIED_DIFF">Unified</option>

polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js

@@ -86,7 +86,6 @@
       '_getChangeDetail(_changeNum)',
       '_getProjectConfig(_change.project)',
       '_getFiles(_changeNum, _patchRange.*)',
-      '_updateModeSelect(_diffMode)',
     ],
 
     attached: function() {
@@ -427,10 +426,6 @@
       this.$.prefsOverlay.close();
     },
 
-    _handleModeChange: function(e) {
-      this.set('changeViewState.diffMode', this.$.modeSelect.value);
-    },
-
     /**
      * _getDiffViewMode: Get the diff view (side-by-side or unified) based on
      * the current state.
@@ -454,17 +449,6 @@
       return DiffViewMode.SIDE_BY_SIDE;
     },
 
-    /**
-     * Synchronize the mode select if it deviates from the selected mode state.
-     * This is mainly to keep it accurate when the page loads.
-     */
-    _updateModeSelect: function() {
-      var mode = this._getDiffViewMode();
-      if (this.$.modeSelect.value !== mode) {
-        this.$.modeSelect.value = mode;
-      }
-    },
-
     _computeModeSelectHidden: function() {
       return this._isImageDiff;
     },

polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html

@@ -377,20 +377,14 @@ limitations under the License.
       // We will simulate a user change of the selected mode.
       var newMode = 'UNIFIED_DIFF';
 
-      // Listen to the change handler.
-      var eventStub = sinon.spy(element, '_handleModeChange');
-
       // Set the actual value of the select, and simulate the change event.
       select.value = newMode;
       element.fire('change', {}, { node: select });
 
       // Make sure the handler was called and the state is still coherent.
-      assert.isTrue(eventStub.called);
       assert.equal(element._getDiffViewMode(), newMode);
       assert.equal(element._getDiffViewMode(), select.value);
       assert.equal(element._getDiffViewMode(), diffDisplay.viewMode);
-
-      eventStub.restore();
     });
   });
 </script>