Remove event handlers from individual lines in file list

In order to speed up file list processing for large numbers of files,
event handlers have been removed on a per-line basis and instead
are listened for in a parent container that handles them according to
the click target.

With a sample of 1300 files, the dom-repeat after clicking 'show all'
gets rendered 25% faster.

Bug: Issue 5612
Change-Id: Idc1ba6e0810d5d4c6f36e76667c3748becc1358a

polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html

@@ -232,14 +232,16 @@ limitations under the License.
         </label>
       </div>
     </header>
+    <div on-tap="_handleFileListTap">
       <template is="dom-repeat"
           items="[[_shownFiles]]"
+          id="files"
           as="file"
           initial-count="[[_fileListIncrement]]">
         <div class="file-row row">
           <div class="reviewed" hidden$="[[!_loggedIn]]" hidden>
             <input type="checkbox" checked="[[file.isReviewed]]"
-              data-path$="[[file.__path]]" on-change="_handleReviewedChange"
+                data-path$="[[file.__path]]"
                 class="reviewed" aria-label="Reviewed checkbox">
           </div>
           <div class$="[[_computeClass('status', file.__path)]]"
@@ -249,7 +251,7 @@ limitations under the License.
           </div>
           <a class$="[[_computePathClass(file.__path, _expandedFilePaths.*)]]"
               href$="[[_computeDiffURL(changeNum, patchRange, file.__path)]]"
-            on-tap="_handleFileTap">
+              data-path$="[[file.__path]]">
             <div title$="[[_computeFileDisplayName(file.__path)]]"
                 class="fullFileName">
               [[_computeFileDisplayName(file.__path)]]
@@ -300,11 +302,11 @@ limitations under the License.
             </span>
           </div>
           <div class="show-hide" hidden$="[[_userPrefs.expand_inline_diffs]]">
-          <label class="show-hide">
+            <label class="show-hide" data-path$="[[file.__path]]"
+                data-expand=true>
               <input type="checkbox" class="show-hide"
                   checked$="[[_isFileExpanded(file.__path, _expandedFilePaths.*)]]"
-                data-path$="[[file.__path]]"
-                on-change="_handleHiddenChange">
+                  data-path$="[[file.__path]]" data-expand=true>
               [[_computeShowHideText(file.__path, _expandedFilePaths.*)]]
             </label>
           </div>
@@ -321,6 +323,7 @@ limitations under the License.
             project-config="[[projectConfig]]"
             view-mode="[[_getDiffViewMode(diffViewMode, _userPrefs)]]"></gr-diff>
       </template>
+    </div>
     <div class$="row totalChanges [[_computeExpandInlineClass(_userPrefs)]]">
       <div class="total-stats" hidden$="[[_hideChangeTotals]]">
         <span

polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.js

@@ -226,10 +226,6 @@
       return parseInt(patchNum, 10) >= parseInt(currentPatchNum, 10);
     },
 
-    _handleHiddenChange: function(e) {
-      this._togglePathExpanded(e.model.file.__path);
-    },
-
     _togglePathExpanded: function(path) {
       // Is the path in the list of expanded diffs? IF so remove it, otherwise
       // add it to the list.
@@ -400,15 +396,29 @@
           });
     },
 
