Make Help navigation layout less busy

Bookmarks don't have to be visible all the time, so make them a
dropdown and move the search box to header.

Move Xapian search to the top of the content area.

Make Contents tree appear on the left side in 960px and wider screens.

Simplify/clean up some CSS and JS, for example for module colours.

Change-Id: Ic50a834b758d50098868866e4b8d3e8085755423
Reviewed-on: https://gerrit.libreoffice.org/c/help/+/160870
Tested-by: Jenkins
Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org>
(cherry picked from commit 25f39b53fb292ec90368f2afd3678884a1a8bb27)
Reviewed-on: https://gerrit.libreoffice.org/c/help/+/160860

6 files changed, 157 insertions, 161 deletions

diff --git a/help3xsl/default.css b/help3xsl/default.css
index b54f9fe725..5f3276fb5b 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -32,6 +32,7 @@ do not break anything related to layout by scaling.
   --font_mono: Menlo, "Cascadia Mono", "Cascadia Code", Consolas, "DejaVu Sans Mono", monospace;
   --font_body: Ubuntu, Cantarell, "Segoe UI Variable", "Segoe UI", "Noto Sans", "DejaVu Sans", "Lucida Grande", sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom;
   --background-color: #f7f8f7;
+  --module-color: #18A303;
 }
 
 body,
@@ -226,6 +227,7 @@ html[dir=ltr] th {
     margin-top: 0px;
 }
 .tableheadcell {
+    background: var(--module-color);
     color: white;
     vertical-align:top;
 }
@@ -252,7 +254,8 @@ h4,
 h5,
 h6 {
     margin-bottom: 0.67rem;
-    color: #148603;
+    color: var(--module-color);
+    border-bottom-color: var(--module-color);
 }
 p,
 ol,
@@ -263,7 +266,7 @@ td {
 h1 {
     font-size: 1.83rem;
     font-weight: 300;
-    border-bottom: 2px solid #148603;
+    border-bottom: 2px solid;
     margin-bottom: 1.67rem;
 }
 h1 a {
@@ -326,14 +329,15 @@ h6 {
     margin-top: 15px;
     margin-bottom: 15px;
 }
-
 #DisplayArea {
     background-color: #FCFCFC;
     overflow: auto;
     padding: 10px 10px 40px 10px;
     grid-area: main;
 }
-
+#omega-autofocus {
+    width: 274px;
+}
 .mediabutton {
     background-color: cyan;
 }
