Help-in-browser (vii) more improvements

see it in http://helponline.libreoffice.org

Added mos keywords from schema.org
New, responsive page design

Change-Id: I9df963c1a962c0fbb5c2926d8066b31cd20d485b
Reviewed-on: https://gerrit.libreoffice.org/39822
Reviewed-by: Olivier Hallot <olivier.hallot@edx.srv.br>
Tested-by: Olivier Hallot <olivier.hallot@edx.srv.br>

7 files changed, 489 insertions, 432 deletions

diff --git a/help3xsl/default.css b/help3xsl/default.css
index ddb7013345..1fe3b9bb18 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -25,6 +25,77 @@
 
 */
 
+/* Structure */
+html{
+    background: #FFFFFF;
+}
+body {
+    padding: 0px;
+    background: #fff;
+    color: #333;
+    margin: 0 auto;
+    max-width: 900px;
+}
+
+header {
+    background: #00a500;
+    padding: .5em 2em;
+    color: #fff;
+    line-height: 1;
+}
+
+header h1{
+    margin-bottom: 0;
+    color:white;
+}
+
+header nav{
+    float: right;
+/*    display:inline-block;*/
+}
+
+header nav select{
+    font-size: .8em;
+}
+
+
+header nav div{
+    font-size: .8em;
+}
+
+header nav div a {
+    font-weight: 300;
+    padding: .3em .5em
+}
+header nav a{
+    color: #fff;
+    display: inline-block;
+    padding: .3em .8em
+}
+
+header nav a:hover, header nav a:focus{
+    color: rgba(255,255,255,.6)
+}
+
+
+[role=main]{
+    padding:1.5em 3em;
+}
+article{
+    padding: 1em 0;
+}
+footer{
+    background: #00a500;
+    color: #fff;
+    padding: .1em 3em;
+    text-align: center;
+}
+
+footer a{
+    color:#c2f6ba;
+}
+
+
 body, p, h1, h2, h3, h4, h5, h6, .listitem, .listitemintable, .tablecontent, .tablecontentintable {
   font-family: "Segoe UI", Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Tahoma, sans-serif;
 }
@@ -133,6 +204,8 @@ h4, h5, h6 {
   border: 1px solid black;
   padding: 3px;
   display: show;
+  background-color:black;
+  text-align: left;
 }
 
 /* Basic code syntax highlight */
@@ -173,36 +246,85 @@ h4, h5, h6 {
   border: solid 1px #18A303;
 }
 
+a:hover, a:focus{
+    color: #000;
+}
+a:active{
+    position: relative;
+    top:1px;
+}
+
+/* Tabs */
+
+.js-on #tabs article
+{
+    display:none
+}
+
+#tabs, #tabs nav a.active{
+background: #f8f8f8;
+color: #111;
+}
+
+#tabs nav
+{
+    position: relative;
+    overflow: hidden;
+    display: table;
+    background: #bbb;
+}
+
+#tabs nav a
+{
+    width:200px;
+    display:table-cell;
+    padding:1em;
+    text-align:center;
+    color: #333;
+}
+
+#tabs nav a:hover,#tabs nav a:focus
+{
+    background:#eee
+}
+
+#tabs article
+{
+    padding:2em;
+}
+
+.js-on #tabs article.active
+{
+    display:block;
+}
+#tabs #mobiles{
+display:none;
+border-radius: 0;
+}
+#tabs #mobiles a, #tabs #mobiles a:first-child, #tabs #mobiles a:last-child{
+width:300px;
+border-radius: 0;
+}
+
 #DisplayArea {
-  position: fixed;
-  bottom: 1px;
-  right: 1px;
-  left: 30%;
-  top: 79px;
-  overflow: auto;
-  border: solid 1px;
-  padding: 10px;
 }
 
-#BottomLeft {
-  position: fixed;
-  bottom: 1px;
-  left: 1px;
+#Index {
   overflow: auto;
-  right: 70%;
-  top: 79px;
-  border-top: solid 1px;
-  border-left: solid 1px;
-  border-bottom: solid 1px;
-  padding: 10px;
+}
+
+#Index ul{
   list-style-type: none;
 }
 
+#SearchBox{
+background-color:#c2f6ba;
+border-color:green;
+border:solid 1px;
+
+}
+
 #TopRight {
-  position: fixed;
-  right: 1px;
-  top: 1px;
-  left: 70%;
 }
 
 #TopLeft {
@@ -218,12 +340,6 @@ h4, h5, h6 {
   right:30%
 }
 
-#TopSystem {
-top: 35px;
-left: 600px;
-position: fixed;
-}
-
 .mediabutton {
   background-color: cyan;
 }
@@ -241,92 +357,49 @@ position: fixed;
 
 .embedded {
 }
