Toggle diff view mode with 'm' key

Ieae237f9bb1 adds a keyboard shortcut to switch diff view modes in the
diff view. With this change, the key is changed from 'v' to 'm', support
is added to the change view as well as the diff view, and tests are
added.

Bug: Issue 8269
Change-Id: Ifeaa26bc1d6256809d58673232cf982b6faac400

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

@@ -49,6 +49,11 @@
     NEW_MESSAGE: 'There are new messages on this change',
   };
 
+  const DiffViewMode = {
+    SIDE_BY_SIDE: 'SIDE_BY_SIDE',
+    UNIFIED: 'UNIFIED_DIFF',
+  };
+
   Polymer({
     is: 'gr-change-view',
 
@@ -251,6 +256,7 @@
       'shift+r': '_handleCapitalRKey',
       'a': '_handleAKey',
       'd': '_handleDKey',
+      'm': '_handleMKey',
       's': '_handleSKey',
       'u': '_handleUKey',
       'x': '_handleXKey',
@@ -311,6 +317,18 @@
       });
     },
 
+    _handleMKey(e) {
+      if (this.shouldSuppressKeyboardShortcut(e) ||
+          this.modifierPressed(e)) { return; }
+
+      e.preventDefault();
+      if (this.viewState.diffMode === DiffViewMode.SIDE_BY_SIDE) {
+        this.set('viewState.diffMode', DiffViewMode.UNIFIED);
+      } else {
+        this.set('viewState.diffMode', DiffViewMode.SIDE_BY_SIDE);
+      }
+    },
+
     _handleEditCommitMessage(e) {
       this._editingCommitMessage = true;
       this.$.commitMessageEditor.focusTextarea();

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

@@ -257,6 +257,21 @@ limitations under the License.
         MockInteractions.pressAndReleaseKeyOn(element, 188, null, ',');
         assert.isTrue(stub.called);
       });
+
+      test('m should toggle diff mode', () => {
+        sandbox.stub(element, 'shouldSuppressKeyboardShortcut').returns(false);
+        const e = {preventDefault: () => {}};
+        flushAsynchronousOperations();
+
+        // Initial state.
+        element.viewState.diffMode = 'SIDE_BY_SIDE';
+
+        element._handleMKey(e);
+        assert.equal(element.viewState.diffMode, 'UNIFIED_DIFF');
+
+        element._handleMKey(e);
+        assert.equal(element.viewState.diffMode, 'SIDE_BY_SIDE');
+      });
     });
 
     suite('reloading drafts', () => {

polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog.html

@@ -377,6 +377,12 @@ limitations under the License.
             </td>
             <td>Hide/show left diff</td>
           </tr>
+          <tr>
+            <td>
+              <span class="key">m</span>
+            </td>
+            <td>Toggle unified/side-by-side diff</td>
+          </tr>
           <tr>
             <td>
               <span class="key">c</span>
@@ -451,6 +457,12 @@ limitations under the License.
             </td>
             <td>Hide/show left diff</td>
           </tr>
+          <tr>
+            <td>
+              <span class="key">m</span>
+            </td>
+            <td>Toggle unified/side-by-side diff</td>
+          </tr>
           <tr>
             <td>
               <span class="key">c</span>
@@ -486,12 +498,6 @@ limitations under the License.
             <td><span class="key">,</span></td>
             <td>Show diff preferences</td>
           </tr>
-         <tr>
-            <td>
-              <span class="key">v</span>
-            </td>
-            <td>Toggle Unified/Side-by-side diff</td>
-          </tr>
         </tbody>
       </table>
     </main>

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

@@ -25,6 +25,11 @@
     RIGHT: 'right',
   };
 
+  const DiffViewMode = {
+    SIDE_BY_SIDE: 'SIDE_BY_SIDE',
+    UNIFIED: 'UNIFIED_DIFF',
+  };
+
   Polymer({
     is: 'gr-diff-view',
 
@@ -186,7 +191,7 @@
       'a shift+a': '_handleAKey',
       'u': '_handleUKey',
       ',': '_handleCommaKey',
-      'v': '_handleVKey',
+      'm': '_handleMKey',
     },
 
     attached() {
@@ -426,15 +431,15 @@
       this.$.diffPreferences.open();
     },
 
-    _handleVKey(e) {
+    _handleMKey(e) {
       if (this.shouldSuppressKeyboardShortcut(e) ||
           this.modifierPressed(e)) { return; }
 
       e.preventDefault();
-      if (this.changeViewState.diffMode=='SIDE_BY_SIDE') {
-        this.set('changeViewState.diffMode', 'UNIFIED_DIFF');
+      if (this._getDiffViewMode() === DiffViewMode.SIDE_BY_SIDE) {
+        this.set('changeViewState.diffMode', DiffViewMode.UNIFIED);
       } else {
-        this.set('changeViewState.diffMode', 'SIDE_BY_SIDE');
+        this.set('changeViewState.diffMode', DiffViewMode.SIDE_BY_SIDE);
       }
     },
 

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

@@ -798,6 +798,19 @@ limitations under the License.
       assert.equal(element._getDiffViewMode(), 'SIDE_BY_SIDE');
     });
 
+    test('_handleMKey', () => {
+      sandbox.stub(element, 'shouldSuppressKeyboardShortcut').returns(false);
+      const e = {preventDefault: () => {}};
+      // Initial state.
+      assert.equal(element._getDiffViewMode(), 'SIDE_BY_SIDE');
+
+      element._handleMKey(e);
+      assert.equal(element._getDiffViewMode(), 'UNIFIED_DIFF');
+
+      element._handleMKey(e);
+      assert.equal(element._getDiffViewMode(), 'SIDE_BY_SIDE');
+    });
+
     suite('_loadComments', () => {
       test('empty', done => {
         element._loadComments().then(() => {