@@ -360,6 +364,7 @@ h6 {
 
 .embedded {}
 #TopLeftHeader {
+    background: var(--module-color);
     grid-area: header;
     position: sticky;
     top: 0px;
@@ -379,6 +384,7 @@ h6 {
     display: flex;
     justify-content: space-between;
     flex-direction: column;
+    width: 100%;
 }
 .symbol, .logo, .logo:hover, .logo:visited {
     color: #fff;
@@ -495,9 +501,8 @@ footer p {
 label[for=accordion-1] {
     color: #233336;
     display: block;
-    padding: 10px 0 10px 20px;
+    margin: 0 0 10px 10px;
     font-size: 22px;
-    line-height: .6;
 }
 label[for=accordion-1]:after {
     font-size: 44px;
@@ -510,7 +515,7 @@ aside input[type=checkbox]:checked ~ .contents-treeview {
     color: #333;
     z-index: 6;
     display: block;
-    margin: 0 20px 0 20px;
+    margin: 0 20px 20px 20px;
 }
 .index-label {
     font-size: 22px;
@@ -518,7 +523,7 @@ aside input[type=checkbox]:checked ~ .contents-treeview {
     padding-left: 20px;
     margin: 20px 0 0 0;
 }
-#Index, .index {
+.index {
     margin-top: 10px;
 }
 .index {
@@ -532,7 +537,8 @@ aside input[type=checkbox]:checked ~ .contents-treeview {
     display: none;
 }
 #Bookmarks {
-    padding: 0 20px;
+    width: 300px;
+    margin-left: 10px;
 }
 #Bookmarks p {
     font-size: 22px;
@@ -628,7 +634,6 @@ li.disabled a {
     box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
     box-sizing: border-box;
     line-height: 1.5em;
-    margin-top: 10px;
     outline: none;
     padding: 0 .25em;
     transition: all 0.30s ease-in-out;
@@ -642,13 +647,25 @@ li.disabled a {
 #search-bar::placeholder {
     font-style: italic;
 }
+#SearchFrame .nav-container {
+    display: none;
+    position: absolute;
+    background-color: var(--background-color);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    max-height: 80svh;
+    width: 300px;
+}
+#SearchFrame:focus-within .nav-container {
+    display: block;
+}
 .xapian-donation {
     border-top: 2px solid #148603;
     background-color: #FCFCFC;
     box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
 }
 #DonationFrame {
-    background: #18A303;
+    background: var(--module-color);
     position: sticky;
     top: 0px;
 }
@@ -672,10 +689,9 @@ li.disabled a {
     text-align: center;
 }
 #SearchFrame {
-    background: #18A303;
     top: 0px;
     position: sticky;
-    z-index: 100;
+    z-index: 1;
 }
 .xapian-omega-search {
     margin: auto;
@@ -823,6 +839,57 @@ li.disabled a {
     }
 }
 @media screen and (min-width: 960px) {
+    html {
+        scroll-padding-top: 64px;
+    }
+    body {
+        display: grid;
+        grid-template-columns: 320px 100px 300px 1fr;
+        grid-template-rows: minmax(1em, auto) minmax(1em, auto) 1fr minmax(1em, auto);
+        grid-template-areas: "header header search donation"
+                                "leftside main main main"
+                                "leftside main main main"
+                                ". footer footer footer"
+    }
+    #TopLeftHeader {
+        display: grid;
+        align-items: end;
+        grid-template-columns: auto auto;
+        grid-template-rows: auto auto;
+        grid-template-areas: "symbol logo"
+                            "symbol dropdowns"
+    }
+    #SearchFrame {
+        grid-area: search;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .index-label {
+        color: #fff;
+    }
+    #DonationFrame {
+        grid-area: donation;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    #Contents {
+        color: #333;
+        z-index: 6;
+        display: block;
+        margin: 0 20px 0 20px;
+    }
+    label[for=accordion-1] {
+        margin: 0;
+    }
+    label[for=accordion-1]:after {
+        content: "";
+        font-size: unset;
+    }
+    #Bookmarks {
+        margin-left: 0;
+    }
     .dropdowns {
         flex-direction: row;
         overflow-y: auto;
@@ -872,14 +939,13 @@ li.disabled a {
     }
     .leftside {
         grid-area: leftside;
-    }
-    .rightside {
-        grid-area: rightside;
+        padding: 40px 10px 0 10px;
     }
     #DonationFrame {
         grid-area: donation;
     }
     #SearchFrame {
