erp5_web_js_style: handle language change and sitemap navigation

Changing the language and browsing to another web section require to fully refresh the page.

This breaks the previous gadget API.

bt5/erp5_web_js_style/SkinTemplateItem/portal_skins/erp5_web_js_style_ui/WebSite_generateNavigationHTML.py

@@ -15,7 +15,9 @@ def generateSectionListHTML(result_list, section_list):
   if (section_list):
     result_list.append('<ul>')
     for section in section_list:
-      result_list.append('<li><a href="%s">%s</a>' % (_(section['url']), __(section['translated_title'])))
+      # Add missing / suffix to get correct relative url generation
+      # XXX Fix WebSection_getSiteMapTree instead, but no idea what would be the site effects
+      result_list.append('<li><a href="%s/">%s</a>' % (_(section['url']), __(section['translated_title'])))
       generateSectionListHTML(result_list, section['subsection'])
       result_list.append('</li>')
     result_list.append('</ul>')

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

@@ -74,6 +74,53 @@
 
   }
 
+  function parseLanguageElement(language_element) {
+    var language_list = [],
+      li_list = language_element.querySelectorAll('a'),
+      i;
+    for (i = 0; i < li_list.length; i += 1) {
+      language_list.push({
+        href: li_list[i].href,
+        text: li_list[i].hreflang
+      });
+    }
+    return language_list;
+  }
+
+  function parseSitemapElement(sitemap_element) {
+    var a = sitemap_element.querySelector('a'),
+      sitemap = {
+        href: a.href,
+        text: a.textContent,
+        child_list: []
+      },
+      ul = a.nextElementSibling,
+      li_list,
+      i;
+
+    if (ul === null) {
+      li_list = [];
+    } else {
+      li_list = ul.children;
+    }
+    for (i = 0; i < li_list.length; i += 1) {
+      sitemap.child_list.push(parseSitemapElement(li_list[i]));
+    }
+    return sitemap;
+  }
+
+  function parsePageContent(body_element) {
+    return {
+      html_content: body_element.querySelector('main').innerHTML,
+      language_list: parseLanguageElement(
+        body_element.querySelector('nav#language')
+      ),
+      sitemap: parseSitemapElement(
+        body_element.querySelector('nav#sitemap')
+      )
+    };
+  }
+
   function renderPage(gadget, page_url, hash) {
     return new RSVP.Queue(RSVP.hash({
       xhr: ajax(page_url),
@@ -83,17 +130,43 @@
         var dom_parser = (new DOMParser()).parseFromString(
           result_dict.xhr.responseText,
           'text/html'
-        );
-        document.title = dom_parser.title;
-        return result_dict.style_gadget.render(
-          dom_parser.body.querySelector('main').innerHTML
-        );
+        ),
+          parsed_content = parsePageContent(dom_parser.body);
+        gadget.parsed_content = parsed_content;
+        parsed_content.page_title = dom_parser.title;
+        return result_dict.style_gadget.render(parsed_content);
       })
       .push(function () {
         return scrollToHash(hash);
       });
   }
 
