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
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);
},
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html
index 1eb3f95..ddf3249 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html
@@ -492,6 +492,39 @@
assert.equal(select.value, 'SIDE_BY_SIDE');
});
+ test('unified view is always default on small screens', function() {
+ var resolvePrefs;
+ var prefsPromise = new Promise(function(resolve) {
+ resolvePrefs = resolve;
+ });
+
+ var getPreferencesStub = sinon.stub(element.$.restAPI, 'getPreferences',
+ function() { return prefsPromise; });
+
+ // Attach a new gr-diff-view so we can intercept the preferences fetch.
+ var view = document.createElement('gr-diff-view');
+
+ view.changeViewState = {diffMode: null};
+
+ sinon.stub(view, '_getWindowWidth', function() {
+ return 800;
+ });
+
+ var select = view.$.modeSelect;
+ fixture('blank').appendChild(view);
+ flushAsynchronousOperations();
+
+ // At this point the diff mode doesn't yet have the user's preference.
+ assert.equal(select.value, 'UNIFIED_DIFF');
+
+ // Receive the overriding preference.
+ resolvePrefs({diff_view: 'SIDE_BY_SIDE'});
+ flushAsynchronousOperations();
+
+ // On small screens, unified should override user perferences
+ assert.equal(select.value, 'UNIFIED_DIFF');
+ });
+
test('_loadHash', function() {
assert.isNotOk(element.$.cursor.initialLineNumber);
