commit 74f531c6a698354f067e9934c2b82b85f14703a2
author Becky Siegel <beckysiegel@google.com> Fri Oct 07 17:22:16 2016 -0700
committer Becky Siegel <beckysiegel@google.com> Wed Oct 12 14:51:09 2016 -0700
tree d6a2872bfa91c0eb6f81024f083822311ec3b4c0
parent ac9bbe48179b8f85942265cbbcdaa97814216c69

Default to unified view on small screen sizes

Previously, the default view type was displayed for all screen sizes.
If side by side was the user's preference, and they viewed polygerrit
on mobile, side by side was displayed.

This change ignores user preference for small screen sizes (under 900
px wide). The user can still toggle to a split view, but unified will
be the first view shown.

Bug: Issue 4682
Change-Id: Id4e1cab17de433033e103c3cca582b7e9c656acf

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

diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js
index 6c73e08..cf819e8 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js
@@ -16,6 +16,8 @@
 
   var COMMIT_MESSAGE_PATH = '/COMMIT_MSG';
 
+  var MAX_UNIFIED_DEFAULT_WINDOW_WIDTH_PX = 900;
+
   var DiffViewMode = {
     SIDE_BY_SIDE: 'SIDE_BY_SIDE',
     UNIFIED: 'UNIFIED_DIFF',
@@ -106,12 +108,17 @@
       }.bind(this));
 
       if (this.changeViewState.diffMode === null) {
-        // Initialize with user's diff mode preference. Default to
-        // SIDE_BY_SIDE in the meantime.
-        this.set('changeViewState.diffMode', DiffViewMode.SIDE_BY_SIDE);
-        this.$.restAPI.getPreferences().then(function(prefs) {
-          this.set('changeViewState.diffMode', prefs.diff_view);
-        }.bind(this));
+        // If screen size is small, always default to unified view.
+        if (this._getWindowWidth() < MAX_UNIFIED_DEFAULT_WINDOW_WIDTH_PX) {
+          this.set('changeViewState.diffMode', DiffViewMode.UNIFIED);
+        } else {
+          // Initialize with user's diff mode preference. Default to
+          // SIDE_BY_SIDE in the meantime.
+          this.set('changeViewState.diffMode', DiffViewMode.SIDE_BY_SIDE);
+          this.$.restAPI.getPreferences().then(function(prefs) {
+            this.set('changeViewState.diffMode', prefs.diff_view);
+          }.bind(this));
+        }
       }
 
       if (this._path) {
@@ -156,6 +163,10 @@
       return this.$.restAPI.getPreferences();
     },
 
+    _getWindowWidth: function() {
+      return window.innerWidth;
+    },
+
     _handleReviewedChange: function(e) {
       this._setReviewed(Polymer.dom(e).rootTarget.checked);
     },