Make gr-builder a Polymer component

Updated tests, fixed draft comments, context expanding.

Change-Id: Ic4bd9682c63edd8e80fbc2abcb4fa5e406a202ab

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

@@ -0,0 +1,125 @@
+<!--
+Copyright (C) 2016 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+
+<dom-module id="gr-diff-builder">
+  <template>
+    <div class="contentWrapper">
+      <content></content>
+    </div>
+  </template>
+  <script src="../gr-diff/gr-diff-line.js"></script>
+  <script src="../gr-diff/gr-diff-group.js"></script>
+  <script src="gr-diff-builder.js"></script>
+  <script src="gr-diff-builder-side-by-side.js"></script>
+  <script src="gr-diff-builder-unified.js"></script>
+  <script src="gr-diff-builder-image.js"></script>
+  <script>
+    (function() {
+      'use strict';
+
+      var DiffViewMode = {
+        SIDE_BY_SIDE: 'SIDE_BY_SIDE',
+        UNIFIED: 'UNIFIED_DIFF',
+      };
+
+      Polymer({
+        is: 'gr-diff-builder',
+
+        /**
+         * Fired when the diff is rendered.
+         *
+         * @event render
+         */
+
+        properties: {
+          viewMode: String,
+          isImageDiff: Boolean,
+          baseImage: Object,
+          revisionImage: Object,
+          _builder: Object,
+        },
+
+        get diffElement() {
+          return this.queryEffectiveChildren('#diffTable');
+        },
+
+        render: function(diff, comments, prefs) {
+          this._builder = this._getDiffBuilder(diff, comments, prefs);
+          this._renderDiff();
+        },
+
+        createCommentThread: function(changeNum, patchNum, path, side,
+            projectConfig) {
+          return this._builder.createCommentThread(changeNum, patchNum, path,
+              side, projectConfig);
+        },
+
+        emitGroup: function(group, sectionEl) {
+          this._builder.emitGroup(group, sectionEl);
+        },
+
+        emitDiff: function() {
+          this._builder.emitDiff();
+        },
+
+        showContext: function(newGroups, sectionEl) {
+          var groups = this._builder._groups;
+          // TODO(viktard): Polyfill findIndex for IE10.
+          var contextIndex = groups.findIndex(function(group) {
+            return group.element == sectionEl;
+          });
+          groups.splice.apply(groups, [contextIndex, 1].concat(newGroups));
+
+          newGroups.forEach(function(newGroup) {
+            this._builder.emitGroup(newGroup, sectionEl);
+          }.bind(this));
+          sectionEl.parentNode.removeChild(sectionEl);
+
+          this.async(function() {
+            this.fire('render');
+          }.bind(this), 1);
+        },
+
+        _getDiffBuilder: function(diff, comments, prefs) {
+          if (this.isImageDiff) {
+            return new GrDiffBuilderImage(diff, comments, prefs,
+                this.diffElement, this.baseImage, this.revisionImage);
+          } else if (this.viewMode === DiffViewMode.SIDE_BY_SIDE) {
+            return new GrDiffBuilderSideBySide(
+                diff, comments, prefs, this.diffElement);
+          } else if (this.viewMode === DiffViewMode.UNIFIED) {
+            return new GrDiffBuilderUnified(
+                diff, comments, prefs, this.diffElement);
+          }
+          throw Error('Unsupported diff view mode: ' + this.viewMode);
+        },
+
+        _renderDiff: function() {
+          this._clearDiffContent();
+          this.emitDiff();
+          this.async(function() {
+            this.fire('render');
+          }, 1);
+        },
+
+        _clearDiffContent: function() {
+          this.diffElement.innerHTML = null;
+        },
+      });
+    })();
+  </script>
+</dom-module>

polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder_test.html

@@ -19,8 +19,8 @@ limitations under the License.
 <title>gr-diff-builder</title>
 
 <script src="../../../bower_components/web-component-tester/browser.js"></script>
