afbc603265
The syntax layer sometimes emitted syntax annotations which did not have corresponding styles, making the resulting elements dead weight in the DOM. With this change, the syntax layer only attaches the subset of syntax annotations which have styles by comparing them against a whitelist. Change-Id: Id6ced6df2ef765abd3d93cd4798381726619230b
402 lines
12 KiB
JavaScript
402 lines
12 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';
|
|
|
|
var LANGUAGE_MAP = {
|
|
'application/dart': 'dart',
|
|
'application/json': 'json',
|
|
'application/typescript': 'typescript',
|
|
'text/css': 'css',
|
|
'text/html': 'html',
|
|
'text/javascript': 'js',
|
|
'text/x-clojure': 'clojure',
|
|
'text/x-common-lisp': 'lisp',
|
|
'text/x-csharp': 'csharp',
|
|
'text/x-csrc': 'cpp',
|
|
'text/x-c++src': 'cpp',
|
|
'text/x-d': 'd',
|
|
'text/x-go': 'go',
|
|
'text/x-haskell': 'haskell',
|
|
'text/x-java': 'java',
|
|
'text/x-lua': 'lua',
|
|
'text/x-markdown': 'markdown',
|
|
'text/x-objectivec': 'objectivec',
|
|
'text/x-ocaml': 'ocaml',
|
|
'text/x-perl': 'perl',
|
|
'text/x-protobuf': 'protobuf',
|
|
'text/x-python': 'python',
|
|
'text/x-ruby': 'ruby',
|
|
'text/x-rustsrc': 'rust',
|
|
'text/x-scala': 'scala',
|
|
'text/x-sh': 'bash',
|
|
'text/x-sql': 'sql',
|
|
'text/x-swift': 'swift',
|
|
'text/x-yaml': 'yaml',
|
|
};
|
|
var ASYNC_DELAY = 10;
|
|
var HLJS_PATH = 'bower_components/highlightjs/highlight.min.js';
|
|
|
|
var CLASS_WHITELIST = {
|
|
'gr-diff gr-syntax gr-syntax-literal': true,
|
|
'gr-diff gr-syntax gr-syntax-keyword': true,
|
|
'gr-diff gr-syntax gr-syntax-selector-tag': true,
|
|
'gr-diff gr-syntax gr-syntax-built_in': true,
|
|
'gr-diff gr-syntax gr-syntax-type': true,
|
|
'gr-diff gr-syntax gr-syntax-selector-pseudo': true,
|
|
'gr-diff gr-syntax gr-syntax-template-variable': true,
|
|
'gr-diff gr-syntax gr-syntax-number': true,
|
|
'gr-diff gr-syntax gr-syntax-regexp': true,
|
|
'gr-diff gr-syntax gr-syntax-variable': true,
|
|
'gr-diff gr-syntax gr-syntax-selector-attr': true,
|
|
'gr-diff gr-syntax gr-syntax-template-tag': true,
|
|
'gr-diff gr-syntax gr-syntax-string': true,
|
|
'gr-diff gr-syntax gr-syntax-selector-id': true,
|
|
'gr-diff gr-syntax gr-syntax-title': true,
|
|
'gr-diff gr-syntax gr-syntax-params': true,
|
|
'gr-diff gr-syntax gr-syntax-comment': true,
|
|
'gr-diff gr-syntax gr-syntax-meta': true,
|
|
'gr-diff gr-syntax gr-syntax-meta-keyword': true,
|
|
'gr-diff gr-syntax gr-syntax-tag': true,
|
|
'gr-diff gr-syntax gr-syntax-name': true,
|
|
'gr-diff gr-syntax gr-syntax-attr': true,
|
|
'gr-diff gr-syntax gr-syntax-attribute': true,
|
|
'gr-diff gr-syntax gr-syntax-emphasis': true,
|
|
'gr-diff gr-syntax gr-syntax-strong': true,
|
|
'gr-diff gr-syntax gr-syntax-link': true,
|
|
'gr-diff gr-syntax gr-syntax-selector-class': true,
|
|
};
|
|
|
|
Polymer({
|
|
is: 'gr-syntax-layer',
|
|
|
|
properties: {
|
|
diff: {
|
|
type: Object,
|
|
observer: '_diffChanged',
|
|
},
|
|
enabled: {
|
|
type: Boolean,
|
|
value: true,
|
|
},
|
|
_baseRanges: {
|
|
type: Array,
|
|
value: function() { return []; },
|
|
},
|
|
_revisionRanges: {
|
|
type: Array,
|
|
value: function() { return []; },
|
|
},
|
|
_baseLanguage: String,
|
|
_revisionLanguage: String,
|
|
_listeners: {
|
|
type: Array,
|
|
value: function() { return []; },
|
|
},
|
|
_processHandle: Number,
|
|
},
|
|
|
|
addListener: function(fn) {
|
|
this.push('_listeners', fn);
|
|
},
|
|
|
|
/**
|
|
* Annotation layer method to add syntax annotations to the given element
|
|
* for the given line.
|
|
* @param {!HTMLElement} el
|
|
* @param {!GrDiffLine} line
|
|
*/
|
|
annotate: function(el, line) {
|
|
if (!this.enabled) { return; }
|
|
|
|
// Determine the side.
|
|
var side;
|
|
if (line.type === GrDiffLine.Type.REMOVE || (
|
|
line.type === GrDiffLine.Type.BOTH &&
|
|
el.getAttribute('data-side') !== 'right')) {
|
|
side = 'left';
|
|
} else if (line.type === GrDiffLine.Type.ADD || (
|
|
el.getAttribute('data-side') !== 'left')) {
|
|
side = 'right';
|
|
}
|
|
|
|
// Find the relevant syntax ranges, if any.
|
|
var ranges = [];
|
|
if (side === 'left' && this._baseRanges.length >= line.beforeNumber) {
|
|
ranges = this._baseRanges[line.beforeNumber - 1] || [];
|
|
} else if (side === 'right' &&
|
|
this._revisionRanges.length >= line.afterNumber) {
|
|
ranges = this._revisionRanges[line.afterNumber - 1] || [];
|
|
}
|
|
|
|
// Apply the ranges to the element.
|
|
ranges.forEach(function(range) {
|
|
GrAnnotation.annotateElement(
|
|
el, range.start, range.length, range.className);
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Start processing symtax for the loaded diff and notify layer listeners
|
|
* as syntax info comes online.
|
|
* @return {Promise}
|
|
*/
|
|
process: function() {
|
|
// Discard existing ranges.
|
|
this._baseRanges = [];
|
|
this._revisionRanges = [];
|
|
|
|
if (!this.enabled || !this.diff.content.length) {
|
|
return Promise.resolve();
|
|
}
|
|
|
|
this.cancel();
|
|
|
|
if (this.diff.meta_a) {
|
|
this._baseLanguage = LANGUAGE_MAP[this.diff.meta_a.content_type];
|
|
}
|
|
if (this.diff.meta_b) {
|
|
this._revisionLanguage = LANGUAGE_MAP[this.diff.meta_b.content_type];
|
|
}
|
|
if (!this._baseLanguage && !this._revisionLanguage) {
|
|
return Promise.resolve();
|
|
}
|
|
|
|
var state = {
|
|
sectionIndex: 0,
|
|
lineIndex: 0,
|
|
baseContext: undefined,
|
|
revisionContext: undefined,
|
|
lineNums: {left: 1, right: 1},
|
|
lastNotify: {left: 1, right: 1},
|
|
};
|
|
|
|
return this._loadHLJS().then(function() {
|
|
return new Promise(function(resolve) {
|
|
var nextStep = function() {
|
|
this._processHandle = null;
|
|
this._processNextLine(state);
|
|
|
|
// Move to the next line in the section.
|
|
state.lineIndex++;
|
|
|
|
// If the section has been exhausted, move to the next one.
|
|
if (this._isSectionDone(state)) {
|
|
state.lineIndex = 0;
|
|
state.sectionIndex++;
|
|
}
|
|
|
|
// If all sections have been exhausted, finish.
|
|
if (state.sectionIndex >= this.diff.content.length) {
|
|
resolve();
|
|
this._notify(state);
|
|
return;
|
|
}
|
|
|
|
if (state.sectionIndex !== 0 && state.lineIndex % 100 === 0) {
|
|
this._notify(state);
|
|
this._processHandle = this.async(nextStep, ASYNC_DELAY);
|
|
} else {
|
|
nextStep.call(this);
|
|
}
|
|
};
|
|
|
|
this._processHandle = this.async(nextStep, 1);
|
|
}.bind(this));
|
|
}.bind(this));
|
|
},
|
|
|
|
/**
|
|
* Cancel any asynchronous syntax processing jobs.
|
|
*/
|
|
cancel: function() {
|
|
if (this._processHandle) {
|
|
this.cancelAsync(this._processHandle);
|
|
this._processHandle = null;
|
|
}
|
|
},
|
|
|
|
_diffChanged: function() {
|
|
this.cancel();
|
|
this._baseRanges = [];
|
|
this._revisionRanges = [];
|
|
},
|
|
|
|
/**
|
|
* Take a string of HTML with the (potentially nested) syntax markers
|
|
* Highlight.js emits and emit a list of text ranges and classes for the
|
|
* markers.
|
|
* @param {string} str The string of HTML.
|
|
* @return {!Array<!Object>} The list of ranges.
|
|
*/
|
|
_rangesFromString: function(str) {
|
|
var div = document.createElement('div');
|
|
div.innerHTML = str;
|
|
return this._rangesFromElement(div, 0);
|
|
},
|
|
|
|
_rangesFromElement: function(elem, offset) {
|
|
var result = [];
|
|
for (var i = 0; i < elem.childNodes.length; i++) {
|
|
var node = elem.childNodes[i];
|
|
var nodeLength = GrAnnotation.getLength(node);
|
|
// Note: HLJS may emit a span with class undefined when it thinks there
|
|
// may be a syntax error.
|
|
if (node.tagName === 'SPAN' && node.className !== 'undefined' &&
|
|
CLASS_WHITELIST.hasOwnProperty(node.className)) {
|
|
result.push({
|
|
start: offset,
|
|
length: nodeLength,
|
|
className: node.className,
|
|
});
|
|
if (node.children.length) {
|
|
result = result.concat(this._rangesFromElement(node, offset));
|
|
}
|
|
}
|
|
offset += nodeLength;
|
|
}
|
|
return result;
|
|
},
|
|
|
|
/**
|
|
* For a given state, process the syntax for the next line (or pair of
|
|
* lines).
|
|
* @param {!Object} state The processing state for the layer.
|
|
*/
|
|
_processNextLine: function(state) {
|
|
var baseLine = undefined;
|
|
var revisionLine = undefined;
|
|
var hljs = this._getHighlightLib();
|
|
|
|
var section = this.diff.content[state.sectionIndex];
|
|
if (section.ab) {
|
|
baseLine = section.ab[state.lineIndex];
|
|
revisionLine = section.ab[state.lineIndex];
|
|
state.lineNums.left++;
|
|
state.lineNums.right++;
|
|
} else {
|
|
if (section.a && section.a.length > state.lineIndex) {
|
|
baseLine = section.a[state.lineIndex];
|
|
state.lineNums.left++;
|
|
}
|
|
if (section.b && section.b.length > state.lineIndex) {
|
|
revisionLine = section.b[state.lineIndex];
|
|
state.lineNums.right++;
|
|
}
|
|
}
|
|
|
|
// To store the result of the syntax highlighter.
|
|
var result;
|
|
|
|
if (this._baseLanguage && baseLine !== undefined) {
|
|
result = hljs.highlight(this._baseLanguage, baseLine, true,
|
|
state.baseContext);
|
|
this.push('_baseRanges', this._rangesFromString(result.value));
|
|
state.baseContext = result.top;
|
|
}
|
|
|
|
if (this._revisionLanguage && revisionLine !== undefined) {
|
|
result = hljs.highlight(this._revisionLanguage, revisionLine, true,
|
|
state.revisionContext);
|
|
this.push('_revisionRanges', this._rangesFromString(result.value));
|
|
state.revisionContext = result.top;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Tells whether the state has exhausted its current section.
|
|
* @param {!Object} state
|
|
* @return {boolean}
|
|
*/
|
|
_isSectionDone: function(state) {
|
|
var section = this.diff.content[state.sectionIndex];
|
|
if (section.ab) {
|
|
return state.lineIndex >= section.ab.length;
|
|
} else {
|
|
return (!section.a || state.lineIndex >= section.a.length) &&
|
|
(!section.b || state.lineIndex >= section.b.length);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* For a given state, notify layer listeners of any processed line ranges
|
|
* that have not yet been notified.
|
|
* @param {!Object} state
|
|
*/
|
|
_notify: function(state) {
|
|
if (state.lineNums.left - state.lastNotify.left) {
|
|
this._notifyRange(
|
|
state.lastNotify.left,
|
|
state.lineNums.left,
|
|
'left');
|
|
state.lastNotify.left = state.lineNums.left;
|
|
}
|
|
if (state.lineNums.right - state.lastNotify.right) {
|
|
this._notifyRange(
|
|
state.lastNotify.right,
|
|
state.lineNums.right,
|
|
'right');
|
|
state.lastNotify.right = state.lineNums.right;
|
|
}
|
|
},
|
|
|
|
_notifyRange: function(start, end, side) {
|
|
this._listeners.forEach(function(fn) {
|
|
fn(start, end, side);
|
|
});
|
|
},
|
|
|
|
_getHighlightLib: function() {
|
|
return window.hljs;
|
|
},
|
|
|
|
_isHighlightLibLoaded: function() {
|
|
return !!this._getHighlightLib();
|
|
},
|
|
|
|
_configureHighlightLib: function() {
|
|
this._getHighlightLib().configure(
|
|
{classPrefix: 'gr-diff gr-syntax gr-syntax-'});
|
|
},
|
|
|
|
_getLibRoot: function() {
|
|
if (this._cachedLibRoot) { return this._cachedLibRoot; }
|
|
|
|
return this._cachedLibRoot = document.head
|
|
.querySelector('link[rel=import][href$="gr-app.html"]')
|
|
.href
|
|
.match(/(.+\/)elements\/gr-app\.html/)[1];
|
|
},
|
|
_cachedLibRoot: null,
|
|
|
|
/**
|
|
* Load and configure the HighlightJS library. If the library is already
|
|
* loaded, then do nothing and resolve.
|
|
* @return {Promise}
|
|
*/
|
|
_loadHLJS: function() {
|
|
if (this._isHighlightLibLoaded()) { return Promise.resolve(); }
|
|
return new Promise(function(resolve) {
|
|
var script = document.createElement('script');
|
|
script.src = this._getLibRoot() + HLJS_PATH;
|
|
script.onload = function() {
|
|
this._configureHighlightLib();
|
|
resolve();
|
|
}.bind(this);
|
|
Polymer.dom(this.root).appendChild(script);
|
|
}.bind(this));
|
|
}
|
|
});
|
|
})();
|