erp5_web_js_style: hide the page until full rendering is done

Lazy loading img are also not loaded, which speed up page rendering.

bt5/erp5_web_js_style/SkinTemplateItem/portal_skins/erp5_web_js_style_ui/jsstyle.js.js

@@ -5,6 +5,16 @@
           loopEventListener, history, console) {
   "use strict";
 
+  function hidePage() {
+    document.documentElement.hidden = true;
+    document.documentElement.style.display = 'none';
+  }
+
+  function showPage() {
+    document.documentElement.hidden = false;
+    document.documentElement.style.display = 'unset';
+  }
+
   // XXX Copy/paste from renderjs
   function ajax(url) {
     var xhr;
@@ -386,7 +396,7 @@
 
   rJS(window)
     .allowPublicAcquisition("reportServiceError", function () {
-      this.element.hidden = false;
+      showPage();
       throw rJS.AcquisitionError();
     })
     .declareJob("listenURLChange", listenURLChange)
@@ -426,10 +436,16 @@
               gadget.listenURLChange();
 
               body.appendChild(style_gadget.element);
-              gadget.element.hidden = false;
+              // Show the page after the first rendering
+              // This prevent displaying the original HTML page
+              // in case cpu/network is too slow
+              showPage();
+
               scrollToHash(window.location.hash);
             }, function (error) {
-              gadget.element.hidden = false;
+              // Ensure the page is visible in case of error
+              showPage();
+
               throw error;
             });
         }, function (error) {
@@ -448,5 +464,13 @@
         });
     });
 
+  // Hide the page as soon as possible
+  // This prevent displaying the original HTML page
+  // in case cpu/network is too slow
+  // (when fetching rendering gadget or if pages containes img elements)
+  // Hiding the page MUST NOT be done in the HTML, to ensure compatibility
+  // with browsers without javascript
+  hidePage();
+
 }(window, document, RSVP, rJS, XMLHttpRequest, DOMParser, URL,
   rJS.loopEventListener, history, console));
\ No newline at end of file

bt5/erp5_web_js_style_test/PathTemplateItem/portal_tests/js_style_zuite/testJsStyleDemoStyleImage.xml

+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>_bind_names</string> </key>
+            <value>
+              <object>
+                <klass>
+                  <global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
+                </klass>
+                <tuple/>
+                <state>
+                  <dictionary>
+                    <item>
+                        <key> <string>_asgns</string> </key>
+                        <value>
+                          <dictionary>
+                            <item>
+                                <key> <string>name_subpath</string> </key>
+                                <value> <string>traverse_subpath</string> </value>
+                            </item>
+                          </dictionary>
+                        </value>
+                    </item>
+                  </dictionary>
+                </state>
+              </object>
+            </value>
+        </item>
+        <item>
+            <key> <string>content_type</string> </key>
+            <value> <string>text/html</string> </value>
+        </item>
+        <item>
+            <key> <string>expand</string> </key>
+            <value> <int>0</int> </value>
+        </item>
+        <item>
+            <key> <string>id</string> </key>
+            <value> <string>testJsStyleDemoStyleImage</string> </value>
+        </item>
+        <item>
+            <key> <string>output_encoding</string> </key>
+            <value> <string>utf-8</string> </value>
+        </item>
+        <item>
+            <key> <string>title</string> </key>
+            <value> <unicode></unicode> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>

bt5/erp5_web_js_style_test/PathTemplateItem/portal_tests/js_style_zuite/testJsStyleDemoStyleImage.zpt