-<script src="gr-diff-line.js"></script>
+<script src="../gr-diff/gr-diff-line.js"></script>
-<script src="gr-diff-group.js"></script>
+<script src="../gr-diff/gr-diff-group.js"></script>
 <script src="gr-diff-builder.js"></script>
 
 <script>

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

@@ -18,6 +18,7 @@ limitations under the License.
 <link rel="import" href="../../shared/gr-button/gr-button.html">
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
 <link rel="import" href="../gr-diff-comment-thread/gr-diff-comment-thread.html">
+<link rel="import" href="../gr-diff-builder/gr-diff-builder.html">
 
 <dom-module id="gr-diff">
   <template>
@@ -153,15 +154,18 @@ limitations under the License.
         on-tap="_handleTap"
         on-mousedown="_handleMouseDown"
         on-copy="_handleCopy">
-      <table id="diffTable"></table>
+      <gr-diff-builder
+         id="diffBuilder"
+         view-mode="[[viewMode]]"
+         is-image-diff="[[isImageDiff]]"
+         base-image="[[_baseImage]]"
+         revision-image="[[_revisionImage]]">
+        <table id="diffTable"></table>
+      </gr-diff-builder>
     </div>
     <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
   </template>
   <script src="gr-diff-line.js"></script>
   <script src="gr-diff-group.js"></script>
-  <script src="gr-diff-builder.js"></script>
-  <script src="gr-diff-builder-side-by-side.js"></script>
-  <script src="gr-diff-builder-unified.js"></script>
-  <script src="gr-diff-builder-image.js"></script>
   <script src="gr-diff.js"></script>
 </dom-module>

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

@@ -27,12 +27,6 @@
   Polymer({
     is: 'gr-diff',
 
-    /**
-     * Fired when the diff is rendered.
-     *
-     * @event render
-     */
-
     properties: {
       changeNum: String,
       patchRange: Object,
@@ -59,7 +53,6 @@
         value: DiffViewMode.SIDE_BY_SIDE,
       },
       _diff: Object,
-      _diffBuilder: Object,
       _selectionSide: {
         type: String,
         observer: '_selectionSideChanged',
@@ -195,7 +188,7 @@
       var el = Polymer.dom(e).rootTarget;
 
       if (el.classList.contains('showContext')) {
-        this._showContext(e.detail.groups, e.detail.section);
+        this.$.diffBuilder.showContext(e.detail.groups, e.detail.section);
       } else if (el.classList.contains('lineNum')) {
         this.addDraftAtLine(el);
       }
@@ -223,8 +216,8 @@
             patchNum = this.patchRange.basePatchNum;
           }
         }
-        threadEl = this._builder.createCommentThread(this.changeNum, patchNum,
+        threadEl = this.$.diffBuilder.createCommentThread(
-            this.path, side, this.projectConfig);
+            this.changeNum, patchNum, this.path, side, this.projectConfig);
         contentEl.appendChild(threadEl);
       }
       threadEl.addDraft(opt_lineNum);
@@ -363,25 +356,6 @@
       return text;
     },
 
-    _showContext: function(newGroups, sectionEl) {
-      var groups = this._builder._groups;
-      // TODO(viktard): Polyfill findIndex for IE10.
-      var contextIndex = groups.findIndex(function(group) {
-        return group.element == sectionEl;
-      });
-
-      groups.splice.apply(groups, [contextIndex, 1].concat(newGroups));
-
-      newGroups.forEach(function(newGroup) {
-        this._builder.emitGroup(newGroup, sectionEl);
-      }.bind(this));
-      sectionEl.parentNode.removeChild(sectionEl);
-
-      this.async(function() {
-        this.fire('render', null, {bubbles: false});
-      }.bind(this), 1);
-    },
-
     _prefsChanged: function(prefsChangeRecord) {
       var prefs = prefsChangeRecord.base;
       this.customStyle['--content-width'] = prefs.line_length + 'ch';
@@ -393,17 +367,7 @@
     },
 
     _render: function() {
-      this._builder =
+      this.$.diffBuilder.render(this._diff, this._comments, this.prefs);
-          this._getDiffBuilder(this._diff, this._comments, this.prefs);
-      this._renderDiff();
-    },
-
-    _renderDiff: function() {
-      this._clearDiffContent();
-      this._builder.emitDiff();
-      this.async(function() {
-        this.fire('render', null, {bubbles: false});
-      }, 1);
     },
 
     _clearDiffContent: function() {
@@ -508,19 +472,6 @@
           this.changeNum, this._diff, this.patchRange);
     },
 
