online.git: browser/css browser/html browser/src

["Parth Raiyani (via cogerrit)"]

browser/css/helpdialog.css | 11 ++++++
browser/html/cool-help.html | 68 +++++++++++++++++++++++------------------
browser/src/control/Toolbar.js | 2 -
3 files changed, 51 insertions(+), 30 deletions(-)

New commits:
commit aded2e61690986195dd787bf4c3aa8f92f0b3afe
Author: Parth Raiyani <parth....@collabora.com>
AuthorDate: Mon Apr 27 21:20:35 2026 +0530
Commit: Caolán McNamara <caolan....@collabora.com>
CommitDate: Mon Apr 27 21:07:47 2026 +0000

help: render online help TOC as a list of links, not H2 headings

The page-level table of contents wrapped each jump link in <h2>, making each navigation entry register as a heading. This polluted the heading outline.

Wrap the TOC in <nav><ul> with <li> entries (a standard navigation list of links). Keep the existing toc-h2 / toc-h3 / m-v-0 / link-section classes on the <li> elements so the style and doctype-aware show/hide logic keeps working unchanged. Strip default <ul> styling so the visual result matches the previous design.

Update resetFilterResults to also show the new <nav> so the TOC reappears after clearing the search field.

Signed-off-by: Parth Raiyani <parth....@collabora.com>
Change-Id: I6a6bc66e82ca45ac92bf4e4030f562ae52fc13d6
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1743
Tested-by: Caolán McNamara <caolan....@collabora.com>
Reviewed-by: Caolán McNamara <caolan....@collabora.com>

diff --git a/browser/css/helpdialog.css b/browser/css/helpdialog.css
index edc03722a64c..1f5e7d082131 100644
--- a/browser/css/helpdialog.css
+++ b/browser/css/helpdialog.css
@@ -80,6 +80,17 @@
/* Adjust margin bottom */
}

