Refactor About dialog to remove HTML template and use centralized server info #13933

banobepascal · 2025-12-30T00:05:06Z

Resolves: #
Target version: main

Summary

TODO

...

Checklist

I have run make prettier-write and formatted the code.
All commits have Change-Id
I have run tests with make check
I have issued make run and manually verified that everything looks okay
Documentation (manuals or wiki) has been updated or is not required

banobepascal · 2025-12-30T00:18:37Z

Todo

Add WOPI host id
Add date and vendor configuration
change params in feedback dialog to use serverinfo values than cloning

online/browser/src/map/handler/Map.Feedback.js

Line 111 in 97642ef

var params = [{ mobile : window.mode.isMobile() },

browser/src/global.d.ts

browser/src/core/Socket.js

browser/src/control/Control.AboutDialog.ts

browser/html/cool.html.m4

This adds centralized storage for: - COOLWSD version and git hash (from 'coolserver') - LOKit (LibreOffice) version and git hash (from 'lokitversion') - OS info (from 'osinfo') This provides a single source of truth for server identification data, making it globally available for the About dialog and future UI components, without relying on DOM cloning or hidden HTML template. - Add data-wopi-host-id, data-vendor, and data-copyright-year attributes to #initial-variables Signed-off-by: Banobe Pascal <[email protected]> Change-Id: I7308db0b3fec7ea335d62108614fe4574af0d1c2

eszkadev · 2026-01-02T06:51:48Z

browser/src/control/Control.AboutDialog.ts

+
+	// This method can be used in the future to populate the about dialog content
+	private static populateAboutDialog(content: HTMLElement): void {
+		const windowAny = window as any;


there is an extended Window type: https://github.com/CollaboraOnline/online/blob/main/browser/src/global.d.ts#L188

we can add missing fields there and use it instead of any to have more hardened code

Thanks, I have added the changes

eszkadev · 2026-01-02T06:57:55Z

browser/src/control/Control.AboutDialog.ts


 	private copyVersionInfoToClipboard() {
+		const info = window.app.serverInfo;
+		const windowAny = window as any;


do not use any

eszkadev · 2026-01-02T07:02:10Z

browser/src/control/Control.AboutDialog.ts

 			);

+		// COOLWSD version
+		const coolwsdEl = content.querySelector('#coolwsd-version') as HTMLElement;


if we query element by id coolwsd-version while we create it below in
https://github.com/CollaboraOnline/online/pull/13933/files#diff-4a2c10a9a863dfc9898b33b5a26feb9ad2038506f432792ccb8ffcd1d9357080R521

We could use variable for the ID (like AboutDialog.VersionFieldId etc.) so we are sure relation will not be broken.

But even better would be: do not query but save reference to the element we created in the variable and use in the other function :)

we could avoid all these checks: if (element) { ...} as we will be sure they exist

eszkadev · 2026-01-02T07:04:59Z

browser/src/control/Control.AboutDialog.ts

+		const content: HTMLElement = AboutDialog.createAboutDialogContent();
+		content.style.display = 'block';
+
+		AboutDialog.populateAboutDialog(content);


In above AboutDialog.createAboutDialogContent we create fields, which later are used in AboutDialog.populateAboutDialog.

We could return: const content: { versionLabel: HTMLElement, hashLabel: HTMLElement, etc... } = AboutDialog.createAboutDialogContent();
and then AboutDialog.populateAboutDialog(content); could use them without query :)

eszkadev · 2026-01-02T07:10:26Z

browser/src/control/Control.AboutDialog.ts

+	// This method can be used in the future to populate the about dialog content
+	private static populateAboutDialog(content: HTMLElement): void {
+		const windowAny = window as any;
+		const info = window.app.serverInfo;


can we do a validation below and log ( app.console.error('....') ) + early return in case of missing info ?
that will save us all these ifs later...

- Dynamically create the UI structure in JavaScript - Populate all content from window.app.serverInfo - Eliminate cloning from hidden HTML template - Separate structure creation from content population and show - Improve copy-to-clipboard to use serverInfo directly and include all fields (versions, hashes, served-by, server ID) - Use window.wopiHostId, window.copyrightYear, and window.vendor for accurate WOPI host, current year, and vendor name display - Preserve all other existing functionality Signed-off-by: Banobe Pascal <[email protected]> Change-Id: I1efadd2d106150dd8b1c973c82d3d2c12ae0762d

The About dialog is now fully created and filled in JavaScript using: - createAboutDialogContent() to build the structure - window.app.serverInfo to provide version and server details - populateAboutDialog() to insert all content and branding - This removes the need for duplicated HTML in the template file and makes the dialog easier to maintain. - A minimal empty <div id=\"about-dialog\" tabIndex=\"0\"></div> is kept in the HTML to preserve Notebookbar About tab detection Signed-off-by: Banobe Pascal <[email protected]> Change-Id: Id0bea4b6892b62fe4a9396c8d941f79ee5e39b97

github-project-automation bot added this to Collabora Online Dec 30, 2025

github-project-automation bot moved this to To Review in Collabora Online Dec 30, 2025

banobepascal requested a review from eszkadev December 30, 2025 00:19

banobepascal force-pushed the private/banobepascal/about-dialog branch from af2619c to d26bde0 Compare December 30, 2025 00:31