+<html xmlns:tal="http://xml.zope.org/namespaces/tal"
+      xmlns:metal="http://xml.zope.org/namespaces/metal">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<title>Test JS Style No Style</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">Test JS Style Image not loaded on recent browsers (expected failure)</td></tr>
+</thead><tbody>
+<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />
+
+<tr>
+  <td>open</td>
+  <td>${base_url}/ERP5Site_createWebJSStyleZuiteTestData?configuration=section</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertTextPresent</td>
+  <td>Web Site created.</td>
+  <td></td>
+</tr>
+
+<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/wait_for_activities" />
+
+
+<!-- Initialize -->
+<tr>
+  <td>open</td>
+  <td>${base_url}/web_site_module/erp5_web_js_style_test_site/erp5_web_js_style_test_image_contentpage</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//img[@id='lazy_img' and @alt='loaded']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//img[@id='eager_img' and @alt='error']</td>
+  <td></td>
+</tr>
+
+</tbody></table>
+</body>
+</html>
\ No newline at end of file

bt5/erp5_web_js_style_test/SkinTemplateItem/portal_skins/erp5_web_js_style_test/ERP5Site_createWebJSStyleZuiteTestData.py

@@ -2,6 +2,7 @@
 from DateTime import DateTime
 
 portal = context.getPortalObject()
+now = DateTime()
 
 web_page_portal_type = "Web Page"
 web_site_portal_type = "Web Site"
@@ -34,6 +35,9 @@ web_page_content_en_id = "erp5_web_js_style_test_contentpage_en"
 web_page_content_fr_id = "erp5_web_js_style_test_contentpage_fr"
 web_page_content_zh_id = "erp5_web_js_style_test_contentpage_zh"
 
+web_page_image_content_en_id = "erp5_web_js_style_test_image_contentpage_en"
+web_page_image_content_reference = 'erp5_web_js_style_test_image_contentpage'
+
 publicate_date = DateTime('2011/12/13 11:22:33 GMT+5')
 
 ### English web page
@@ -151,6 +155,24 @@ web_page = module.newContent(
 )
 portal.portal_workflow.doActionFor(web_page, 'publish_action')
 
