Merge "Improves visible tabs rendering"
This commit is contained in:
commit
39e91b4b37
@ -77,6 +77,7 @@ limitations under the License.
|
||||
_builder: Object,
|
||||
_groups: Array,
|
||||
_layers: Array,
|
||||
_showTabs: Boolean,
|
||||
},
|
||||
|
||||
get diffElement() {
|
||||
@ -92,6 +93,7 @@ limitations under the License.
|
||||
this._layers = [
|
||||
this.$.syntaxLayer,
|
||||
this._createIntralineLayer(),
|
||||
this._createTabIndicatorLayer(),
|
||||
this.$.rangeLayer,
|
||||
];
|
||||
|
||||
@ -102,6 +104,7 @@ limitations under the License.
|
||||
|
||||
render: function(comments, prefs) {
|
||||
this.$.syntaxLayer.enabled = prefs.syntax_highlighting;
|
||||
this._showTabs = !!prefs.show_tabs;
|
||||
|
||||
// Stop the processor (if it's running).
|
||||
this.$.processor.cancel();
|
||||
@ -330,6 +333,31 @@ limitations under the License.
|
||||
};
|
||||
},
|
||||
|
||||
_createTabIndicatorLayer: function() {
|
||||
var show = (function() { return this._showTabs; }).bind(this);
|
||||
return {
|
||||
addListener: function() {},
|
||||
annotate: function(el, line) {
|
||||
// If visible tabs are disabled, do nothing.
|
||||
if (!show()) { return; }
|
||||
|
||||
// Find and annotate the locations of tabs.
|
||||
var split = line.text.split('\t');
|
||||
if (!split) { return; }
|
||||
for (var i = 0, pos = 0; i < split.length - 1; i++) {
|
||||
// Skip forward by the length of the content
|
||||
pos += split[i].length;
|
||||
|
||||
GrAnnotation.annotateElement(el, pos, 1,
|
||||
'style-scope gr-diff tab-indicator');
|
||||
|
||||
// Skip forward by one tab character.
|
||||
pos++;
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* In pages with large diffs, creating the first comment thread can be
|
||||
* slow because nested Polymer elements (particularly
|
||||
|
@ -493,7 +493,7 @@
|
||||
for (var i = 0; i < split.length - 1; i++) {
|
||||
offset += split[i].length;
|
||||
width = tabSize - (offset % tabSize);
|
||||
result += split[i] + this._getTabWrapper(width, this._prefs.show_tabs);
|
||||
result += split[i] + this._getTabWrapper(width);
|
||||
offset += width;
|
||||
}
|
||||
if (split.length) {
|
||||
@ -503,7 +503,7 @@
|
||||
return result;
|
||||
};
|
||||
|
||||
GrDiffBuilder.prototype._getTabWrapper = function(tabSize, showTabs) {
|
||||
GrDiffBuilder.prototype._getTabWrapper = function(tabSize) {
|
||||
// Force this to be a number to prevent arbitrary injection.
|
||||
tabSize = +tabSize;
|
||||
if (isNaN(tabSize)) {
|
||||
@ -511,9 +511,6 @@
|
||||
}
|
||||
|
||||
var str = '<span class="style-scope gr-diff tab ';
|
||||
if (showTabs) {
|
||||
str += 'withIndicator';
|
||||
}
|
||||
str += '" style="';
|
||||
// TODO(andybons): CSS tab-size is not supported in IE.
|
||||
str += 'tab-size:' + tabSize + ';';
|
||||
|
@ -414,6 +414,117 @@ limitations under the License.
|
||||
});
|
||||
});
|
||||
|
||||
suite('tab indicators', function() {
|
||||
var sandbox;
|
||||
var element;
|
||||
var layer;
|
||||
|
||||
setup(function() {
|
||||
sandbox = sinon.sandbox.create();
|
||||
element = fixture('basic');
|
||||
element._showTabs = true;
|
||||
layer = element._createTabIndicatorLayer();
|
||||
});
|
||||
|
||||
teardown(function() {
|
||||
sandbox.restore();
|
||||
});
|
||||
|
||||
test('does nothing with empty line', function() {
|
||||
var line = {text: ''};
|
||||
var el = document.createElement('div');
|
||||
var annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
|
||||
|
||||
layer.annotate(el, line);
|
||||
|
||||
assert.isFalse(annotateElementStub.called);
|
||||
});
|
||||
|
||||
test('does nothing with no tabs', function() {
|
||||
var str = 'lorem ipsum no tabs';
|
||||
var line = {text: str};
|
||||
var el = document.createElement('div');
|
||||
el.textContent = str;
|
||||
var annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
|
||||
|
||||
layer.annotate(el, line);
|
||||
|
||||
assert.isFalse(annotateElementStub.called);
|
||||
});
|
||||
|
||||
test('annotates tab at beginning', function() {
|
||||
var str = '\tlorem upsum';
|
||||
var line = {text: str};
|
||||
var el = document.createElement('div');
|
||||
el.textContent = str;
|
||||
var annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
|
||||
|
||||
layer.annotate(el, line);
|
||||
|
||||
assert.equal(annotateElementStub.callCount, 1);
|
||||
var args = annotateElementStub.getCalls()[0].args;
|
||||
assert.equal(args[0], el);
|
||||
assert.equal(args[1], 0, 'offset of tab indicator');
|
||||
assert.equal(args[2], 1, 'length of tab indicator');
|
||||
assert.include(args[3], 'tab-indicator');
|
||||
});
|
||||
|
||||
test('does not annotate when disabled', function() {
|
||||
element._showTabs = false;
|
||||
|
||||
var str = '\tlorem upsum';
|
||||
var line = {text: str};
|
||||
var el = document.createElement('div');
|
||||
el.textContent = str;
|
||||
var annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
|
||||
|
||||
layer.annotate(el, line);
|
||||
|
||||
assert.isFalse(annotateElementStub.called);
|
||||
});
|
||||
|
||||
test('annotates multiple in beginning', function() {
|
||||
var str = '\t\tlorem upsum';
|
||||
var line = {text: str};
|
||||
var el = document.createElement('div');
|
||||
el.textContent = str;
|
||||
var annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
|
||||
|
||||
layer.annotate(el, line);
|
||||
|
||||
assert.equal(annotateElementStub.callCount, 2);
|
||||
|
||||
var args = annotateElementStub.getCalls()[0].args;
|
||||
assert.equal(args[0], el);
|
||||
assert.equal(args[1], 0, 'offset of tab indicator');
|
||||
assert.equal(args[2], 1, 'length of tab indicator');
|
||||
assert.include(args[3], 'tab-indicator');
|
||||
|
||||
args = annotateElementStub.getCalls()[1].args;
|
||||
assert.equal(args[0], el);
|
||||
assert.equal(args[1], 1, 'offset of tab indicator');
|
||||
assert.equal(args[2], 1, 'length of tab indicator');
|
||||
assert.include(args[3], 'tab-indicator');
|
||||
});
|
||||
|
||||
test('annotates intermediate tabs', function() {
|
||||
var str = 'lorem\tupsum';
|
||||
var line = {text: str};
|
||||
var el = document.createElement('div');
|
||||
el.textContent = str;
|
||||
var annotateElementStub = sandbox.stub(GrAnnotation, 'annotateElement');
|
||||
|
||||
layer.annotate(el, line);
|
||||
|
||||
assert.equal(annotateElementStub.callCount, 1);
|
||||
var args = annotateElementStub.getCalls()[0].args;
|
||||
assert.equal(args[0], el);
|
||||
assert.equal(args[1], 5, 'offset of tab indicator');
|
||||
assert.equal(args[2], 1, 'length of tab indicator');
|
||||
assert.include(args[3], 'tab-indicator');
|
||||
});
|
||||
});
|
||||
|
||||
suite('rendering', function() {
|
||||
var content;
|
||||
var outputEl;
|
||||
|
@ -152,11 +152,11 @@ limitations under the License.
|
||||
}
|
||||
.tab {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.tab.withIndicator {
|
||||
color: #D68E47;
|
||||
text-decoration: line-through;
|
||||
.tab-indicator:before {
|
||||
color: #C62828;
|
||||
/* >> character */
|
||||
content: '\00BB';
|
||||
}
|
||||
</style>
|
||||
<style include="gr-theme-default"></style>
|
||||
|
Loading…
Reference in New Issue
Block a user