Add a checkbox to hide ranged comments behind

Also adds concept of locally stored preferences.

Change-Id: Ib074a682228d5360a932af696e18967e8e3473be

polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences.html

@@ -17,6 +17,7 @@ limitations under the License.
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../../bower_components/iron-input/iron-input.html">
 <link rel="import" href="../../shared/gr-button/gr-button.html">
+<link rel="import" href="../../shared/gr-storage/gr-storage.html">
 
 <dom-module id="gr-diff-preferences">
   <template>
@@ -64,6 +65,10 @@ limitations under the License.
         display: flex;
         justify-content: space-between;
       }
+      .beta {
+        font-weight: bold;
+        color: #888;
+      }
     </style>
     <div class="header">
       Diff View Preferences
@@ -100,6 +105,12 @@ limitations under the License.
         <input is="iron-input" type="checkbox" id="showTabsInput"
             on-tap="_handleShowTabsTap">
       </div>
+      <div class="pref">
+        <label for="enableRangedCommentsInput">
+          <span class="beta">(beta)</span> Enable ranged comments</label>
+        <input is="iron-input" type="checkbox" id="enableRangedCommentsInput"
+            on-tap="_handleEnableRangedComments">
+      </div>
     </div>
     <div class="actions">
       <gr-button primary on-tap="_handleSave">Save</gr-button>

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

@@ -34,6 +34,10 @@
         type: Object,
         notify: true,
       },
+      localPrefs: {
+        type: Object,
+        notify: true,
+      },
       disabled: {
         type: Boolean,
         value: false,
@@ -41,10 +45,12 @@
       },
 
       _newPrefs: Object,
+      _newLocalPrefs: Object,
     },
 
     observers: [
       '_prefsChanged(prefs.*)',
+      '_localPrefsChanged(localPrefs.*)',
     ],
 
     _prefsChanged: function(changeRecord) {
@@ -57,6 +63,13 @@
       this.$.showTabsInput.checked = prefs.show_tabs;
     },
 
+    _localPrefsChanged: function(changeRecord) {
+      var localPrefs = changeRecord.base || {};
+      // TODO(viktard): This is not supported in IE. Implement a polyfill.
+      this._newLocalPrefs = Object.assign({}, localPrefs);
+      this.$.enableRangedCommentsInput.checked = localPrefs.ranged_comments;
+    },
+
     _handleContextSelectChange: function(e) {
       var selectEl = Polymer.dom(e).rootTarget;
       this.set('_newPrefs.context', parseInt(selectEl.value, 10));
@@ -66,8 +79,14 @@
       this.set('_newPrefs.show_tabs', Polymer.dom(e).rootTarget.checked);
     },
 
+    _handleEnableRangedComments: function(e) {
+      this.set(
+          '_newLocalPrefs.ranged_comments', Polymer.dom(e).rootTarget.checked);
+    },
+
     _handleSave: function() {
       this.prefs = this._newPrefs;
+      this.localPrefs = this._newLocalPrefs;
       this.fire('save', null, {bubbles: false});
     },
 

polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences_test.html

@@ -72,5 +72,22 @@ limitations under the License.
       MockInteractions.tap(element.$$('gr-button[primary]'));
       MockInteractions.tap(element.$$('gr-button:not([primary])'));
     });
+
+    test('ranged comments as a local preference', function() {
+      element.localPrefs = {
+        ranged_comments: true,
+      };
+      var inputEl = element.$.enableRangedCommentsInput;
+      assert.isTrue(inputEl.checked, 'Binding to localPrefs');
+      MockInteractions.tap(inputEl);
+      assert.isFalse(inputEl.checked, 'Reacting to range_comments UI event.');
+      var saveStub = sinon.stub();
+      element.addEventListener('save', saveStub);
+      MockInteractions.tap(element.$$('gr-button[primary]'));
+      assert.isFalse(element.localPrefs.ranged_comments,
+          'Updating localPrefs on save.');
+      assert.isTrue(saveStub.called);
+      element.removeEventListener('save', saveStub);
+    });
   });
 </script>

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

@@ -195,6 +195,7 @@ limitations under the License.
       <gr-overlay id="prefsOverlay" with-backdrop>
         <gr-diff-preferences
             prefs="{{_prefs}}"
+            local-prefs="{{_localPrefs}}"
             on-save="_handlePrefsSave"
             on-cancel="_handlePrefsCancel"></gr-diff-preferences>
       </gr-overlay>
@@ -206,12 +207,14 @@ limitations under the License.
           patch-range="[[_patchRange]]"
           path="[[_path]]"
           prefs="[[_prefs]]"
+          has-ranged-comments="[[_localPrefs.ranged_comments]]"
           project-config="[[_projectConfig]]"
           view-mode="[[_diffMode]]"
           on-render="_handleDiffRender">
       </gr-diff>
     </div>
     <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
+    <gr-storage id="storage"></gr-storage>
     <gr-diff-cursor id="cursor"></gr-diff-cursor>
   </template>
   <script src="gr-diff-view.js"></script>

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

@@ -69,6 +69,7 @@
         value: true,
       },
       _prefs: Object,
+      _localPrefs: Object,
       _projectConfig: Object,
       _userPrefs: Object,
       _diffMode: {
@@ -136,6 +137,7 @@
     },
 
     _getDiffPreferences: function() {
+      this._localPrefs = this.$.storage.getPreferences();
       return this.$.restAPI.getDiffPreferences();
     },
 
@@ -407,6 +409,7 @@
       e.stopPropagation();
       var el = Polymer.dom(e).rootTarget;
       el.disabled = true;
+      this.$.storage.savePreferences(this._localPrefs);
       this._saveDiffPreferences().then(function(response) {
         el.disabled = false;
         if (!response.ok) { return response; }

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

@@ -43,6 +43,7 @@
         computed: '_computeIsImageDiff(_diff)',
         notify: true,
       },
+      hasRangedComments: Boolean,
 
       _loggedIn: {
         type: Boolean,

polygerrit-ui/app/elements/shared/gr-storage/gr-storage.js

@@ -48,6 +48,14 @@
       this._storage.removeItem(key);
     },
 
+    getPreferences: function() {
+      return this._getObject('localPrefs');
+    },
+
+    savePreferences: function(localPrefs) {
+      this._setObject('localPrefs', localPrefs || null);
+    },
+
     _getDraftKey: function(location) {
       return ['draft', location.changeNum, location.patchNum, location.path,
           location.line].join(':');