Fix select and copy on comments for polymer 1 and polymer 2

Bug: Issue 11427
Bug: Issue 11447
Bug: Issue 11450
Change-Id: I1888c6323b08d62c4c68bfcc3dce602b3a4ac41a

polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-range-normalizer.js

@@ -54,7 +54,7 @@
       if (element.nodeName === '#text') {
         element = element.parentElement;
       }
-      while (!element.classList.contains('contentText')) {
+      while (element && !element.classList.contains('contentText')) {
         if (element.parentElement === null) {
           return target;
         }
@@ -80,7 +80,7 @@
         if (n === child) {
           break;
         }
-        if (n.childNodes && n.childNodes.length !== 0) {
+        if (n && n.childNodes && n.childNodes.length !== 0) {
           const arr = [];
           for (const childNode of n.childNodes) {
             arr.push(childNode);
@@ -101,7 +101,9 @@
      * @return {number} The length of the text.
      */
     _getLength(node) {
-      return node.textContent.replace(REGEX_ASTRAL_SYMBOL, '_').length;
+      return node
+        ? node.textContent.replace(REGEX_ASTRAL_SYMBOL, '_').length
+        : 0;
     },
   };
 

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

@@ -20,6 +20,31 @@ limitations under the License.
 
 <dom-module id="gr-diff-selection">
   <template>
+    <style include="shared-styles">
+      /** Select and copy for Polymer 1*/
+      .contentWrapper ::content .content,
+      .contentWrapper ::content .contextControl,
+      .contentWrapper ::content .blame {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+      }
+
+      :host-context(.selected-left:not(.selected-comment)) .contentWrapper ::content .side-by-side .left + .content .contentText,
+      :host-context(.selected-right:not(.selected-comment)) .contentWrapper ::content .side-by-side .right + .content .contentText,
+      :host-context(.selected-left:not(.selected-comment)) .contentWrapper ::content .unified .left.lineNum ~ .content:not(.both) .contentText,
+      :host-context(.selected-right:not(.selected-comment)) .contentWrapper ::content .unified .right.lineNum ~ .content .contentText,
+      :host-context(.selected-left.selected-comment) .contentWrapper ::content .side-by-side .left + .content .message,
+      :host-context(.selected-right.selected-comment) .contentWrapper ::content .side-by-side .right + .content .message :not(.collapsedContent),
+      :host-context(.selected-comment) .contentWrapper ::content .unified .message :not(.collapsedContent),
+      :host-context(.selected-blame) .contentWrapper ::content .blame {
+        -webkit-user-select: text;
+        -moz-user-select: text;
+        -ms-user-select: text;
+        user-select: text;
+      }
+    </style>
     <div class="contentWrapper">
       <slot></slot>
     </div>

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

@@ -73,7 +73,28 @@
       this._linesCache = getNewCache();
     },
 
+    _handleDownOnRangeComment(node) {
+      // Keep the original behavior in polymer 1
+      if (!window.POLYMER2) return false;
+      if (node &&
+          node.nodeName &&
+          node.nodeName.toLowerCase() === 'gr-comment-thread') {
+        this._setClasses([
+          SelectionClass.COMMENT,
+          node.commentSide === 'left' ?
+          SelectionClass.LEFT :
+          SelectionClass.RIGHT,
+        ]);
+        return true;
+      }
+      return false;
+    },
+
     _handleDown(e) {
+      // Handle the down event on comment thread in Polymer 2
+      const handled = this._handleDownOnRangeComment(e.target);
+      if (handled) return;
+
       const lineEl = this.diffBuilder.getLineElByChild(e.target);
       const blameSelected = this._elementDescendedFromClass(e.target, 'blame');
       if (!lineEl && !blameSelected) { return; }
@@ -140,6 +161,10 @@
     },
 
     _handleCopy(e) {
+      // Let the browser handle the copy event for polymer 2
+      // as selection across shadow DOM will be hard to process
+      if (window.POLYMER2) return;
+
       let commentSelected = false;
       const target = this._getCopyEventTarget(e);
       if (target.type === 'textarea') { return; }

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

@@ -42,6 +42,7 @@ limitations under the License.
         max-width: var(--content-width, 80ch);
         white-space: normal;
       }
+
       .thread-group {
         display: block;
         max-width: var(--content-width, 80ch);
@@ -307,7 +308,8 @@ limitations under the License.
         background: linear-gradient(to right bottom, #FFD1A4 0%, #FFD1A4 50%, #E0F2F1 50%, #E0F2F1 100%);
       }
 
-      /** Select to copy */
+      /** BEGIN: Select and copy for Polymer 2 */
+      /** Below was copied and modified from the original css in gr-diff-selection.html */
       .content,
       .contextControl,
       .blame {
@@ -331,6 +333,16 @@ limitations under the License.
         user-select: text;
       }
 
+      /** Make comments selectable */
+      .selected-left ::slotted(gr-comment-thread[comment-side=left]),
+      .selected-right ::slotted(gr-comment-thread[comment-side=right]) {
+        -webkit-user-select: text;
+        -moz-user-select: text;
+        -ms-user-select: text;
+        user-select: text;
+      }
+      /** END: Select and copy for Polymer 2 */
+
       .whitespace-change-only-message {
         background-color: var(--diff-context-control-background-color);
         border: 1px solid var(--diff-context-control-border-color);

polygerrit-ui/app/elements/shared/gr-comment/gr-comment.html

@@ -232,6 +232,16 @@ limitations under the License.
       #deleteBtn.showDeleteButtons {
         display: block;
       }
+
+      /** Disable select for the caret and actions */
+      .actions,
+      .show-hide {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+      }
+
     </style>
     <div id="container" class="container">
       <div class="header" id="header" on-tap="_handleToggleCollapsed">