-// Top menu navidation
-#TopLeft nav {
-    background-color: #333;
-    margin: 0;
-    overflow: hidden;
-}
-#TopLeft nav ul{
-    margin: 0;
-    padding: 0;
-}
-#TopLeft nav ul li {
-    /* This allow us to arrange list items in a row, without using float */
-    display: inline-block;
-    list-style-type: none;
-}
-
-/* Create a style for the first level items */
-#TopLeft nav > ul > li > a {
-    color: #FFFFFF;
-    background-color:#18A303;
-    display: block;
-    line-height: 1.5em;
-    padding: 0.5em 0.5em;
-    text-decoration: none;
-    font-weight: bold;
-    border:1px solid;
-    border-color:#333333;
-    font-size: 11pt;
-}
-
-// Top menu languages
-#TopLang nav {
-    background-color: #333;
-    margin: 0;
-    overflow: hidden;
-}
-#TopLang nav ul{
-    margin: 0;
-    padding: 0;
-}
-#TopLang nav ul li {
-    /* This allow us to arrange list items in a row, without using float */
-    display: inline-block;
-    list-style-type: none;
-}
-
-/* Create a style for the first level items */
-#TopLang nav > ul > li > a {
-    color: #333333;
-    background-color:#EEEEEE;
-    display: block;
-    line-height: 1.5em;
-    padding: 0.2em 0.4em;
-    text-decoration: none;
-    font-weight: bold;
-    border:1px solid;
-    border-color:#333333;
-    font-size: 10pt;
-}
-
-// Top menu System
-#TopSystem nav {
-    background-color: #333;
-    margin: 0;
-    overflow: hidden;
-}
-#TopSystem nav ul{
-    margin: 0;
-    padding: 0;
-}
-#TopSystem nav ul li {
-    /* This allow us to arrange list items in a row, without using float */
-    display: inline-block;
-    list-style-type: none;
-}
-
-/* Create a style for the first level items */
-#TopSystem nav > ul > li > a {
-    color: #FFFFFF;
-    background-color:blue;
-    display: block;
-    line-height: 1.5em;
-    padding: 0.5em 0.5em;
-    text-decoration: none;
-    font-weight: bold;
-    border:1px solid;
-    border-color:#333333;
-    font-size: 11pt;
+
+/* Media queries */
+@media screen and (min-width:900px)
+{
+    body{font-size: 1.1em;}
+}
+
+@media screen and (max-width:600px)
+{
+    #tabs nav{
+    display: none;
+    position: relative;
+    }
+    #tabs #mobiles{
+    display:block;
+    }
+    #tabs article {
+    display:block;
+    }
+}
+@media screen and (max-width:480px)
+{
+    blockquote{
+        float: none;
+    }
+
+    header nav a{
+        padding:.7em .8em
+    }
+    header nav{
+        float: none;
+        margin: -.5em -3em 0;
+        background: #000;
+        overflow: hidden;
+        text-align: left
+    }
+    header nav a{
+        border-right: 1px solid #222
+    }
+    [role=main]{
+        padding:1.5em 2em;
+    }
+    header nav div{
+        display: none;
+    }
 }
diff --git a/help3xsl/help.js b/help3xsl/help.js
index 76ec59b53a..0b22b5f892 100644
--- a/help3xsl/help.js
+++ b/help3xsl/help.js
@@ -18,6 +18,7 @@ function setModule(module){
             itemspan[i].removeAttribute("hidden");
         }
     }
+    document.getElementById("M_"+module).selected="true";
 }
 
 // Used to set system in caseinline=SYSTEM
@@ -30,6 +31,7 @@ function setSystem(system){
             itemspan[i].removeAttribute("hidden");
         }
     }
+    document.getElementById("S_"+system).selected="true";
 }
 /* add &DbPAR= and &System= to the links in DisplayArea div */
 function fixURL(module, system){
@@ -53,21 +55,11 @@ function setURLParam (itemlink, pSystem, pAppl) {
                 var pref = href.substring(0, href.lastIndexOf('#'));
                 itemlink.setAttribute("href", pref + "?" + '&DbPAR=' + pAppl + '&System=' + pSystem + postf);
             }else{
-                itemlink.setAttribute("href", href + "?"+ '&DbPAR=' + pAppl + '&System=' + pSystem);
+                itemlink.setAttribute("href", href + "?" + '&DbPAR=' + pAppl + '&System=' + pSystem);
             }
         }
     }
 }
-// Set System change buttons
-function setSystemURLButton (module) {
-    if (module == null){module="WRITER"}
-    var button = document.getElementById("lin").getElementsByTagName("a");
-    setURLParam(button[0],'UNIX', module);
-    button = document.getElementById("win").getElementsByTagName("a");
-    setURLParam(button[0],'WIN', module);
-    button = document.getElementById("mac").getElementsByTagName("a");
-    setURLParam(button[0],'MAC', module);
-}
 
 function getParameterByName(name, url) {
     if (!url) {
@@ -97,14 +89,13 @@ $(document).ready(function() {
         }
         debouncer = setTimeout(function(){
             if ($('#search-bar').val()) {
-                $("#BottomLeft ul a:not(:contains('" + $('#search-bar').val() + "'))" ).parent().hide();
-                $("#BottomLeft ul a:contains('" + $('#search-bar').val() + "')" ).parent().show();
+                $("#Index ul a:not(:contains('" + $('#search-bar').val() + "'))" ).parent().hide();
+                $("#Index ul a:contains('" + $('#search-bar').val() + "')" ).parent().show();
             }
             else {
-                $("#BottomLeft ul li" ).show();
+                $("#Index ul li" ).show();
             }
         }, 200);
     });
 });
-
 /* vim:set shiftwidth=4 softtabstop=4 expandtab cinoptions=b1,g0,N-s cinkeys+=0=break: */
diff --git a/help3xsl/index.html b/help3xsl/index.html
index 932c4d944c..b3ee476179 100644
--- a/help3xsl/index.html
+++ b/help3xsl/index.html
@@ -1,4 +1,11 @@
 <!DOCTYPE html>
+<!--
+* This file is part of the LibreOffice project.
+*
+* This Source Code Form is subject to the terms of the Mozilla Public
+* License, v. 2.0. If a copy of the MPL was not distributed with this
+* file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
 <html>
 	<head>
 	<script type="text/javascript" src="latest/help.js"></script>