-    _getDiffBuilder: function(diff, comments, prefs) {
-      if (this.isImageDiff) {
-        return new GrDiffBuilderImage(diff, comments, prefs, this.$.diffTable,
-            this._baseImage, this._revisionImage);
-      } else if (this.viewMode === DiffViewMode.SIDE_BY_SIDE) {
-        return new GrDiffBuilderSideBySide(diff, comments, prefs,
-            this.$.diffTable);
-      } else if (this.viewMode === DiffViewMode.UNIFIED) {
-        return new GrDiffBuilderUnified(diff, comments, prefs,
-            this.$.diffTable);
-      }
-      throw Error('Unsupported diff view mode: ' + this.viewMode);
-    },
 
     _projectConfigChanged: function(projectConfig) {
       var threadEls = this._getCommentThreads();

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

@@ -226,8 +226,7 @@ limitations under the License.
         var rendered = function() {
           // Recognizes that it should be an image diff.
           assert.isTrue(element.isImageDiff);
-          assert.instanceOf(element._getDiffBuilder(element._diff,
+          assert.instanceOf(element.$.diffBuilder._builder, GrDiffBuilderImage);
-              element._comments, element.prefs), GrDiffBuilderImage);
 
           // Left image rendered with the parent commit's version of the file.
           var leftInmage = element.$.diffTable.querySelector('td.left img');
@@ -397,30 +396,5 @@ limitations under the License.
         });
       });
     });
-
-    suite('renderDiff', function() {
-      setup(function(done) {
-        sinon.stub(element, 'fire');
-        element._builder = {
-          emitDiff: sinon.stub(),
-        };
-        element._renderDiff();
-        flush(function() {
-          done();
-        });
-      });
-
-      teardown(function() {
-        element.fire.restore();
-      });
-
-      test('fires render', function() {
-        assert(element.fire.calledWithExactly(
-            'render', null, {bubbles: false}));
-      });
-      test('calls emitDiff on builder', function() {
-        assert(element._builder.emitDiff.calledOnce);
-      });
-    });
   });
 </script>

polygerrit-ui/app/test/index.html

@@ -42,12 +42,12 @@ limitations under the License.
     'core/gr-error-manager/gr-error-manager_test.html',
     'core/gr-main-header/gr-main-header_test.html',
     'core/gr-search-bar/gr-search-bar_test.html',
+    'diff/gr-diff-builder/gr-diff-builder_test.html',
     'diff/gr-diff-comment-thread/gr-diff-comment-thread_test.html',
     'diff/gr-diff-comment/gr-diff-comment_test.html',
     'diff/gr-diff-cursor/gr-diff-cursor_test.html',
     'diff/gr-diff-preferences/gr-diff-preferences_test.html',
     'diff/gr-diff-view/gr-diff-view_test.html',
-    'diff/gr-diff/gr-diff-builder_test.html',
     'diff/gr-diff/gr-diff-group_test.html',
     'diff/gr-diff/gr-diff_test.html',
     'diff/gr-patch-range-select/gr-patch-range-select_test.html',
@@ -61,8 +61,8 @@ limitations under the License.
     'shared/gr-cursor-manager/gr-cursor-manager_test.html',
     'shared/gr-date-formatter/gr-date-formatter_test.html',
     'shared/gr-editable-content/gr-editable-content_test.html',
-    'shared/gr-js-api-interface/gr-js-api-interface_test.html',
     'shared/gr-editable-label/gr-editable-label_test.html',
+    'shared/gr-js-api-interface/gr-js-api-interface_test.html',
     'shared/gr-linked-text/gr-linked-text_test.html',
     'shared/gr-rest-api-interface/gr-rest-api-interface_test.html',
     'shared/gr-storage/gr-storage_test.html',