0490413eb8
A major source of latency in creating comments in large diffs stems from GR-DIFF-SELECTION applying selection-restricting classes to a parent of the diff. When the diff contains a large number of lines (and thus a large number of elements) applying a class forces a style recompute for the substantial subtree. This change optimizes this in two ways: * **Initialize to the right side:** The selection-restricting class is initialized to the right side, before the diff is even completely built. This eliminates the need for a recomputation preceding the first comment add on the right side (the most-likely side to be interacted with). * **Minimize the number of class modifications:** only add or remove classes when necessary. This eliminates recomputes for consecutive mousedown events that occur on the a common diff side. On an i7 MBP, this eliminates ~120ms for the first comment on the right and ~40ms for subsequent such comments. Change-Id: Ibb8a7eca0398a5c7265dc1385967bce3dae5e5ef
96 lines
2.7 KiB
JavaScript
96 lines
2.7 KiB
JavaScript
// 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.
|
|
(function() {
|
|
'use strict';
|
|
|
|
Polymer({
|
|
is: 'gr-diff-selection',
|
|
|
|
properties: {
|
|
_cachedDiffBuilder: Object,
|
|
},
|
|
|
|
listeners: {
|
|
'copy': '_handleCopy',
|
|
'down': '_handleDown',
|
|
},
|
|
|
|
attached: function() {
|
|
this.classList.add('selected-right');
|
|
},
|
|
|
|
get diffBuilder() {
|
|
if (!this._cachedDiffBuilder) {
|
|
this._cachedDiffBuilder =
|
|
Polymer.dom(this).querySelector('gr-diff-builder');
|
|
}
|
|
return this._cachedDiffBuilder;
|
|
},
|
|
|
|
_handleDown: function(e) {
|
|
var lineEl = this.diffBuilder.getLineElByChild(e.target);
|
|
if (!lineEl) {
|
|
return;
|
|
}
|
|
var side = this.diffBuilder.getSideByLineEl(lineEl);
|
|
var targetClass = 'selected-' + side;
|
|
var alternateClass = 'selected-' + (side === 'left' ? 'right' : 'left');
|
|
|
|
if (this.classList.contains(alternateClass)) {
|
|
this.classList.remove(alternateClass);
|
|
}
|
|
if (!this.classList.contains(targetClass)) {
|
|
this.classList.add(targetClass);
|
|
}
|
|
},
|
|
|
|
_handleCopy: function(e) {
|
|
if (!e.target.classList.contains('content')) {
|
|
return;
|
|
}
|
|
var lineEl = this.diffBuilder.getLineElByChild(e.target);
|
|
if (!lineEl) {
|
|
return;
|
|
}
|
|
var side = this.diffBuilder.getSideByLineEl(lineEl);
|
|
var text = this._getSelectedText(side);
|
|
e.clipboardData.setData('Text', text);
|
|
e.preventDefault();
|
|
},
|
|
|
|
_getSelectedText: function(opt_side) {
|
|
var sel = window.getSelection();
|
|
if (sel.rangeCount != 1) {
|
|
return; // No multi-select support yet.
|
|
}
|
|
var range = sel.getRangeAt(0);
|
|
var fragment = range.cloneContents();
|
|
var selector = '.content,td.content:nth-of-type(1)';
|
|
if (opt_side) {
|
|
selector = '.' + opt_side + ' + ' + selector;
|
|
}
|
|
var contentEls = Polymer.dom(fragment).querySelectorAll(selector);
|
|
if (contentEls.length === 0) {
|
|
return fragment.textContent;
|
|
}
|
|
|
|
var text = '';
|
|
for (var i = 0; i < contentEls.length; i++) {
|
|
text += contentEls[i].textContent + '\n';
|
|
}
|
|
return text;
|
|
},
|
|
});
|
|
})();
|