diff --git a/help3xsl/online_transform.xsl b/help3xsl/online_transform.xsl
index 81d61b61dd..bdf8fd7dcb 100644
--- a/help3xsl/online_transform.xsl
+++ b/help3xsl/online_transform.xsl
@@ -128,9 +128,7 @@
         <!--<base href="file:///home/tdf/git/core/helpcontent2/source/html/"/> -->
         <base href="/"/>
         <title><xsl:value-of select="$titleL10N"/></title>
-        <link href="{$productversion}/{$lang}/default.css" rel="Stylesheet" type="text/css" />
-        <link href="{$productversion}/{$lang}/tabs.css" rel="Stylesheet" type="text/css" />
-        <link href="{$productversion}/{$lang}/tree.css" rel="Stylesheet" type="text/css" />
+        <link href="{$productversion}/default.css" rel="Stylesheet" type="text/css" />
         <script type="text/javascript" src="{$productversion}/jquery-3.1.1.min.js"></script>
         <script type="text/javascript" src="{$productversion}/help.js"></script>
         <!-- Piwik -->
@@ -151,146 +149,169 @@
         </script>
         <!-- End Piwik Code -->
         <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+        <meta name="viewport" content="width=device-width,initial-scale=1"/>
     </head>
-    <body lang="{$lang}">
-    <div itemscope="true" itemtype="http://schema.org/TechArticle">
-        <meta itemprop="version" content="{$productversion}"/>
-        <meta itemprop="inLanguage" content="{$lang}"/>
-        <meta itemprop="datePublished" content="2017"/>"
-        <div id="BottomLeft">
-            <div id="container"> <!-- Tabs -->
-                <input id="tab-1" type="radio" name="tab-group" checked="checked" />
-                <label for="tab-1">Index</label>
-                <input id="tab-2" type="radio" name="tab-group" />
-                <label for="tab-2">Contents</label>
-                <input id="tab-3" type="radio" name="tab-group" />
-                <label for="tab-3">Search</label>
-                <div id="content">
-                    <div id="content-1">
-                        <div id="SearchBox"><p>&#32;&#x1f50e;&#32;<input type="text" id="search-bar"/></p></div>
-                        <div id="Bookmarks">
-                            <ul id="bookmarkCALC" hidden="true"></ul>
-                            <ul id="bookmarkCHART" hidden="true"></ul>
-                            <ul id="bookmarkWRITER" hidden="true"></ul>
-                            <ul id="bookmarkDRAW" hidden="true"></ul>
-                            <ul id="bookmarkIMPRESS" hidden="true"></ul>
-                            <ul id="bookmarkMATH" hidden="true"></ul>
-                            <ul id="bookmarkBASE" hidden="true"></ul>
-                            <ul id="bookmarkSHARED"></ul>
-                            <ul id="bookmarkBASIC" hidden="true"></ul>
-                        </div>
-                    </div>
-                    <div id="content-2">
-                        <p>Lorem ipsum dolor sit amet</p>
-                    </div>
-                    <div id="content-3">
-                        <p>Lorem ipsum dolor sit amet</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div id="DisplayArea" itemprop="articleBody">
-            <xsl:apply-templates select="/helpdocument/body"/>
-            <div class="debug">
-                <h3 class="bug">Help content debug info:</h3>
-                <p>This page is: <xsl:value-of select="$filename"/></p>
-                <p>Title is: <xsl:value-of select="$title"/></p>
-                <p id="bm_module"></p>
-                <p id="bm_system"></p>
-            </div>
-        </div>
-        <div id="TopLang">
-            <nav>
-                <ul>
-                    <li><a href="{$productversion}/en-US{$htmlpage}">EN</a></li>
-                    <li><a href="{$productversion}/ast{$htmlpage}">AST</a></li>
-                    <li><a href="{$productversion}/bg{$htmlpage}">BG</a></li>
-                    <li><a href="{$productversion}/bn{$htmlpage}">BN</a></li>
-                    <li><a href="{$productversion}/bn-IN{$htmlpage}">BN-IN</a></li>
-                    <li><a href="{$productversion}/ca{$htmlpage}">CA</a></li>
-                    <li><a href="{$productversion}/cs{$htmlpage}">CS</a></li>
-                    <li><a href="{$productversion}/da{$htmlpage}">DA</a></li>
-                    <li><a href="{$productversion}/de{$htmlpage}">DE</a></li>
-                    <li><a href="{$productversion}/el{$htmlpage}">EL</a></li>
-                    <li><a href="{$productversion}/es{$htmlpage}">ES</a></li>
-                    <li><a href="{$productversion}/eu{$htmlpage}">EU</a></li>
-                    <li><a href="{$productversion}/fi{$htmlpage}">FI</a></li>
-                    <li><a href="{$productversion}/fr{$htmlpage}">FR</a></li>
-                    <li><a href="{$productversion}/hu{$htmlpage}">HU</a></li>
-                    <li><a href="{$productversion}/it{$htmlpage}">IT</a></li>
-                    <li><a href="{$productversion}/ja{$htmlpage}">JA</a></li>
-                    <li><a href="{$productversion}/km{$htmlpage}">KM</a></li>
-                    <li><a href="{$productversion}/ko{$htmlpage}">KO</a></li>
-                    <li><a href="{$productversion}/nb{$htmlpage}">NB</a></li>
-                    <li><a href="{$productversion}/nl{$htmlpage}">NL</a></li>
-                    <li><a href="{$productversion}/om{$htmlpage}">OM</a></li>
-                    <li><a href="{$productversion}/pl{$htmlpage}">PL</a></li>
-                    <li><a href="{$productversion}/pt{$htmlpage}">PT</a></li>
-                    <li><a href="{$productversion}/pt-BR{$htmlpage}">PT-BR</a></li>
-                    <li><a href="{$productversion}/ru{$htmlpage}">RU</a></li>
-                    <li><a href="{$productversion}/sl{$htmlpage}">SL</a></li>
-                    <li><a href="{$productversion}/sv{$htmlpage}">SV</a></li>
-                    <li><a href="{$productversion}/tr{$htmlpage}">TR</a></li>
-                    <li><a href="{$productversion}/vi{$htmlpage}">VI</a></li>
-                    <li><a href="{$productversion}/zh-CN{$htmlpage}">ZH-CN</a></li>
-                    <li><a href="{$productversion}/zh-TW{$htmlpage}">ZH-TW</a></li>
-                </ul>
-            </nav>
-        </div>
-        <div id="TopRight">
+    <body lang="{$lang}" itemscope="true" itemtype="http://schema.org/TechArticle">
+    <meta itemprop="version" content="{$productversion}"/>
+    <meta itemprop="inLanguage" content="{$lang}"/>
+    <meta itemprop="datePublished" content="2017"/>
+    <header>
+        <nav>
+            <select name="modules">
+                <option id="M_CALC" value="{$productversion}/{$lang}/text/scalc/main0000.html?DbPAR=CALC">Calc</option>
+                <option id="M_WRITER" value="{$productversion}/{$lang}/text/swriter/main0000.html?DbPAR=WRITER">Writer</option>
+                <option id="M_IMPRESS" value="{$productversion}/{$lang}/text/simpress/main0000.html?DbPAR=IMPRESS">Impress</option>
+                <option id="M_DRAW" value="{$productversion}/{$lang}/text/sdraw/main0000.html?DbPAR=DRAW">Draw</option>
+                <option id="M_CHART" value="{$productversion}/{$lang}/text/schart/main0000.html?DbPAR=CHART">Chart</option>
+                <option id="M_BASIC" value="{$productversion}/{$lang}/text/sbasic/shared/main0601.html?DbPAR=BASIC">Basic</option>
+                <option id="M_MATH" value="{$productversion}/{$lang}/text/smath/main0000.html?DbPAR=MATH">Math</option>
+                <option id="M_BASE" value="{$productversion}/{$lang}/text/shared/explorer/database/main.html?DbPAR=BASE">Base</option>
+            </select>
+            <select name="system">
+                <option id="S_WIN" value="{$productversion}/{$lang}{$htmlpage}?System=WIN">Windows</option>
+                <option id="S_UNIX" value="{$productversion}/{$lang}{$htmlpage}?System=UNIX">Linux</option>
+                <option id="S_MAC" value="{$productversion}/{$lang}{$htmlpage}?System=MAC">Mac</option>
+            </select>
+            <select name="language">
+                <option value="{$productversion}/en-US{$htmlpage}">EN</option>
+                <option value="{$productversion}/ast{$htmlpage}">AST</option>
+                <option value="{$productversion}/bg{$htmlpage}">BG</option>
+                <option value="{$productversion}/bn{$htmlpage}">BN</option>
+                <option value="{$productversion}/bn-IN{$htmlpage}">BN-IN</option>
+                <option value="{$productversion}/ca{$htmlpage}">CA</option>
+                <option value="{$productversion}/cs{$htmlpage}">CS</option>
+                <option value="{$productversion}/da{$htmlpage}">DA</option>
+                <option value="{$productversion}/de{$htmlpage}">DE</option>
+                <option value="{$productversion}/el{$htmlpage}">EL</option>
+                <option value="{$productversion}/es{$htmlpage}">ES</option>
+                <option value="{$productversion}/eu{$htmlpage}">EU</option>
+                <option value="{$productversion}/fi{$htmlpage}">FI</option>
+                <option value="{$productversion}/fr{$htmlpage}">FR</option>
+                <option value="{$productversion}/hu{$htmlpage}">HU</option>
+                <option value="{$productversion}/it{$htmlpage}">IT</option>
+                <option value="{$productversion}/ja{$htmlpage}">JA</option>
+                <option value="{$productversion}/km{$htmlpage}">KM</option>
+                <option value="{$productversion}/ko{$htmlpage}">KO</option>
+                <option value="{$productversion}/nb{$htmlpage}">NB</option>
+                <option value="{$productversion}/nl{$htmlpage}">NL</option>
+                <option value="{$productversion}/om{$htmlpage}">OM</option>
+                <option value="{$productversion}/pl{$htmlpage}">PL</option>
+                <option value="{$productversion}/pt{$htmlpage}">PT</option>
+                <option value="{$productversion}/pt-BR{$htmlpage}">PT-BR</option>
+                <option value="{$productversion}/ru{$htmlpage}">RU</option>
+                <option value="{$productversion}/sl{$htmlpage}">SL</option>
+                <option value="{$productversion}/sv{$htmlpage}">SV</option>
+                <option value="{$productversion}/tr{$htmlpage}">TR</option>
+                <option value="{$productversion}/vi{$htmlpage}">VI</option>
+                <option value="{$productversion}/zh-CN{$htmlpage}">ZH-CN</option>
+                <option value="{$productversion}/zh-TW{$htmlpage}">ZH-TW</option>
+            </select>
             <script type="text/javascript">
                 <![CDATA[
-                (function() {
-                var cx = '010161382024564278136:oejldkqc20o';
-                var gcse = document.createElement('script');
-                gcse.type = 'text/javascript';
-                gcse.async = true;
-                gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
-                var s = document.getElementsByTagName('script')[0];
-                s.parentNode.insertBefore(gcse, s);
-                })();
+                document.addEventListener('DOMContentLoaded',function() {
+                document.querySelector('select[name="modules"]').onchange=changeModuleHandler;
+                document.querySelector('select[name="system"]').onchange=changeSystemHandler;
+                document.querySelector('select[name="language"]').onchange=changeLangHandler;
+                },false);
+
+                function changeModuleHandler(event) {
+                // You can use “this” to refer to the selected element.
+                var system = getParameterByName("System");
+                window.open('/'+event.target.value + '&System=' + system,'_self');
+                }
+                function changeSystemHandler(event) {
+                // You can use “this” to refer to the selected element.
+                var module = getParameterByName("DbPAR");
+                window.open('/'+event.target.value + '&DbPAR=' + module,'_self');
+                }
+                function changeLangHandler(event) {
+                // You can use “this” to refer to the selected element.
+                var system = getParameterByName("System");
+                var module = getParameterByName("DbPAR");
+                window.open('/' + event.target.value  + '?DbPAR=' + module + '&System=' + system ,'_self');
+                }
                 ]]>
             </script>
