Merge pull request #222 from gemini-testing/feature/lazy-report

html report: Load report image in lazy mode

lib/reporters/html/report.js

@@ -6,6 +6,7 @@
         filter = Array.prototype.filter;
 
     function expandAll() {
+        loadLazyImages(document, '.section_collapsed img');
         forEach.call(document.querySelectorAll('.section'), function(section) {
             section.classList.remove('section_collapsed');
         });
@@ -18,6 +19,7 @@
     }
 
     function expandErrors() {
+        loadLazyImages(document, '.section_status_fail > .section__body > .image-box img');
         forEach.call(document.querySelectorAll('.section'), function(section) {
             if (section.classList.contains('section_status_fail')) {
                 section.classList.remove('section_collapsed');
@@ -63,6 +65,14 @@
         }
     }
 
+    function loadLazyImages(elem, selector) {
+        forEach.call(elem.querySelectorAll(selector), function(img) {
+            if (img.dataset.src && img.src !== img.dataset.src) {
+                img.src = img.dataset.src;
+            }
+        });
+    }
+
     document.addEventListener('DOMContentLoaded', function() {
         document.getElementById('expandAll').addEventListener('click', expandAll);
         document.getElementById('collapseAll').addEventListener('click', collapseAll);
@@ -71,8 +81,11 @@
 
         forEach.call(document.querySelectorAll('.section'), function(section) {
             section.querySelector('.section__title').addEventListener('click', function() {
+                loadLazyImages(section, ':scope > .section__body > .image-box img');
                 section.classList.toggle('section_collapsed');
             });
         });
     });
+
+    expandErrors();
 }());

lib/reporters/html/suite.hbs

@@ -2,7 +2,7 @@
     <div class="section__title">{{name}}</div>
     <div class="section__body section__body_guided">
         {{#each browsers}}
-            <div class="section {{collapse}} {{status}}">
+            <div class="section section_collapsed {{status}}">
                 {{#if skipped}}
                     <div class="section__title">[skipped] {{name}}</div>
                 {{/if}}

lib/reporters/html/view.js

@@ -32,11 +32,7 @@ Handlebars.registerHelper('has-fails', function() {
 });
 
 Handlebars.registerHelper('image', function(kind) {
-    return new Handlebars.SafeString('<img src="' + encodeURI(this[kind + 'Path']) + '">');
-});
-
-Handlebars.registerHelper('collapse', function() {
-    return hasFails(this)? '' : 'section_collapsed';
+    return new Handlebars.SafeString('<img data-src="' + encodeURI(this[kind + 'Path']) + '">');
 });
 
 function loadTemplate(name) {