Only select one side at a time in side-by-side view

Change-Id: Icd4a48ad3ae6936fa9fda604dd04ded17eae44c0

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

@@ -35,24 +35,21 @@
   GrDiffBuilderSideBySide.prototype._createRow = function(section, leftLine,
       rightLine) {
     var row = this._createElement('tr');
-    this._createPair(section, row, leftLine, leftLine.beforeNumber);
-    this._createPair(section, row, rightLine, rightLine.afterNumber);
+    this._createPair(section, row, leftLine, leftLine.beforeNumber, 'left');
+    this._createPair(section, row, rightLine, rightLine.afterNumber, 'right');
     return row;
   };
 
   GrDiffBuilderSideBySide.prototype._createPair = function(section, row, line,
-      lineNumber) {
-    if (line.type === GrDiffLine.Type.BLANK) {
-      row.appendChild(this._createBlankSideEl());
-      return row;
-    }
-
+      lineNumber, side) {
     row.appendChild(this._createLineEl(line, lineNumber, line.type));
     var action = this._createContextControl(section, line);
     if (action) {
       row.appendChild(action);
     } else {
-      row.appendChild(this._createTextEl(line));
+      var el = this._createTextEl(line);
+      el.classList.add(side);
+      row.appendChild(el);
     }
     return row;
   };

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

@@ -167,15 +167,11 @@
     return td;
   };
 
-  GrDiffBuilder.prototype._createBlankSideEl = function() {
-    var td = this._createElement('td');
-    td.setAttribute('colspan', '2');
-    return td;
-  };
-
   GrDiffBuilder.prototype._createLineEl = function(line, number, type) {
     var td = this._createElement('td', 'lineNum');
-    if (line.type === GrDiffLine.Type.CONTEXT_CONTROL) {
+    if (line.type === GrDiffLine.Type.BLANK) {
+      return td;
+    } else if (line.type === GrDiffLine.Type.CONTEXT_CONTROL) {
       td.setAttribute('data-value', '@@');
     } else if (line.type === GrDiffLine.Type.BOTH || line.type == type) {
       td.setAttribute('data-value', number);
@@ -184,9 +180,12 @@
   };
 
   GrDiffBuilder.prototype._createTextEl = function(line) {
-    var td = this._createElement('td', 'content');
+    var td = this._createElement('td');
+    if (line.type !== GrDiffLine.Type.BLANK) {
+      td.classList.add('content');
+    }
     td.classList.add(line.type);
-    var text = line.text || '\n';
+    var text = line.text;
     var html = util.escapeHTML(text);
     if (text.length > this._prefs.line_length) {
       html = this._addNewlines(text, html);

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

@@ -74,6 +74,18 @@ limitations under the License.
         overflow: hidden;
         width: var(--content-width, 80ch);
       }
+      .content.left {
+        -webkit-user-select: var(--left-user-select, text);
+        -moz-user-select: var(--left-user-select, text);
+        -ms-user-select: var(--left-user-select, text);
+        user-select: var(--left-user-select, text);
+      }
+      .content.right {
+        -webkit-user-select: var(--right-user-select, text);
+        -moz-user-select: var(--right-user-select, text);
+        -ms-user-select: var(--right-user-select, text);
+        user-select: var(--right-user-select, text);
+      }
       .add {
         background-color: var(--dark-add-highlight-color);
       }
@@ -126,7 +138,10 @@ limitations under the License.
             on-cancel="_handlePrefsCancel"></gr-diff-preferences>
       </gr-overlay>
 
-      <div class="diffContainer" on-tap="_handleTap">
+      <div class="diffContainer"
+          on-tap="_handleTap"
+          on-mousedown="_handleMouseDown"
+          on-copy="_handleCopy">
         <table id="diffTable"></table>
       </div>
     </div>

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

@@ -19,6 +19,11 @@
     UNIFIED: 'UNIFIED_DIFF',
   };
 
+  var SelectionSide = {
+    LEFT: 'left',
+    RIGHT: 'right',
+  };
+
   Polymer({
     is: 'gr-new-diff',
 
@@ -43,6 +48,10 @@
       },
       _diff: Object,
       _diffBuilder: Object,
+      _selectionSide: {
+        type: String,
+        observer: '_selectionSideChanged',
+      },
     },
 
     observers: [
@@ -66,6 +75,61 @@
       }
     },
 
+    _handleMouseDown: function(e) {
+      var el = Polymer.dom(e).rootTarget;
+      var side;
+      for (var node = el; node != null; node = node.parentNode) {
+        if (node.classList.contains('left')) {
+          side = SelectionSide.LEFT;
+          break;
+        } else if (node.classList.contains('right')) {
+          side = SelectionSide.RIGHT;
+          break;
+        }
+      }
+      this._selectionSide = side;
+    },
+
+    _selectionSideChanged: function(side) {
+      if (side) {
+        var oppositeSide = side ==
+            SelectionSide.RIGHT ? SelectionSide.LEFT : SelectionSide.RIGHT;
+        this.customStyle['--' + side + '-user-select'] = 'text';
+        this.customStyle['--' + oppositeSide + '-user-select'] = 'none';
+      } else {
+        this.customStyle['--' + side + '-user-select'] = 'text';
+        this.customStyle['--' + oppositeSide + '-user-select'] = 'text';
+      }
+      this.updateStyles();
+    },
+
+    _handleCopy: function(e) {
+      var text = this._getSelectedText(this._selectionSide);
+      e.clipboardData.setData('Text', text);
+      e.preventDefault();
+    },
+
+    _getSelectedText: function(opt_side) {
+      var sel = window.getSelection();
+      var range = sel.getRangeAt(0);
+      var doc = range.cloneContents();
+      var selector = '.content';
+      if (opt_side) {
+        selector += '.' + opt_side
+      }
+      var contentEls = Polymer.dom(doc).querySelectorAll(selector);
+
+      if (contentEls.length === 0) {
+        return doc.textContent;
+      }
+
+      var text = '';
+      for (var i = 0; i < contentEls.length; i++) {
+        text += contentEls[i].textContent + '\n';
+      }
+      return text;
+    },
+
     _showContext: function(group, sectionEl) {
       this._builder.emitGroup(group, sectionEl);
       sectionEl.parentNode.removeChild(sectionEl);