-            <xsl:text disable-output-escaping="yes">&lt;gcse:search&gt;&lt;/gcse:search&gt;</xsl:text>
-        </div>
-        <div id="TopLeft">
-            <nav id="SelectModules">
-                <ul>
-                    <li><a href="{$productversion}/{$lang}/text/scalc/main0000.html?DbPAR=CALC">Calc</a></li>
-                    <li><a href="{$productversion}/{$lang}/text/swriter/main0000.html?DbPAR=WRITER">Writer</a></li>
-                    <li><a href="{$productversion}/{$lang}/text/simpress/main0000.html?DbPAR=IMPRESS">Impress</a></li>
-                    <li><a href="{$productversion}/{$lang}/text/sdraw/main0000.html?DbPAR=DRAW">Draw</a></li>
-                    <li><a href="{$productversion}/{$lang}/text/schart/main0000.html?DbPAR=CHART">Chart</a></li>
-                    <li><a href="{$productversion}/{$lang}/text/sbasic/shared/main0601.html?DbPAR=BASIC">Basic</a></li>
-                    <li><a href="{$productversion}/{$lang}/text/smath/main0000.html?DbPAR=MATH">Math</a></li>
-                    <li><a href="{$productversion}/{$lang}/text/shared/explorer/database/main.html?DbPAR=BASE">Base</a></li>
-                    <!--<li><a href="{$productversion}/{$lang}/text/shared/guide/main.html?DbPAR=SHARED">Guide</a></li>-->
-                </ul>
-            </nav>
-        </div>
-        <div id="TopSystem">
-            <nav id="SelectSystem">
-                <ul>
-                    <li id="win"><a href="{$productversion}/{$lang}{$htmlpage}">Wndows</a></li>
-                    <li id="lin"><a href="{$productversion}/{$lang}{$htmlpage}">Linux</a></li>
-                    <li id="mac"><a href="{$productversion}/{$lang}{$htmlpage}">Mac</a></li>
-                </ul>
-            </nav>
+        </nav>
+        <h1>LibreOffice <xsl:value-of select="$productversion"/><br/>Help Online</h1>
+    </header>
+    <section id="tabs">
+        <article itemprop= "headline" data-title="{$titleL10N}">
+            <div id="DisplayArea" itemprop="articleBody">
+                <xsl:apply-templates select="/helpdocument/body"/>
+            </div>
+        </article>
+        <article id="Index" data-title="Index">
+            <div id="SearchBox"><p>&#32;&#x1f50e;&#32;<input type="text" id="search-bar"/></p></div>
+            <div id="Bookmarks">
+                <ul id="bookmarkCALC" hidden="true"></ul>
+                <ul id="bookmarkCHART" hidden="true"></ul>
+                <ul id="bookmarkWRITER" hidden="true"></ul>
+                <ul id="bookmarkDRAW" hidden="true"></ul>
+                <ul id="bookmarkIMPRESS" hidden="true"></ul>
+                <ul id="bookmarkMATH" hidden="true"></ul>
+                <ul id="bookmarkBASE" hidden="true"></ul>
+                <ul id="bookmarkSHARED"></ul>
+                <ul id="bookmarkBASIC" hidden="true"></ul>
+            </div>
+        </article>
+        <article data-title="Search">
+            <div id="TopRight">
+                <script type="text/javascript">
+                    <![CDATA[
+                    (function() {
+                    var cx = '010161382024564278136:oejldkqc20o';
+                    var gcse = document.createElement('script');
+                    gcse.type = 'text/javascript';
+                    gcse.async = true;
+                    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
+                    var s = document.getElementsByTagName('script')[0];
+                    s.parentNode.insertBefore(gcse, s);
+                    })();
+                    ]]>
+                </script>
+                <xsl:text disable-output-escaping="yes">&lt;gcse:search&gt;&lt;/gcse:search&gt;</xsl:text>
+            </div>
+            <a href="#" onClick="myTabs.next(); return false">Come back to first tab</a>
+        </article>
+        <article data-title="Contents">
+            <h2>Tree</h2>
+            <p>TBD</p>
+            <a href="#" onClick="myTabs.next(); return false">Finished ? Go to the next tab</a>
+        </article>
+    </section>
+    <footer>
+        <p><a href="http://www.libreoffice.org/imprint" target="_blank">Impressum (Legal Info)</a> | <a href="http://www.libreoffice.org/privacy" target="_blank">Privacy Policy</a> | <a href="http://www.documentfoundation.org/statutes.pdf" target="_blank">Statutes (non-binding English translation)</a> - <a href="http://www.documentfoundation.org/satzung.pdf" target="_blank">Satzung (binding German version)</a> | Copyright information: Unless otherwise specified, all text and images on this website are licensed under the <a href="http://creativecommons.org/licenses/by-sa/3.0/" target="_blank">Creative Commons Attribution-Share Alike 3.0 License</a>. This does not include the source code of LibreOffice, which is licensed under the <a href="http://www.libreoffice.org/download/license/" target="_blank">Mozilla Public License v2.0</a>. “LibreOffice” and “The Document Foundation” are registered trademarks of their corresponding registered owners or are in actual use as trademarks in one or more countries. Their respective logos and icons are also subject to international copyright laws. Use thereof is explained in our <a href="http://wiki.documentfoundation.org/TradeMark_Policy" target="_blank">trademark policy</a>. LibreOffice was based on OpenOffice.org.</p>
+    </footer>
+    <footer>
+        <div class="debug">
+            <h3 class="bug">Help content debug info:</h3>
+            <p>This page is: <xsl:value-of select="$filename"/></p>
+            <p>Title is: <xsl:value-of select="$title"/></p>
+            <p id="bm_module"></p>
+            <p id="bm_system"></p>
         </div>