+### English image web page
+module = portal.getDefaultModule(web_page_portal_type)
+if getattr(module, web_page_image_content_en_id, None) is not None:
+  module.manage_delObjects([web_page_image_content_en_id])
+web_page = module.newContent(
+  portal_type=web_page_portal_type,
+  id=web_page_image_content_en_id,
+  reference=web_page_image_content_reference,
+  contributor_value=contributor,
+  language="en",
+  version="001",
+  text_content="""
+<img loading="eager" id="eager_img" alt="default alt" src="WebSite_downloadFakeImage?cachekey=eager_%s"></img>
+<img loading="lazy" id="lazy_img" alt="default alt" src="WebSite_downloadFakeImage?cachekey=lazy_%s"></img>
+""" % (now.HTML4(), now.HTML4())
+)
+portal.portal_workflow.doActionFor(web_page, 'publish_action')
+
 configuration_dict = {
   'nostyle': {
     'title': 'No Style',
@@ -251,7 +273,7 @@ web_site = module.newContent(
   criterion_property_list=('reference',),
   **configuration_dict[configuration]
 )
-web_site.setCriterion('reference', identity='erp5_web_js_style_test_contentpage')
+web_site.setCriterion('reference', identity=web_page_content_reference)
 
 web_section = web_site.newContent(
   portal_type=web_section_portal_type,

bt5/erp5_web_js_style_test/SkinTemplateItem/portal_skins/erp5_web_js_style_test/WebSite_downloadFakeImage.py

+import random
+response = REQUEST.RESPONSE
+
+cache_value = DateTime().HTML4() + str(random.random())
+
+def getCacheValue(cachekey):
+  return cache_value
+
+from Products.ERP5Type.Cache import CachingMethod
+getCacheValue = CachingMethod(getCacheValue, id=script.getId())
+
+old_cache_value = getCacheValue(cachekey)
+if cache_value == old_cache_value:
+  emoji = 'never accessed'
+  response.setHeader('Content-Type', 'image/svg+xml')
+  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90%">' + emoji + '</text></svg>'
+else:
+  emoji = 'already accessed'
+  response.setStatus(410)
+  return emoji

bt5/erp5_web_js_style_test/SkinTemplateItem/portal_skins/erp5_web_js_style_test/WebSite_downloadFakeImage.xml

+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="PythonScript" module="Products.PythonScripts.PythonScript"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>Script_magic</string> </key>
+            <value> <int>3</int> </value>
+        </item>
+        <item>
+            <key> <string>_Cacheable__manager_id</string> </key>
+            <value> <string>must_revalidate_http_cache</string> </value>
+        </item>
+        <item>
+            <key> <string>_bind_names</string> </key>
+            <value>
+              <object>
+                <klass>
+                  <global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
+                </klass>
+                <tuple/>
+                <state>
+                  <dictionary>
+                    <item>
+                        <key> <string>_asgns</string> </key>
+                        <value>
+                          <dictionary>
+                            <item>
+                                <key> <string>name_container</string> </key>
+                                <value> <string>container</string> </value>
+                            </item>
+                            <item>
+                                <key> <string>name_context</string> </key>
+                                <value> <string>context</string> </value>
+                            </item>
+                            <item>
+                                <key> <string>name_m_self</string> </key>
+                                <value> <string>script</string> </value>
+                            </item>
+                            <item>
+                                <key> <string>name_subpath</string> </key>
+                                <value> <string>traverse_subpath</string> </value>
+                            </item>
+                          </dictionary>
+                        </value>
+                    </item>
+                  </dictionary>
+                </state>
+              </object>
+            </value>
+        </item>
+        <item>
+            <key> <string>_params</string> </key>
+            <value> <string>REQUEST, cachekey</string> </value>
+        </item>
+        <item>
+            <key> <string>id</string> </key>
+            <value> <string>WebSite_downloadFakeImage</string> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>

bt5/erp5_web_js_style_test/SkinTemplateItem/portal_skins/erp5_web_js_style_test/jsstyle_demo.js.js

-/*globals window, document, rJS, domsugar*/
+/*globals window, document, rJS, domsugar, URL*/
 /*jslint indent: 2, maxlen: 80*/
-(function (window, document, rJS, domsugar) {
+(function (window, document, rJS, domsugar, URL) {
   "use strict";
 
+  function changeAltLoad(evt) {
+    evt.target.alt = 'loaded';
+  }
+
+  function changeAltError(evt) {
+    evt.target.alt = 'error';
+  }
+
   function renderSitemap(sitemap, element) {
     var child_list = [],
       i;
@@ -54,7 +62,11 @@
         language_list,
         document_list,
         child_list,
-        i;
+        i,
+        web_page_element,
+        element_list,
+        element,
+        feed_url;
 
       if (modification_dict.hasOwnProperty('page_title')) {
         document.title = gadget.state.page_title;
@@ -72,11 +84,30 @@
             html: gadget.state.form_html_content
           });
         } else {
+
           // Try to find the Web Page content only
-          domsugar(gadget.element.querySelector('main'), {
-            html: domsugar('div', {html: gadget.state.html_content})
-                    .querySelector('div.input').firstChild.innerHTML
-          });
+          web_page_element = domsugar('div', {html: gadget.state.html_content})
+                                     .querySelector('div.input').firstChild;
+
+          // Replace IMG src value, to disable the browser cache
+          // and force downloading it.
+          // Used by test to check if original url has been accessed
+          element_list = web_page_element.querySelectorAll('img');
+          for (i = 0; i < element_list.length; i += 1) {
+            element = element_list[i];
+            feed_url = new URL(element.getAttribute('src'),
+                               window.location.href);
+            feed_url.search = feed_url.search + '&cachevalue=foo';
+            // Not renderJS friendly, but that's only for the test...
+            element.addEventListener('load', changeAltLoad);
+            element.addEventListener('error', changeAltError);
+            element.src = feed_url.href;
+          }
+
+          domsugar(
+            gadget.element.querySelector('main'),
+            Array.from(web_page_element.childNodes)
+          );
         }
       }
       if (modification_dict.hasOwnProperty('gadget_style_url')) {
@@ -135,4 +166,4 @@
       }
     });
 
-}(window, document, rJS, domsugar));
+}(window, document, rJS, domsugar, URL));
\ No newline at end of file