add support links

src/component/alert/index.js

@@ -3,6 +3,7 @@ import { icon } from '../icon';
 import * as form from '../form';
 
 import { node } from '../../utility/node';
+import { complexNode } from '../../utility/complexNode';
 
 import './index.css';
 
@@ -31,7 +32,7 @@ export const Alert = function({
     if (message.length > 0) {
       message.forEach((item, i) => {
 
-        this.element.message.appendChild(node('p:' + item + '|class:small'));
+        this.element.message.appendChild(complexNode({ tag: 'p', text: item, attr: [{ key: 'class', value: 'small' }] }));
 
       });
     };

src/component/base/utility/index.css

@@ -19,6 +19,23 @@
   margin-bottom: 0;
 }
 
+.list-feature {
+  padding-left: 0;
+  margin-bottom: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+.list-feature li {
+  padding: 0.25em 0.5em;
+  list-style-type: none;
+}
+
+.list-feature li:not(:last-child) {
+  margin-bottom: 0;
+}
+
 .list-inline li {
   display: inline-block;
 }

src/component/menu/index.js

@@ -25,6 +25,7 @@ menu.navData = [
   { name: 'Group', active: false, overscroll: true, sub: ['Alignment', 'Name', 'Open All'] },
   { name: 'Toolbar', active: false, overscroll: true, sub: ['Size', 'Location', 'Position', 'Controls'] },
   { name: 'Data', active: false, overscroll: true, sub: ['Restore', 'Backup', 'Clear'] },
+  { name: 'Support', active: false, overscroll: false },
   { name: 'Coffee', active: false, overscroll: false },
   { name: appName, active: false, overscroll: false }
 ];
@@ -35,16 +36,6 @@ menu.element = {
   frame: null
 };
 
-menu.firefoxSpecific = () => {
-
-  const firefoxBrowser = typeof InstallTrigger !== "undefined";
-
-  if (firefoxBrowser) {
-    menu.navData.splice((menu.navData.length - 2), 0, { name: 'Firefox', active: false, overscroll: false })
-  };
-
-};
-
 menu.open = () => {
 
   menu.element.frame = new MenuFrame({
@@ -73,8 +64,4 @@ menu.toggle = () => {
 
 };
 
-menu.init = () => {
-  menu.firefoxSpecific();
-};
-
 export { menu };

src/component/menuContent/appSetting/index.js

@@ -56,7 +56,6 @@ appSetting[appName.toLowerCase()] = (parent) => {
       ]),
       node('hr'),
       complexNode({ tag: 'p', text: 'Project repository on ', node: [link.render({ text: 'GitHub.', href: 'https://github.com/zombieFox/' + appName, openNew: true })] }),
-      complexNode({ tag: 'p', text: 'For feedback and support, submit an <a tabindex="1" href="https://github.com/zombieFox/' + appName + '/issues" target="_blank">Issue</a> or check the <a tabindex="1" href="https://github.com/zombieFox/' + appName + '/wiki" target="_blank">Wiki</a>.' }),
       complexNode({ tag: 'p', text: appName + ' uses the <a tabindex="1" href="https://github.com/zombieFox/' + appName + '/blob/master/license" target="_blank">GNU General Public License v3.0</a>.' })
     ])
   );

src/component/menuContent/dataSetting/index.js

@@ -129,7 +129,7 @@ dataSetting.clear = (parent) => {
   dataSetting.control.clear.alert = new Alert({ iconName: 'warning', message: ['You will lose Bookmarks by clearing all data.', 'Have you <a href="#menu-content-item-backup">backed up your data?</a>'] });
 
   dataSetting.control.clear.helper = new Control_helperText({
-    text: ['Wipe all data to restore ' + appName + ' to the default state.', 'Alternatively, it is possible to wipe all settings but keep the current Bookmarks and Groups.']
+    text: ['Clear all data to reset ' + appName + ' to the default state.', 'Alternatively, it is possible to wipe all settings but keep the current Bookmarks and Groups.']
   });
 
   parent.appendChild(

src/component/menuContent/index.js

@@ -10,6 +10,7 @@ import { toolbarSetting } from './toolbarSetting';
 import { themeSetting } from './themeSetting';
 import { dataSetting } from './dataSetting';
 import { firefoxSetting } from './firefoxSetting';
+import { supportSetting } from './supportSetting';
 import { coffeeSetting } from './coffeeSetting';
 import { appSetting } from './appSetting';
 
@@ -148,6 +149,16 @@ export const MenuContent = function({
 
           break;
 
+        case 'support':
+
+          menuContentItem.appendChild(this.element.header(activeNavData.name));
+
+          formElement = this.element.form({ indent: true });
+
+          supportSetting[this.makeId(activeNavData.name)](formElement);
+
+          break;
+
         case 'coffee':
 
           menuContentItem.appendChild(this.element.header(activeNavData.name));

src/component/menuContent/supportSetting/index.js

@@ -0,0 +1,90 @@
+import { state } from '../../state';
+import { data } from '../../data';
+import { header } from '../../header';
+import { bookmark } from '../../bookmark';
+import { theme } from '../../theme';
+import { version } from '../../version';
+import { menu } from '../../menu';
+import { icon } from '../../icon';
+import { logo } from '../../logo';
+import { link } from '../../link';
+import { layout } from '../../layout';
+import { toolbar } from '../../toolbar';
+import { appName } from '../../appName';
+
+import * as form from '../../form';
+
+import { Button } from '../../button';
+import { Collapse } from '../../collapse';
+import { Edge } from '../../edge';
+import { Alert } from '../../alert';
+
+import { Control_helperText } from '../../control/helperText';
+import { Control_inputButton } from '../../control/inputButton';
+import { Control_groupText } from '../../control/groupText';
+import { Control_radio } from '../../control/radio';
+import { Control_radioGrid } from '../../control/radioGrid';
+import { Control_checkbox } from '../../control/checkbox';
+import { Control_slider } from '../../control/slider';
+import { Control_sliderSlim } from '../../control/sliderSlim';
+import { Control_sliderDouble } from '../../control/sliderDouble';
+import { Control_colorMixer } from '../../control/colorMixer';
+import { Control_color } from '../../control/color';
+import { Control_text } from '../../control/text';
+import { Control_textReset } from '../../control/textReset';
+import { Control_textarea } from '../../control/textarea';
+
+import { node } from '../../../utility/node';
+import { complexNode } from '../../../utility/complexNode';
+import { applyCSSVar } from '../../../utility/applyCSSVar';
+import { applyCSSClass } from '../../../utility/applyCSSClass';
+import { applyCSSState } from '../../../utility/applyCSSState';
+
+const supportSetting = {};
+
+supportSetting.link = {
+  url: 'https://github.com/zombieFox/' + appName + '/wiki/',
+  page: {
+    browser: 'Browser-support',
+    cookies: 'Cookies-and-cache',
+    data: 'Data-backup-and-restore',
+    backgroundImage: 'Local-background-image',
+    privacy: 'Respecting-your-privacy',
+    recovering: 'Recovering-settings-and-bookmarks',
+    firefox: 'Setting-nightTab-as-your-Firefox-homepage'
+  }
+};
+
+supportSetting.support = (parent) => {
+
+  const makeLinks = () => {
+
+    const wrap = form.wrap();
+
+    const list = node('ul|class:list-feature');
+
+    for (var key in supportSetting.link.page) {
+
+      list.appendChild(node('li', [
+        link.render({ text: supportSetting.link.page[key].replace(/-/g, ' '), href: supportSetting.link.url + supportSetting.link.page[key], openNew: true })
+      ]));
+
+    };
+
+    wrap.appendChild(list);
+
+    return wrap;
+
+  };
+
+  parent.appendChild(
+    node('div', [
+      makeLinks(),
+      node('hr'),
+      complexNode({ tag: 'p', text: 'For more support or feedback, submit an <a tabindex="1" href="https://github.com/zombieFox/' + appName + '/issues" target="_blank">Issue</a> or check the <a tabindex="1" href="https://github.com/zombieFox/' + appName + '/wiki" target="_blank">Wiki</a>.' })
+    ])
+  );
+
+};
+
+export { supportSetting }

src/component/menuContent/themeSetting/index.js

@@ -16,6 +16,8 @@ import { accentPreset } from '../../accentPreset';
 import { customTheme } from '../../customTheme';
 import { groupAndBookmark } from '../../groupAndBookmark';
 
+import { supportSetting } from '../../menuContent/supportSetting';
+
 import * as form from '../../form';
 
 import { Button } from '../../button';
@@ -1309,7 +1311,7 @@ themeSetting.background = (parent) => {
       })
     },
     image: {
-      alert: new Alert({ iconName: 'info', message: ['Uploading Background images is no longer supported.', '<a href="#" target="_blank">Why has this changed?</a>'] }),
+      alert: new Alert({ iconName: 'info', message: ['Uploading Background images is no longer supported.', `<a href="${supportSetting.link.url + supportSetting.link.page.backgroundImage}" target="_blank">Why has this changed?</a>`] }),
       url: new Control_textarea({
         object: state.get.current(),
         path: 'theme.background.image.url',

src/index.js

@@ -22,6 +22,4 @@ component.pageLock.init();
 
 component.keyboard.init();
 
-component.menu.init();
-
 // component.menu.open();