Save diff mode preference when toggled
Introduce the gr-diff-mode-selector which componentizes the diff mode
buttons already used in the file list and adds them to the diff view.
With this new component, when authenticated users change their diff
preference using the new selector (or by the 'm' keyboard shortcut), the
new mode is saved to their preferences. Unauthenticated users see no
change in diff mode preference persistence.
The diff selector is now consistently labeled as "Diff view" rather than
as "Diff views".
Bug: Issue 8144
Change-Id: I4b30714deb9a466e707b3d4ae90c1d4c60222c64
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
index 2ce29db..c5a188c 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
@@ -31,6 +31,7 @@
<link rel="import" href="../../shared/revision-info/revision-info.html">
<link rel="import" href="../gr-comment-api/gr-comment-api.html">
<link rel="import" href="../gr-diff-cursor/gr-diff-cursor.html">
+<link rel="import" href="../gr-diff-mode-selector/gr-diff-mode-selector.html">
<link rel="import" href="../gr-diff-preferences/gr-diff-preferences.html">
<link rel="import" href="../gr-diff/gr-diff.html">
<link rel="import" href="../gr-patch-range-select/gr-patch-range-select.html">
@@ -132,6 +133,14 @@
align-items: center;
display: flex;
}
+ .diffModeSelector {
+ align-items: center;
+ display: flex;
+ }
+ .diffModeSelector.hide,
+ .separator.hide {
+ display: none;
+ }
gr-dropdown-list {
--trigger-style: {
text-transform: none;
@@ -259,19 +268,17 @@
</span>
</div>
<div class="rightControls">
- <gr-select
- id="modeSelect"
- bind-value="{{changeViewState.diffMode}}"
- hidden$="[[_computeModeSelectHidden(_isImageDiff)]]">
- <select>
- <option value="SIDE_BY_SIDE">Side By Side</option>
- <option value="UNIFIED_DIFF">Unified</option>
- </select>
- </gr-select>
+ <div class$="diffModeSelector [[_computeModeSelectHideClass(_isImageDiff)]]">
+ Diff view:
+ <gr-diff-mode-selector
+ id="modeSelect"
+ save-on-change="[[_loggedIn]]"
+ mode="{{changeViewState.diffMode}}"></gr-diff-mode-selector>
+ </div>
<span id="diffPrefsContainer"
hidden$="[[_computePrefsButtonHidden(_prefs, _loggedIn)]]" hidden>
<span class="preferences desktop">
- <span class="separator" hidden$="[[_computeModeSelectHidden(_isImageDiff)]]"></span>
+ <span class$="separator [[_computeModeSelectHideClass(_isImageDiff)]]"></span>
<gr-button link
class="prefsButton"
on-tap="_handlePrefsTap">Preferences</gr-button>
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 f1cc83e..90a3913 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
@@ -437,9 +437,9 @@
e.preventDefault();
if (this._getDiffViewMode() === DiffViewMode.SIDE_BY_SIDE) {
- this.set('changeViewState.diffMode', DiffViewMode.UNIFIED);
+ this.$.modeSelect.setMode(DiffViewMode.UNIFIED);
} else {
- this.set('changeViewState.diffMode', DiffViewMode.SIDE_BY_SIDE);
+ this.$.modeSelect.setMode(DiffViewMode.SIDE_BY_SIDE);
}
},
@@ -814,15 +814,15 @@
if (this.changeViewState.diffMode) {
return this.changeViewState.diffMode;
} else if (this._userPrefs) {
- return this.changeViewState.diffMode =
- this._userPrefs.default_diff_view;
+ this.set('changeViewState.diffMode', this._userPrefs.default_diff_view);
+ return this._userPrefs.default_diff_view;
} else {
return 'SIDE_BY_SIDE';
}
},
- _computeModeSelectHidden() {
- return this._isImageDiff;
+ _computeModeSelectHideClass(isImageDiff) {
+ return isImageDiff ? 'hide' : '';
},
_onLineSelected(e, detail) {
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 ae98fe9..9776d4a 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
@@ -606,21 +606,21 @@
element._userPrefs = {default_diff_view: 'SIDE_BY_SIDE'};
// The mode selected in the view state reflects the selected option.
- assert.equal(element._getDiffViewMode(), select.nativeSelect.value);
+ assert.equal(element._getDiffViewMode(), select.mode);
// The mode selected in the view state reflects the view rednered in the
// diff.
- assert.equal(select.nativeSelect.value, diffDisplay.viewMode);
+ assert.equal(select.mode, diffDisplay.viewMode);
// We will simulate a user change of the selected mode.
const newMode = 'UNIFIED_DIFF';
- // Set the actual value of the select, and simulate the change event.
- select.nativeSelect.value = newMode;
- element.fire('change', {}, {node: select.nativeSelect});
+
+ // Set the mode, and simulate the change event.
+ element.set('changeViewState.diffMode', newMode);
// Make sure the handler was called and the state is still coherent.
assert.equal(element._getDiffViewMode(), newMode);
- assert.equal(element._getDiffViewMode(), select.nativeSelect.value);
+ assert.equal(element._getDiffViewMode(), select.mode);
assert.equal(element._getDiffViewMode(), diffDisplay.viewMode);
});
@@ -633,17 +633,16 @@
// Attach a new gr-diff-view so we can intercept the preferences fetch.
const view = document.createElement('gr-diff-view');
- const 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.nativeSelect.value, 'SIDE_BY_SIDE');
+ assert.equal(view._getDiffViewMode(), 'SIDE_BY_SIDE');
// Receive the overriding preference.
resolvePrefs({default_diff_view: 'UNIFIED'});
flushAsynchronousOperations();
- assert.equal(select.nativeSelect.value, 'SIDE_BY_SIDE');
+ assert.equal(element._getDiffViewMode(), 'SIDE_BY_SIDE');
});
suite('_commitRange', () => {