+        background: var(--module-color);
         grid-area: search;
     }
     footer {
@@ -894,18 +960,14 @@ li.disabled a {
     }
     #DisplayArea {
         box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
-        padding: 10px 50px 40px 50px;
+        padding: 40px 50px;
     }
     .xapian-omega-search {
         width: 100%;
     }
     .xapian-omega-search form {
         display: flex;
-        justify-content: center;
-    }
-    .omega-autofocus {
-        max-width: 200px;
-        width: 100%
+        justify-content: flex-end;
     }
     /* ScriptForge service tables */
     .sf_table {
@@ -922,77 +984,22 @@ li.disabled a {
     }
 }
 @media screen and (min-width: 1440px) {
-    #Contents {
-        color: #333;
-        z-index: 6;
-        display: block;
-        margin: 0 20px 0 20px;
+    body {
+        display: grid;
+        grid-template-columns: 360px 100px 400px 400px 1fr;
+        grid-template-rows: 1fr minmax(1em, auto) minmax(1em, auto);
+        grid-template-areas: "header header search search donation"
+                                "leftside main main main ."
+                                ". footer footer footer ."
+    }
+    .donation {
+        max-width: 300px;
     }
     label[for=accordion-1] {
         background-color: transparent;
         text-decoration: none;
     }
-     label[for=accordion-1]:hover {
+    label[for=accordion-1]:hover {
         background-color: transparent;
     }
-     label[for=accordion-1]:after {
-        content: "";
-    }
-    .omega-autofocus {
-        max-width: 400px;
-    }
-}
-/* Use @supports to sneak these rules past IE */
-@supports (grid-area: auto) {
-    @media screen and (min-width: 960px) {
-        #TopLeftHeader {
-            display: grid;
-            align-items: end;
-            grid-template-columns: auto auto;
-            grid-template-rows: auto auto;
-            grid-template-areas: "symbol logo"
-                                "symbol dropdowns"
-        }
-        #SearchFrame {
-            grid-area: search;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        #DonationFrame {
-            grid-area: donation;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        body {
-            display: grid;
-            grid-template-columns: 320px 100px 300px 1fr;
-            grid-template-rows: minmax(1em, auto) minmax(1em, auto) 1fr minmax(1em, auto);
-            grid-template-areas: "header header search donation"
-                                 "rightside main main main"
-                                 "leftside main main main"
-                                 ". footer footer footer"
-        }
-        html {
-            scroll-padding-top: 64px;
-        }
-    }
-    @media screen and (min-width: 1440px) {
-        body {
-            display: grid;
-            grid-template-columns: 360px 100px 400px 400px 1fr;
-            grid-template-rows: 1fr minmax(1em, auto) minmax(1em, auto);
-            grid-template-areas: "header header search search donation"
-                                 "leftside main main main rightside"
-                                 ". footer footer footer ."
-        }
-        .donation {
-            max-width: 300px;
-        }
-        .rightside {
-            width: auto;
-            border-right: none;
-        }
-    }
 }
diff --git a/help3xsl/help2.js b/help3xsl/help2.js
index 684136245d..c6bf1948e4 100644
--- a/help3xsl/help2.js
+++ b/help3xsl/help2.js
@@ -70,7 +70,6 @@ function setSystemSpan(spanZ) {
 }
 
 // paint headers and headings with appl color
