Fix select and copy on comments for polymer 1 and polymer 2
Bug: Issue 11427
Bug: Issue 11447
Bug: Issue 11450
Change-Id: I1888c6323b08d62c4c68bfcc3dce602b3a4ac41a
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-range-normalizer.js b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-range-normalizer.js
index eb4123d..556395c 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-range-normalizer.js
+++ b/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;
},
};
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection.html b/polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection.html
index 83b6f55..6469382 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection.html
@@ -20,6 +20,31 @@
<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>
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection.js b/polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection.js
index 072a0d7..ff7593b 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection.js
+++ b/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; }
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
index cbb653b..bc8af9d 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -42,6 +42,7 @@
max-width: var(--content-width, 80ch);
white-space: normal;
}
+
.thread-group {
display: block;
max-width: var(--content-width, 80ch);
@@ -307,7 +308,8 @@
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 @@
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);