-        <script type="text/javascript">
-            <![CDATA[
-            var module = getParameterByName("DbPAR");
-            setModule(module);
-            var system = getParameterByName("System");
-            setSystem(system);
-            fixURL(module,system);
-            setSystemURLButton(module);
-            document.getElementById("bm_module").innerHTML ="Module is: "+module;
-            document.getElementById("bm_system").innerHTML ="System is: "+system;
-            ]]>
-        </script>
-        <script type="text/javascript" src="{$productversion}/{$lang}/bookmarks.js"/>
-    </div>
+    </footer>
+    <script type="text/javascript">
+        <![CDATA[
+        var module = getParameterByName("DbPAR");
+        setModule(module);
+        var system = getParameterByName("System");
+        setSystem(system);
+        fixURL(module,system);
+        document.getElementById("bm_module").innerHTML ="Module is: "+module;
+        document.getElementById("bm_system").innerHTML ="System is: "+system;
+        ]]>
+    </script>
+    <script type="text/javascript" src="{$productversion}/{$lang}/bookmarks.js"/>
+    <script type="text/javascript" src="{$productversion}/tabs.js"></script>
+    <script>
+        var myTabs = new tabs(document.getElementById("tabs"), "article", "h2").responsive("myTabs", {
+        prev: "Previous",
+        next: "Next"
+        });
+    </script>
+
 </body>
 </html>
 </xsl:template>
