Expand context when the control is clicked in gr-new-diff

Change-Id: I7473914dbc66596c7c6c01aa5545ac66a7136451

polygerrit-ui/app/elements/diff/gr-new-diff/gr-diff-builder-side-by-side.js

@@ -20,25 +20,27 @@
   GrDiffBuilderSideBySide.prototype = Object.create(GrDiffBuilder.prototype);
   GrDiffBuilderSideBySide.prototype.constructor = GrDiffBuilderSideBySide;
 
-  GrDiffBuilderSideBySide.prototype._emitGroup = function(group,
+  GrDiffBuilderSideBySide.prototype.emitGroup = function(group,
       opt_beforeSection) {
     var sectionEl = this._createElement('tbody', 'section');
     sectionEl.classList.add(group.type);
     var pairs = group.getSideBySidePairs();
     for (var i = 0; i < pairs.length; i++) {
-      sectionEl.appendChild(this._createRow(pairs[i].left, pairs[i].right));
+      sectionEl.appendChild(this._createRow(sectionEl, pairs[i].left,
+          pairs[i].right));
     }
     this._outputEl.insertBefore(sectionEl, opt_beforeSection);
   },
 
-  GrDiffBuilderSideBySide.prototype._createRow = function(leftLine, rightLine) {
+  GrDiffBuilderSideBySide.prototype._createRow = function(section, leftLine,
+      rightLine) {
     var row = this._createElement('tr');
-    this._createPair(row, leftLine, leftLine.beforeNumber);
+    this._createPair(section, row, leftLine, leftLine.beforeNumber);
-    this._createPair(row, rightLine, rightLine.afterNumber);
+    this._createPair(section, row, rightLine, rightLine.afterNumber);
     return row;
   };
 
-  GrDiffBuilderSideBySide.prototype._createPair = function(row, line,
+  GrDiffBuilderSideBySide.prototype._createPair = function(section, row, line,
       lineNumber) {
     if (line.type === GrDiffLine.Type.BLANK) {
       row.appendChild(this._createBlankSideEl());
@@ -46,7 +48,7 @@
     }
 
     row.appendChild(this._createLineEl(line, lineNumber, line.type));
-    var action = this._createContextControl(row, line);
+    var action = this._createContextControl(section, line);
     if (action) {
       row.appendChild(action);
     } else {

polygerrit-ui/app/elements/diff/gr-new-diff/gr-diff-builder-unified.js

@@ -20,24 +20,24 @@
   GrDiffBuilderUnified.prototype = Object.create(GrDiffBuilder.prototype);
   GrDiffBuilderUnified.prototype.constructor = GrDiffBuilderUnified;
 
-  GrDiffBuilderUnified.prototype._emitGroup = function(group,
+  GrDiffBuilderUnified.prototype.emitGroup = function(group,
       opt_beforeSection) {
     var sectionEl = this._createElement('tbody', 'section');
 
     for (var i = 0; i < group.lines.length; ++i) {
-      sectionEl.appendChild(this._createRow(group.lines[i]));
+      sectionEl.appendChild(this._createRow(sectionEl, group.lines[i]));
     }
     this._outputEl.insertBefore(sectionEl, opt_beforeSection);
   };
 
-  GrDiffBuilderUnified.prototype._createRow = function(line) {
+  GrDiffBuilderUnified.prototype._createRow = function(section, line) {
     var row = this._createElement('tr', line.type);
     row.appendChild(this._createLineEl(line, line.beforeNumber,
         GrDiffLine.Type.REMOVE));
     row.appendChild(this._createLineEl(line, line.afterNumber,
         GrDiffLine.Type.ADD));
 
-    var action = this._createContextControl(row, line);
+    var action = this._createContextControl(section, line);
     if (action) {
       row.appendChild(action);
     } else {

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

@@ -30,11 +30,11 @@
 
   GrDiffBuilder.prototype.emitDiff = function() {
     for (var i = 0; i < this._groups.length; i++) {
-      this._emitGroup(this._groups[i]);
+      this.emitGroup(this._groups[i]);
     }
   };
 
-  GrDiffBuilder.prototype._emitGroup = function(group, opt_beforeSection) {
+  GrDiffBuilder.prototype.emitGroup = function(group, opt_beforeSection) {
     throw Error('Subclasses must implement emitGroup');
   },
 
@@ -147,7 +147,10 @@
     text += '...';
     button.textContent = text;
     button.addEventListener('tap', function(e) {
-      e.detail = {section: section, line: line};
+      e.detail = {
+        group: new GrDiffGroup(GrDiffGroup.Type.BOTH, line.contextLines),
+        section: section,
+      };
       // Let it bubble up the DOM tree.
     });
     td.appendChild(button);

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

@@ -39,9 +39,10 @@
       },
       _viewMode: {
         type: String,
-        value: DiffViewMode.UNIFIED,
+        value: DiffViewMode.SIDE_BY_SIDE,
       },
       _diff: Object,
+      _diffBuilder: Object,
     },
 
     observers: [
@@ -59,7 +60,15 @@
     },
 
     _handleTap: function(e) {
-      console.table(e)
+      var el = Polymer.dom(e).rootTarget;
+      if (el.classList.contains('showContext')) {
+        this._showContext(e.detail.group, e.detail.section);
+      }
+    },
+
+    _showContext: function(group, sectionEl) {
+      this._builder.emitGroup(group, sectionEl);
+      sectionEl.parentNode.removeChild(sectionEl);
     },
 
     _render: function(diff, prefsChangeRecord) {
@@ -67,8 +76,8 @@
       this.customStyle['--content-width'] = prefs.line_length + 'ch';
       this.updateStyles();
 
-      var builder = this._getDiffBuilder(diff, prefs);
+      this._builder = this._getDiffBuilder(diff, prefs);
-      builder.emitDiff(diff.content);
+      this._builder.emitDiff(diff.content);
     },
 
     _getDiff: function() {