Merge "Lazy load HighlightJS library"

polygerrit-ui/app/BUCK

@@ -14,7 +14,21 @@ APP_SRCS = glob(
     'test/**',
   ] + WCT_TEST_PATTERNS + PY_TEST_PATTERNS)
 
-WEBJS = 'bower_components/webcomponentsjs/webcomponents-lite.js'
+# List libraries to be copied statically into the build. (i.e. Libraries not
+# expected to be Vulcanized.)
+WEB_JS_LIBS = [
+  ('bower_components/webcomponentsjs', 'webcomponents-lite.js'),
+  ('bower_components/highlightjs', 'highlight.min.js'),
+]
+
+# Map the static libraries to commands for the polygerrit_ui rule.
+JS_LIBS_MKDIR_CMDS = []
+JS_LIBS_UNZIP_CMDS = []
+for lib in WEB_JS_LIBS:
+  JS_LIBS_MKDIR_CMDS.append('mkdir -p ' + lib[0])
+  path = lib[0] + '/' + lib[1]
+  cmd = 'unzip -p $(location //polygerrit-ui:polygerrit_components) %s>%s' % (path, path)
+  JS_LIBS_UNZIP_CMDS.append(cmd)
 
 # TODO(dborowitz): Putting these rules in this package avoids having to handle
 # the app/ prefix like we would have to if this were in the parent directory.
@@ -26,11 +40,12 @@ genrule(
   cmd = ' && '.join([
     'mkdir $TMP/polygerrit_ui',
     'cd $TMP/polygerrit_ui',
-    'mkdir -p {fonts,elements,bower_components/webcomponentsjs}',
+    'mkdir -p {fonts,elements}',
+    ' && '.join(JS_LIBS_MKDIR_CMDS),
     'unzip -qd fonts $(location //polygerrit-ui:fonts)',
     'unzip -qd elements $(location :gr-app)',
     'cp -rp $SRCDIR/* .',
-    'unzip -p $(location //polygerrit-ui:polygerrit_components) %s>%s' % (WEBJS, WEBJS),
+    ' && '.join(JS_LIBS_UNZIP_CMDS),
     'cd $TMP',
     'zip -9qr $OUT .',
   ]),

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

@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
-<script src="../../../bower_components/highlightjs/highlight.min.js"></script>
 <dom-module id="gr-syntax-layer">
   <script src="../gr-diff/gr-diff-line.js"></script>
   <script src="../gr-diff-highlight/gr-annotation.js"></script>

polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer.js

@@ -31,8 +31,8 @@
     'text/x-sql': 'sql',
     'text/x-scala': 'scala',
   };
-
   var ASYNC_DELAY = 10;
+  var HLJS_PATH = '../../../bower_components/highlightjs/highlight.min.js';
 
   Polymer({
     is: 'gr-syntax-layer',
@@ -63,10 +63,6 @@
       _processHandle: Number,
     },
 
-    attached: function() {
-      hljs.configure({classPrefix: 'gr-diff gr-syntax gr-syntax-'});
-    },
-
     addListener: function(fn) {
       this.push('_listeners', fn);
     },
@@ -139,6 +135,7 @@
         lastNotify: {left: 1, right: 1},
       };
 
+      return this._loadHLJS().then(function() {
         return new Promise(function(resolve) {
           var nextStep = function() {
             this._processHandle = null;
@@ -170,6 +167,7 @@
 
           this._processHandle = this.async(nextStep, 1);
         }.bind(this));
+      }.bind(this));
     },
 
     /**
@@ -309,5 +307,24 @@
         fn(start, end, side);
       });
     },
+
+    /**
+     * Load and configure the HighlightJS library. If the library is already
+     * loaded, then do nothing and resolve.
+     * @return {Promise}
+     */
+    _loadHLJS: function() {
+      if (window.hljs) { return Promise.resolve(); }
+
+      return new Promise(function(resolve) {
+        var script = document.createElement('script');
+        script.src = HLJS_PATH;
+        script.onload = function() {
+          hljs.configure({classPrefix: 'gr-diff gr-syntax gr-syntax-'});
+          resolve();
+        };
+        Polymer.dom(this.root).appendChild(script);
+      }.bind(this));
+    }
   });
 })();

polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer_test.html

@@ -131,6 +131,7 @@ limitations under the License.
     test('process while disabled does nothing', function(done) {
       var processNextSpy = sandbox.spy(element, '_processNextLine');
       element.enabled = false;
+      var loadHLJSSpy = sandbox.spy(element, '_loadHLJS');
 
       var processPromise = element.process();
 
@@ -138,10 +139,16 @@ limitations under the License.
         assert.isFalse(processNextSpy.called);
         assert.equal(element._baseRanges.length, 0);
         assert.equal(element._revisionRanges.length, 0);
+        assert.isFalse(loadHLJSSpy.called);
         done();
       });
     });
 
+    suite('after hljs load', function() {
+      setup(function(done) {
+        element._loadHLJS().then(done);
+      });
+
       test('process highlight ipsum', function(done) {
         element.diff.meta_a.content_type = 'application/json';
         element.diff.meta_b.content_type = 'application/json';
@@ -183,8 +190,8 @@ limitations under the License.
                 assert.equal(range.length, 0);
               });
 
-        // There should be another pair of ranges on l.13 for the left and l.12
-        // for the right.
+          // There should be another pair of ranges on l.13 for the left and
+          // l.12 for the right.
           [element._baseRanges[13], element._revisionRanges[12]]
               .forEach(function(range) {
                 assert.equal(range.length, 1);
@@ -210,6 +217,7 @@ limitations under the License.
           done();
         });
       });
+    });
 
     test('_diffChanged calls cancel', function() {
       var cancelSpy = sandbox.spy(element, '_diffChanged');