@@ -563,10 +584,10 @@
 					<xsl:variable name="href"><xsl:value-of select="concat($urlpre,'text/shared/00/00000004.xhp')"/></xsl:variable>
 					<xsl:variable name="anchor"><xsl:value-of select="'related'"/></xsl:variable>
 					<xsl:variable name="doc" select="document($href)"/>
-					<p class="related">
+                                        <p class="related" itemprop="mentions">
 						<xsl:apply-templates select="$doc//variable[@id=$anchor]"/>
 					</p>
-					<div class="relatedbody">
+					<div class="relatedbody" itemprop="mentions">
 						<xsl:apply-templates />
 					</div>
 				</div>
@@ -727,7 +748,7 @@
 
 <!-- Insert Basic code snippet  -->
 <xsl:template name="insertbascode">
-	<pre><xsl:apply-templates /></pre>
+	<pre itemscope="true" itemtype="http://schema.org/SoftwareSourceCode" itemprop="codeSampleType" content="snippet"><xsl:apply-templates /></pre>
 </xsl:template>
 
 <!-- Insert Logo code snippet  -->
@@ -824,7 +845,7 @@
         <xsl:element name="{concat('h',$level)}">
                 <xsl:choose>
                     <xsl:when test="$level = '1'">
-                        <xsl:attribute name="itemprop"><xsl:text>headline</xsl:text></xsl:attribute>
+                        <xsl:attribute name="itemprop"><xsl:text>articleSection</xsl:text></xsl:attribute>
                     </xsl:when>
                     <xsl:otherwise></xsl:otherwise>
                 </xsl:choose>