-    _handleFileTap: function(e) {
+    /**
+     * Handle all events from the file list dom-repeat so event handleers don't
+     * have to get registered for potentially very long lists.
+     */
+    _handleFileListTap: function(e) {
+      // Handle checkbox mark as reviewed.
+      if (e.target.classList.contains('reviewed')) {
+        return this._handleReviewedChange(e);
+      }
+
+      // Check to see if the file should be expanded.
+      var path = e.target.dataset.path || e.target.parentElement.dataset.path;
+
       // If the user prefers to expand inline diffs rather than opening the diff
       // view, intercept the click event.
-      if (e.detail.sourceEvent.metaKey || e.detail.sourceEvent.ctrlKey) {
+      if (!path || e.detail.sourceEvent.metaKey ||
+          e.detail.sourceEvent.ctrlKey) {
           return;
       }
-      if (this._userPrefs && this._userPrefs.expand_inline_diffs) {
+      if (e.target.dataset.expand ||
+          this._userPrefs && this._userPrefs.expand_inline_diffs) {
         e.preventDefault();
-        this._handleHiddenChange(e);
+        this._togglePathExpanded(path);
       }
     },
 

polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_test.html

@@ -637,10 +637,13 @@ limitations under the License.
       flushAsynchronousOperations();
       var fileRows =
           Polymer.dom(element.root).querySelectorAll('.row:not(.header)');
+      // Because the label surrounds the input, the tap event is triggered
+      // there first.
+      var showHideLabel = fileRows[0].querySelector('label.show-hide');
       var showHideCheck = fileRows[0].querySelector(
           'input.show-hide[type="checkbox"]');
       assert.isNotOk(showHideCheck.checked);
-      MockInteractions.tap(showHideCheck);
+      MockInteractions.tap(showHideLabel);
       assert.isOk(showHideCheck.checked);
       assert.notEqual(element._expandedFilePaths.indexOf('myfile.txt'), -1);
     });
@@ -763,18 +766,18 @@ limitations under the License.
 
       // Remove href attribute so the app doesn't route to a diff view
       commitMsgFile.removeAttribute('href');
-      var hiddenChangeSpy = sandbox.spy(element, '_handleHiddenChange');
+      var togglePathSpy = sandbox.spy(element, '_togglePathExpanded');
 
       MockInteractions.tap(commitMsgFile);
       flushAsynchronousOperations();
-      assert(hiddenChangeSpy.notCalled, 'file is opened as diff view');
+      assert(togglePathSpy.notCalled, 'file is opened as diff view');
       assert.isNotOk(element.$$('.expanded'));
 
       element._userPrefs = {expand_inline_diffs: true};
       flushAsynchronousOperations();
       MockInteractions.tap(commitMsgFile);
       flushAsynchronousOperations();
-      assert(hiddenChangeSpy.calledOnce, 'file is expanded');
+      assert(togglePathSpy.calledOnce, 'file is expanded');
       assert.isOk(element.$$('.expanded'));
     });
 
@@ -812,32 +815,37 @@ limitations under the License.
       element.push('_expandedFilePaths', path);
     });
 
-    suite('_handleFileTap', function() {
+    suite('_handleFileListTap', function() {
       function testForModifier(modifier) {
         var e = {preventDefault: function() {}};
         e.detail = {sourceEvent: {}};
+        e.target = {
+          dataset: {path: '/test'},
+          classList: element.classList,
+        };
+
         e.detail.sourceEvent[modifier] = true;
 
-        var hiddenChangeStub = sandbox.stub(element, '_handleHiddenChange');
+        var togglePathStub = sandbox.stub(element, '_togglePathExpanded');
         element._userPrefs = { expand_inline_diffs: true };
 
-        element._handleFileTap(e);
-        assert.isFalse(hiddenChangeStub.called);
+        element._handleFileListTap(e);
+        assert.isFalse(togglePathStub.called);
 
         e.detail.sourceEvent[modifier] = false;
-        element._handleFileTap(e);
-        assert.equal(hiddenChangeStub.callCount, 1);
+        element._handleFileListTap(e);
+        assert.equal(togglePathStub.callCount, 1);
 
         element._userPrefs = { expand_inline_diffs: false };
-        element._handleFileTap(e);
-        assert.equal(hiddenChangeStub.callCount, 1);
+        element._handleFileListTap(e);
+        assert.equal(togglePathStub.callCount, 1);
       }
 
-      test('_handleFileTap meta', function() {
+      test('_handleFileListTap meta', function() {
         testForModifier('metaKey');
       });
 
-      test('_handleFileTap ctrl', function() {
+      test('_handleFileListTap ctrl', function() {
         testForModifier('ctrlKey');
       });
     });