-
 function moduleColor (module) {
     switch (module){
         case "WRITER" : {color="#083fa6"; break;}
@@ -84,18 +83,8 @@ function moduleColor (module) {
         case "SHARED" : {color="darkslategray"; break;}
         default : {color="#18A303"; break;}
     }
-    document.getElementById("TopLeftHeader").style.background = color;
-    document.getElementById("SearchFrame").style.background = color;
-    document.getElementById("DonationFrame").style.background = color;
-    var cols = document.getElementsByClassName('tableheadcell');
-    for(i = 0; i < cols.length; i++) {cols[i].style.backgroundColor = color;};
-    for (j of [1,2,3,4,5,6]) {
-        var hh = document.getElementsByTagName("H" + j);
-        for(i = 0; i < hh.length; i++) {
-            hh[i].style.color = color;
-            hh[i].style.borderBottomColor = color;
-        }
-    }
+    let root = document.documentElement;
+    root.style.setProperty('--module-color', color);
 }
 
 /* add &DbPAR= and &System= to the links in DisplayArea div */
diff --git a/help3xsl/online_transform.xsl b/help3xsl/online_transform.xsl
index 51961c68b6..b2f7adde01 100644
--- a/help3xsl/online_transform.xsl
+++ b/help3xsl/online_transform.xsl
@@ -96,22 +96,23 @@
 <!-- Strings for the help UI page -->
 <xsl:variable name="tmp_href_ui"><xsl:value-of select="concat($urlpre,'text/shared/help/browserhelp.xhp')"/></xsl:variable>
 <xsl:variable name="tmp_doc_ui" select="document($tmp_href_ui)"/>
-<xsl:variable name ="ui_contents"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='contents']"/></xsl:variable>
-<xsl:variable name ="ui_index"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='index']"/></xsl:variable>
-<xsl:variable name ="ui_pholderall"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='pholderall']"/></xsl:variable>
-<xsl:variable name ="ui_pholderchosen"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='pholderchosen']"/></xsl:variable>
-<xsl:variable name ="ui_module"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='module']"/></xsl:variable>
-<xsl:variable name ="ui_language"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='language']"/></xsl:variable>
-<xsl:variable name ="ui_donate"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='donate']"/></xsl:variable>
-<xsl:variable name ="ui_logo"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='LibreOfficeHelp']"/></xsl:variable>
-<xsl:variable name ="ui_selectmodule"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='selectmodule']"/></xsl:variable>
-<xsl:variable name ="ui_selectlang"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='selectlanguage']"/></xsl:variable>
-<xsl:variable name ="ui_search"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='searchhelpcontents']"/></xsl:variable>
-<xsl:variable name ="ui_copyclip"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='copyclip']"/></xsl:variable>
-<xsl:variable name ="ytvideobutton"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='ytbutton']"/></xsl:variable>
-<xsl:variable name ="ytaccept"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='ytaccept']"/></xsl:variable>
-<xsl:variable name ="ytpromovideoH2"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='externalvideo']"/></xsl:variable>
-<xsl:variable name ="ytprivacy"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='ytprivacy']"/></xsl:variable>
+<xsl:variable name="ui_contents"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='contents']"/></xsl:variable>
+<xsl:variable name="ui_index"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='index']"/></xsl:variable>
+<xsl:variable name="ui_pholderbmarksall"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='pholderbmarksall']"/></xsl:variable>
+<xsl:variable name="ui_pholderbmarkschosen"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='pholderbmarkschosen']"/></xsl:variable>
+<xsl:variable name="ui_pholderfullsearch"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='pholderfullsearch']"/></xsl:variable>
+<xsl:variable name="ui_module"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='module']"/></xsl:variable>
+<xsl:variable name="ui_language"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='language']"/></xsl:variable>
+<xsl:variable name="ui_donate"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='donate']"/></xsl:variable>
+<xsl:variable name="ui_logo"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='LibreOfficeHelp']"/></xsl:variable>
+<xsl:variable name="ui_selectmodule"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='selectmodule']"/></xsl:variable>
+<xsl:variable name="ui_selectlang"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='selectlanguage']"/></xsl:variable>
+<xsl:variable name="ui_search"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='searchhelpcontents']"/></xsl:variable>
+<xsl:variable name="ui_copyclip"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='copyclip']"/></xsl:variable>
+<xsl:variable name="ytvideobutton"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='ytbutton']"/></xsl:variable>
+<xsl:variable name="ytaccept"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='ytaccept']"/></xsl:variable>
+<xsl:variable name="ytpromovideoH2"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='externalvideo']"/></xsl:variable>
+<xsl:variable name="ytprivacy"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='ytprivacy']"/></xsl:variable>
 <!--
 #############
 # Templates #
@@ -200,32 +201,39 @@
             </xsl:if>
         </div>
     </header>
-    <aside class="rightside">
+    <aside class="leftside">
         <input id="accordion-1" name="accordion-menu" type="checkbox"/>
         <label for="accordion-1" dir="auto"><xsl:value-of select="$ui_contents"/></label>
         <div id="Contents" class="contents-treeview"></div>
     </aside>
-    <aside class="leftside">
-        <div id="Index">
-        <div class="index-label" dir="auto"><xsl:value-of select="$ui_index"/> &#32;&#x1f50e;&#xfe0e;&#32;</div>
-            <div id="Bookmarks">
-                <xsl:variable name="pholder">
-                    <xsl:choose>
-                        <xsl:when test="contains($htmlpage, '/text/shared/')">
-                            <xsl:value-of select="$ui_pholderall"/>
-                        </xsl:when>
-                        <xsl:otherwise>
-                            <xsl:value-of select="$ui_pholderchosen"/>
-                        </xsl:otherwise>
-                    </xsl:choose>
-                </xsl:variable>
-                <input id="search-bar" type="search" class="search" placeholder="{$pholder}" dir="auto"/>
+    <div id="SearchFrame">
+        <div id="Bookmarks">
+            <xsl:variable name="pholder">
+                <xsl:choose>
+                    <xsl:when test="contains($htmlpage, '/text/shared/')">
+                        <xsl:value-of select="$ui_pholderbmarksall"/>
+                    </xsl:when>
+                    <xsl:otherwise>
+                        <xsl:value-of select="$ui_pholderbmarkschosen"/>
+                    </xsl:otherwise>
+                </xsl:choose>
+            </xsl:variable>
+            <input id="search-bar" type="search" class="search" placeholder="{$pholder}" dir="auto"/>
+            <div class="nav-container" tabindex="0">
                 <nav class="index" dir="auto"></nav>
             </div>
         </div>
