Add toggle to PolyGerrit diff view to switch between diff styles
The gr-diff element was already capable of rendering diffs in either
side-by-side or unified style, but was configured by default to use
side-by-side. The GWT diff UI included an icon button toggle to switch
between these two styles above and to the right of the diff near the
"Diff View Preferences" button. This change introduces a selector in the
PolyGerrit UI to allow similar switching behavior.
Previously, the diff mode was encoded as a private property of the
gr-diff element. Now that the switcher is introduced at the same level
as the "Diff View Preferences" button (one level up from the gr-diff
element) it is changed to be a public property of the element so that it
can be changed through the parent view (in this case the gr-diff-view
element).
A dropdown is added to the gr-diff-view based in style on the
gr-patch-range-select element (which plays a similar role). This
dropdown has options for either of the two diff modes and controls the
diff display through a property on the view.
The view gets a new, computed property called _diffMode which encodes
which diff state should be displayed based on the changeViewState and
the user's preferences. The user's choice of diff view is persisted
across diff views, but is reverted to the preference when the change
view is visited.
A test is added to the gr-diff-view element.
Bug: Issue 3909
Change-Id: I00d93500f8d210394acc9c8f3398c9406ae74276
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 b2adcf4..6932d10 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,11 @@
var COMMIT_MESSAGE_PATH = '/COMMIT_MSG';
+ var DiffViewMode = {
+ SIDE_BY_SIDE: 'SIDE_BY_SIDE',
+ UNIFIED: 'UNIFIED_DIFF',
+ };
+
Polymer({
is: 'gr-diff-view',
@@ -64,6 +69,11 @@
value: true,
},
_prefs: Object,
+ _userPrefs: Object,
+ _diffMode: {
+ type: String,
+ computed: '_getDiffViewMode(changeViewState.diffMode, _userPrefs)'
+ },
},
behaviors: [
@@ -74,6 +84,7 @@
'_getChangeDetail(_changeNum)',
'_getProjectConfig(_change.project)',
'_getFiles(_changeNum, _patchRange.patchNum)',
+ '_updateModeSelect(_diffMode)',
],
attached: function() {
@@ -92,6 +103,9 @@
},
detached: function() {
+ // Reset the diff mode to null so that it reverts to the user preference.
+ this.changeViewState.diffMode = null;
+
window.removeEventListener('resize', this._boundWindowResizeHandler);
},
@@ -124,6 +138,10 @@
return this.$.restAPI.getDiffPreferences();
},
+ _getPreferences: function() {
+ return this.$.restAPI.getPreferences();
+ },
+
_handleReviewedChange: function(e) {
this._setReviewed(Polymer.dom(e).rootTarget.checked);
},
@@ -242,6 +260,10 @@
this._prefs = prefs;
}.bind(this)));
+ promises.push(this._getPreferences().then(function(prefs) {
+ this._userPrefs = prefs;
+ }.bind(this)));
+
promises.push(this.$.diff.reload());
Promise.all(promises).then(function() {
@@ -360,5 +382,43 @@
e.stopPropagation();
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.
+ *
+ * The expected behavior is to use the mode specified in the user's
+ * preferences unless they have manually chosen the alternative view. If the
+ * user navigates up to the change view, it should clear this choice and
+ * revert to the preference the next time a diff is viewed.
+ *
+ * Use side-by-side if the user is not logged in.
+ *
+ * @return {String}
+ */
+ _getDiffViewMode: function() {
+ if (this.changeViewState.diffMode) {
+ return this.changeViewState.diffMode;
+ } else if (this._userPrefs && this._userPrefs.diff_view) {
+ return this.changeViewState.diffMode = this._userPrefs.diff_view;
+ }
+
+ 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;
+ }
+ },
});
})();