+ /* Strip default browser styling from the TOC list */
+ .toc-list {
+ list-style: none;
+ padding-left: 0;
+ margin: 0;
+ }
+
+ .toc-list .toc-list {
+ padding-left: 1.5em;
+ }
+
.screenshot {
text-align: center;
margin: 0.1in;
diff --git a/browser/html/cool-help.html b/browser/html/cool-help.html
index 13f7ef1f3dec..08a70bcfc062 100644
--- a/browser/html/cool-help.html
+++ b/browser/html/cool-help.html
@@ -324,35 +324,45 @@
</div>
<div id="online-help-content">
<h1 class="help-dialog-header"><span class="productname">{productname}</span> Help</h1>
- <h2 class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1327">Collaborative editing</a></h2>
- <h2 class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1333"><span class="productname">{productname}</span> user interface</a></h2>
- <h2 class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1335">Opening, closing, saving, printing and downloading documents</a></h2>
- <h2 class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1337">Editing documents</a></h2>
- <h2 class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1338">Advanced features</a></h2>
- <div class="spreadsheet link-section hide">
- <h2 class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1359"><span class="productname">{productname}</span> spreadsheets</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1361">Editing spreadsheets</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1363">Formulas</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1367">Formatting spreadsheets</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1371">Advanced features</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1409">Spreadsheets</a></h2>
- </div>
- <div class="text link-section hide">
- <h2 class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1373"><span class="productname">{productname}</span> text documents</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1375">Editing text documents</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1377">Context menus</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1383">Advanced text document editor features</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1407">Text documents</a></h2>
- </div>
- <div class="presentation link-section hide">
- <h2 class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1391"><span class="productname">{productname}</span> presentations</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1393">Editing presentations</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1395">Slide show</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1397">Slide pane</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1401">Advanced features</a></h2>
- <h2 class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1411">Presentations</a></h2>
- </div>
- <h2 class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1403">Frequently Asked Questions</a></h2>
+ <nav class="help-toc" aria-label="Help table of contents">
+ <ul class="toc-list">
+ <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1327">Collaborative editing</a></li>
+ <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1333"><span class="productname">{productname}</span> user interface</a></li>
+ <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1335">Opening, closing, saving, printing and downloading documents</a></li>
+ <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1337">Editing documents</a></li>
+ <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1338">Advanced features</a></li>
+ <li class="spreadsheet link-section hide">
+ <ul class="toc-list">
+ <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1359"><span class="productname">{productname}</span> spreadsheets</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1361">Editing spreadsheets</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1363">Formulas</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1367">Formatting spreadsheets</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1371">Advanced features</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1409">Spreadsheets</a></li>
+ </ul>
+ </li>
+ <li class="text link-section hide">
+ <ul class="toc-list">
+ <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1373"><span class="productname">{productname}</span> text documents</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1375">Editing text documents</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1377">Context menus</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1383">Advanced text document editor features</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1407">Text documents</a></li>
+ </ul>
+ </li>
+ <li class="presentation link-section hide">
+ <ul class="toc-list">
+ <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1391"><span class="productname">{productname}</span> presentations</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1393">Editing presentations</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1395">Slide show</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1397">Slide pane</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1401">Advanced features</a></li>
+ <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1411">Presentations</a></li>
+ </ul>
+ </li>
+ <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1403">Frequently Asked Questions</a></li>
+ </ul>
+ </nav>

<div class="section">
<p class="section-header"><span class="productname">{productname}</span> allows you to create and edit office documents text documents, spreadsheets and presentations directly in your browser, in a simple and straight-forward way. You can work alone on a document, or collaboratively as part of a team.</p>
diff --git a/browser/src/control/Toolbar.js b/browser/src/control/Toolbar.js
index e49b065d6d3f..2a36c3a77975 100644
--- a/browser/src/control/Toolbar.js
+++ b/browser/src/control/Toolbar.js
@@ -667,7 +667,7 @@ window.L.Map.include({
}.bind(this));

// select all event scroll elements, main-header elements, product header elements and make visible to user if search term is empty
- document.querySelectorAll('.m-v-0, .product-header, .help-dialog-header').forEach(function(element) {
+ document.querySelectorAll('.m-v-0, .product-header, .help-dialog-header, .help-toc').forEach(function(element) {
this.show(element);
element.style.backgroundColor = '';
}.bind(this));

["Caolán McNamara (via cogerrit)"]

browser/css/helpdialog.css | 4 ---
browser/html/cool-help.html | 50 +++++++++++++++++------------------------
browser/src/control/Toolbar.js | 3 +-
3 files changed, 23 insertions(+), 34 deletions(-)

New commits:
commit dcc44178ddc0c84701b4b16ca31e1c0fcd7d7056
Author: Caolán McNamara <caolan....@collabora.com>
AuthorDate: Mon Apr 27 20:47:46 2026 +0000
Commit: Caolán McNamara <caolan....@collabora.com>
CommitDate: Tue Apr 28 05:37:24 2026 +0000

The visual "hierarchy" isn't intentional in help

There isn't meant to be a subcategory under "Advanced" for the specific
app.

It's just a sideeffect of the hide/show by div converted to ul. Flatten
the list, and then tweak the clear search to not show the other app
entries on restoring the entries.

Signed-off-by: Caolán McNamara <caolan....@collabora.com>
Change-Id: I2e5a4224f8a65060b51e6924ca388824373a2fff
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1749

diff --git a/browser/css/helpdialog.css b/browser/css/helpdialog.css
index 40c469a419de..1a788787f83f 100644
--- a/browser/css/helpdialog.css
+++ b/browser/css/helpdialog.css
@@ -88,10 +88,6 @@
margin: 0;
}

- .toc-list .toc-list {
- padding-left: 1.5em;
- }
-

.screenshot {
text-align: center;
margin: 0.1in;
diff --git a/browser/html/cool-help.html b/browser/html/cool-help.html

index c0fa10fc6cda..b51b0877b353 100644
--- a/browser/html/cool-help.html
+++ b/browser/html/cool-help.html
@@ -331,35 +331,27 @@

<li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1335">Opening, closing, saving, printing and downloading documents</a></li>

<li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1337">Editing documents</a></li>

<li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1338">Advanced features</a></li>

- <li class="spreadsheet link-section hide">
- <ul class="toc-list">
- <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1359"><span class="productname">{productname}</span> spreadsheets</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1361">Editing spreadsheets</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1363">Formulas</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1367">Formatting spreadsheets</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1371">Advanced features</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1409">Spreadsheets</a></li>
- </ul>
- </li>
- <li class="text link-section hide">
- <ul class="toc-list">
- <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1373"><span class="productname">{productname}</span> text documents</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1375">Editing text documents</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1377">Context menus</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1383">Advanced text document editor features</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1407">Text documents</a></li>
- </ul>
- </li>
- <li class="presentation link-section hide">
- <ul class="toc-list">
- <li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1391"><span class="productname">{productname}</span> presentations</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1393">Editing presentations</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1395">Slide show</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1397">Slide pane</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1401">Advanced features</a></li>
- <li class="toc-h3 m-v-0"><a class="border-0 scroll-button" href="#1411">Presentations</a></li>
- </ul>
- </li>
+
+ <li class="toc-h2 m-v-0 spreadsheet hide"><a class="border-0 scroll-button" href="#1359"><span class="productname">{productname}</span> spreadsheets</a></li>
+ <li class="toc-h3 m-v-0 spreadsheet hide"><a class="border-0 scroll-button" href="#1361">Editing spreadsheets</a></li>
+ <li class="toc-h3 m-v-0 spreadsheet hide"><a class="border-0 scroll-button" href="#1363">Formulas</a></li>
+ <li class="toc-h3 m-v-0 spreadsheet hide"><a class="border-0 scroll-button" href="#1367">Formatting spreadsheets</a></li>
+ <li class="toc-h3 m-v-0 spreadsheet hide"><a class="border-0 scroll-button" href="#1371">Advanced features</a></li>
+ <li class="toc-h3 m-v-0 spreadsheet hide"><a class="border-0 scroll-button" href="#1409">Spreadsheets</a></li>
+
+ <li class="toc-h2 m-v-0 text hide"><a class="border-0 scroll-button" href="#1373"><span class="productname">{productname}</span> text documents</a></li>
+ <li class="toc-h3 m-v-0 text hide"><a class="border-0 scroll-button" href="#1375">Editing text documents</a></li>
+ <li class="toc-h3 m-v-0 text hide"><a class="border-0 scroll-button" href="#1377">Context menus</a></li>
+ <li class="toc-h3 m-v-0 text hide"><a class="border-0 scroll-button" href="#1383">Advanced text document editor features</a></li>
+ <li class="toc-h3 m-v-0 text hide"><a class="border-0 scroll-button" href="#1407">Text documents</a></li>
+
+ <li class="toc-h2 m-v-0 presentation hide"><a class="border-0 scroll-button" href="#1391"><span class="productname">{productname}</span> presentations</a></li>
+ <li class="toc-h3 m-v-0 presentation hide"><a class="border-0 scroll-button" href="#1393">Editing presentations</a></li>
+ <li class="toc-h3 m-v-0 presentation hide"><a class="border-0 scroll-button" href="#1395">Slide show</a></li>
+ <li class="toc-h3 m-v-0 presentation hide"><a class="border-0 scroll-button" href="#1397">Slide pane</a></li>
+ <li class="toc-h3 m-v-0 presentation hide"><a class="border-0 scroll-button" href="#1401">Advanced features</a></li>
+ <li class="toc-h3 m-v-0 presentation hide"><a class="border-0 scroll-button" href="#1411">Presentations</a></li>
+

<li class="toc-h2 m-v-0"><a class="border-0 scroll-button" href="#1403">Frequently Asked Questions</a></li>

</ul>
</nav>
diff --git a/browser/src/control/Toolbar.js b/browser/src/control/Toolbar.js
index fe735c930fef..d597645ee236 100644
--- a/browser/src/control/Toolbar.js
+++ b/browser/src/control/Toolbar.js
@@ -676,7 +676,8 @@ window.L.Map.include({

}.bind(this));

// select all event scroll elements, main-header elements, product header elements and make visible to user if search term is empty

- document.querySelectorAll('.m-v-0, .product-header, .help-dialog-header, .help-toc').forEach(function(element) {
+ // Exclude doctype-tagged TOC entries so non-current-doctype items stay hidden after search clear
+ document.querySelectorAll('.m-v-0:not(.text):not(.spreadsheet):not(.presentation), .product-header, .help-dialog-header, .help-toc').forEach(function(element) {
this.show(element);
element.style.backgroundColor = '';
}.bind(this));