-    </aside>
+    </div>
     <div id="DisplayArea" itemprop="softwareHelp" itemscope="true" itemtype="http://schema.org/SoftwareApplication">
         <xsl:if test="$online">
+            <xsl:if test="$xapian='yes'">
+                <div class="xapian-omega-search">
+                    <form name="P" method="get" action="/{$productversion}/{$lang}/search" target="_top">
+                        <input id="omega-autofocus" type="search" name="P" placeholder="{$ui_pholderfullsearch}" dir="auto"/>
+                        <input type="submit" class="xapian-omega-search-button" value="&#x1f50d;"/>
+                    </form>
+                </div>
+            </xsl:if>
             <!-- help2.js checks, if meta elements exist in the body -->
             <meta itemprop="applicationCategory" content="BusinessApplication"/>
             <meta itemprop="applicationSuite" content="LibreOffice"/>
@@ -242,18 +250,6 @@
         </xsl:if>
         <xsl:apply-templates select="/helpdocument/body"/>
     </div>
-    <div id="SearchFrame">
-        <xsl:if test="$online">
-            <xsl:if test="$xapian='yes'">
-                <div class="xapian-omega-search">
-                    <form name="P" method="get" action="/{$productversion}/{$lang}/search" target="_top">
-                        <input id="omega-autofocus" type="search" name="P" dir="auto"/>
-                        <input type="submit" class="xapian-omega-search-button" value="&#x1f50d;"/>
-                    </form>
-                </div>
-            </xsl:if>
-        </xsl:if>
-      </div>
     <div id="DonationFrame">
         <xsl:if test="$online">
             <div class="donation">
diff --git a/help3xsl/paginathing.js b/help3xsl/paginathing.js
index cd52b3637f..4b12618110 100644
--- a/help3xsl/paginathing.js
+++ b/help3xsl/paginathing.js
@@ -69,8 +69,10 @@ var Paginator = function(element) {
         parent = existingContainer.parentNode;
         parent.removeChild(existingContainer);
     }
+    const searchInput = document.getElementById("search-bar");
     var container = document.createElement('nav');
     container.setAttribute('class', options.containerClass);
+    container.setAttribute('tabindex', '0');
     var ul = document.createElement('ul');
     ul.setAttribute('class', options.ulClass);
 
@@ -227,6 +229,7 @@ var Paginator = function(element) {
                         limitPagination = pagLimit();
                     }
                     show(page);
+                    searchInput.focus();
                 });
             }());
         }
diff --git a/help3xsl/xap_templ_query.xsl b/help3xsl/xap_templ_query.xsl
index 3aedf2e1b3..ec42e84cf7 100644
--- a/help3xsl/xap_templ_query.xsl
+++ b/help3xsl/xap_templ_query.xsl
@@ -22,8 +22,9 @@ xsltproc xap_template_query.xsl <file.xhp>
     <!-- Strings for the help UI page -->
     <xsl:variable name ="ui_contents"><xsl:apply-templates select="//variable[@id='contents']"/></xsl:variable>
     <xsl:variable name ="ui_index"><xsl:apply-templates select="//variable[@id='index']"/></xsl:variable>