diff --git a/help3xsl/tabs.css b/help3xsl/tabs.css
deleted file mode 100644
index cbbc9846d0..0000000000
--- a/help3xsl/tabs.css
+++ /dev/null
@@ -1,134 +0,0 @@
-/*Copyright (c) 2017 by César Gabriel (http://codepen.io/CesarGabriel/pen/nLhAa)
-
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-
-#container {
-    margin: 0 auto;
-    width: 100%;  /* Ancho del contenedor */
-    height: 100%;
-}
-
-#container input {
-	height: 2.5em;
-	visibility: hidden;
-}
-
-#container label {
-	background: #f9f9f9;  /* Fondo de las pestañas */
-	border-radius: .25em .25em 0 0;
-	color: #888;  /* Color del texto de las pestañas */
-	cursor: pointer;
-	display: block;
-	float: left;
-	font-size: 1em;  /* Tamaño del texto de las pestañas */
-	height: 2.5em;
-	line-height: 2.5em;
-	margin-right: .25em;
-	padding: 0 1.5em;
-	text-align: center;
-}
-
-#container input:hover + label {
-	background: #ddd;  /* Fondo de las pestañas al pasar el cursor por encima */
-	color: #666;  /* Color del texto de las pestañas al pasar el cursor por encima */
-}
-
-#container input:checked + label {
-	background: #f1f1f1;  /* Fondo de las pestañas al presionar */
-	color: #444; /* Color de las pestañas al presionar */
-	position: relative;
-	z-index: 6;
-	/*
-	-webkit-transition: .1s;
-	-moz-transition: .1s;
-	-o-transition: .1s;
-	-ms-transition: .1s;
-	*/
-}
-
-#content {
-	background: #ffffff;  /* Fondo del contenido */
-	border-radius: 0 .25em .25em .25em;
-	min-height: 20em;  /* Alto del contenido */
-	position: relative;
-	width: 100%;
-        height:100%;
-	z-index: 5;
-}
-
-#content div {
-	opacity: 0;
-	padding: 1.em;
-	position: absolute;
-	z-index: -100;
-        width:100%;
-	/*
-	transition: all linear 0.1s;
-	*/
-}
-
-
-/*#content-1 p {
-	clear: both;
-	margin-bottom: 1em;
-}
-#content-1 p.left img {
-	float: left;
-	margin-right: 1em;
-}
-#content-1 p.last {
-	margin-bottom: 0;
-}
-*/
-#content-1 div#SearchBox {
-	background-color: #c2f6ba;
-	line-height:2em;
-	border: 1px solid #18A303;
-        vertical-align: center;
-        text-align: center;
-        position: absolute;
-        top:2px;
-        left:2px;
-}
-#content-1 div#Bookmarks {
-        top:50px;
-}
-#content-1 ul li {
-    list-style-type: none;
-}
-#content-1 p {
-	font-size: 16pt;
-	font-weight: bold;
-}
-
-#container input#tab-1:checked ~ #content #content-1,
-#container input#tab-2:checked ~ #content #content-2,
-#container input#tab-3:checked ~ #content #content-3
-{
-    opacity: 1;
-    z-index: 100;
-}
-
-#container input#tab-2:checked ~ #content #content-2 *
-{
-    opacity: 1;
-    z-index: 100;
-    visibility: visible;
-}
-
-#container input#tab-1:checked ~ #content #content-1 *
-{
-    opacity: 1;
-    z-index: 100;
-    visibility: visible;
-}
-
-#container input.visible {
-  visibility: visible !important;
-}
diff --git a/help3xsl/tabs.js b/help3xsl/tabs.js
new file mode 100644
index 0000000000..d9f1e246b8
--- /dev/null
+++ b/help3xsl/tabs.js
@@ -0,0 +1,53 @@
+/*

+ * This file is part of the LibreOffice project.

+ *

+ * This Source Code Form is subject to the terms of the Mozilla Public

+ * License, v. 2.0. If a copy of the MPL was not distributed with this

+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.

+ */

+

+function tabs(a, g, j) {

+    document.body.className = "js-on";

+    var g = a.getElementsByTagName(g),

+        d = [],

+        c;

+    this.active;

+    this.total = g.length;

+    this.container = a;

+    e = a.insertBefore(document.createElement("nav"), g[0]), change = function (f) {

+        if (typeof this.active !== "undefined") {

+            d[this.active].className = g[this.active].className = ""

+        }

+        d[f].className = g[f].className = "active";

+        this.active = f

+    }, clickEvent = function (h, f) {

+        h.onclick = function () {

+            change(f);

+            return false

+        }

+    };

+    for (var b = 0; b < g.length; b++) {

+        d[b] = e.appendChild(document.createElement("a"));

+        d[b].href = "#";

+        c = [g[b].getAttribute("data-title"), g[b].getElementsByTagName(j)[0]];

+        d[b].innerHTML = c[0] !== null ? c[0] : c[1] ? c[1]["innerText" || "textContent"] : b + 1;

+        new clickEvent(d[b], b)

+    }

+    change(0)

+}

+tabs.prototype.change = function (b) {

+    change(b - 1)

+};

+tabs.prototype.next = function (b) {

+    active === this.total - 1 ? change(0) : change(active + 1)

+};

+tabs.prototype.prev = function (b) {

+    active === 0 ? change(this.total - 1) : change(active - 1)

+};

+tabs.prototype.responsive = function (d, c) {

+    nav = document.createElement("nav");

+    nav.id = "mobiles";

+    nav.innerHTML = '<a href="#" onclick="' + d + '.prev(); return false">' + c.prev + '</a><a href="#" onclick="' + d + '.next(); return false">' + c.next + "</a>";

+    this.container.insertBefore(nav, this.container.firstChild);

+    return this

+};

diff --git a/help3xsl/xhp2html.sh b/help3xsl/xhp2html.sh
index 5806746514..09651adb17 100755
--- a/help3xsl/xhp2html.sh
+++ b/help3xsl/xhp2html.sh
@@ -9,20 +9,39 @@
 # This script builds translated XHP file with helpex excutable
 # and thes transform it to html pages
 # 1) generates redirection from LibreOffice Help URL to right html page
-# in index.html with bookmark2file.js
-# 2) generates bookmark_<APP>.js for indes search
-# 3) generates HTML pahes with online_transform.xs
+#    in index.html with bookmark2file.js
+# 2) generates bookmark_<APP>.js for index search
+# 3) generates HTML pages with online_transform.xs
 # 4) copy service files (css, js, media) to right place.
 #
-# Note: change root variable to your local git build
+# Note: change rootHelpex variable to your local git build
 #
 
