Links to online documentation:

* Adding a help button on top of the chat, that links to the online documentation on frama.io.
* Replaced github.io documentation links by frama.io documentation.
* Adding links to the documentation in the diagnostic tool.

client/videowatch/button.ts

@@ -1,38 +1,49 @@
 import type { SVGButton } from './buttons'
 import { logger } from './logger'
 
-interface displayButtonOptions {
+interface displayButtonOptionsBase {
   buttonContainer: HTMLElement
   name: string
   label: string
-  callback: () => void | boolean
   icon?: SVGButton
   additionalClasses?: string[]
 }
 
-function displayButton ({
-  name,
-  label,
-  callback,
-  buttonContainer,
-  additionalClasses,
-  icon
-}: displayButtonOptions): void {
+interface displayButtonOptionsCallback extends displayButtonOptionsBase {
+  callback: () => void | boolean
+}
+
+interface displayButtonOptionsHref extends displayButtonOptionsBase {
+  href: string
+  targetBlank?: boolean
+}
+
+type displayButtonOptions = displayButtonOptionsCallback | displayButtonOptionsHref
+
+function displayButton (dbo: displayButtonOptions): void {
   const button = document.createElement('a')
   button.classList.add(
     'orange-button', 'peertube-button-link',
     'peertube-plugin-livechat-button',
-    'peertube-plugin-livechat-button-' + name
+    'peertube-plugin-livechat-button-' + dbo.name
   )
-  if (additionalClasses) {
-    for (let i = 0; i < additionalClasses.length; i++) {
-      button.classList.add(additionalClasses[i])
+  if (dbo.additionalClasses) {
+    for (let i = 0; i < dbo.additionalClasses.length; i++) {
+      button.classList.add(dbo.additionalClasses[i])
     }
   }
-  button.onclick = callback
-  if (icon) {
+  if ('callback' in dbo) {
+    button.onclick = dbo.callback
+  }
+  if ('href' in dbo) {
+    button.href = dbo.href
+  }
+  if (('targetBlank' in dbo) && dbo.targetBlank) {
+    button.target = '_blank'
+  }
+  if (dbo.icon) {
     try {
-      const svg = icon()
+      const svg = dbo.icon()
       const tmp = document.createElement('span')
       tmp.innerHTML = svg.trim()
       const svgDom = tmp.firstChild
@@ -40,14 +51,14 @@ function displayButton ({
         button.prepend(svgDom)
       }
     } catch (err) {
-      logger.error('Failed to generate the ' + name + ' button: ' + (err as string))
+      logger.error('Failed to generate the ' + dbo.name + ' button: ' + (err as string))
     }
 
-    button.setAttribute('title', label)
+    button.setAttribute('title', dbo.label)
   } else {
-    button.textContent = label
+    button.textContent = dbo.label
   }
-  buttonContainer.append(button)
+  dbo.buttonContainer.append(button)
 }
 
 export type {

client/videowatch/buttons.ts

@@ -99,11 +99,24 @@ const shareChatUrlSVG: SVGButton = () => {
 `
 }
 
+const helpButtonSVG: SVGButton = () => {
+  // This content comes from the file assets/images/help.svg, after svgo cleaning.
+  // To get the formated content, you can do:
+  // xmllint dist/client/images/url.svg --format
+  // Then replace the color by `currentColor`
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.233 4.233">
+  <path style="display:inline;opacity:.998;fill:none;fill-opacity:1;stroke:currentColor;stroke-width:.529167;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M1.48 1.583V.86c0-.171.085-.31.19-.31h.893c.106 0 .19.139.19.31v.838c0 .171-.107.219-.19.284l-.404.314c-.136.106-.219.234-.221.489l-.003.247"/>
+  <path style="display:inline;fill:currentColor;stroke-width:.235169" d="M1.67 3.429h.529v.597H1.67z"/>
+</svg>
+`
+}
+
 export {
   closeSVG,
   openChatSVG,
   openBlankChatSVG,
-  shareChatUrlSVG
+  shareChatUrlSVG,
+  helpButtonSVG
 }
 export type {
   SVGButton