-    <xsl:variable name ="ui_pholderall"><xsl:apply-templates select="//variable[@id='pholderall']"/></xsl:variable>
-    <xsl:variable name ="ui_pholderchosen"><xsl:apply-templates select="//variable[@id='pholderchosen']"/></xsl:variable>
+    <xsl:variable name ="ui_pholderbmarksall"><xsl:apply-templates select="//variable[@id='pholderbmarksall']"/></xsl:variable>
+    <xsl:variable name ="ui_pholderbmarkschosen"><xsl:apply-templates select="//variable[@id='pholderbmarkschosen']"/></xsl:variable>
+    <xsl:variable name ="ui_pholderfullsearch"><xsl:apply-templates select="$tmp_doc_ui//variable[@id='pholderfullsearch']"/></xsl:variable>
     <xsl:variable name ="ui_module"><xsl:apply-templates select="//variable[@id='module']"/></xsl:variable>
     <xsl:variable name ="ui_language"><xsl:apply-templates select="//variable[@id='language']"/></xsl:variable>
     <xsl:variable name ="ui_donate"><xsl:apply-templates select="//variable[@id='donate']"/></xsl:variable>
@@ -131,7 +132,7 @@ document.write("<span title=\""+D+" "+T+"\">]]><xsl:apply-templates select="//va
     <div id="Index">
         <div class="index-label">]]><xsl:value-of select="$ui_index"/><![CDATA[ &#32;&#x1f50e;&#xfe0e;&#32;</div>
         <div id="Bookmarks">
-            <input id="search-bar" type="search" class="search" placeholder="]]><xsl:value-of select="$ui_pholderchosen"/><![CDATA["/>
+            <input id="search-bar" type="search" class="search" placeholder="]]><xsl:value-of select="$ui_pholderbmarkschosen"/><![CDATA["/>
             <nav class="index"></nav>
         </div>
     </div>
@@ -148,7 +149,7 @@ document.write("<span title=\""+D+" "+T+"\">]]><xsl:apply-templates select="//va
 <div id="DisplayArea">
     <form name="P" method="get" action="]]><xsl:value-of select="$lang"/><![CDATA[/search" target="_top">
 <center>
-<input id="omega-autofocus" type=search name=P value="$html{$query}" size=40 autofocus>
+<input id="omega-autofocus" type=search name=P placeholder="]]><xsl:value-of select="$ui_pholderfullsearch"/>"<![CDATA[ value="$html{$query}" size=40 autofocus>
 <script>
 if (!("autofocus" in document.createElement("input")))
  document.getElementById("omega-autofocus").focus();
diff --git a/source/text/shared/help/browserhelp.xhp b/source/text/shared/help/browserhelp.xhp
index 59ef651b59..1981123291 100644
--- a/source/text/shared/help/browserhelp.xhp
+++ b/source/text/shared/help/browserhelp.xhp
@@ -19,9 +19,9 @@
     <paragraph role="paragraph" id="par_id491525733955136" xml-lang="en-US"><variable id="module">Module</variable></paragraph>
     <paragraph role="paragraph" id="par_id531525734031068" xml-lang="en-US"><variable id="language">Language</variable></paragraph>
     <paragraph role="paragraph" id="par_id991525734084608" xml-lang="en-US"><variable id="contents">Contents</variable></paragraph>
-    <paragraph role="paragraph" id="par_id601525734140935" xml-lang="en-US"><variable id="index">Index</variable></paragraph>
-    <paragraph role="paragraph" id="par_id953832383493636" xml-lang="en-US"><variable id="pholderall">Search in all modules</variable></paragraph>
-    <paragraph role="paragraph" id="par_id335427459543352" xml-lang="en-US"><variable id="pholderchosen">Search in chosen module</variable></paragraph>
+    <paragraph role="paragraph" id="par_id953832383493636" xml-lang="en-US"><variable id="pholderbmarksall">Search in bookmarks for all modules</variable></paragraph>
+    <paragraph role="paragraph" id="par_id335427459543352" xml-lang="en-US"><variable id="pholderbmarkschosen">Search in bookmarks for chosen module</variable></paragraph>
+    <paragraph role="paragraph" id="par_id335427459543353" xml-lang="en-US"><variable id="pholderfullsearch">Search in all help pages</variable></paragraph>
     <paragraph role="paragraph" id="par_id191525734190260" xml-lang="en-US"><variable id="donate">Please support us!</variable></paragraph>
     <paragraph role="paragraph" id="par_id881525734289794" xml-lang="en-US"><variable id="LibreOfficeHelp">%PRODUCTNAME %PRODUCTVERSION Help</variable></paragraph>
     <paragraph role="paragraph" id="par_id421525736799965" xml-lang="en-US"><variable id="copyclip">Click on text to copy to clipboard</variable></paragraph>
@@ -44,11 +44,11 @@
     <paragraph role="paragraph" id="lang_id331525747842279" xml-lang="en-US"><variable id="ca-valencia">Catalan (Valencia)</variable></paragraph>
     <paragraph role="paragraph" id="lang_id981525748227614" xml-lang="en-US"><variable id="zh-CN">Chinese (Simplified)</variable></paragraph>
     <paragraph role="paragraph" id="lang_id361525748230858" xml-lang="en-US"><variable id="zh-TW">Chinese (Traditional)</variable></paragraph>
-    <paragraph role="paragraph" id="lang_id901525748044409" xml-lang="en-US"><variable id="hr">Croatian</variable></paragraph>      
+    <paragraph role="paragraph" id="lang_id901525748044409" xml-lang="en-US"><variable id="hr">Croatian</variable></paragraph>
     <paragraph role="paragraph" id="lang_id541525747847143" xml-lang="en-US"><variable id="cs">Czech</variable></paragraph>
     <paragraph role="paragraph" id="lang_id141525747867126" xml-lang="en-US"><variable id="da">Danish</variable></paragraph>
-    <paragraph role="paragraph" id="lang_id441525748123904" xml-lang="en-US"><variable id="nl">Dutch</variable></paragraph>      
-    <paragraph role="paragraph" id="lang_id831525747962487" xml-lang="en-US"><variable id="dz">Dzongkha</variable></paragraph>      
+    <paragraph role="paragraph" id="lang_id441525748123904" xml-lang="en-US"><variable id="nl">Dutch</variable></paragraph>
+    <paragraph role="paragraph" id="lang_id831525747962487" xml-lang="en-US"><variable id="dz">Dzongkha</variable></paragraph>
     <paragraph role="paragraph" id="lang_id371525747976937" xml-lang="en-US"><variable id="en-GB">English (UK)</variable></paragraph>
     <paragraph role="paragraph" id="lang_id701525747984877" xml-lang="en-US"><variable id="en-ZA">English (SA)</variable></paragraph>
     <paragraph role="paragraph" id="lang_id661525747994007" xml-lang="en-US"><variable id="eo">Esperanto</variable></paragraph>
@@ -59,7 +59,7 @@
     <paragraph role="paragraph" id="lang_id661525748030419" xml-lang="en-US"><variable id="gl">Galician</variable></paragraph>
     <paragraph role="paragraph" id="lang_id181525748093242" xml-lang="en-US"><variable id="ka">Georgian</variable></paragraph>
     <paragraph role="paragraph" id="lang_id131525747872352" xml-lang="en-US"><variable id="de">German</variable></paragraph>
-    <paragraph role="paragraph" id="lang_id631525747969597" xml-lang="en-US"><variable id="el">Greek</variable></paragraph>      
+    <paragraph role="paragraph" id="lang_id631525747969597" xml-lang="en-US"><variable id="el">Greek</variable></paragraph>
     <paragraph role="paragraph" id="lang_id301525748033370" xml-lang="en-US"><variable id="gu">Gujarati</variable></paragraph>
     <paragraph role="paragraph" id="lang_id141525748036295" xml-lang="en-US"><variable id="he">Hebrew</variable></paragraph>
     <paragraph role="paragraph" id="lang_id531525748040396" xml-lang="en-US"><variable id="hi">Hindi</variable></paragraph>
@@ -76,14 +76,14 @@
     <paragraph role="paragraph" id="lang_id131525748114674" xml-lang="en-US"><variable id="mk">Macedonian</variable></paragraph>
     <paragraph role="paragraph" id="lang_id221525748121057" xml-lang="en-US"><variable id="ne">Nepali</variable></paragraph>
     <paragraph role="paragraph" id="lang_id371525748126784" xml-lang="en-US"><variable id="nn">Norwegian Nynorsk</variable></paragraph>
-    <paragraph role="paragraph" id="lang_id441525748118091" xml-lang="en-US"><variable id="nb">Norwegian Bokmål</variable></paragraph>      
+    <paragraph role="paragraph" id="lang_id441525748118091" xml-lang="en-US"><variable id="nb">Norwegian Bokmål</variable></paragraph>
     <paragraph role="paragraph" id="lang_id401525748129935" xml-lang="en-US"><variable id="om">Oromo</variable></paragraph>
     <paragraph role="paragraph" id="lang_id291525748133349" xml-lang="en-US"><variable id="pl">Polish</variable></paragraph>
     <paragraph role="paragraph" id="lang_id631525748136712" xml-lang="en-US"><variable id="pt">Portuguese</variable></paragraph>
     <paragraph role="paragraph" id="lang_id351525748140239" xml-lang="en-US"><variable id="pt-BR">Portuguese (Brazil)</variable></paragraph>
     <paragraph role="paragraph" id="lang_id421525748143274" xml-lang="en-US"><variable id="ro">Romanian</variable></paragraph>
     <paragraph role="paragraph" id="lang_id291525748146064" xml-lang="en-US"><variable id="ru">Russian</variable></paragraph>
-    <paragraph role="paragraph" id="lang_id191525748182094" xml-lang="en-US"><variable id="sid">Sidama</variable></paragraph>      
+    <paragraph role="paragraph" id="lang_id191525748182094" xml-lang="en-US"><variable id="sid">Sidama</variable></paragraph>
     <paragraph role="paragraph" id="lang_id991525748149042" xml-lang="en-US"><variable id="si">Sinhala</variable></paragraph>
     <paragraph role="paragraph" id="lang_id461525748185823" xml-lang="en-US"><variable id="sk">Slovak</variable></paragraph>
     <paragraph role="paragraph" id="lang_id741525748190004" xml-lang="en-US"><variable id="sl">Slovenian</variable></paragraph>
@@ -91,9 +91,9 @@
     <paragraph role="paragraph" id="lang_id281525748193230" xml-lang="en-US"><variable id="hsb">Sorbian (Upper)</variable></paragraph>
     <paragraph role="paragraph" id="lang_id811525748006070" xml-lang="en-US"><variable id="es">Spanish</variable></paragraph>
     <paragraph role="paragraph" id="lang_id481525748203088" xml-lang="en-US"><variable id="sv">Swedish</variable></paragraph>
-    <paragraph role="paragraph" id="lang_id391525748210165" xml-lang="en-US"><variable id="tg">Tajik</variable></paragraph>      
+    <paragraph role="paragraph" id="lang_id391525748210165" xml-lang="en-US"><variable id="tg">Tajik</variable></paragraph>
     <paragraph role="paragraph" id="lang_id191525748206804" xml-lang="en-US"><variable id="ta">Tamil</variable></paragraph>
-    <paragraph role="paragraph" id="lang_id941525747772436" xml-lang="en-US"><variable id="bo">Tibetan</variable></paragraph>      
+    <paragraph role="paragraph" id="lang_id941525747772436" xml-lang="en-US"><variable id="bo">Tibetan</variable></paragraph>
     <paragraph role="paragraph" id="lang_id561525748213759" xml-lang="en-US"><variable id="tr">Turkish</variable></paragraph>
     <paragraph role="paragraph" id="lang_id621525748217482" xml-lang="en-US"><variable id="ug">Uyghur</variable></paragraph>
     <paragraph role="paragraph" id="lang_id861525748221057" xml-lang="en-US"><variable id="uk">Ukrainian</variable></paragraph>