+  function isAnotherSitemapLocation(sitemap, url1, url2) {
+    var is_url1_matching = (url1.indexOf(sitemap.href) === 0),
+      is_child_another_location,
+      i;
+    if (is_url1_matching && (url2.indexOf(sitemap.href) !== 0)) {
+      return true;
+    }
+    if (!is_url1_matching) {
+      // Both url do not match
+      return false;
+    }
+    // If both match, check sub urls
+    for (i = 0; i < sitemap.child_list.length; i += 1) {
+      is_child_another_location = isAnotherSitemapLocation(
+        sitemap.child_list[i],
+        url1,
+        url2
+      );
+      if (is_child_another_location) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+
   function listenURLChange() {
     var gadget = this;
 
@@ -109,7 +182,9 @@
     function handleClick(evt) {
       var target_element = evt.target.closest('a'),
         base_uri = document.baseURI,
-        link_url;
+        link_url,
+        matching_language_count = 0,
+        matching_language_base_uri_count = 0;
 
       if (!target_element) {
         // Only handle link
@@ -126,6 +201,30 @@
       link_url = new URL(target_element.href, base_uri);
       if (link_url.href.indexOf(base_uri) !== 0) {
         // Only handle sub path of the base url
+        // Meaning it will also reload when going from a non default language
+        // to the default one
+        return;
+      }
+
+      // Check if going from the default language to another one
+      // Check if url is suburl from 2 languages (default + the expected one)
+      gadget.parsed_content.language_list.map(function (language) {
+        if (link_url.href.indexOf(language.href) === 0) {
+          matching_language_count += 1;
+        }
+        // Ensure current url is in the default language
+        if (base_uri.indexOf(language.href) === 0) {
+          matching_language_base_uri_count += 1;
+        }
+      });
+      if ((1 < matching_language_count) &&
+          (matching_language_base_uri_count === 1)) {
+        return;
+      }
+
+      // Check if going from a section to a child one
+      if (isAnotherSitemapLocation(gadget.parsed_content.sitemap,
+                                   link_url.href, base_uri)) {
         return;
       }
 
@@ -145,7 +244,7 @@
           // to ensure popstate listener is correctly working
           // when the user will click on back/forward browser buttons
           history.pushState(null, null, target_element.href);
-        }, function (error) {
+        }, function () {
           // Implement support for managed error
           // (like URL is not an HTML document parsable)
           // and redirect in such case
@@ -161,11 +260,6 @@
   }
 
   rJS(window)
-    .ready(function () {
-      // Hide the page as fast as possible
-      // this.element.hidden = true;
-      this.main_element = this.element.querySelector('main');
-    })
     .allowPublicAcquisition("reportServiceError", function () {
       this.element.hidden = false;
       throw rJS.AcquisitionError();
@@ -175,13 +269,17 @@
       var gadget = this,
         style_gadget,
         body = gadget.element,
-        style_gadget_url = body.getAttribute("data-nostyle-gadget-url");
+        style_gadget_url = body.getAttribute("data-nostyle-gadget-url"),
+        parsed_content;
 
       if (!style_gadget_url) {
         // No style configured, use backend only rendering
         return rJS.declareCSS("jsstyle.css", document.head);
       }
 
+      parsed_content = parsePageContent(gadget.element);
+      gadget.parsed_content = parsed_content;
+      parsed_content.page_title = document.title;
       // Clear the DOM
       while (body.firstChild) {
         body.firstChild.remove();
@@ -189,7 +287,7 @@
       return gadget.declareGadget(style_gadget_url, {scope: 'renderer'})
         .push(function (result) {
           style_gadget = result;
-          return style_gadget.render(gadget.main_element.innerHTML);
+          return style_gadget.render(parsed_content);
         })
         .push(function () {
           // Trigger URL handling

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

-/*globals window, document, RSVP, rJS*/
-/*jslint indent: 2, maxlen: 80*/
-(function () {
-  "use strict";
-
-  rJS(window)
-    .declareMethod("render", function (main_innerhtml) {
-      var gadget = this;
-      var div = document.createElement('div');
-      div.innerHTML = main_innerhtml;
-      gadget.element.querySelector('main').innerHTML = div.querySelector('div.input').firstChild.innerHTML;
-    });
-
-}());
\ No newline at end of file

bt5/erp5_web_js_style/SkinTemplateItem/portal_skins/erp5_web_js_style_ui/view_main.zpt

@@ -8,11 +8,12 @@
       dummy python: request.set('ignore_layout', False);
       dummy python: request.set('editable_mode', False);
       web_site python: here.getWebSiteValue();
+      web_section python: here.getWebSectionValue();
       global_definitions_macros here/global_definitions/macros;">
       <tal:block metal:use-macro="global_definitions_macros/header_definitions" />
 <html>
   <head>
-  <base tal:attributes="href python: '%s/' % web_site.absolute_url()" />
+  <base tal:attributes="href python: '%s/' % web_section.absolute_url()" />
   <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1" />
   <title tal:content="python: here.getTranslatedTitle() or web_site.getTranslatedTitle()"></title>
   <noscript>

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

@@ -11,10 +11,24 @@
 </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/test_js_style_demo_style/</td>
+  <td>${base_url}/web_site_module/erp5_web_js_style_test_site/</td>
   <td></td>
 </tr>
 

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

@@ -11,13 +11,26 @@
 </thead><tbody>
 <tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />
 
-<!-- Initialize -->
 <tr>
   <td>open</td>
-  <td>${base_url}/web_site_module/test_js_style_no_style/</td>
+  <td>${base_url}/ERP5Site_createWebJSStyleZuiteTestData?configuration=nostyle</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/</td>
+  <td></td>
+</tr>
 <tr>
   <td>assertElementPresent</td>
   <td>//nav[@id='sitemap']/a[text()='No Style']</td>

bt5/erp5_web_js_style_test/PathTemplateItem/portal_tests/js_style_zuite/testJsStyleWebSectionNavigateBaseLink.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>testJsStyleWebSectionNavigateBaseLink</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/testJsStyleWebSectionNavigateBaseLink.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 Demo Style</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">Test JS Style Demo Style</td></tr>
+</thead><tbody>
+<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />
+
+<tr>
+  <td>open</td>
+  <td>${base_url}/ERP5Site_createWebJSStyleZuiteTestData?configuration=language</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_section_1/</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//header/h1[text()='JS Style Demo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Check the page content uses the default language (en)</b></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/erp5_web_js_style_test_section_1/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '1')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Click on the absolute home link</b></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//main//a[text()='base link']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '2')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/erp5_web_js_style_test_section_1/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '2')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Change to the not default language</b></td>
+</tr>
+<tr>
+  <td>open</td>
+  <td>${base_url}/web_site_module/erp5_web_js_style_test_site/fr/erp5_web_js_style_test_section_1/</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//header/h1[text()='JS Style Demo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Check the page content uses the second language (fr)</b></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()="Contenu de la page d'accueil"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()="Contenu de la page d'accueil"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/fr/erp5_web_js_style_test_section_1/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '1')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Click on the absolute home link</b></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//main//a[text()='base link']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '2')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()="Contenu de la page d'accueil"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/fr/erp5_web_js_style_test_section_1/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '2')]</td>
+  <td></td>
+</tr>
+
+</tbody></table>
+</body>
+</html>
\ No newline at end of file

bt5/erp5_web_js_style_test/PathTemplateItem/portal_tests/js_style_zuite/testJsStyleWebSectionNavigateByReference.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>testJsStyleWebSectionNavigateByReference</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/testJsStyleWebSectionNavigateByReference.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 Demo Style</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">Test JS Style Demo Style</td></tr>
+</thead><tbody>
+<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />
+
+<tr>
+  <td>open</td>
+  <td>${base_url}/ERP5Site_createWebJSStyleZuiteTestData?configuration=language</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_section_1/</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//header/h1[text()='JS Style Demo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Check the page content uses the default language (en)</b></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/erp5_web_js_style_test_section_1/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '1')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Click on the document reference</b></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//a[text()='erp5_web_js_style_test_contentpage']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()='Subpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Subpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/erp5_web_js_style_test_section_1/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '2')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Base to section</b></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//a[text()='Demo Section 1']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/erp5_web_js_style_test_section_1/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '3')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Change to the not default language</b></td>
+</tr>
+<tr>
+  <td>open</td>
+    <td>${base_url}/web_site_module/erp5_web_js_style_test_site/fr/erp5_web_js_style_test_section_1/</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//header/h1[text()='JS Style Demo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Check the page content uses the second language (fr)</b></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()="Contenu de la page d'accueil"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()="Contenu de la page d'accueil"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/fr/erp5_web_js_style_test_section_1/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '1')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Click on the document reference</b></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//a[text()='erp5_web_js_style_test_contentpage']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()='Contenu de la sous page']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Contenu de la sous page']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/fr/erp5_web_js_style_test_section_1/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '2')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Base to section</b></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//a[text()='Demo Section 1']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()="Contenu de la page d'accueil"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()="Contenu de la page d'accueil"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/fr/erp5_web_js_style_test_section_1/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '3')]</td>
+  <td></td>
+</tr>
+
+</tbody></table>
+</body>
+</html>
\ No newline at end of file

bt5/erp5_web_js_style_test/PathTemplateItem/portal_tests/js_style_zuite/testJsStyleWebSiteBrowseSitemap.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>testJsStyleWebSiteBrowseSitemap</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/testJsStyleWebSiteBrowseSitemap.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 Demo Style</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">Test JS Style Demo Style</td></tr>
+</thead><tbody>
+<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />
+
+<tr>
+  <td>open</td>
+  <td>${base_url}/ERP5Site_createWebJSStyleZuiteTestData?configuration=language</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/</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//header/h1[text()='JS Style Demo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Check the page content uses the web site</b></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '1')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Change to one subsection</b></td>
+</tr>
+<tr>
+  <td>clickAndWait</td>
+  <td>//nav[@id='sitemap']//a[text()='Demo Section 1']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//header/h1[text()='JS Style Demo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Check the page content uses the web section 1</b></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/erp5_web_js_style_test_section_1/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '1')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Change to second level subsection</b></td>
+</tr>
+<tr>
+  <td>clickAndWait</td>
+  <td>//nav[@id='sitemap']//a[text()='Demo Section 11']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//header/h1[text()='JS Style Demo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Check the page content uses the web section 11</b></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/erp5_web_js_style_test_section_1/erp5_web_js_style_test_section_11/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '1')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Change to parent subsection</b></td>
+</tr>
+<tr>
+  <td>clickAndWait</td>
+  <td>//nav[@id='sitemap']//a[text()='Demo Section 1']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//header/h1[text()='JS Style Demo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Check the page content uses the web section 1</b></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/erp5_web_js_style_test_section_1/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '1')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Change to one sibling</b></td>
+</tr>
+<tr>
+  <td>clickAndWait</td>
+  <td>//nav[@id='sitemap']//a[text()='Demo Section 2']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//header/h1[text()='JS Style Demo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Check the page content uses the web section 2</b></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/erp5_web_js_style_test_section_2/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '1')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Change to one web site</b></td>
+</tr>
+<tr>
+  <td>clickAndWait</td>
+  <td>//nav[@id='sitemap']//a[text()='Demo Style With Language']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//header/h1[text()='JS Style Demo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Check the page content uses the web site</b></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '1')]</td>
+  <td></td>
+</tr>
+
+</tbody></table>
+</body>
+</html>
\ No newline at end of file

bt5/erp5_web_js_style_test/PathTemplateItem/portal_tests/js_style_zuite/testJsStyleWebSiteChangeLanguage.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>testJsStyleWebSiteChangeLanguage</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/testJsStyleWebSiteChangeLanguage.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 Demo Style</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">Test JS Style Demo Style</td></tr>
+</thead><tbody>
+<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />
+
+<tr>
+  <td>open</td>
+  <td>${base_url}/ERP5Site_createWebJSStyleZuiteTestData?configuration=language</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/</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//header/h1[text()='JS Style Demo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Check the page content uses the default language (en)</b></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '1')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Change to the not default language</b></td>
+</tr>
+<tr>
+  <td>clickAndWait</td>
+  <td>//nav[@id='language']//a[text()='fr']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//header/h1[text()='JS Style Demo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Check the page content uses the second language (fr)</b></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()="Contenu de la page d'accueil"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()="Contenu de la page d'accueil"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/fr/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '1')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Change to the second not default language</b></td>
+</tr>
+<tr>
+  <td>clickAndWait</td>
+  <td>//nav[@id='language']//a[text()='zh']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//header/h1[text()='JS Style Demo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Check the page content uses the third language (zh)</b></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()="主页内容"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()="主页内容"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/zh/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '1')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Change to the default language</b></td>
+</tr>
+<tr>
+  <td>clickAndWait</td>
+  <td>//nav[@id='language']//a[text()='en']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//header/h1[text()='JS Style Demo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Check the page content uses the default language (en)</b></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '1')]</td>
+  <td></td>
+</tr>
+
+</tbody></table>
+</body>
+</html>
\ No newline at end of file

bt5/erp5_web_js_style_test/PathTemplateItem/portal_tests/js_style_zuite/testJsStyleWebSiteNavigateBaseLink.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>testJsStyleWebSiteNavigateBaseLink</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/testJsStyleWebSiteNavigateBaseLink.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 Demo Style</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">Test JS Style Demo Style</td></tr>
+</thead><tbody>
+<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />
+
+<tr>
+  <td>open</td>
+  <td>${base_url}/ERP5Site_createWebJSStyleZuiteTestData?configuration=language</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/</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//header/h1[text()='JS Style Demo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Check the page content uses the default language (en)</b></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '1')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Click on the absolute home link</b></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//main//a[text()='base link']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '2')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '2')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Change to the not default language</b></td>
+</tr>
+<tr>
+  <td>clickAndWait</td>
+  <td>//nav[@id='language']//a[text()='fr']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//header/h1[text()='JS Style Demo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Check the page content uses the second language (fr)</b></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()="Contenu de la page d'accueil"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()="Contenu de la page d'accueil"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/fr/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '1')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Click on the absolute home link</b></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//main//a[text()='base link']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '2')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()="Contenu de la page d'accueil"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/fr/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '2')]</td>
+  <td></td>
+</tr>
+
+</tbody></table>
+</body>
+</html>
\ No newline at end of file

bt5/erp5_web_js_style_test/PathTemplateItem/portal_tests/js_style_zuite/testJsStyleWebSiteNavigateByReference.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>testJsStyleWebSiteNavigateByReference</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/testJsStyleWebSiteNavigateByReference.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 Demo Style</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">Test JS Style Demo Style</td></tr>
+</thead><tbody>
+<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />
+
+<tr>
+  <td>open</td>
+  <td>${base_url}/ERP5Site_createWebJSStyleZuiteTestData?configuration=language</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/</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//header/h1[text()='JS Style Demo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Check the page content uses the default language (en)</b></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '1')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Click on the document reference</b></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//a[text()='erp5_web_js_style_test_contentpage']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()='Subpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Subpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '2')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Back to frontpage</b></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//nav[@id='language']//a[text()='en']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Frontpage content']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '3')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Change to the not default language</b></td>
+</tr>
+<tr>
+  <td>clickAndWait</td>
+  <td>//nav[@id='language']//a[text()='fr']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//header/h1[text()='JS Style Demo']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Check the page content uses the second language (fr)</b></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()="Contenu de la page d'accueil"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()="Contenu de la page d'accueil"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/fr/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '1')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Click on the document reference</b></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//a[text()='erp5_web_js_style_test_contentpage']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()='Contenu de la sous page']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()='Contenu de la sous page']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/fr/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '2')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Back to frontpage</b></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//nav[@id='language']//a[text()='fr']</td>
+  <td></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//main//p[text()="Contenu de la page d'accueil"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//main//p[text()="Contenu de la page d'accueil"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='gadget_style_url'][contains(text(), 'erp5_web_js_style_test_site/fr/jsstyle_demo.html')]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//p[@id='render_count'][contains(text(), '3')]</td>
+  <td></td>
+</tr>
+
+</tbody></table>
+</body>
+</html>
\ No newline at end of file

bt5/erp5_web_js_style_test/PathTemplateItem/web_site_module/test_js_style_demo_style.xml

-<?xml version="1.0"?>
-<ZopeData>
-  <record id="1" aka="AAAAAAAAAAE=">
-    <pickle>
-      <global name="Web Site" module="erp5.portal_type"/>
-    </pickle>
-    <pickle>
-      <dictionary>
-        <item>
-            <key> <string>_Add_portal_content_Permission</string> </key>
-            <value>
-              <tuple>
-                <string>Assignor</string>
-                <string>Manager</string>
-              </tuple>
-            </value>
-        </item>
-        <item>
-            <key> <string>_Add_portal_folders_Permission</string> </key>
-            <value>
-              <tuple>
-                <string>Assignor</string>
-                <string>Manager</string>
-              </tuple>
-            </value>
-        </item>
-        <item>
-            <key> <string>_Copy_or_Move_Permission</string> </key>
-            <value>
-              <tuple>
-                <string>Assignor</string>
-                <string>Manager</string>
-              </tuple>
-            </value>
-        </item>
-        <item>
-            <key> <string>_Delete_objects_Permission</string> </key>
-            <value>
-              <tuple>
-                <string>Assignor</string>
-                <string>Manager</string>
-              </tuple>
-            </value>
-        </item>
-        <item>
-            <key> <string>_Modify_portal_content_Permission</string> </key>
-            <value>
-              <tuple>
-                <string>Assignee</string>
-                <string>Assignor</string>
-                <string>Manager</string>
-                <string>Owner</string>
-              </tuple>
-            </value>
-        </item>
-        <item>
-            <key> <string>__before_publishing_traverse__</string> </key>
-            <value>
-              <object>
-                <klass>
-                  <global name="MultiHook" module="ZPublisher.BeforeTraverse"/>
-                </klass>
-                <tuple/>
-                <state>
-                  <dictionary>
-                    <item>
-                        <key> <string>_defined_in_class</string> </key>
-                        <value> <int>1</int> </value>
-                    </item>
-                    <item>
-                        <key> <string>_hookname</string> </key>
-                        <value> <string>__before_publishing_traverse__</string> </value>
-                    </item>
-                    <item>
-                        <key> <string>_list</string> </key>
-                        <value>
-                          <list>
-                            <persistent> <string encoding="base64">AAAAAAAAAAI=</string> </persistent>
-                          </list>
-                        </value>
-                    </item>
-                    <item>
-                        <key> <string>_prior</string> </key>
-                        <value>
-                          <none/>
-                        </value>
-                    </item>
-                  </dictionary>
-                </state>
-              </object>
-            </value>
-        </item>
-        <item>
-            <key> <string>__before_traverse__</string> </key>
-            <value>
-              <dictionary>
-                <item>
-                    <key>
-                      <tuple>
-                        <int>99</int>
-                        <string>ERP5 Web Site/test_js_style_demo_style</string>
-                      </tuple>
-                    </key>
-                    <value>
-                      <persistent> <string encoding="base64">AAAAAAAAAAI=</string> </persistent>
-                    </value>
-                </item>
-              </dictionary>
-            </value>
-        </item>
-        <item>
-            <key> <string>_identity_criterion</string> </key>
-            <value>
-              <persistent> <string encoding="base64">AAAAAAAAAAM=</string> </persistent>
-            </value>
-        </item>
-        <item>
-            <key> <string>_local_properties</string> </key>
-            <value>
-              <tuple>
-                <dictionary>
-                  <item>
-                      <key> <string>id</string> </key>
-                      <value> <string>configuration_style_gadget_url</string> </value>
-                  </item>
-                  <item>
-                      <key> <string>type</string> </key>
-                      <value> <string>string</string> </value>
-                  </item>
-                </dictionary>
-              </tuple>
-            </value>
-        </item>
-        <item>
-            <key> <string>_range_criterion</string> </key>
-            <value>
-              <persistent> <string encoding="base64">AAAAAAAAAAQ=</string> </persistent>
-            </value>
-        </item>
-        <item>
-            <key> <string>available_language</string> </key>
-            <value>
-              <tuple>
-                <string>en</string>
-              </tuple>
-            </value>
-        </item>
-        <item>
-            <key> <string>configuration_style_gadget_url</string> </key>
-            <value> <string>jsstyle_demo.html</string> </value>
-        </item>
-        <item>
-            <key> <string>container_layout</string> </key>
-            <value> <string>erp5_web_layout</string> </value>
-        </item>
-        <item>
-            <key> <string>content_layout</string> </key>
-            <value> <string>erp5_web_content_layout</string> </value>
-        </item>
-        <item>
-            <key> <string>description</string> </key>
-            <value>
-              <none/>
-            </value>
-        </item>
-        <item>
-            <key> <string>id</string> </key>
-            <value> <string>test_js_style_demo_style</string> </value>
-        </item>
-        <item>
-            <key> <string>layout_configuration_form_id</string> </key>
-            <value> <string>WebSection_viewJsstylePreference</string> </value>
-        </item>
-        <item>
-            <key> <string>portal_type</string> </key>
-            <value> <string>Web Site</string> </value>
-        </item>
-        <item>
-            <key> <string>short_title</string> </key>
-            <value>
-              <none/>
-            </value>
-        </item>
-        <item>
-            <key> <string>skin_selection_name</string> </key>
-            <value> <string>Jsstyle</string> </value>
-        </item>
-        <item>
-            <key> <string>static_language_selection</string> </key>
-            <value> <int>1</int> </value>
-        </item>
-        <item>
-            <key> <string>title</string> </key>
-            <value> <string>Demo Style</string> </value>
-        </item>
-        <item>
-            <key> <string>visible</string> </key>
-            <value> <int>0</int> </value>
-        </item>
-      </dictionary>
-    </pickle>
-  </record>
-  <record id="2" aka="AAAAAAAAAAI=">
-    <pickle>
-      <global name="WebSiteTraversalHook" module="Products.ERP5.Document.WebSite"/>
-    </pickle>
-    <pickle>
-      <dictionary/>
-    </pickle>
-  </record>
-  <record id="3" aka="AAAAAAAAAAM=">
-    <pickle>
-      <global name="PersistentMapping" module="Persistence.mapping"/>
-    </pickle>
-    <pickle>
-      <dictionary>
-        <item>
-            <key> <string>data</string> </key>
-            <value>
-              <dictionary/>
-            </value>
-        </item>
-      </dictionary>
-    </pickle>
-  </record>
-  <record id="4" aka="AAAAAAAAAAQ=">
-    <pickle>
-      <global name="PersistentMapping" module="Persistence.mapping"/>
-    </pickle>
-    <pickle>
-      <dictionary>
-        <item>
-            <key> <string>data</string> </key>
-            <value>
-              <dictionary/>
-            </value>
-        </item>
-      </dictionary>
-    </pickle>
-  </record>
-</ZopeData>

bt5/erp5_web_js_style_test/PathTemplateItem/web_site_module/test_js_style_no_style.xml

-<?xml version="1.0"?>
-<ZopeData>
-  <record id="1" aka="AAAAAAAAAAE=">
-    <pickle>
-      <global name="Web Site" module="erp5.portal_type"/>
-    </pickle>
-    <pickle>
-      <dictionary>
-        <item>
-            <key> <string>_Add_portal_content_Permission</string> </key>
-            <value>
-              <tuple>
-                <string>Assignor</string>
-                <string>Manager</string>
-              </tuple>
-            </value>
-        </item>
-        <item>
-            <key> <string>_Add_portal_folders_Permission</string> </key>
-            <value>
-              <tuple>
-                <string>Assignor</string>
-                <string>Manager</string>
-              </tuple>
-            </value>
-        </item>
-        <item>
-            <key> <string>_Copy_or_Move_Permission</string> </key>
-            <value>
-              <tuple>
-                <string>Assignor</string>
-                <string>Manager</string>
-              </tuple>
-            </value>
-        </item>
-        <item>
-            <key> <string>_Delete_objects_Permission</string> </key>
-            <value>
-              <tuple>
-                <string>Assignor</string>
-                <string>Manager</string>
-              </tuple>
-            </value>
-        </item>
-        <item>
-            <key> <string>_Modify_portal_content_Permission</string> </key>
-            <value>
-              <tuple>
-                <string>Assignee</string>
-                <string>Assignor</string>
-                <string>Manager</string>
-                <string>Owner</string>
-              </tuple>
-            </value>
-        </item>
-        <item>
-            <key> <string>__before_publishing_traverse__</string> </key>
-            <value>
-              <object>
-                <klass>
-                  <global name="MultiHook" module="ZPublisher.BeforeTraverse"/>
-                </klass>
-                <tuple/>
-                <state>
-                  <dictionary>
-                    <item>
-                        <key> <string>_defined_in_class</string> </key>
-                        <value> <int>1</int> </value>
-                    </item>
-                    <item>
-                        <key> <string>_hookname</string> </key>
-                        <value> <string>__before_publishing_traverse__</string> </value>
-                    </item>
-                    <item>
-                        <key> <string>_list</string> </key>
-                        <value>
-                          <list>
-                            <persistent> <string encoding="base64">AAAAAAAAAAI=</string> </persistent>
-                          </list>
-                        </value>
-                    </item>
-                    <item>
-                        <key> <string>_prior</string> </key>
-                        <value>
-                          <none/>
-                        </value>
-                    </item>
-                  </dictionary>
-                </state>
-              </object>
-            </value>
-        </item>
-        <item>
-            <key> <string>__before_traverse__</string> </key>
-            <value>
-              <dictionary>
-                <item>
-                    <key>
-                      <tuple>
-                        <int>99</int>
-                        <string>ERP5 Web Site/test_js_style_no_style</string>
-                      </tuple>
-                    </key>
-                    <value>
-                      <persistent> <string encoding="base64">AAAAAAAAAAI=</string> </persistent>
-                    </value>
-                </item>
-              </dictionary>
-            </value>
-        </item>
-        <item>
-            <key> <string>_identity_criterion</string> </key>
-            <value>
-              <persistent> <string encoding="base64">AAAAAAAAAAM=</string> </persistent>
-            </value>
-        </item>
-        <item>
-            <key> <string>_range_criterion</string> </key>
-            <value>
-              <persistent> <string encoding="base64">AAAAAAAAAAQ=</string> </persistent>
-            </value>
-        </item>
-        <item>
-            <key> <string>available_language</string> </key>
-            <value>
-              <tuple>
-                <string>en</string>
-              </tuple>
-            </value>
-        </item>
-        <item>
-            <key> <string>container_layout</string> </key>
-            <value> <string>erp5_web_layout</string> </value>
-        </item>
-        <item>
-            <key> <string>content_layout</string> </key>
-            <value> <string>erp5_web_content_layout</string> </value>
-        </item>
-        <item>
-            <key> <string>description</string> </key>
-            <value>
-              <none/>
-            </value>
-        </item>
-        <item>
-            <key> <string>id</string> </key>
-            <value> <string>test_js_style_no_style</string> </value>
-        </item>
-        <item>
-            <key> <string>layout_configuration_form_id</string> </key>
-            <value> <string>WebSection_viewJsstylePreference</string> </value>
-        </item>
-        <item>
-            <key> <string>portal_type</string> </key>
-            <value> <string>Web Site</string> </value>
-        </item>
-        <item>
-            <key> <string>short_title</string> </key>
-            <value>
-              <none/>
-            </value>
-        </item>
-        <item>
-            <key> <string>skin_selection_name</string> </key>
-            <value> <string>Jsstyle</string> </value>
-        </item>
-        <item>
-            <key> <string>static_language_selection</string> </key>
-            <value> <int>1</int> </value>
-        </item>
-        <item>
-            <key> <string>title</string> </key>
-            <value> <string>No Style</string> </value>
-        </item>
-        <item>
-            <key> <string>visible</string> </key>
-            <value> <int>0</int> </value>
-        </item>
-      </dictionary>
-    </pickle>
-  </record>
-  <record id="2" aka="AAAAAAAAAAI=">
-    <pickle>
-      <global name="WebSiteTraversalHook" module="Products.ERP5.Document.WebSite"/>
-    </pickle>
-    <pickle>
-      <dictionary/>
-    </pickle>
-  </record>
-  <record id="3" aka="AAAAAAAAAAM=">
-    <pickle>
-      <global name="PersistentMapping" module="Persistence.mapping"/>
-    </pickle>
-    <pickle>
-      <dictionary>
-        <item>
-            <key> <string>data</string> </key>
-            <value>
-              <dictionary/>
-            </value>
-        </item>
-      </dictionary>
-    </pickle>
-  </record>
-  <record id="4" aka="AAAAAAAAAAQ=">
-    <pickle>
-      <global name="PersistentMapping" module="Persistence.mapping"/>
-    </pickle>
-    <pickle>
-      <dictionary>
-        <item>
-            <key> <string>data</string> </key>
-            <value>
-              <dictionary/>
-            </value>
-        </item>
-      </dictionary>
-    </pickle>
-  </record>
-</ZopeData>

bt5/erp5_web_js_style_test/SkinTemplateItem/portal_skins/erp5_web_js_style_test.xml

+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="Folder" module="OFS.Folder"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>_objects</string> </key>
+            <value>
+              <tuple/>
+            </value>
+        </item>
+        <item>
+            <key> <string>id</string> </key>
+            <value> <string>erp5_web_js_style_test</string> </value>
+        </item>
+        <item>
+            <key> <string>title</string> </key>
+            <value> <string></string> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>

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

+# coding=UTF-8
+from DateTime import DateTime
+
+portal = context.getPortalObject()
+
+web_page_portal_type = "Web Page"
+web_site_portal_type = "Web Site"
+web_section_portal_type = "Web Section"
+
+web_site_id = "erp5_web_js_style_test_site"
+web_section_id_prefix = "erp5_web_js_style_test_section_"
+
+web_page_frontend_reference = "erp5_web_js_style_test_frontpage"
+web_page_frontend_en_id = "erp5_web_js_style_test_frontpage_en"
+web_page_frontend_fr_id = "erp5_web_js_style_test_frontpage_fr"
+web_page_frontend_zh_id = "erp5_web_js_style_test_frontpage_zh"
+
+web_page_content_reference = "erp5_web_js_style_test_contentpage"
+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"
+
+### English web page
+module = portal.getDefaultModule(web_page_portal_type)
+if getattr(module, web_page_frontend_en_id, None) is not None:
+  module.manage_delObjects([web_page_frontend_en_id])
+web_page = module.newContent(
+  portal_type=web_page_portal_type,
+  id=web_page_frontend_en_id,
+  reference=web_page_frontend_reference,
+  language="en",
+  version="001",
+  text_content="""
+<p>Frontpage content</p>
+
+<p><a href='%s'>%s</a></p>
+<p><a href='.'>base link</a></p>
+""" % (web_page_content_reference, web_page_content_reference)
+)
+portal.portal_workflow.doActionFor(web_page, 'publish_action')
+
+if getattr(module, web_page_content_en_id, None) is not None:
+  module.manage_delObjects([web_page_content_en_id])
+web_page = module.newContent(
+  portal_type=web_page_portal_type,
+  id=web_page_content_en_id,
+  reference=web_page_content_reference,
+  language="en",
+  version="001",
+  text_content="""
+<p>Subpage content</p>
+"""
+)
+portal.portal_workflow.doActionFor(web_page, 'publish_action')
+
+### French web page
+if getattr(module, web_page_frontend_fr_id, None) is not None:
+  module.manage_delObjects([web_page_frontend_fr_id])
+web_page = module.newContent(
+  portal_type=web_page_portal_type,
+  id=web_page_frontend_fr_id,
+  reference=web_page_frontend_reference,
+  language="fr",
+  version="001",
+  text_content="""
+<p>Contenu de la page d'accueil</p>
+
+<p><a href='%s'>%s</a></p>
+<p><a href='.'>base link</a></p>
+""" % (web_page_content_reference, web_page_content_reference)
+)
+portal.portal_workflow.doActionFor(web_page, 'publish_action')
+
+if getattr(module, web_page_content_fr_id, None) is not None:
+  module.manage_delObjects([web_page_content_fr_id])
+web_page = module.newContent(
+  portal_type=web_page_portal_type,
+  id=web_page_content_fr_id,
+  reference=web_page_content_reference,
+  language="fr",
+  version="001",
+  text_content="""
+<p>Contenu de la sous page</p>
+"""
+)
+portal.portal_workflow.doActionFor(web_page, 'publish_action')
+
+### Chinese web page
+if getattr(module, web_page_frontend_zh_id, None) is not None:
+  module.manage_delObjects([web_page_frontend_zh_id])
+web_page = module.newContent(
+  portal_type=web_page_portal_type,
+  id=web_page_frontend_zh_id,
+  reference=web_page_frontend_reference,
+  language="zh",
+  version="001",
+  text_content="""
+<p>主页内容</p>
+
+<p><a href='%s'>%s</a></p>
+<p><a href='.'>base link</a></p>
+""" % (web_page_content_reference, web_page_content_reference)
+)
+portal.portal_workflow.doActionFor(web_page, 'publish_action')
+
+if getattr(module, web_page_content_zh_id, None) is not None:
+  module.manage_delObjects([web_page_content_zh_id])
+web_page = module.newContent(
+  portal_type=web_page_portal_type,
+  id=web_page_content_zh_id,
+  reference=web_page_content_reference,
+  language="zh",
+  version="001",
+  text_content="""
+<p>子页面内容</p>
+"""
+)
+portal.portal_workflow.doActionFor(web_page, 'publish_action')
+
+configuration_dict = {
+  'nostyle': {
+    'title': 'No Style'
+  },
+  'section': {
+    'configuration_style_gadget_url': "jsstyle_demo.html",
+    'title': "Demo Style",
+  },
+  'language': {
+    'configuration_style_gadget_url': "jsstyle_demo.html",
+    'available_language_list': ['en', 'fr', 'zh'],
+    'static_language_selection': True,
+    'language': "en",
+    'aggregate_value': module.restrictedTraverse(web_page_frontend_en_id),
+    'title': "Demo Style With Language",
+  }
+}
+
+### Web site
+module = portal.getDefaultModule(web_site_portal_type)
+if getattr(module, web_site_id, None) is not None:
+  module.manage_delObjects([web_site_id])
+web_site = module.newContent(
+  portal_type=web_site_portal_type,
+  id=web_site_id,
+  skin_selection_name="Jsstyle",
+  layout_configuration_form_id="WebSection_viewJsstylePreference",
+  **configuration_dict[configuration]
+)
+web_section = web_site.newContent(
+  portal_type=web_section_portal_type,
+  id='%s1' % web_section_id_prefix,
+  aggregate_value=web_site.getAggregateValue(),
+  title="Demo Section 1",
+  visible=True
+)
+web_section.newContent(
+  portal_type=web_section_portal_type,
+  id='%s11' % web_section_id_prefix,
+  aggregate_value=web_site.getAggregateValue(),
+  title="Demo Section 11",
+  visible=True
+)
+web_site.newContent(
+  portal_type=web_section_portal_type,
+  id='%s2' % web_section_id_prefix,
+  aggregate_value=web_site.getAggregateValue(),
+  title="Demo Section 2",
+  visible=True
+)
+
+return "Web Site created."

bt5/erp5_web_js_style_test/SkinTemplateItem/portal_skins/erp5_web_js_style_test/ERP5Site_createWebJSStyleZuiteTestData.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>_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>configuration=\'nostyle\'</string> </value>
+        </item>
+        <item>
+            <key> <string>id</string> </key>
+            <value> <string>ERP5Site_createWebJSStyleZuiteTestData</string> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>

bt5/erp5_web_js_style/SkinTemplateItem/portal_skins/erp5_web_js_style_ui/jsstyle_demo.html.html → bt5/erp5_web_js_style_test/SkinTemplateItem/portal_skins/erp5_web_js_style_test/jsstyle_demo.html.html

@@ -3,10 +3,15 @@
   <link rel="stylesheet" href="jsstyle_demo.css">
   <script src="portal_skins/erp5_xhtml_style/rsvp.js"></script>
   <script src="portal_skins/erp5_xhtml_style/renderjs.js"></script>
+  <script src="domsugar.js"></script>
   <script src="jsstyle_demo.js"></script>
   </head>
   <body>
     <header><h1>JS Style Demo</h1></header>
+    <p id="gadget_style_url"></p>
+    <p id="render_count"></p>
+    <nav id="language"></nav>
+    <nav id="sitemap"></nav>
     <main></main>
   </body>
 </html>
\ No newline at end of file

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

+/*globals window, document, rJS, domsugar*/
+/*jslint indent: 2, maxlen: 80*/
+(function (window, document, rJS, domsugar) {
+  "use strict";
+
+  function renderSitemap(sitemap, element) {
+    var child_list = [],
+      i;
+    for (i = 0; i < sitemap.child_list.length; i += 1) {
+      child_list.push(
+        renderSitemap(sitemap.child_list[i], domsugar('li'))
+      );
+    }
+    if (child_list.length !== 0) {
+      child_list = [domsugar('ol', child_list)];
+    }
+    child_list.unshift(domsugar('a', {
+      text: sitemap.text,
+      href: sitemap.href
+    }));
+    return domsugar(element, child_list);
+  }
+
+  rJS(window)
+    .setState({
+      render_count: 0
+    })
+    .ready(function () {
+      var gadget = this;
+      // Check if the gadget is reloaded when changing the language
+      return gadget.getPath()
+        .push(function (url) {
+          return gadget.changeState({gadget_style_url: url});
+        });
+    })
+    .declareMethod("render", function (parsed_content) {
+      var state = {
+        language_list: JSON.stringify(parsed_content.language_list || []),
+        sitemap: JSON.stringify(parsed_content.sitemap || {}),
+        page_title: parsed_content.page_title || "",
+        html_content: parsed_content.html_content || "",
+        render_count: this.state.render_count + 1
+      };
+      return this.changeState(state);
+    })
+
+    .onStateChange(function (modification_dict) {
+      var gadget = this,
+        language_list,
+        child_list,
+        i;
+
+      if (modification_dict.hasOwnProperty('page_title')) {
+        document.title = gadget.state.page_title;
+      }
+      if (modification_dict.hasOwnProperty('html_content')) {
+        domsugar(gadget.element.querySelector('main'), {
+          html: domsugar('div', {html: gadget.state.html_content})
+                  .querySelector('div.input').firstChild.innerHTML
+        });
+      }
+      if (modification_dict.hasOwnProperty('gadget_style_url')) {
+        domsugar(gadget.element.querySelector('p#gadget_style_url'), {
+          text: gadget.state.gadget_style_url
+        });
+      }
+      if (modification_dict.hasOwnProperty('render_count')) {
+        domsugar(gadget.element.querySelector('p#render_count'), {
+          text: 'render count: ' + gadget.state.render_count
+        });
+      }
+      if (modification_dict.hasOwnProperty('language_list')) {
+        language_list = JSON.parse(gadget.state.language_list);
+        child_list = [];
+        for (i = 0; i < language_list.length; i += 1) {
+          child_list.push(domsugar('li', [domsugar('a', {
+            text: language_list[i].text,
+            href: language_list[i].href
+          })]));
+        }
+        domsugar(gadget.element.querySelector('nav#language'),
+                 [domsugar('ul', child_list)]);
+      }
+      if (modification_dict.hasOwnProperty('sitemap')) {
+        renderSitemap(JSON.parse(gadget.state.sitemap),
+                      gadget.element.querySelector('nav#sitemap'));
+      }
+    });
+
+}(window, document, rJS, domsugar));
\ No newline at end of file

bt5/erp5_web_js_style_test/bt/dependency_list

 erp5_ui_test_core
 erp5_ui_test
-erp5_web_js_style
+erp5_web_js_style
\ No newline at end of file
+erp5_l10n_fr
+erp5_l10n_zh
\ No newline at end of file

bt5/erp5_web_js_style_test/bt/template_keep_last_workflow_history_only_path_list

-web_site_module/test_js_style_*_style
\ No newline at end of file

bt5/erp5_web_js_style_test/bt/template_keep_workflow_path_list

-web_site_module/test_js_style_*_style
\ No newline at end of file

bt5/erp5_web_js_style_test/bt/template_path_list

 portal_tests/js_style_zuite
-portal_tests/js_style_zuite/**
-web_site_module/test_js_style_*_style
+portal_tests/js_style_zuite/**
\ No newline at end of file
\ No newline at end of file

bt5/erp5_web_js_style_test/bt/template_skin_id_list

+erp5_web_js_style_test
\ No newline at end of file