+function convert2HTML() {
+#outDirLang =1
+#outDirHTML =2
+
+xsltparm='--stringparam Language '$lang' --stringparam productversion '$productversion' --stringparam root '$outDirLang'/'
+echo 'Converting to HTMLi started'
+for filep in `find $1/text -name "*.xhp"`
+do
+DIR=${filep##*text/}
+name=${DIR:0:-3}
+outFile=$2'/text/'$name'html'
+xsltproc $xsltparm -o $outFile online_transform.xsl $filep
+done
+echo 'Conversion to HTML finished'
+}
+
 productversion='6.0'
-root=/home/tdf/git/core
+rootHelpex=/home/tdf/git/core
 
-ALL_LANGS='en-US af am ar as ast be bg bn bn-IN bo br brx bs ca ca-valencia cs cy da de dgo dz el en-GB en-ZA eo es et eu fa fi fr ga gd gl gu gug he hsb hi hr hu id is it ja ka kk km kmr-Latn kn ko kok ks lb lo lt lv mai mk ml mn mni mr my nb ne nl nn nr nso oc om or pa-IN pl pt pt-BR ro ru rw sa-IN sat sd sr-Latn si sid sk sl sq sr ss st sv sw-TZ ta te tg th tn tr ts tt ug uk uz ve vec vi xh zh-CN zh-TW zu'
+ALL_LANGS='en-US am ar ast bg bn bn-IN bo bs ca ca-valencia cs da de dz el en-GB en-ZA eo es et eu fi fr gl gu he hi hr hu id is it ja ka km ko lo lt lv mk nb ne nl nn om pl pt-BR pt ro ru sid si sk sl sq sv ta tg tr ug uk vi zh-CN zh-TW'
 
 here=`pwd`
+root=$(realpath "$here/../..")
+
+
 rm -rf $here/l10n
 rm -rf $here/html
 
@@ -30,7 +49,40 @@ helpfiles=$root/helpcontent2/source/text
 
 pofiles=/tmp/pofiles.txt
 xhpfiles=/tmp/xhpfiles.txt
-mkdir -p $here/ html
+# mkdir -p $here/html
+mkdir -p $here'/html/'$productversion
+
+echo 'copy global service files'
+cp index.html $here'/html/'
+cp help.js $here'/html/'$productversion'/'
+cp jquery-3.1.1.min.js $here'/html/'$productversion'/'
+cp tabs.js $here'/html/'$productversion'/'
+cp default.css $here'/html/'$productversion'/'
+
+cp -rap ../source/media $here'/html/'$productversion'/'
+mkdir -p $here'/html/'$productversion'/media/icon-themes'
+cp -rap ../../icon-themes/galaxy/* $here'/html/'$productversion'/media/icon-themes/'
+ln -s $productversion html/latest
+
+# Set helpex utilty and environment
+
+while test ! -d "${rootHelpex}/instdir/program" ; do
+if test "${dir}" = "/"; then
+echo "error: cannot find \"program\" dir from \"$(pwd)\""
+exit 1
+fi
+rootHelpex=$(readlink -f "${rootHelpex}/..")
+done
+
+exedir="${rootHelpex}"/workdir/LinkTarget/Executable
+echo $exedir
+
+export URE_BOOTSTRAP=file://"${rootHelpex}"/instdir/program/fundamentalrc123
+export LD_LIBRARY_PATH=${LD_LIBRARY_PATH:+$LD_LIBRARY_PATH:}"${rootHelpex}"/instdir/program
+
+echo "setting URE_BOOTSTRAP to: ${URE_BOOTSTRAP}"
+echo "setting search path to: ${LD_LIBRARY_PATH}"
+echo "execing: ${exedir}/helpex"
 
 # Create the bookmark2file map
 stub1='var map={'
@@ -43,12 +95,14 @@ echo $stub1 >> $ffile
 awk 'NF' $ffile2 >> $ffile
 echo $stub2 >> $ffile
 
-ALL_LANGS="pt-BR fr en-US"
+# ALL_LANGS="en-US fr"
 for lang in $ALL_LANGS
 do
 
 echo 'lang = '$lang
 
+echo 'LIB -> '${LD_LIBRARY_PATH:+$LD_LIBRARY_PATH:}
+
 mkdir -p $here'/l10n/'$productversion'/'$lang
 outDirLang=$here'/l10n/'$productversion'/'$lang
 
@@ -82,30 +136,22 @@ do
     outDir=$outDirLang'/text/'$stub
     mkdir -p $outDir
     ls $hlpFileDir/*.xhp >$xhpfiles
-    $root/bin/run helpex -l $lang -mi $xhpfiles -m $potemp -o $outDir
+    ${LO_TRACE} "${exedir}/helpex" -l $lang -mi $xhpfiles -m $potemp -o $outDir
+    "${exedir}/helpex" -l $lang -mi $xhpfiles -m $potemp -o $outDir
     rm $potemp
 done
 fi
+
 #extracting bookmarks
 echo 'Extracting bookmarks'
 ./get_bookmark.sh $lang $productversion
 
-echo 'Converting to HTML'
-for filep in `find $outDirLang/text -name "*.xhp"`
-        do
-               DIR=${filep##*text/}
-               name=${DIR:0:-3}
-               outFile=$outDirHTML'/text/'$name'html'
-               xsltproc $xsltparm -o $outFile online_transform.xsl $filep
-        done
-echo 'copy some service files'
-cp default.css tabs.css tree.css $outDirHTML
+convert2HTML $outDirLang $outDirHTML &
 
 done
-echo 'copy global service files'
-cp index.html html/
-cp help.js jquery-3.1.1.min.js $here'/html/'$productversion'/'
-cp -rap ../source/media $here'/html/'$productversion'/'
-mkdir -p $here'/html/'$productversion'/media/icon-themes'
-cp -rap ../../icon-themes/galaxy/* $here'/html/'$productversion'/media/icon-themes/'
-ln -s $productversion html/latest
+exit
+
+
+
+
+