internationalise settings and controls

src/component/accentPreset/index.js

@@ -1,99 +1,113 @@
-const accentPreset = {};
+import { message } from '../message';
+
+export const accentPreset = {};
 
 accentPreset.get = () => {
-  return [
-    { name: 'Grey', prefix: 'Super extra light', type: 'grey', hsl: { h: 0, s: 0, l: 90 } },
-    { name: 'Grey', prefix: 'Extra light', type: 'grey', hsl: { h: 0, s: 0, l: 77 } },
-    { name: 'Grey', prefix: 'Light', type: 'grey', hsl: { h: 0, s: 0, l: 63 } },
-    { name: 'Grey', prefix: false, type: 'grey', hsl: { h: 0, s: 0, l: 50 } },
-    { name: 'Grey', prefix: 'Dark', type: 'grey', hsl: { h: 0, s: 0, l: 37 } },
-    { name: 'Grey', prefix: 'Extra dark', type: 'grey', hsl: { h: 0, s: 0, l: 23 } },
-    { name: 'Grey', prefix: 'Super extra dark', type: 'grey', hsl: { h: 0, s: 0, l: 10 } },
-    { name: 'Red', prefix: 'Super extra light', type: 'primary', hsl: { h: 0, s: 40, l: 90 } },
-    { name: 'Red', prefix: 'Extra light', type: 'primary', hsl: { h: 0, s: 60, l: 77 } },
-    { name: 'Red', prefix: 'Light', type: 'primary', hsl: { h: 0, s: 80, l: 63 } },
-    { name: 'Red', prefix: false, type: 'primary', hsl: { h: 0, s: 100, l: 50 } },
-    { name: 'Red', prefix: 'Dark', type: 'primary', hsl: { h: 0, s: 80, l: 37 } },
-    { name: 'Red', prefix: 'Extra dark', type: 'primary', hsl: { h: 0, s: 60, l: 23 } },
-    { name: 'Red', prefix: 'Super extra dark', type: 'primary', hsl: { h: 0, s: 40, l: 10 } },
-    { name: 'Orange', prefix: 'Super extra light', type: 'secondary', hsl: { h: 30, s: 40, l: 90 } },
-    { name: 'Orange', prefix: 'Extra light', type: 'secondary', hsl: { h: 30, s: 60, l: 77 } },
-    { name: 'Orange', prefix: 'Light', type: 'secondary', hsl: { h: 30, s: 80, l: 63 } },
-    { name: 'Orange', prefix: false, type: 'secondary', hsl: { h: 30, s: 100, l: 50 } },
-    { name: 'Orange', prefix: 'Dark', type: 'secondary', hsl: { h: 30, s: 80, l: 37 } },
-    { name: 'Orange', prefix: 'Extra dark', type: 'secondary', hsl: { h: 30, s: 60, l: 23 } },
-    { name: 'Orange', prefix: 'Super extra dark', type: 'secondary', hsl: { h: 30, s: 40, l: 10 } },
-    { name: 'Yellow', prefix: 'Super extra light', type: 'primary', hsl: { h: 60, s: 40, l: 90 } },
-    { name: 'Yellow', prefix: 'Extra light', type: 'primary', hsl: { h: 60, s: 60, l: 77 } },
-    { name: 'Yellow', prefix: 'Light', type: 'primary', hsl: { h: 60, s: 80, l: 63 } },
-    { name: 'Yellow', prefix: false, type: 'primary', hsl: { h: 60, s: 100, l: 50 } },
-    { name: 'Yellow', prefix: 'Dark', type: 'primary', hsl: { h: 60, s: 80, l: 37 } },
-    { name: 'Yellow', prefix: 'Extra dark', type: 'primary', hsl: { h: 60, s: 60, l: 23 } },
-    { name: 'Yellow', prefix: 'Super extra dark', type: 'primary', hsl: { h: 60, s: 40, l: 10 } },
-    { name: 'Lime', prefix: 'Super extra light', type: 'secondary', hsl: { h: 90, s: 40, l: 90 } },
-    { name: 'Lime', prefix: 'Extra light', type: 'secondary', hsl: { h: 90, s: 60, l: 77 } },
-    { name: 'Lime', prefix: 'Light', type: 'secondary', hsl: { h: 90, s: 80, l: 63 } },
-    { name: 'Lime', prefix: false, type: 'secondary', hsl: { h: 90, s: 100, l: 50 } },
-    { name: 'Lime', prefix: 'Dark', type: 'secondary', hsl: { h: 90, s: 80, l: 37 } },
-    { name: 'Lime', prefix: 'Extra dark', type: 'secondary', hsl: { h: 90, s: 60, l: 23 } },
-    { name: 'Lime', prefix: 'Super extra dark', type: 'secondary', hsl: { h: 90, s: 40, l: 10 } },
-    { name: 'Green', prefix: 'Super extra light', type: 'primary', hsl: { h: 120, s: 40, l: 90 } },
-    { name: 'Green', prefix: 'Extra light', type: 'primary', hsl: { h: 120, s: 60, l: 77 } },
-    { name: 'Green', prefix: 'Light', type: 'primary', hsl: { h: 120, s: 80, l: 63 } },
-    { name: 'Green', prefix: false, type: 'primary', hsl: { h: 120, s: 100, l: 50 } },
-    { name: 'Green', prefix: 'Dark', type: 'primary', hsl: { h: 120, s: 80, l: 37 } },
-    { name: 'Green', prefix: 'Extra dark', type: 'primary', hsl: { h: 120, s: 60, l: 23 } },
-    { name: 'Green', prefix: 'Super extra dark', type: 'primary', hsl: { h: 120, s: 40, l: 10 } },
-    { name: 'Aqua', prefix: 'Super extra light', type: 'secondary', hsl: { h: 150, s: 40, l: 90 } },
-    { name: 'Aqua', prefix: 'Extra light', type: 'secondary', hsl: { h: 150, s: 60, l: 77 } },
-    { name: 'Aqua', prefix: 'Light', type: 'secondary', hsl: { h: 150, s: 80, l: 63 } },
-    { name: 'Aqua', prefix: false, type: 'secondary', hsl: { h: 150, s: 100, l: 50 } },
-    { name: 'Aqua', prefix: 'Dark', type: 'secondary', hsl: { h: 150, s: 80, l: 37 } },
-    { name: 'Aqua', prefix: 'Extra dark', type: 'secondary', hsl: { h: 150, s: 60, l: 23 } },
-    { name: 'Aqua', prefix: 'Super extra dark', type: 'secondary', hsl: { h: 150, s: 40, l: 10 } },
-    { name: 'Cyan', prefix: 'Super extra light', type: 'primary', hsl: { h: 180, s: 40, l: 90 } },
-    { name: 'Cyan', prefix: 'Extra light', type: 'primary', hsl: { h: 180, s: 60, l: 77 } },
-    { name: 'Cyan', prefix: 'Light', type: 'primary', hsl: { h: 180, s: 80, l: 63 } },
-    { name: 'Cyan', prefix: false, type: 'primary', hsl: { h: 180, s: 100, l: 50 } },
-    { name: 'Cyan', prefix: 'Dark', type: 'primary', hsl: { h: 180, s: 80, l: 37 } },
-    { name: 'Cyan', prefix: 'Extra dark', type: 'primary', hsl: { h: 180, s: 60, l: 23 } },
-    { name: 'Cyan', prefix: 'Super extra dark', type: 'primary', hsl: { h: 180, s: 40, l: 10 } },
-    { name: 'Teal', prefix: 'Super extra light', type: 'secondary', hsl: { h: 210, s: 40, l: 90 } },
-    { name: 'Teal', prefix: 'Extra light', type: 'secondary', hsl: { h: 210, s: 60, l: 77 } },
-    { name: 'Teal', prefix: 'Light', type: 'secondary', hsl: { h: 210, s: 80, l: 63 } },
-    { name: 'Teal', prefix: false, type: 'secondary', hsl: { h: 210, s: 100, l: 50 } },
-    { name: 'Teal', prefix: 'Dark', type: 'secondary', hsl: { h: 210, s: 80, l: 37 } },
-    { name: 'Teal', prefix: 'Extra dark', type: 'secondary', hsl: { h: 210, s: 60, l: 23 } },
-    { name: 'Teal', prefix: 'Super extra dark', type: 'secondary', hsl: { h: 210, s: 40, l: 10 } },
-    { name: 'Blue', prefix: 'Super extra light', type: 'primary', hsl: { h: 240, s: 40, l: 90 } },
-    { name: 'Blue', prefix: 'Extra light', type: 'primary', hsl: { h: 240, s: 60, l: 77 } },
-    { name: 'Blue', prefix: 'Light', type: 'primary', hsl: { h: 240, s: 80, l: 63 } },
-    { name: 'Blue', prefix: false, type: 'primary', hsl: { h: 240, s: 100, l: 50 } },
-    { name: 'Blue', prefix: 'Dark', type: 'primary', hsl: { h: 240, s: 80, l: 37 } },
-    { name: 'Blue', prefix: 'Extra dark', type: 'primary', hsl: { h: 240, s: 60, l: 23 } },
-    { name: 'Blue', prefix: 'Super extra dark', type: 'primary', hsl: { h: 240, s: 40, l: 10 } },
-    { name: 'Purple', prefix: 'Super extra light', type: 'secondary', hsl: { h: 270, s: 40, l: 90 } },
-    { name: 'Purple', prefix: 'Extra light', type: 'secondary', hsl: { h: 270, s: 60, l: 77 } },
-    { name: 'Purple', prefix: 'Light', type: 'secondary', hsl: { h: 270, s: 80, l: 63 } },
-    { name: 'Purple', prefix: false, type: 'secondary', hsl: { h: 270, s: 100, l: 50 } },
-    { name: 'Purple', prefix: 'Dark', type: 'secondary', hsl: { h: 270, s: 80, l: 37 } },
-    { name: 'Purple', prefix: 'Extra dark', type: 'secondary', hsl: { h: 270, s: 60, l: 23 } },
-    { name: 'Purple', prefix: 'Super extra dark', type: 'secondary', hsl: { h: 270, s: 40, l: 10 } },
-    { name: 'Magenta', prefix: 'Super extra light', type: 'primary', hsl: { h: 300, s: 40, l: 90 } },
-    { name: 'Magenta', prefix: 'Extra light', type: 'primary', hsl: { h: 300, s: 60, l: 77 } },
-    { name: 'Magenta', prefix: 'Light', type: 'primary', hsl: { h: 300, s: 80, l: 63 } },
-    { name: 'Magenta', prefix: false, type: 'primary', hsl: { h: 300, s: 100, l: 50 } },
-    { name: 'Magenta', prefix: 'Dark', type: 'primary', hsl: { h: 300, s: 80, l: 37 } },
-    { name: 'Magenta', prefix: 'Extra dark', type: 'primary', hsl: { h: 300, s: 60, l: 23 } },
-    { name: 'Magenta', prefix: 'Super extra dark', type: 'primary', hsl: { h: 300, s: 40, l: 10 } },
-    { name: 'Fuchsia', prefix: 'Super extra light', type: 'secondary', hsl: { h: 330, s: 40, l: 90 } },
-    { name: 'Fuchsia', prefix: 'Extra light', type: 'secondary', hsl: { h: 330, s: 60, l: 77 } },
-    { name: 'Fuchsia', prefix: 'Light', type: 'secondary', hsl: { h: 330, s: 80, l: 63 } },
-    { name: 'Fuchsia', prefix: false, type: 'secondary', hsl: { h: 330, s: 100, l: 50 } },
-    { name: 'Fuchsia', prefix: 'Dark', type: 'secondary', hsl: { h: 330, s: 80, l: 37 } },
-    { name: 'Fuchsia', prefix: 'Extra dark', type: 'secondary', hsl: { h: 330, s: 60, l: 23 } },
-    { name: 'Fuchsia', prefix: 'Super extra dark', type: 'secondary', hsl: { h: 330, s: 40, l: 10 } },
-  ];
-};
 
-export { accentPreset };
+  return [
+    { name: message.get('menuContentThemeAccentPresetColorGrey'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'grey', hsl: { h: 0, s: 0, l: 90 } },
+    { name: message.get('menuContentThemeAccentPresetColorGrey'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'grey', hsl: { h: 0, s: 0, l: 77 } },
+    { name: message.get('menuContentThemeAccentPresetColorGrey'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'grey', hsl: { h: 0, s: 0, l: 63 } },
+    { name: message.get('menuContentThemeAccentPresetColorGrey'), prefix: false, type: 'grey', hsl: { h: 0, s: 0, l: 50 } },
+    { name: message.get('menuContentThemeAccentPresetColorGrey'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'grey', hsl: { h: 0, s: 0, l: 37 } },
+    { name: message.get('menuContentThemeAccentPresetColorGrey'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'grey', hsl: { h: 0, s: 0, l: 23 } },
+    { name: message.get('menuContentThemeAccentPresetColorGrey'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'grey', hsl: { h: 0, s: 0, l: 10 } },
+
+    { name: message.get('menuContentThemeAccentPresetColorRed'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'primary', hsl: { h: 0, s: 40, l: 90 } },
+    { name: message.get('menuContentThemeAccentPresetColorRed'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'primary', hsl: { h: 0, s: 60, l: 77 } },
+    { name: message.get('menuContentThemeAccentPresetColorRed'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'primary', hsl: { h: 0, s: 80, l: 63 } },
+    { name: message.get('menuContentThemeAccentPresetColorRed'), prefix: false, type: 'primary', hsl: { h: 0, s: 100, l: 50 } },
+    { name: message.get('menuContentThemeAccentPresetColorRed'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'primary', hsl: { h: 0, s: 80, l: 37 } },
+    { name: message.get('menuContentThemeAccentPresetColorRed'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'primary', hsl: { h: 0, s: 60, l: 23 } },
+    { name: message.get('menuContentThemeAccentPresetColorRed'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'primary', hsl: { h: 0, s: 40, l: 10 } },
+
+    { name: message.get('menuContentThemeAccentPresetColorOrange'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'secondary', hsl: { h: 30, s: 40, l: 90 } },
+    { name: message.get('menuContentThemeAccentPresetColorOrange'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'secondary', hsl: { h: 30, s: 60, l: 77 } },
+    { name: message.get('menuContentThemeAccentPresetColorOrange'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'secondary', hsl: { h: 30, s: 80, l: 63 } },
+    { name: message.get('menuContentThemeAccentPresetColorOrange'), prefix: false, type: 'secondary', hsl: { h: 30, s: 100, l: 50 } },
+    { name: message.get('menuContentThemeAccentPresetColorOrange'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'secondary', hsl: { h: 30, s: 80, l: 37 } },
+    { name: message.get('menuContentThemeAccentPresetColorOrange'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'secondary', hsl: { h: 30, s: 60, l: 23 } },
+    { name: message.get('menuContentThemeAccentPresetColorOrange'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'secondary', hsl: { h: 30, s: 40, l: 10 } },
+
+    { name: message.get('menuContentThemeAccentPresetColorYellow'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'primary', hsl: { h: 60, s: 40, l: 90 } },
+    { name: message.get('menuContentThemeAccentPresetColorYellow'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'primary', hsl: { h: 60, s: 60, l: 77 } },
+    { name: message.get('menuContentThemeAccentPresetColorYellow'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'primary', hsl: { h: 60, s: 80, l: 63 } },
+    { name: message.get('menuContentThemeAccentPresetColorYellow'), prefix: false, type: 'primary', hsl: { h: 60, s: 100, l: 50 } },
+    { name: message.get('menuContentThemeAccentPresetColorYellow'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'primary', hsl: { h: 60, s: 80, l: 37 } },
+    { name: message.get('menuContentThemeAccentPresetColorYellow'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'primary', hsl: { h: 60, s: 60, l: 23 } },
+    { name: message.get('menuContentThemeAccentPresetColorYellow'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'primary', hsl: { h: 60, s: 40, l: 10 } },
+
+    { name: message.get('menuContentThemeAccentPresetColorLime'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'secondary', hsl: { h: 90, s: 40, l: 90 } },
+    { name: message.get('menuContentThemeAccentPresetColorLime'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'secondary', hsl: { h: 90, s: 60, l: 77 } },
+    { name: message.get('menuContentThemeAccentPresetColorLime'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'secondary', hsl: { h: 90, s: 80, l: 63 } },
+    { name: message.get('menuContentThemeAccentPresetColorLime'), prefix: false, type: 'secondary', hsl: { h: 90, s: 100, l: 50 } },
+    { name: message.get('menuContentThemeAccentPresetColorLime'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'secondary', hsl: { h: 90, s: 80, l: 37 } },
+    { name: message.get('menuContentThemeAccentPresetColorLime'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'secondary', hsl: { h: 90, s: 60, l: 23 } },
+    { name: message.get('menuContentThemeAccentPresetColorLime'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'secondary', hsl: { h: 90, s: 40, l: 10 } },
+
+    { name: message.get('menuContentThemeAccentPresetColorGreen'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'primary', hsl: { h: 120, s: 40, l: 90 } },
+    { name: message.get('menuContentThemeAccentPresetColorGreen'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'primary', hsl: { h: 120, s: 60, l: 77 } },
+    { name: message.get('menuContentThemeAccentPresetColorGreen'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'primary', hsl: { h: 120, s: 80, l: 63 } },
+    { name: message.get('menuContentThemeAccentPresetColorGreen'), prefix: false, type: 'primary', hsl: { h: 120, s: 100, l: 50 } },
+    { name: message.get('menuContentThemeAccentPresetColorGreen'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'primary', hsl: { h: 120, s: 80, l: 37 } },
+    { name: message.get('menuContentThemeAccentPresetColorGreen'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'primary', hsl: { h: 120, s: 60, l: 23 } },
+    { name: message.get('menuContentThemeAccentPresetColorGreen'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'primary', hsl: { h: 120, s: 40, l: 10 } },
+
+    { name: message.get('menuContentThemeAccentPresetColorAqua'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'secondary', hsl: { h: 150, s: 40, l: 90 } },
+    { name: message.get('menuContentThemeAccentPresetColorAqua'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'secondary', hsl: { h: 150, s: 60, l: 77 } },
+    { name: message.get('menuContentThemeAccentPresetColorAqua'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'secondary', hsl: { h: 150, s: 80, l: 63 } },
+    { name: message.get('menuContentThemeAccentPresetColorAqua'), prefix: false, type: 'secondary', hsl: { h: 150, s: 100, l: 50 } },
+    { name: message.get('menuContentThemeAccentPresetColorAqua'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'secondary', hsl: { h: 150, s: 80, l: 37 } },
+    { name: message.get('menuContentThemeAccentPresetColorAqua'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'secondary', hsl: { h: 150, s: 60, l: 23 } },
+    { name: message.get('menuContentThemeAccentPresetColorAqua'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'secondary', hsl: { h: 150, s: 40, l: 10 } },
+
+    { name: message.get('menuContentThemeAccentPresetColorCyan'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'primary', hsl: { h: 180, s: 40, l: 90 } },
+    { name: message.get('menuContentThemeAccentPresetColorCyan'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'primary', hsl: { h: 180, s: 60, l: 77 } },
+    { name: message.get('menuContentThemeAccentPresetColorCyan'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'primary', hsl: { h: 180, s: 80, l: 63 } },
+    { name: message.get('menuContentThemeAccentPresetColorCyan'), prefix: false, type: 'primary', hsl: { h: 180, s: 100, l: 50 } },
+    { name: message.get('menuContentThemeAccentPresetColorCyan'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'primary', hsl: { h: 180, s: 80, l: 37 } },
+    { name: message.get('menuContentThemeAccentPresetColorCyan'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'primary', hsl: { h: 180, s: 60, l: 23 } },
+    { name: message.get('menuContentThemeAccentPresetColorCyan'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'primary', hsl: { h: 180, s: 40, l: 10 } },
+
+    { name: message.get('menuContentThemeAccentPresetColorTeal'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'secondary', hsl: { h: 210, s: 40, l: 90 } },
+    { name: message.get('menuContentThemeAccentPresetColorTeal'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'secondary', hsl: { h: 210, s: 60, l: 77 } },
+    { name: message.get('menuContentThemeAccentPresetColorTeal'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'secondary', hsl: { h: 210, s: 80, l: 63 } },
+    { name: message.get('menuContentThemeAccentPresetColorTeal'), prefix: false, type: 'secondary', hsl: { h: 210, s: 100, l: 50 } },
+    { name: message.get('menuContentThemeAccentPresetColorTeal'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'secondary', hsl: { h: 210, s: 80, l: 37 } },
+    { name: message.get('menuContentThemeAccentPresetColorTeal'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'secondary', hsl: { h: 210, s: 60, l: 23 } },
+    { name: message.get('menuContentThemeAccentPresetColorTeal'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'secondary', hsl: { h: 210, s: 40, l: 10 } },
+
+    { name: message.get('menuContentThemeAccentPresetColorBlue'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'primary', hsl: { h: 240, s: 40, l: 90 } },
+    { name: message.get('menuContentThemeAccentPresetColorBlue'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'primary', hsl: { h: 240, s: 60, l: 77 } },
+    { name: message.get('menuContentThemeAccentPresetColorBlue'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'primary', hsl: { h: 240, s: 80, l: 63 } },
+    { name: message.get('menuContentThemeAccentPresetColorBlue'), prefix: false, type: 'primary', hsl: { h: 240, s: 100, l: 50 } },
+    { name: message.get('menuContentThemeAccentPresetColorBlue'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'primary', hsl: { h: 240, s: 80, l: 37 } },
+    { name: message.get('menuContentThemeAccentPresetColorBlue'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'primary', hsl: { h: 240, s: 60, l: 23 } },
+    { name: message.get('menuContentThemeAccentPresetColorBlue'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'primary', hsl: { h: 240, s: 40, l: 10 } },
+
+    { name: message.get('menuContentThemeAccentPresetColorPurple'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'secondary', hsl: { h: 270, s: 40, l: 90 } },
+    { name: message.get('menuContentThemeAccentPresetColorPurple'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'secondary', hsl: { h: 270, s: 60, l: 77 } },
+    { name: message.get('menuContentThemeAccentPresetColorPurple'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'secondary', hsl: { h: 270, s: 80, l: 63 } },
+    { name: message.get('menuContentThemeAccentPresetColorPurple'), prefix: false, type: 'secondary', hsl: { h: 270, s: 100, l: 50 } },
+    { name: message.get('menuContentThemeAccentPresetColorPurple'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'secondary', hsl: { h: 270, s: 80, l: 37 } },
+    { name: message.get('menuContentThemeAccentPresetColorPurple'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'secondary', hsl: { h: 270, s: 60, l: 23 } },
+    { name: message.get('menuContentThemeAccentPresetColorPurple'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'secondary', hsl: { h: 270, s: 40, l: 10 } },
+
+    { name: message.get('menuContentThemeAccentPresetColorMagenta'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'primary', hsl: { h: 300, s: 40, l: 90 } },
+    { name: message.get('menuContentThemeAccentPresetColorMagenta'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'primary', hsl: { h: 300, s: 60, l: 77 } },
+    { name: message.get('menuContentThemeAccentPresetColorMagenta'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'primary', hsl: { h: 300, s: 80, l: 63 } },
+    { name: message.get('menuContentThemeAccentPresetColorMagenta'), prefix: false, type: 'primary', hsl: { h: 300, s: 100, l: 50 } },
+    { name: message.get('menuContentThemeAccentPresetColorMagenta'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'primary', hsl: { h: 300, s: 80, l: 37 } },
+    { name: message.get('menuContentThemeAccentPresetColorMagenta'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'primary', hsl: { h: 300, s: 60, l: 23 } },
+    { name: message.get('menuContentThemeAccentPresetColorMagenta'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'primary', hsl: { h: 300, s: 40, l: 10 } },
+
+    { name: message.get('menuContentThemeAccentPresetColorFuchsia'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel3'), type: 'secondary', hsl: { h: 330, s: 40, l: 90 } },
+    { name: message.get('menuContentThemeAccentPresetColorFuchsia'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel2'), type: 'secondary', hsl: { h: 330, s: 60, l: 77 } },
+    { name: message.get('menuContentThemeAccentPresetColorFuchsia'), prefix: message.get('menuContentThemeAccentPresetModifierLightLevel1'), type: 'secondary', hsl: { h: 330, s: 80, l: 63 } },
+    { name: message.get('menuContentThemeAccentPresetColorFuchsia'), prefix: false, type: 'secondary', hsl: { h: 330, s: 100, l: 50 } },
+    { name: message.get('menuContentThemeAccentPresetColorFuchsia'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel1'), type: 'secondary', hsl: { h: 330, s: 80, l: 37 } },
+    { name: message.get('menuContentThemeAccentPresetColorFuchsia'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel2'), type: 'secondary', hsl: { h: 330, s: 60, l: 23 } },
+    { name: message.get('menuContentThemeAccentPresetColorFuchsia'), prefix: message.get('menuContentThemeAccentPresetModifierDarkLevel3'), type: 'secondary', hsl: { h: 330, s: 40, l: 10 } },
+  ];
+
+};

src/component/bookmark/index.js

@@ -1,3 +1,5 @@
+import { message } from '../message';
+
 import { state } from '../state';
 import { data } from '../data';
 import { layout } from '../layout';
@@ -359,9 +361,10 @@ bookmark.add = {
     const bookmarkForm = new BookmarkForm({ bookmarkData: newBookmarkData });
 
     const addModal = new Modal({
-      heading: 'Add a new Bookmark',
+      heading: message.get('bookmarkAddHeading'),
       content: bookmarkForm.form(),
-      successText: 'Add',
+      successText: message.get('bookmarkAddSuccessText'),
+      cancelText: message.get('bookmarkAddCancelText'),
       width: (state.get.current().bookmark.style === 'block') ? 60 : 70,
       maxHeight: true,
       openAction: () => {

src/component/bookmarkForm/index.css

@@ -1,5 +1,5 @@
 :root {
-  --bookmark-form-space: calc((var(--form-space) / 4) * 1em);
+  --bookmark-form-space: calc((var(--form-space) / 4) * 1.25em);
 }
 
 .bookmark-form {
@@ -17,12 +17,10 @@
 }
 
 .bookmark-form-description {
-  margin-bottom: 3em;
+  margin-bottom: var(--bookmark-form-space);
 }
 
-.bookmark-form-main {
+.bookmark-form-main {}
-  padding-bottom: var(--bookmark-form-space);
-}
 
 .bookmark-form-aside {
   display: none;

src/component/bookmarkForm/index.js

@@ -1,3 +1,5 @@
+import { message } from '../message';
+
 import { bookmark } from '../bookmark';
 import { bookmarkDefault } from '../bookmarkDefault';
 import { bookmarkMinMax } from '../bookmarkMinMax';
@@ -96,8 +98,8 @@ export const BookmarkForm = function({
       path: 'url',
       id: 'url',
       value: bookmarkData.link.url,
-      placeholder: 'https://www.example.com/',
+      placeholder: message.get('bookmarkFormUrlPlaceholder'),
-      labelText: 'URL',
+      labelText: message.get('bookmarkFormUrlLabel'),
       action: () => {
         this.preview.update.assemble(bookmarkData);
       }
@@ -106,17 +108,17 @@ export const BookmarkForm = function({
       alignment: new Control_radioGrid({
         object: bookmarkData.link,
         radioGroup: [
-          { id: 'toolbar-position-top-left', labelText: 'Top Left', value: 'top-left', position: 1 },
+          { id: 'toolbar-position-top-left', labelText: message.get('bookmarkFormDisplayAlignmentTopLeft'), value: 'top-left', position: 1 },
-          { id: 'toolbar-position-top-center', labelText: 'Top Center', value: 'top-center', position: 2 },
+          { id: 'toolbar-position-top-center', labelText: message.get('bookmarkFormDisplayAlignmentTopCenter'), value: 'top-center', position: 2 },
-          { id: 'toolbar-position-top-right', labelText: 'Top Right', value: 'top-right', position: 3 },
+          { id: 'toolbar-position-top-right', labelText: message.get('bookmarkFormDisplayAlignmentTopRight'), value: 'top-right', position: 3 },
-          { id: 'toolbar-position-center-left', labelText: 'Center Left', value: 'center-left', position: 4 },
+          { id: 'toolbar-position-center-left', labelText: message.get('bookmarkFormDisplayAlignmentCenterLeft'), value: 'center-left', position: 4 },
-          { id: 'toolbar-position-center-center', labelText: 'Center Center', value: 'center-center', position: 5 },
+          { id: 'toolbar-position-center-center', labelText: message.get('bookmarkFormDisplayAlignmentCenterCenter'), value: 'center-center', position: 5 },
-          { id: 'toolbar-position-center-right', labelText: 'Center Right', value: 'center-right', position: 6 },
+          { id: 'toolbar-position-center-right', labelText: message.get('bookmarkFormDisplayAlignmentCenterRight'), value: 'center-right', position: 6 },
-          { id: 'toolbar-position-bottom-left', labelText: 'Bottom Left', value: 'bottom-left', position: 7 },
+          { id: 'toolbar-position-bottom-left', labelText: message.get('bookmarkFormDisplayAlignmentBottomLeft'), value: 'bottom-left', position: 7 },
-          { id: 'toolbar-position-bottom-center', labelText: 'Bottom Center', value: 'bottom-center', position: 8 },
+          { id: 'toolbar-position-bottom-center', labelText: message.get('bookmarkFormDisplayAlignmentBottomCenter'), value: 'bottom-center', position: 8 },
-          { id: 'toolbar-position-bottom-right', labelText: 'Bottom Right', value: 'bottom-right', position: 9 }
+          { id: 'toolbar-position-bottom-right', labelText: message.get('bookmarkFormDisplayAlignmentBottomRight'), value: 'bottom-right', position: 9 }
         ],
-        label: 'Visual Element and Name alignment',
+        label: message.get('bookmarkFormDisplayAlignmentLabel'),
         groupName: 'display-alignment',
         path: 'display.alignment',
         gridSize: '3x3',
@@ -127,8 +129,8 @@ export const BookmarkForm = function({
       direction: new Control_radio({
         object: bookmarkData.link,
         radioGroup: [
-          { id: 'display-direction-vertical', labelText: 'Vertical', description: 'Stack the Visual Element and Name one above the other.', value: 'vertical' },
+          { id: 'display-direction-vertical', labelText: message.get('bookmarkFormDisplayDirectionVerticalLabel'), description: message.get('bookmarkFormDisplayDirectionVerticalDescription'), value: 'vertical' },
-          { id: 'display-direction-horizontal', labelText: 'Horizontal', description: 'Arrange the Visual Element and Name side by side.', value: 'horizontal' }
+          { id: 'display-direction-horizontal', labelText: message.get('bookmarkFormDisplayDirectionHorizontalLabel'), description: message.get('bookmarkFormDisplayDirectionHorizontalDescription'), value: 'horizontal' }
         ],
         groupName: 'display-direction',
         path: 'display.direction',
@@ -140,8 +142,8 @@ export const BookmarkForm = function({
       order: new Control_radio({
         object: bookmarkData.link,
         radioGroup: [
-          { id: 'display-order-visual-name', labelText: 'Visual element then name', description: 'Place the Visual Element before the Name.', value: 'visual-name' },
+          { id: 'display-order-visual-name', labelText: message.get('bookmarkFormDisplayOrderVisualNameLabel'), description: message.get('bookmarkFormDisplayOrderVisualNameDescription'), value: 'visual-name' },
-          { id: 'display-order-name-visual', labelText: 'Name then visual element', description: 'Place the Name before the Visual Element.', value: 'name-visual' }
+          { id: 'display-order-name-visual', labelText: message.get('bookmarkFormDisplayOrderNameVisualLabel'), description: message.get('bookmarkFormDisplayOrderNameVisualDescription'), value: 'name-visual' }
         ],
         groupName: 'display-order',
         path: 'display.order',
@@ -154,7 +156,7 @@ export const BookmarkForm = function({
         object: bookmarkData.link,
         path: 'display.rotate',
         id: 'display-rotate',
-        labelText: 'Rotate',
+        labelText: message.get('bookmarkFormDisplayRotate'),
         value: bookmarkData.link.display.rotate,
         defaultValue: bookmarkDefault.display.rotate,
         min: bookmarkMinMax.display.rotate.min,
@@ -165,14 +167,14 @@ export const BookmarkForm = function({
       }),
       translate: {
         label: form.label({
-          text: 'Adjust Visual Element position',
+          text: message.get('bookmarkFormDisplayTranslateLabel'),
           noPadding: true
         }),
         x: new Control_sliderSlim({
           object: bookmarkData.link,
           path: 'display.translate.x',
           id: 'display-translate-x',
-          labelText: 'Horizontal',
+          labelText: message.get('bookmarkFormDisplayTranslateX'),
           value: bookmarkData.link.display.translate.x,
           defaultValue: bookmarkDefault.display.translate.x,
           min: bookmarkMinMax.display.translate.x.min,
@@ -185,7 +187,7 @@ export const BookmarkForm = function({
           object: bookmarkData.link,
           path: 'display.translate.y',
           id: 'display-translate-y',
-          labelText: 'Vertical',
+          labelText: message.get('bookmarkFormDisplayTranslateY'),
           value: bookmarkData.link.display.translate.y,
           defaultValue: bookmarkDefault.display.translate.y,
           min: bookmarkMinMax.display.translate.y.min,
@@ -199,7 +201,7 @@ export const BookmarkForm = function({
         object: bookmarkData.link,
         path: 'display.gutter',
         id: 'display-gutter',
-        labelText: 'Gutter',
+        labelText: message.get('bookmarkFormDisplayGutter'),
         value: bookmarkData.link.display.gutter,
         defaultValue: bookmarkDefault.display.gutter,
         min: bookmarkMinMax.display.gutter.min,
@@ -213,8 +215,8 @@ export const BookmarkForm = function({
           object: bookmarkData.link,
           path: 'display.visual.show',
           id: 'display-visual-show',
-          labelText: 'Show Visual Element',
+          labelText: message.get('bookmarkFormDisplayVisualShowLabel'),
-          description: 'Display Letters, Icon or an Image on this Bookmark hexagon.',
+          description: message.get('bookmarkFormDisplayVisualShowDescription'),
           action: () => {
             this.disable();
             this.collapse.display.visual.update();
@@ -224,9 +226,9 @@ export const BookmarkForm = function({
         type: new Control_radio({
           object: bookmarkData.link,
           radioGroup: [
-            { id: 'display-visual-type-letter', labelText: 'Letter', value: 'letter' },
+            { id: 'display-visual-type-letter', labelText: message.get('bookmarkFormDisplayVisualTypeLetter'), value: 'letter' },
-            { id: 'display-visual-type-icon', labelText: 'Icon', value: 'icon' },
+            { id: 'display-visual-type-icon', labelText: message.get('bookmarkFormDisplayVisualTypeIcon'), value: 'icon' },
-            { id: 'display-visual-type-image', labelText: 'Image', value: 'image' }
+            { id: 'display-visual-type-image', labelText: message.get('bookmarkFormDisplayVisualTypeImage'), value: 'image' }
           ],
           groupName: 'display-visual-type',
           path: 'display.visual.type',
@@ -239,7 +241,7 @@ export const BookmarkForm = function({
           object: bookmarkData.link,
           path: 'display.visual.size',
           id: 'display-visual-size',
-          labelText: 'Visual size',
+          labelText: message.get('bookmarkFormDisplayVisualSize'),
           value: bookmarkData.link.display.visual.size,
           defaultValue: bookmarkDefault.display.visual.size,
           min: bookmarkMinMax.display.visual.size.min,
@@ -254,8 +256,8 @@ export const BookmarkForm = function({
             path: 'display.visual.letter.text',
             id: 'display-visual-letter-text',
             value: bookmarkData.link.display.visual.letter.text,
-            placeholder: 'E',
+            placeholder: message.get('bookmarkFormDisplayVisualLetterTextPlaceholder'),
-            labelText: 'Bookmark letter',
+            labelText: message.get('bookmarkFormDisplayVisualLetterTextLabel'),
             srOnly: true,
             action: () => {
               this.preview.update.assemble(bookmarkData);
@@ -268,8 +270,8 @@ export const BookmarkForm = function({
             path: 'display.visual.icon.label',
             id: 'display-visual-icon-label',
             value: bookmarkData.link.display.visual.icon.label,
-            placeholder: 'FontAwesome Brands or Icons',
+            placeholder: message.get('bookmarkFormDisplayVisualIconTextPlaceholder'),
-            labelText: 'Bookmark icon',
+            labelText: message.get('bookmarkFormDisplayVisualIconTextLabel'),
             srOnly: true,
             action: () => {
               this.preview.update.assemble(bookmarkData);
@@ -279,7 +281,7 @@ export const BookmarkForm = function({
             classList: ['bookmark-form-text-icon', 'form-group-item-small']
           }),
           remove: new Button({
-            text: 'Remove icon',
+            text: message.get('bookmarkFormDisplayVisualIconRemove'),
             srOnly: true,
             style: ['line'],
             iconName: 'cross',
@@ -299,8 +301,8 @@ export const BookmarkForm = function({
             path: 'display.visual.image.url',
             id: 'display-visual-image-url',
             value: bookmarkData.link.display.visual.image.url,
-            placeholder: 'https://www.example.com/image.jpg',
+            placeholder: message.get('bookmarkFormDisplayVisualImageUrlPlaceholder'),
-            labelText: 'Bookmark image',
+            labelText: message.get('bookmarkFormDisplayVisualImageUrlLabel'),
             srOnly: true,
             action: () => {
               this.preview.update.assemble(bookmarkData);
@@ -312,7 +314,7 @@ export const BookmarkForm = function({
             object: bookmarkData.link,
             path: 'display.visual.shadow.size',
             id: 'display-visual-shadow-size',
-            labelText: 'Visual shadow',
+            labelText: message.get('bookmarkFormDisplayVisualShadowSize'),
             value: bookmarkData.link.display.visual.shadow.size,
             defaultValue: bookmarkDefault.display.visual.shadow.size,
             min: bookmarkMinMax.display.visual.shadow.size.min,
@@ -328,7 +330,7 @@ export const BookmarkForm = function({
           object: bookmarkData.link,
           path: 'display.name.show',
           id: 'display-name-show',
-          labelText: 'Show Name',
+          labelText: message.get('bookmarkFormDisplayNameShow'),
           action: () => {
             this.disable();
             this.collapse.display.name.update();
@@ -340,8 +342,8 @@ export const BookmarkForm = function({
           path: 'display.name.text',
           id: 'display-name-text',
           value: bookmarkData.link.display.name.text,
-          placeholder: 'Example',
+          placeholder: message.get('bookmarkFormDisplayNameTextPlaceholder'),
-          labelText: 'Bookmark name',
+          labelText: message.get('bookmarkFormDisplayNameTextLabel'),
           srOnly: true,
           action: () => {
             this.preview.update.assemble(bookmarkData);
@@ -351,7 +353,7 @@ export const BookmarkForm = function({
           object: bookmarkData.link,
           path: 'display.name.size',
           id: 'display-name-size',
-          labelText: 'Name size',
+          labelText: message.get('bookmarkFormDisplayNameSize'),
           value: bookmarkData.link.display.name.size,
           defaultValue: bookmarkDefault.display.name.size,
           min: bookmarkMinMax.display.name.size.min,
@@ -366,8 +368,8 @@ export const BookmarkForm = function({
       by: new Control_radio({
         object: bookmarkData.link,
         radioGroup: [
-          { id: 'accent-by-theme', labelText: 'Theme Accent', description: 'Use the Accent defined by the Theme.', value: 'theme' },
+          { id: 'accent-by-theme', labelText: message.get('bookmarkFormAccentByThemeLabel'), description: message.get('bookmarkFormAccentByThemeDescription'), value: 'theme' },
-          { id: 'accent-by-custom', labelText: 'Custom Accent', description: 'Override the Theme Accent.', value: 'custom' }
+          { id: 'accent-by-custom', labelText: message.get('bookmarkFormAccentByCustomLabel'), description: message.get('bookmarkFormAccentByCustomDescription'), value: 'custom' }
         ],
         groupName: 'accent-by',
         path: 'accent.by',
@@ -381,7 +383,7 @@ export const BookmarkForm = function({
         object: bookmarkData.link,
         path: 'accent',
         id: 'accent',
-        labelText: 'Accent',
+        labelText: message.get('bookmarkFormAccentColor'),
         srOnly: true,
         defaultValue: bookmarkDefault.accent.rgb,
         minMaxObject: bookmarkMinMax,
@@ -395,8 +397,8 @@ export const BookmarkForm = function({
       by: new Control_radio({
         object: bookmarkData.link,
         radioGroup: [
-          { id: 'color-by-theme', labelText: 'Theme colour', description: 'Use the Colour defined by the Theme.', value: 'theme' },
+          { id: 'color-by-theme', labelText: message.get('bookmarkFormColorByThemeLabel'), description: message.get('bookmarkFormColorByThemeDescription'), value: 'theme' },
-          { id: 'color-by-custom', labelText: 'Custom colour', description: 'Override the Theme colour.', value: 'custom' }
+          { id: 'color-by-custom', labelText: message.get('bookmarkFormColorByCustomLabel'), description: message.get('bookmarkFormColorByCustomDescription'), value: 'custom' }
         ],
         groupName: 'color-by',
         path: 'color.by',
@@ -410,7 +412,7 @@ export const BookmarkForm = function({
         object: bookmarkData.link,
         path: 'color',
         id: 'color',
-        labelText: 'Colour',
+        labelText: message.get('bookmarkFormColorColor'),
         srOnly: true,
         defaultValue: bookmarkDefault.color.rgb,
         minMaxObject: bookmarkMinMax,
@@ -423,7 +425,7 @@ export const BookmarkForm = function({
         object: bookmarkData.link,
         path: 'color.opacity',
         id: 'color-opacity',
-        labelText: 'Opacity',
+        labelText: message.get('bookmarkFormColorOpacity'),
         value: bookmarkData.link.color.opacity,
         defaultValue: bookmarkDefault.color.opacity,
         min: bookmarkMinMax.color.opacity.min,
@@ -438,8 +440,8 @@ export const BookmarkForm = function({
         object: bookmarkData.link,
         path: 'background.show',
         id: 'background-show',
-        labelText: 'Show background',
+        labelText: message.get('bookmarkFormBackgroundShowLabel'),
-        description: 'Display an Image or video Background on this Bookmark tile.',
+        description: message.get('bookmarkFormBackgroundShowDescription'),
         action: () => {
           this.collapse.background.update();
           this.disable();
@@ -449,8 +451,8 @@ export const BookmarkForm = function({
       type: new Control_radio({
         object: bookmarkData.link,
         radioGroup: [
-          { id: 'background-type-image', labelText: 'Image', value: 'image' },
+          { id: 'background-type-image', labelText: message.get('bookmarkFormBackgroundTypeImage'), value: 'image' },
-          { id: 'background-type-video', labelText: 'Video', value: 'video' }
+          { id: 'background-type-video', labelText: message.get('bookmarkFormBackgroundTypeVideo'), value: 'video' }
         ],
         groupName: 'background-type',
         path: 'background.type',
@@ -463,7 +465,7 @@ export const BookmarkForm = function({
         object: bookmarkData.link,
         path: 'background.opacity',
         id: 'background-opacity',
-        labelText: 'Opacity',
+        labelText: message.get('bookmarkFormBackgroundOpacity'),
         value: bookmarkData.link.background.opacity,
         defaultValue: bookmarkDefault.background.opacity,
         min: bookmarkMinMax.background.opacity.min,
@@ -478,8 +480,8 @@ export const BookmarkForm = function({
           path: 'background.image.url',
           id: 'background-image-url',
           value: bookmarkData.link.background.image.url,
-          placeholder: 'https://www.example.com/image.jpg',
+          placeholder: message.get('bookmarkFormBackgroundImagePlaceholder'),
-          labelText: 'Background image URL',
+          labelText: message.get('bookmarkFormBackgroundImageLabel'),
           srOnly: true,
           action: () => {
             this.preview.update.assemble(bookmarkData);
@@ -492,8 +494,8 @@ export const BookmarkForm = function({
           path: 'background.video.url',
           id: 'background-video-url',
           value: bookmarkData.link.background.video.url,
-          placeholder: 'https://www.example.com/video.mp4',
+          placeholder: message.get('bookmarkFormBackgroundVideoPlaceholder'),
-          labelText: 'Background video URL',
+          labelText: message.get('bookmarkFormBackgroundVideoLabel'),
           srOnly: true,
           action: () => {
             this.preview.update.assemble(bookmarkData);
@@ -505,7 +507,7 @@ export const BookmarkForm = function({
       object: bookmarkData.link,
       path: 'border',
       id: 'border',
-      labelText: 'Border',
+      labelText: message.get('bookmarkFormBorder'),
       value: bookmarkData.link.border,
       defaultValue: bookmarkDefault.border,
       min: bookmarkMinMax.border.min,
@@ -519,8 +521,8 @@ export const BookmarkForm = function({
         object: bookmarkData.link,
         path: 'shape.wide',
         id: 'shape-wide',
-        labelText: 'Wide tile',
+        labelText: message.get('bookmarkFormShapeWideLabel'),
-        description: 'Bookmark tile to span across two columns.',
+        description: message.get('bookmarkFormShapeWideDescription'),
         action: () => {
           this.preview.update.assemble(bookmarkData);
         }
@@ -529,8 +531,8 @@ export const BookmarkForm = function({
         object: bookmarkData.link,
         path: 'shape.tall',
         id: 'shape-tall',
-        labelText: 'Tall tile',
+        labelText: message.get('bookmarkFormShapeTallLabel'),
-        description: 'Bookmark tile to span across two columns.',
+        description: message.get('bookmarkFormShapeTallDescription'),
         action: () => {
           this.preview.update.assemble(bookmarkData);
         }
@@ -542,8 +544,8 @@ export const BookmarkForm = function({
     destination: new Control_radio({
       object: bookmarkData,
       radioGroup: [
-        { id: 'group-destination-existing', labelText: 'Existing Group', value: 'existing' },
+        { id: 'group-destination-existing', labelText: message.get('bookmarkFormGroupDestinationExisting'), value: 'existing' },
-        { id: 'group-destination-new', labelText: 'New Group', value: 'new' }
+        { id: 'group-destination-new', labelText: message.get('bookmarkFormGroupDestinationNew'), value: 'new' }
       ],
       groupName: 'group.destination',
       path: 'group.destination',
@@ -556,12 +558,12 @@ export const BookmarkForm = function({
       path: 'group.name',
       id: 'group-name',
       value: bookmarkData.group.name,
-      placeholder: 'Example group',
+      placeholder: message.get('bookmarkFormGroupNamePlaceholder'),
-      labelText: 'URL',
+      labelText: message.get('bookmarkFormGroupNameLabel'),
       srOnly: true
     }),
     random: new Button({
-      text: 'Random Group name',
+      text: message.get('bookmarkFormGroupRandom'),
       style: ['line'],
       func: () => {
         bookmarkData.group.name = randomString({ adjectivesCount: randomNumber(1, 3) });
@@ -573,7 +575,7 @@ export const BookmarkForm = function({
         object: bookmarkData,
         path: 'position.destination.group',
         id: 'position-destination-group',
-        labelText: 'Group',
+        labelText: message.get('bookmarkFormGroupPositionGroup'),
         srOnly: true,
         option: (bookmark.all.length > 0) ? this.selectOption.group() : [],
         selected: bookmarkData.position.destination.group,
@@ -599,7 +601,7 @@ export const BookmarkForm = function({
         object: bookmarkData,
         path: 'position.destination.item',
         id: 'position-destination-item',
-        labelText: 'Position',
+        labelText: message.get('bookmarkFormGroupPositionItem'),
         option: (bookmark.all.length > 0) ? this.selectOption.item() : [],
         selected: bookmarkData.position.destination.item
       })
@@ -612,10 +614,10 @@ export const BookmarkForm = function({
     object: bookmarkData.propagate,
     path: 'display',
     id: 'apply-to-all-display',
-    labelText: 'Apply "Show Visual Element" and "Show Name" to other Bookmarks',
+    labelText: message.get('bookmarkFormPropagateVisualLabel'),
     description: [
-      'The Letter, Icon, Image and Name text will not be shared.',
+      message.get('bookmarkFormPropagateVisualDescriptionPara1'),
-      'Useful for hiding the Visual Elements or Names on all Bookmarks.'
+      message.get('bookmarkFormPropagateVisualDescriptionPara2')
     ]
   });
 
@@ -628,10 +630,10 @@ export const BookmarkForm = function({
     object: bookmarkData.propagate,
     path: 'layout',
     id: 'apply-to-all-layout',
-    labelText: 'Apply Layout to other Bookmarks',
+    labelText: message.get('bookmarkFormPropagateLayoutLabel'),
     description: [
-      'When saved, apply the above Layout to all other Bookmarks.',
+      message.get('bookmarkFormPropagateLayoutDescriptionPara1'),
-      'Only the Visual and Name size, Alignment, Order, Position and Gutter will be will be applied to all.'
+      message.get('bookmarkFormPropagateLayoutDescriptionPara2')
     ]
   });
 
@@ -644,10 +646,10 @@ export const BookmarkForm = function({
     object: bookmarkData.propagate,
     path: 'theme',
     id: 'apply-to-all-theme',
-    labelText: 'Apply Theme to other Bookmarks',
+    labelText: message.get('bookmarkFormPropagateThemeLabel'),
     description: [
-      'When saved, apply the above Theme to all other Bookmarks.',
+      message.get('bookmarkFormPropagateThemeDescriptionPara1'),
-      'Only the Colour, Accent, Opacity, Border and Visual shadow will be applied to all.'
+      message.get('bookmarkFormPropagateThemeDescriptionPara2')
     ]
   });
 
@@ -662,17 +664,17 @@ export const BookmarkForm = function({
         visual: {
           shadow: {
             size: new Control_helperText({
-              text: ['Visual shadow only applies to a Letter or Icon.']
+              text: [message.get('bookmarkFormDisplayVisualShadowHelperPara1')]
             })
           }
         }
       },
       background: {
         image: new Control_helperText({
-          text: ['Background image only supports a direct URL to an image file.']
+          text: [message.get('bookmarkFormBackgroundImageHelperPara1')]
         }),
         video: new Control_helperText({
-          text: ['Background video only supports a direct URL to a video file. Supports MP4 and WebM format.', 'YouTube page URLs can not be used.']
+          text: [message.get('bookmarkFormBackgroundVideoHelperPara1')]
         })
       }
     }
@@ -769,8 +771,8 @@ export const BookmarkForm = function({
         form.wrap({
           children: [
             node('div|class:bookmark-form-description', [
-              node('h2:Visual & Name'),
+              node(`h2:${message.get('bookmarkFormSectionVisualHeading')}`),
-              node('p:Display Letters, Icon, Image and a Name on this Bookmark tile.')
+              node(`p:${message.get('bookmarkFormSectionVisualDescription')}`)
             ])
           ]
         }),
@@ -799,8 +801,8 @@ export const BookmarkForm = function({
         form.wrap({
           children: [
             node('div|class:bookmark-form-description', [
-              node('h2:Address'),
+              node(`h2:${message.get('bookmarkFormSectionAddressHeading')}`),
-              complexNode({ tag: 'p', text: 'Be sure to use the full URL and include <strong>"https://..."</strong>', complexText: true })
+              complexNode({ tag: 'p', text: message.get('bookmarkFormSectionAddressDescription'), complexText: true })
             ])
           ]
         }),
@@ -823,8 +825,8 @@ export const BookmarkForm = function({
         form.wrap({
           children: [
             node('div|class:bookmark-form-description', [
-              node('h2:Position'),
+              node(`h2:${message.get('bookmarkFormSectionPositionHeading')}`),
-              node('p:The Group to place this Bookmark in.')
+              node(`p:${message.get('bookmarkFormSectionPositionDescription')}`)
             ])
           ]
         }),
@@ -868,8 +870,8 @@ export const BookmarkForm = function({
         form.wrap({
           children: [
             node('div|class:bookmark-form-description', [
-              node('h2:Layout'),
+              node(`h2:${message.get('bookmarkFormSectionLayoutHeading')}`),
-              node('p:Change the Visual Element and Name position, scale and orientation.')
+              node(`p:${message.get('bookmarkFormSectionLayoutDescription')}`)
             ])
           ]
         }),
@@ -915,8 +917,8 @@ export const BookmarkForm = function({
         form.wrap({
           children: [
             node('div|class:bookmark-form-description', [
-              node('h2:Theme'),
+              node(`h2:${message.get('bookmarkFormSectionThemeHeading')}`),
-              node('p:Override the Theme and Accent colour.')
+              node(`p:${message.get('bookmarkFormSectionThemeDescription')}`)
             ])
           ]
         }),
@@ -1053,23 +1055,23 @@ export const BookmarkForm = function({
 
   this.tab = new Tab({
     group: [{
-      tabText: 'Visual & Name',
+      tabText: message.get('bookmarkFormTabVisual'),
       area: this.area.visual(),
       active: true
     }, {
-      tabText: 'Address',
+      tabText: message.get('bookmarkFormTabAddress'),
       area: this.area.address(),
       active: false
     }, {
-      tabText: 'Position',
+      tabText: message.get('bookmarkFormTabPosition'),
       area: this.area.position(),
       active: false
     }, {
-      tabText: 'Layout',
+      tabText: message.get('bookmarkFormTabLayout'),
       area: this.area.layout(),
       active: false
     }, {
-      tabText: 'Theme',
+      tabText: message.get('bookmarkFormTabTheme'),
       area: this.area.theme(),
       active: false
     }]

src/component/bookmarkPreview/index.js

@@ -1,10 +1,12 @@
+import { message } from '../message';
+
 import { BookmarkTile } from '../bookmarkTile';
 
 import { node } from '../../utility/node';
 
 import './index.css';
 
-export const BookmarkPreview = function ({
+export const BookmarkPreview = function({
   bookmarkData = false
 } = {}) {
 
@@ -29,9 +31,9 @@ export const BookmarkPreview = function ({
     }
 
     if (bookmarkData.link.shape.tall || bookmarkData.link.shape.wide) {
-      this.title.textContent = 'Preview (50% scale)';
+      this.title.textContent = message.get('bookmarkPreviewHalf');
     } else {
-      this.title.textContent = 'Preview';
+      this.title.textContent = message.get('bookmarkPreviewFull');
     }
 
   };

src/component/bookmarkTile/index.js

@@ -1,3 +1,5 @@
+import { message } from '../message';
+
 import { state } from '../state';
 import { data } from '../data';
 import { bookmark } from '../bookmark';
@@ -16,7 +18,7 @@ import { complexNode } from '../../utility/complexNode';
 import { isValidString } from '../../utility/isValidString';
 import { trimString } from '../../utility/trimString';
 
-const BookmarkTile = function ({
+const BookmarkTile = function({
   bookmarkData = {},
   preview = false
 } = {}) {
@@ -63,11 +65,11 @@ const BookmarkTile = function ({
 
   this.control.button = {
     left: new Button({
-      text: 'Move this bookmark left',
+      text: message.get('bookmarkTileControlLeft'),
       srOnly: true,
       iconName: 'arrowKeyboardLeft',
       style: ['link'],
-      title: 'Move this bookmark left',
+      title: message.get('bookmarkTileControlLeft'),
       classList: ['bookmark-control-button', 'bookmark-control-left'],
       func: () => {
 
@@ -86,19 +88,19 @@ const BookmarkTile = function ({
       }
     }),
     sort: new Button({
-      text: 'Drag bookmark to reorder',
+      text: message.get('bookmarkTileControlSort'),
       srOnly: true,
       iconName: 'drag',
       style: ['link'],
-      title: 'Drag bookmark to reorder',
+      title: message.get('bookmarkTileControlSort'),
       classList: ['bookmark-control-button', 'bookmark-control-sort']
     }),
     right: new Button({
-      text: 'Move this bookmark right',
+      text: message.get('bookmarkTileControlRight'),
       srOnly: true,
       iconName: 'arrowKeyboardRight',
       style: ['link'],
-      title: 'Move this bookmark right',
+      title: message.get('bookmarkTileControlRight'),
       classList: ['bookmark-control-button', 'bookmark-control-right'],
       func: () => {
 
@@ -117,11 +119,11 @@ const BookmarkTile = function ({
       }
     }),
     edit: new Button({
-      text: 'Edit this bookmark',
+      text: message.get('bookmarkTileControlEdit'),
       srOnly: true,
       iconName: 'edit',
       style: ['link'],
-      title: 'Edit this bookmark',
+      title: message.get('bookmarkTileControlEdit'),
       classList: ['bookmark-control-button', 'bookmark-control-edit'],
       func: () => {
 
@@ -136,9 +138,10 @@ const BookmarkTile = function ({
         const bookmarkForm = new BookmarkForm({ bookmarkData: newBookmarkData });
 
         const editModal = new Modal({
-          heading: isValidString(newBookmarkData.link.display.name.text) ? 'Edit ' + newBookmarkData.link.display.name.text : 'Edit unnamed bookmark',
+          heading: isValidString(newBookmarkData.link.display.name.text) ? `${message.get('bookmarkEditHeadingName')} ${newBookmarkData.link.display.name.text}` : message.get('bookmarkEditHeadingUnnamed'),
           content: bookmarkForm.form(),
-          successText: 'Save',
+          successText: message.get('bookmarkEditSuccessText'),
+          cancelText: message.get('bookmarkEditCancelText'),
           width: (state.get.current().bookmark.style === 'block') ? 60 : 70,
           maxHeight: true,
           successAction: () => {
@@ -177,18 +180,19 @@ const BookmarkTile = function ({
       }
     }),
     remove: new Button({
-      text: 'Remove this bookmark',
+      text: message.get('bookmarkTileControlRemove'),
       srOnly: true,
       iconName: 'cross',
       style: ['link'],
-      title: 'Remove this bookmark',
+      title: message.get('bookmarkTileControlRemove'),
       classList: ['bookmark-control-button', 'bookmark-control-remove'],
       func: () => {
 
         const removeModal = new Modal({
-          heading: isValidString(bookmarkData.link.display.name.text) ? 'Remove ' + bookmarkData.link.display.name.text : 'Remove unnamed bookmark',
+          heading: isValidString(bookmarkData.link.display.name.text) ? `${message.get('bookmarkRemoveHeadingName')} ${bookmarkData.link.display.name.text}` : message.get('bookmarkRemoveHeadingUnnamed'),
-          content: 'Are you sure you want to remove this Bookmark? This can not be undone.',
+          content: message.get('bookmarkRemoveContent'),
-          successText: 'Remove',
+          successText: message.get('bookmarkRemoveSuccessText'),
+          cancelText: message.get('bookmarkRemoveCancelText'),
           width: 'small',
           successAction: () => {
 

src/component/browserDetect/index.js

@@ -0,0 +1,21 @@
+export const browserDetect = () => {
+
+  const userAgent = navigator.userAgent;
+
+  let browserName = {
+    chrome: false,
+    firefox: false,
+    none: false
+  };
+
+  if (userAgent.match(/chrome|chromium|crios/i)) {
+    browserName.chrome = true;
+  } else if (userAgent.match(/firefox|fxios/i)) {
+    browserName.firefox = true;
+  } else {
+    browserName.none = true;
+  }
+
+  return browserName;
+
+};

src/component/control/color/index.js

@@ -1,3 +1,5 @@
+import { message } from '../../message';
+
 import * as form from '../../form';
 
 import { Button } from '../../button';
@@ -65,7 +67,7 @@ export const Control_color = function ({
     })),
     max: 7,
     classList: ['form-group-item-half'],
-    placeholder: 'Hex code',
+    placeholder: message.get('controlColorTextPlaceholder'),
     func: () => {
 
       if (path) {
@@ -82,11 +84,12 @@ export const Control_color = function ({
   });
 
   this.reset = new Button({
-    text: false,
+    text: message.get('controlGeneralReset'),
     iconName: 'replay',
     style: ['line'],
     classList: ['form-group-item-small'],
-    title: 'Reset to default',
+    title: message.get('controlGeneralReset'),
+    srOnly: true,
     func: () => {
 
       set({ object: object, path: path + '.rgb', value: JSON.parse(JSON.stringify(defaultValue)) });
@@ -99,11 +102,12 @@ export const Control_color = function ({
   });
 
   this.random = new Button({
-    text: false,
+    text: message.get('controlColorRandom'),
     iconName: 'random',
     style: ['line'],
     classList: ['form-group-item-small'],
-    title: 'Random colour',
+    title: message.get('controlColorRandom'),
+    srOnly: true,
     func: () => {
 
       set({ object: object, path: path + '.hsl', value: { h: randomNumber(0, 360), s: randomNumber(0, 100), l: randomNumber(0, 100) } });

src/component/control/colorMixer/index.js

@@ -1,3 +1,5 @@
+import { message } from '../../message';
+
 import * as form from '../../form';
 
 import { Button } from '../../button';
@@ -24,11 +26,12 @@ export const Control_colorMixer = function ({
 } = {}) {
 
   this.moreControlsToggle = new Button({
-    text: false,
+    text: message.get('controlColorMixerMoreControls'),
     iconName: 'arrowKeyboardDown',
     style: ['line'],
     classList: ['collapse-toggle', 'form-group-item-small'],
-    title: 'More controls',
+    title: message.get('controlColorMixerMoreControls'),
+    srOnly: true,
     func: () => {
       this.moreControlsCollapse.toggle();
       this.moreControlsUpdate();
@@ -67,7 +70,7 @@ export const Control_colorMixer = function ({
     object: object,
     path: path + '.hsl.h',
     id: id + '-hsl-h',
-    labelText: 'Hue',
+    labelText: message.get('controlColorMixerSliderH'),
     value: get({ object: object, path: path + '.hsl.h' }),
     min: get({ object: minMaxObject, path: path + '.hsl.h.min' }),
     max: get({ object: minMaxObject, path: path + '.hsl.h.max' }),
@@ -93,7 +96,7 @@ export const Control_colorMixer = function ({
     object: object,
     path: path + '.hsl.s',
     id: id + '-hsl-s',
-    labelText: 'Saturation',
+    labelText: message.get('controlColorMixerSliderS'),
     value: get({ object: object, path: path + '.hsl.s' }),
     min: get({ object: minMaxObject, path: path + '.hsl.s.min' }),
     max: get({ object: minMaxObject, path: path + '.hsl.s.max' }),
@@ -119,7 +122,7 @@ export const Control_colorMixer = function ({
     object: object,
     path: path + '.hsl.l',
     id: id + '-hsl-l',
-    labelText: 'Lightness',
+    labelText: message.get('controlColorMixerSliderL'),
     value: get({ object: object, path: path + '.hsl.l' }),
     min: get({ object: minMaxObject, path: path + '.hsl.l.min' }),
     max: get({ object: minMaxObject, path: path + '.hsl.l.max' }),
@@ -145,7 +148,7 @@ export const Control_colorMixer = function ({
     object: object,
     path: path + '.rgb.r',
     id: id + '-rgb-r',
-    labelText: 'Red',
+    labelText: message.get('controlColorMixerSliderR'),
     value: get({ object: object, path: path + '.rgb.r' }),
     min: get({ object: minMaxObject, path: path + '.rgb.r.min' }),
     max: get({ object: minMaxObject, path: path + '.rgb.r.max' }),
@@ -171,7 +174,7 @@ export const Control_colorMixer = function ({
     object: object,
     path: path + '.rgb.g',
     id: id + '-rgb-g',
-    labelText: 'Green',
+    labelText: message.get('controlColorMixerSliderG'),
     value: get({ object: object, path: path + '.rgb.g' }),
     min: get({ object: minMaxObject, path: path + '.rgb.g.min' }),
     max: get({ object: minMaxObject, path: path + '.rgb.g.max' }),
@@ -197,7 +200,7 @@ export const Control_colorMixer = function ({
     object: object,
     path: path + '.rgb.b',
     id: id + '-rgb-b',
-    labelText: 'Blue',
+    labelText: message.get('controlColorMixerSliderB'),
     value: get({ object: object, path: path + '.rgb.b' }),
     min: get({ object: minMaxObject, path: path + '.rgb.b.min' }),
     max: get({ object: minMaxObject, path: path + '.rgb.b.max' }),

src/component/control/select/index.js

@@ -6,7 +6,7 @@ import { set } from '../../../utility/set';
 import { trimString } from '../../../utility/trimString';
 import { clearChildNode } from '../../../utility/clearChildNode';
 
-export const Control_select = function ({
+export const Control_select = function({
   option = [],
   selected = 0,
   object = {},
@@ -24,7 +24,9 @@ export const Control_select = function ({
     selected: selected,
     func: () => {
 
+      if (object) {
         set({ object: object, path: path, value: this.select.selectedIndex });
+      }
 
       if (action) { action(); }
 

src/component/control/slider/index.js

@@ -1,3 +1,5 @@
+import { message } from '../../message';
+
 import * as form from '../../form';
 
 import { Button } from '../../button';
@@ -6,7 +8,7 @@ import { get } from '../../../utility/get';
 import { set } from '../../../utility/set';
 import { minMax } from '../../../utility/minMax';
 
-export const Control_slider = function ({
+export const Control_slider = function({
   object = {},
   path = false,
   id = 'name',
@@ -115,11 +117,12 @@ export const Control_slider = function ({
   });
 
   this.reset = new Button({
-    text: false,
+    text: message.get('controlGeneralReset'),
     iconName: 'replay',
     style: ['line'],
     classList: ['form-group-item-small'],
-    title: 'Reset to default',
+    title: message.get('controlGeneralReset'),
+    srOnly: true,
     func: () => {
 
       set({

src/component/control/sliderSlim/index.js

@@ -1,3 +1,5 @@
+import { message } from '../../message';
+
 import * as form from '../../form';
 
 import { Button } from '../../button';
@@ -6,7 +8,7 @@ import { get } from '../../../utility/get';
 import { set } from '../../../utility/set';
 import { minMax } from '../../../utility/minMax';
 
-export const Control_sliderSlim = function ({
+export const Control_sliderSlim = function({
   object = {},
   path = false,
   id = 'name',
@@ -99,11 +101,12 @@ export const Control_sliderSlim = function ({
   });
 
   this.reset = new Button({
-    text: false,
+    text: message.get('controlGeneralReset'),
     iconName: 'replay',
     style: ['line'],
     classList: ['form-group-item-small'],
-    title: 'Reset to default',
+    title: message.get('controlGeneralReset'),
+    srOnly: true,
     func: () => {
 
       set({

src/component/control/textReset/index.js

@@ -1,3 +1,5 @@
+import { message } from '../../message';
+
 import * as form from '../../form';
 
 import { Button } from '../../button';
@@ -5,7 +7,7 @@ import { Button } from '../../button';
 import { get } from '../../../utility/get';
 import { set } from '../../../utility/set';
 
-export const Control_textReset = function ({
+export const Control_textReset = function({
   object = {},
   path = false,
   id = 'name',
@@ -63,11 +65,12 @@ export const Control_textReset = function ({
   }
 
   this.reset = new Button({
-    text: false,
+    text: message.get('controlGeneralReset'),
     iconName: 'replay',
     style: ['line'],
     classList: ['form-group-item-small'],
-    title: 'Reset to default',
+    title: message.get('controlGeneralReset'),
+    srOnly: true,
     func: () => {
       set({
         object: object,

src/component/customTheme/index.js

@@ -1,7 +1,8 @@
+import { message } from '../message';
+
 import { state } from '../state';
 import { data } from '../data';
 
-
 import { Modal } from '../modal';
 import { CustomThemeTile } from '../customThemeTile';
 import { CustomThemeForm } from '../customThemeForm';
@@ -78,9 +79,10 @@ customTheme.add = {
     const bookmarkForm = new CustomThemeForm({ customThemeData: newCustomThemeData });
 
     const addModal = new Modal({
-      heading: 'Save current theme',
+      heading: message.get('themeCustomAddHeading'),
       content: bookmarkForm.form(),
-      successText: 'Save',
+      successText: message.get('themeCustomAddSuccessText'),
+      cancelText: message.get('themeCustomAddCancelText'),
       width: 'small',
       successAction: () => {
         customTheme.item.mod.add(newCustomThemeData);

src/component/customThemeForm/index.js

@@ -1,3 +1,4 @@
+import { message } from '../message';
 
 import { Button } from '../button';
 
@@ -7,7 +8,7 @@ import { node } from '../../utility/node';
 import { randomString } from '../../utility/randomString';
 import { randomNumber } from '../../utility/randomNumber';
 
-export const CustomThemeForm = function ({
+export const CustomThemeForm = function({
   customThemeData = false
 } = {}) {
 
@@ -19,11 +20,11 @@ export const CustomThemeForm = function ({
       path: 'name',
       id: 'name',
       value: customThemeData.theme.name,
-      placeholder: 'Example theme',
+      placeholder: message.get('themeCustomFormNamePlaceholder'),
-      labelText: 'Name'
+      labelText: message.get('themeCustomFormNameLabel')
     }),
     randomName: new Button({
-      text: 'Random theme name',
+      text: message.get('themeCustomFormRandom'),
       style: ['line'],
       func: () => {
         customThemeData.theme.name = randomString({ adjectivesCount: randomNumber(1, 3) });

src/component/customThemeTile/index.js

@@ -1,3 +1,5 @@
+import { message } from '../message';
+
 import { state } from '../state';
 import { data } from '../data';
 import { theme } from '../theme';
@@ -324,12 +326,12 @@ export const CustomThemeTile = function({
 
   this.control.button = {
     edit: new Button({
-      text: 'Edit this saved theme',
+      text: message.get('themeCustomTileControlEdit'),
       srOnly: true,
       iconName: 'edit',
       style: ['link'],
       size: 'small',
-      title: 'Edit this saved theme',
+      title: message.get('themeCustomTileControlEdit'),
       classList: ['theme-custom-control-button', 'theme-custom-control-edit'],
       func: () => {
 
@@ -342,9 +344,10 @@ export const CustomThemeTile = function({
         const bookmarkForm = new CustomThemeForm({ customThemeData: newCustomThemeData });
 
         const editModal = new Modal({
-          heading: isValidString(customThemeData.theme.name) ? 'Edit ' + customThemeData.theme.name : 'Edit unnamed custom theme',
+          heading: isValidString(customThemeData.theme.name) ? `${message.get('themeCustomEditHeadingName')} ${customThemeData.theme.name}` : message.get('themeCustomEditHeadingUnnamed'),
           content: bookmarkForm.form(),
-          successText: 'Save',
+          successText: message.get('themeCustomEditSuccessText'),
+          cancelText: message.get('themeCustomEditCancelText'),
           width: 'small',
           successAction: () => {
 
@@ -360,21 +363,22 @@ export const CustomThemeTile = function({
       }
     }),
     remove: new Button({
-      text: 'Remove this saved theme',
+      text: message.get('themeCustomTileControlRemove'),
       srOnly: true,
       iconName: 'cross',
       style: ['link'],
       size: 'small',
-      title: 'Remove this saved theme',
+      title: message.get('themeCustomTileControlRemove'),
       classList: ['theme-custom-control-button', 'theme-custom-control-remove'],
       func: () => {
 
         menu.close();
 
         const removeModal = new Modal({
-          heading: isValidString(customThemeData.theme.name) ? 'Remove ' + customThemeData.theme.name : 'Remove unnamed custom theme',
+          heading: isValidString(customThemeData.theme.name) ? `${message.get('themeCustomRemoveHeadingName')} ${customThemeData.theme.name}` : message.get('themeCustomRemoveHeadingUnnamed'),
-          content: 'Are you sure you want to remove this saved theme? This can not be undone.',
+          content: message.get('themeCustomRemoveContent'),
-          successText: 'Remove',
+          successText: message.get('themeCustomRemoveSuccessText'),
+          cancelText: message.get('themeCustomRemoveCancelText'),
           width: 'small',
           successAction: () => {
             customTheme.item.mod.remove(customThemeData);

src/component/data/index.js

@@ -1,3 +1,5 @@
+import { message } from '../message';
+
 import { state } from '../state';
 import { bookmark } from '../bookmark';
 import { menu } from '../menu';
@@ -85,9 +87,10 @@ data.import = {
     });
 
     const importModal = new Modal({
-      heading: 'Restoring from a ' + APP_NAME + ' backup',
+      heading: message.get('dataRestoreHeading'),
       content: importForm.form(),
-      successText: 'Import',
+      successText: message.get('dataRestoreSuccessText'),
+      cancelText: message.get('dataRestoreCancelText'),
       width: 'small',
       successAction: () => {
         if (data.import.state.setup.include || data.import.state.theme.include || data.import.state.bookmark.include) {
@@ -216,7 +219,7 @@ data.export = () => {
   timestamp.year = leadingZero(timestamp.year);
   timestamp = timestamp.year + '.' + timestamp.month + '.' + timestamp.date + ' - ' + timestamp.hours + ' ' + timestamp.minutes + ' ' + timestamp.seconds;
 
-  const fileName = APP_NAME + ' backup - ' + timestamp + '.json';
+  const fileName = APP_NAME + ' ' + message.get('dataExportBackup') + ' - ' + timestamp + '.json';
 
   const dataToExport = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data.load()));
 
@@ -340,12 +343,13 @@ data.clear = {
   all: {
     render: () => {
       const clearModal = new Modal({
-        heading: 'Clear all ' + APP_NAME + ' data?',
+        heading: message.get('dataClearAllHeading'),
         content: node('div', [
-          node('p:Are you sure you want to clear all ' + APP_NAME + ' Bookmarks and Settings? ' + APP_NAME + ' will be restore to the default state.'),
+          node(`p:${message.get('dataClearAllContentPara1')}`),
-          node('p:This can not be undone.')
+          node(`p:${message.get('dataClearAllContentPara2')}`)
         ]),
-        successText: 'Clear all data',
+        successText: message.get('dataClearAllSuccessText'),
+        cancelText: message.get('dataClearAllCancelText'),
         width: 'small',
         successAction: () => {
           data.wipe.all();
@@ -358,12 +362,13 @@ data.clear = {
   partial: {
     render: () => {
       const clearModal = new Modal({
-        heading: 'Clear ' + APP_NAME + ' data except bookmarks?',
+        heading: message.get('dataClearPartialHeading'),
         content: node('div', [
-          node('p:Are you sure you want to clear all ' + APP_NAME + ' Settings? ' + APP_NAME + ' will be restore to the default state but your Bookmarks and Groups will remain.'),
+          node(`p:${message.get('dataClearPartialContentPara1')}`),
-          node('p:This can not be undone.')
+          node(`p:${message.get('dataClearPartialContentPara2')}`)
         ]),
-        successText: 'Clear all except bookmarks',
+        successText: message.get('dataClearPartialSuccessText'),
+        cancelText: message.get('dataClearPartialCancelText'),
         width: 35,
         successAction: () => {
           data.wipe.partial();
@@ -379,7 +384,7 @@ data.feedback = {};
 
 data.feedback.empty = {
   render: (feedback) => {
-    feedback.appendChild(node('p:Nothing selected to import.|class:muted small'));
+    feedback.appendChild(node(`p:${message.get('dataFeedbackEmpty')}|class:muted small`));
   }
 };
 
@@ -391,7 +396,7 @@ data.feedback.clear = {
 
 data.feedback.success = {
   render: (feedback, filename, action) => {
-    feedback.appendChild(node('p:Success! Restoring ' + APP_NAME + ' Bookmarks and Settings.|class:muted small'));
+    feedback.appendChild(node(`p:${message.get('dataFeedbackSuccess')}|class:muted small`));
 
     feedback.appendChild(node('p:' + filename));
 
@@ -404,21 +409,21 @@ data.feedback.success = {
 data.feedback.fail = {
   notJson: {
     render: (feedback, filename) => {
-      feedback.appendChild(node('p:Not a JSON file. Make sure the selected file came from ' + APP_NAME + '.|class:small muted'));
+      feedback.appendChild(node(`p:${message.get('dataFeedbackFailNotJson')}|class:small muted`));
       feedback.appendChild(complexNode({ tag: 'p', text: filename }));
       data.feedback.animation.set.render(feedback, 'is-shake');
     }
   },
   notAppJson: {
     render: (feedback, filename) => {
-      feedback.appendChild(node('p:Not the right kind of JSON file. Make sure the selected file came from ' + APP_NAME + '.|class:small muted'));
+      feedback.appendChild(node(`p:${message.get('dataFeedbackFailNotAppJson')}|class:small muted`));
       feedback.appendChild(complexNode({ tag: 'p', text: filename }));
       data.feedback.animation.set.render(feedback, 'is-shake');
     }
   },
   notClipboardJson: {
     render: (feedback, name) => {
-      feedback.appendChild(node('p:Not the right kind of data. Make sure the clipboard holds data from ' + APP_NAME + ' or a ' + APP_NAME + ' backup JSON file.|class:small muted'));
+      feedback.appendChild(node(`p:${message.get('dataFeedbackFailNotClipboardJson')}|class:small muted`));
       feedback.appendChild(node('p:' + name));
       data.feedback.animation.set.render(feedback, 'is-shake');
     }

src/component/dropdown/index.js

@@ -1,4 +1,3 @@
-
 import { Button } from '../button';
 import { KeyboardShortcut } from '../keyboardShortcut';
 
@@ -6,7 +5,8 @@ import { node } from '../../utility/node';
 
 import './index.css';
 
-export const Dropdown = function ({
+export const Dropdown = function({
+  title = false,
   text = 'Dropdown',
   menuItem = [],
   buttonStyle = [],
@@ -23,6 +23,7 @@ export const Dropdown = function ({
     menu: node('div|class:dropdown-menu'),
     content: node('div|class:dropdown-content'),
     toggle: new Button({
+      title: title,
       text: text,
       srOnly: srOnly,
       iconName: iconName,

src/component/form/input/select/index.js

@@ -4,7 +4,7 @@ import { trimString } from '../../../../utility/trimString';
 
 import './index.css';
 
-export const select = function ({
+export const select = function({
   id = false,
   classList = [],
   option = [],
@@ -35,9 +35,10 @@ export const select = function ({
   }
 
   if (option.length > 0) {
-
     option.forEach((item) => {
 
+      if (typeof item == 'string') {
+
         select.appendChild(
           complexNode({
             tag: 'option',
@@ -49,12 +50,31 @@ export const select = function ({
           })
         );
 
-    });
+      } else {
 
-    select.selectedIndex = selected;
+        const option = complexNode({ tag: 'option' });
+
+        if (item.name) {
+          option.textContent = item.name;
+        }
+
+        if (item.id) {
+          option.value = item.id;
+        }
+
+        if (item.disabled) {
+          option.disabled = true;
+        }
+
+        select.appendChild(option);
 
       }
 
+    });
+  }
+
+  select.selectedIndex = selected;
+
   return select;
 
 };

src/component/greeting/index.js

@@ -8,7 +8,7 @@ import moment from 'moment';
 
 import './index.css';
 
-export const Greeting = function () {
+export const Greeting = function() {
 
   this.now;
 
@@ -25,10 +25,10 @@ export const Greeting = function () {
 
   };
 
-  this.message = ['Good night', 'Good morning', 'Good afternoon', 'Good evening'];
-
   this.update = () => {
 
+    const goodMessage = ['Good night', 'Good morning', 'Good afternoon', 'Good evening'];
+
     this.now = moment();
 
     let value;
@@ -43,7 +43,7 @@ export const Greeting = function () {
 
       case 'good':
 
-        value = this.message[Math.floor(this.now.hours() / 6)];
+        value = goodMessage[Math.floor(this.now.hours() / 6)];
 
         break;
 
@@ -55,7 +55,7 @@ export const Greeting = function () {
 
       case 'hi':
 
-        value = 'Hi';
+        value = 'hi';
 
         break;
 
@@ -67,7 +67,7 @@ export const Greeting = function () {
 
         } else {
 
-          value = this.message[Math.floor(this.now.hours() / 6)];
+          value = goodMessage[Math.floor(this.now.hours() / 6)];
 
         }
 

src/component/group/index.js

@@ -1,3 +1,5 @@
+import { message } from '../message';
+
 import { state } from '../state';
 import { data } from '../data';
 import { layout } from '../layout';
@@ -213,9 +215,10 @@ group.add = {
     const groupForm = new GroupForm({ groupData: newGroupData });
 
     const addModal = new Modal({
-      heading: 'Add a new Group',
+      heading: message.get('groupAddHeading'),
       content: groupForm.form(),
-      successText: 'Add',
+      successText: message.get('groupAddSuccessText'),
+      cancelText: message.get('groupAddCancelText'),
       width: 40,
       openAction: () => {
 

src/component/groupArea/index.js

@@ -1,3 +1,5 @@
+import { message } from '../message';
+
 import { state } from '../state';
 import { data } from '../data';
 import { group } from '../group';
@@ -14,7 +16,7 @@ import { node } from '../../utility/node';
 import { isValidString } from '../../utility/isValidString';
 import { clearChildNode } from '../../utility/clearChildNode';
 
-export const GroupArea = function ({
+export const GroupArea = function({
   groupData = {}
 } = {}) {
 
@@ -42,11 +44,11 @@ export const GroupArea = function ({
 
   this.control.button = {
     up: new Button({
-      text: 'Move this group up',
+      text: message.get('groupAreaControlUp'),
       srOnly: true,
       iconName: 'arrowKeyboardUp',
       style: ['line'],
-      title: 'Move this group up',
+      title: message.get('groupAreaControlUp'),
       classList: ['group-control-button', 'group-control-up'],
       func: () => {
 
@@ -65,19 +67,19 @@ export const GroupArea = function ({
       }
     }),
     sort: new Button({
-      text: 'Drag group to reorder',
+      text: message.get('groupAreaControlSort'),
       srOnly: true,
       iconName: 'drag',
       style: ['line'],
-      title: 'Drag group to reorder',
+      title: message.get('groupAreaControlSort'),
       classList: ['group-control-button', 'group-control-sort'],
     }),
     down: new Button({
-      text: 'Move this group down',
+      text: message.get('groupAreaControlDown'),
       srOnly: true,
       iconName: 'arrowKeyboardDown',
       style: ['line'],
-      title: 'Move this group right',
+      title: message.get('groupAreaControlDown'),
       classList: ['group-control-button', 'group-control-up'],
       func: () => {
 
@@ -96,11 +98,11 @@ export const GroupArea = function ({
       }
     }),
     edit: new Button({
-      text: 'Edit this group',
+      text: message.get('groupAreaControlEdit'),
       srOnly: true,
       iconName: 'edit',
       style: ['line'],
-      title: 'Edit this group',
+      title: message.get('groupAreaControlEdit'),
       classList: ['group-control-button', 'group-control-edit'],
       func: () => {
 
@@ -115,9 +117,10 @@ export const GroupArea = function ({
         const groupForm = new GroupForm({ groupData: newGroupData });
 
         const editModal = new Modal({
-          heading: isValidString(newGroupData.group.name.text) ? 'Edit ' + newGroupData.group.name.text : 'Edit unnamed group',
+          heading: isValidString(newGroupData.group.name.text) ? `${message.get('groupEditHeadingName')} ${newGroupData.group.name.text}` : message.get('groupEditHeadingUnnamed'),
           content: groupForm.form(),
-          successText: 'Save',
+          successText: message.get('groupEditSuccessText'),
+          cancelText: message.get('groupEditCancelText'),
           width: 40,
           successAction: () => {
 
@@ -135,18 +138,19 @@ export const GroupArea = function ({
       }
     }),
     remove: new Button({
-      text: 'Remove this group',
+      text: message.get('groupAreaControlRemove'),
       srOnly: true,
       iconName: 'cross',
       style: ['line'],
-      title: 'Remove this group',
+      title: message.get('groupAreaControlRemove'),
       classList: ['group-control-button', 'group-control-remove'],
       func: () => {
 
         const removeModal = new Modal({
-          heading: isValidString(groupData.group.name.text) ? 'Remove ' + groupData.group.name.text : 'Remove unnamed bookmark',
+          heading: isValidString(groupData.group.name.text) ? `${message.get('groupRemoveHeadingName')} ${groupData.group.name.text}` : message.get('groupRemoveHeadingUnnamed'),
-          content: 'Are you sure you want to remove this Group and all the Bookmarks within? This can not be undone.',
+          content: message.get('groupRemoveContent'),
-          successText: 'Remove',
+          successText: message.get('groupRemoveSuccessText'),
+          cancelText: message.get('groupRemoveCancelText'),
           width: 'small',
           successAction: () => {
 
@@ -169,9 +173,9 @@ export const GroupArea = function ({
 
   this.openAll = {
     button: new Button({
-      text: 'Open all Bookmarks in this Group',
+      text: message.get('groupAreaControlOpenAll'),
       style: ['line'],
-      title: 'Open all Bookmarks in this Group',
+      title: message.get('groupAreaControlOpenAll'),
       srOnly: true,
       iconName: 'openAll',
       classList: ['group-toolbar-button', 'group-toolbar-open-all'],
@@ -208,9 +212,9 @@ export const GroupArea = function ({
 
   this.collapse = {
     button: new Button({
-      text: 'Collapse this Group',
+      text: message.get('groupAreaControlCollapse'),
       style: ['line'],
-      title: 'Collapse this Group',
+      title: message.get('groupAreaControlCollapse'),
       srOnly: true,
       iconName: 'arrowKeyboardUp',
       classList: ['group-toolbar-button', 'group-toolbar-collapse'],

src/component/groupForm/index.js

@@ -1,3 +1,5 @@
+import { message } from '../message';
+
 import { bookmark } from '../bookmark';
 
 import * as form from '../form';
@@ -58,26 +60,26 @@ export const GroupForm = function({
 
   this.control.group = {
     name: {
+      show: new Control_checkbox({
+        object: groupData.group,
+        path: 'name.show',
+        id: 'name-show',
+        labelText: message.get('groupFormNameShow'),
+        action: () => {
+          this.disable();
+        }
+      }),
       text: new Control_text({
         object: groupData.group,
         path: 'name.text',
         id: 'name-text',
         value: groupData.group.name.text,
-        placeholder: 'Example group',
+        placeholder: message.get('groupFormNameTextPlaceholder'),
-        labelText: 'Group name',
+        labelText: message.get('groupFormNameTextLabel'),
         srOnly: true
       }),
-      show: new Control_checkbox({
-        object: groupData.group,
-        path: 'name.show',
-        id: 'name-show',
-        labelText: 'Show Group name',
-        action: () => {
-          this.disable();
-        }
-      }),
       random: new Button({
-        text: 'Random Group name',
+        text: message.get('groupFormNameRandom'),
         style: ['line'],
         func: () => {
           groupData.group.name.text = randomString({ adjectivesCount: randomNumber(1, 3) });
@@ -90,8 +92,8 @@ export const GroupForm = function({
         object: groupData.group,
         path: 'toolbar.collapse.show',
         id: 'toolbar-collapse-show',
-        labelText: 'Show Collapse',
+        labelText: message.get('groupFormCollapseShowLabel'),
-        description: 'The Collapse button will show or hide the Bookmaks in this Group.'
+        description: message.get('groupFormCollapseShowDescription')
       })
     },
     openAll: {
@@ -99,8 +101,8 @@ export const GroupForm = function({
         object: groupData.group,
         path: 'toolbar.openAll.show',
         id: 'toolbar-openAll-show',
-        labelText: 'Show Open all',
+        labelText: message.get('groupFormOpenAllShowLabel'),
-        description: 'Open all button will appear if there is at least one Bookmark in this Group.'
+        description: message.get('groupFormOpenAllShowDescription')
       })
     }
   };
@@ -109,7 +111,7 @@ export const GroupForm = function({
     object: groupData,
     path: 'position.destination',
     id: 'position-destination',
-    labelText: 'Position',
+    labelText: message.get('groupFormDestination'),
     option: this.selectOption.group(),
     selected: groupData.position.destination
   });
@@ -139,8 +141,8 @@ export const GroupForm = function({
           form.wrap({
             children: [
               node('div|class:group-form-description', [
-                node('h2:Name'),
+                node(`h2:${message.get('groupFormSectionNameHeading')}`),
-                node('p:Display a Name above this Group.')
+                node(`p:${message.get('groupFormSectionNameDescription')}`)
               ])
             ]
           }),
@@ -177,8 +179,8 @@ export const GroupForm = function({
           form.wrap({
             children: [
               node('div|class:group-form-description', [
-                node('h2:Toolbar'),
+                node(`h2:${message.get('groupFormSectionToolbarHeading')}`),
-                node('p:Display controls to open all or show/hide the Bookmarks in this Group.')
+                node(`p:${message.get('groupFormSectionToolbarDescription')}`)
               ])
             ]
           }),
@@ -206,8 +208,8 @@ export const GroupForm = function({
           form.wrap({
             children: [
               node('div|class:group-form-description', [
-                node('h2:Ordering'),
+                node(`h2:${message.get('groupFormSectionOrderingHeading')}`),
-                node('p:The position of this Group.')
+                node(`p:${message.get('groupFormSectionOrderingDescription')}`)
               ])
             ]
           }),

src/component/icon/index.js

@@ -105,6 +105,9 @@ icon.all = {
   },
   openAll: {
     path: 'M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z'
+  },
+  globe: {
+    path: 'M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z'
   }
 };
 

src/component/importForm/index.css

@@ -0,0 +1,7 @@
+:root {
+  --import-form-space: calc((var(--form-space) / 4) * 1em);
+}
+
+.import-form-description {
+  margin-bottom: var(--import-form-space);
+}

src/component/importForm/index.js

@@ -1,25 +1,28 @@
+import { message } from '../message';
 
 import * as form from '../form';
 
-
 import { Control_radio } from '../control/radio';
 import { Control_checkbox } from '../control/checkbox';
 
 import { node } from '../../utility/node';
 import { complexNode } from '../../utility/complexNode';
 
-export const ImportForm = function ({
+import './index.css';
+
+export const ImportForm = function({
   dataToImport = false,
   state = false
 } = {}) {
 
   this.element = {
     form: node('form|class:import-form'),
-    description: complexNode({
+    description: node('div|class:import-form-description', [
+      complexNode({
         tag: 'p',
-      text: 'You can restore all or parts of a backup file. The following data will be restored:',
+        text: message.get('dataFormDescription')
-      attr: [{ key: 'class', value: 'mb-5' }]
       })
+    ])
   };
 
   this.count = {
@@ -41,8 +44,11 @@ export const ImportForm = function ({
           object: state,
           path: 'bookmark.include',
           id: 'bookmark-include',
-          labelText: 'Bookmarks',
+          labelText: message.get('dataFormBookmarkIncludeLabel'),
-          description: [`This includes <strong>${this.count.bookmark()} ${this.count.bookmark() > 1 ? 'Bookmarks' : 'Bookmark'}</strong> in <strong>${dataToImport.bookmark.length} ${dataToImport.bookmark.length > 1 ? 'Groups' : 'Group'}.<strong>`, 'Bookmarks will keep any custom Colours, Accents and Borders when imported.'],
+          description: [
+            message.get('dataFormBookmarkIncludeDescriptionPara1'),
+            message.get('dataFormBookmarkIncludeDescriptionPara2')
+          ],
           action: () => {
             this.disable();
           }
@@ -50,8 +56,8 @@ export const ImportForm = function ({
         type: new Control_radio({
           object: state,
           radioGroup: [
-            { id: 'bookmark-type-restore', labelText: 'Replace existing bookmarks', value: 'restore' },
+            { id: 'bookmark-type-restore', labelText: message.get('dataFormBookmarkTypeRestore'), value: 'restore' },
-            { id: 'bookmark-type-append', labelText: 'Add to existing bookmarks', value: 'append' }
+            { id: 'bookmark-type-append', labelText: message.get('dataFormBookmarkTypeAppend'), value: 'append' }
           ],
           groupName: 'bookmark-type',
           path: 'bookmark.type'
@@ -62,8 +68,8 @@ export const ImportForm = function ({
           object: state,
           path: 'theme.include',
           id: 'theme-include',
-          labelText: 'Theme',
+          labelText: message.get('dataFormThemeIncludeLabel'),
-          description: 'This includes the Colour, Accent, Fonts, Background and any saved Custom Themes.'
+          description: message.get('dataFormThemeIncludeDescription')
         })
       },
       setup: {
@@ -71,8 +77,8 @@ export const ImportForm = function ({
           object: state,
           path: 'setup.include',
           id: 'setup-include',
-          labelText: 'Settings',
+          labelText: message.get('dataFormSetupIncludeLabel'),
-          description: 'This includes Layout size and position, Header area size, Bookmark area size and other user settings.'
+          description: message.get('dataFormSetupIncludeDescription')
         })
       }
     }

src/component/index.js

@@ -16,6 +16,7 @@ import { header } from './header';
 import { group } from './group';
 import { toolbar } from './toolbar';
 import { groupAndBookmark } from './groupAndBookmark';
+import { message } from './message';
 
 import * as form from './form';
 
@@ -38,5 +39,6 @@ export const component = {
   group,
   form,
   toolbar,
-  groupAndBookmark
+  groupAndBookmark,
+  message
 };

src/component/menu/index.js

@@ -1,23 +1,22 @@
 import { state } from '../state';
-import { APP_NAME } from '../../constant';
 
 import { MenuFrame } from '../menuFrame';
 
-
 const menu = {};
 
 menu.navData = [
-  // { name: 'Debug', active: true, overscroll: true, sub: ['Input', 'Button', 'Bookmark', 'Icon'] },
+  // { name: 'debug', active: true, overscroll: true, sub: ['input', 'button', 'bookmark', 'icon'] },
-  { name: 'Theme', active: true, overscroll: true, sub: ['Preset', 'Saved', 'Style', 'Colour', 'Accent', 'Font', 'Radius', 'Shadow', 'Shade', 'Opacity', 'Background', 'Layout', 'Header', 'Bookmark'] },
+  { name: 'theme', active: true, overscroll: true, sub: ['preset', 'saved', 'style', 'color', 'accent', 'font', 'radius', 'shadow', 'shade', 'opacity', 'background', 'layout', 'header', 'bookmark'] },
-  { name: 'Layout', active: false, overscroll: true, sub: ['Scaling', 'Area', 'Padding', 'Gutter', 'Alignment', 'Page'] },
+  { name: 'layout', active: false, overscroll: true, sub: ['scaling', 'area', 'padding', 'gutter', 'alignment', 'page'] },
-  { name: 'Header', active: false, overscroll: true, sub: ['Alignment', 'Greeting', 'Transitional words', 'Clock', 'Date', 'Search'] },
+  { name: 'header', active: false, overscroll: true, sub: ['alignment', 'greeting', 'transitional', 'clock', 'date', 'search'] },
-  { name: 'Bookmark', active: false, overscroll: true, sub: ['General', 'Style', 'Orientation', 'Sort'] },
+  { name: 'bookmark', active: false, overscroll: true, sub: ['general', 'style', 'orientation', 'sort'] },
-  { name: 'Group', active: false, overscroll: true, sub: ['Alignment', 'Name', 'Collapse', 'Toolbar'] },
+  { name: 'group', active: false, overscroll: true, sub: ['alignment', 'name', 'collapse', 'toolbar'] },
-  { name: 'Toolbar', active: false, overscroll: true, sub: ['Size', 'Location', 'Position', 'Controls'] },
+  { name: 'toolbar', active: false, overscroll: true, sub: ['size', 'location', 'position', 'controls'] },
-  { name: 'Data', active: false, overscroll: true, sub: ['Restore', 'Backup', 'Clear'] },
+  { name: 'data', active: false, overscroll: true, sub: ['restore', 'backup', 'clear'] },
-  { name: 'Support', active: false, overscroll: false },
+  { name: 'language', active: false, overscroll: false },
-  { name: 'Coffee', active: false, overscroll: false },
+  { name: 'support', active: false, overscroll: false },
-  { name: APP_NAME, active: false, overscroll: false }
+  { name: 'coffee', active: false, overscroll: false },
+  { name: 'app', active: false, overscroll: false }
 ];
 
 menu.mod = {};

src/component/menuContent/appSetting/index.js

@@ -1,3 +1,7 @@
+import { message } from '../../message';
+
+import * as form from '../../form';
+
 import { node } from '../../../utility/node';
 
 import { APP_NAME } from '../../../constant';
@@ -7,25 +11,29 @@ import { Splash } from '../../splash';
 
 const appSetting = {};
 
-appSetting[APP_NAME.toLowerCase()] = (parent) => {
+appSetting.app = (parent) => {
 
-  const githubLink = new Link({ text: 'GitHub.', href: `https://github.com/zombieFox/${APP_NAME}`, openNew: true });
+  appSetting.app.para1 = node(`p:${message.get('menuContentAppPara1')}`);
 
-  const redditLink = new Link({ text: `Reddit ${APP_NAME} community.`, href: `https://www.reddit.com/r/${APP_NAME}`, openNew: true });
+  appSetting.app.link1 = new Link({
+    text: message.get('menuContentAppLink1'),
+    href: `https://www.reddit.com/r/${APP_NAME}`,
+    openNew: true
+  });
 
-  const licenseLink = new Link({ text: 'GNU General Public License v3.0', href: `https://github.com/zombieFox/${APP_NAME}/blob/master/license`, openNew: true });
+  appSetting.app.para2 = node(`p:${message.get('menuContentAppPara2')}`);
 
-  const para1 = node('p');
+  appSetting.app.link2 = new Link({
+    text: message.get('menuContentAppLink2'),
+    href: `https://github.com/zombieFox/${APP_NAME}`,
+    openNew: true
+  });
 
-  para1.innerHTML = `This project can be found on ${githubLink.link().outerHTML}`;
+  appSetting.app.link3 = new Link({
-
+    text: message.get('menuContentAppLink3'),
-  const para2 = node('p');
+    href: `https://github.com/zombieFox/${APP_NAME}/blob/master/license`,
-
+    openNew: true
-  para2.innerHTML = `Share your setup with the ${redditLink.link().outerHTML}`;
+  });
-
-  const para3 = node('p');
-
-  para3.innerHTML = `${APP_NAME} uses the ${licenseLink.link().outerHTML}`;
 
   const splash = new Splash();
 
@@ -33,9 +41,33 @@ appSetting[APP_NAME.toLowerCase()] = (parent) => {
     node('div', [
       splash.splash(),
       node('hr'),
-      para1,
+      form.wrap({
-      para2,
+        children: [
-      para3
+          appSetting.app.para1,
+          form.indent({
+            children: [
+              node('p', [
+                appSetting.app.link1.link()
+              ])
+            ]
+          })
+        ]
+      }),
+      form.wrap({
+        children: [
+          appSetting.app.para2,
+          form.indent({
+            children: [
+              node('p', [
+                appSetting.app.link2.link()
+              ]),
+              node('p', [
+                appSetting.app.link3.link()
+              ])
+            ]
+          })
+        ]
+      })
     ])
   );
 

src/component/menuContent/bookmarkSetting/index.js

@@ -1,3 +1,5 @@
+import { message } from '../../message';
+
 import { state } from '../../state';
 import { data } from '../../data';
 import { bookmark } from '../../bookmark';
@@ -77,7 +79,7 @@ bookmarkSetting.general = (parent) => {
     object: state.get.current(),
     id: 'bookmark-show',
     path: 'bookmark.show',
-    labelText: 'Show Bookmarks',
+    labelText: message.get('menuContentBookmarkGeneralShow'),
     action: () => {
 
       layout.area.assemble();
@@ -111,7 +113,7 @@ bookmarkSetting.general = (parent) => {
     object: state.get.current(),
     id: 'bookmark-url-show',
     path: 'bookmark.url.show',
-    labelText: 'Show URL on Bookmark hover',
+    labelText: message.get('menuContentBookmarkGeneralUrlShow'),
     action: () => {
       applyCSSState('bookmark.url.show');
       data.save();
@@ -122,7 +124,7 @@ bookmarkSetting.general = (parent) => {
     object: state.get.current(),
     id: 'bookmark-line-show',
     path: 'bookmark.line.show',
-    labelText: 'Show Bookmark line',
+    labelText: message.get('menuContentBookmarkGeneralLineShow'),
     action: () => {
       applyCSSState('bookmark.line.show');
       data.save();
@@ -133,8 +135,8 @@ bookmarkSetting.general = (parent) => {
     object: state.get.current(),
     id: 'bookmark-shadow-show',
     path: 'bookmark.shadow.show',
-    labelText: 'Show shadow on Bookmark hover',
+    labelText: message.get('menuContentBookmarkGeneralShadowShowLabel'),
-    description: 'Effects may not be visible if Theme Shadow is set to 0.',
+    description: message.get('menuContentBookmarkGeneralShadowShowDescription'),
     action: () => {
       applyCSSState('bookmark.shadow.show');
       data.save();
@@ -145,7 +147,7 @@ bookmarkSetting.general = (parent) => {
     object: state.get.current(),
     id: 'bookmark-hoverScale-show',
     path: 'bookmark.hoverScale.show',
-    labelText: 'Grow on Bookmark hover',
+    labelText: message.get('menuContentBookmarkGeneralHoverScaleShow'),
     action: () => {
       applyCSSState('bookmark.hoverScale.show');
       data.save();
@@ -156,7 +158,7 @@ bookmarkSetting.general = (parent) => {
     object: state.get.current(),
     id: 'bookmark-newTab',
     path: 'bookmark.newTab',
-    labelText: 'Open Bookmarks in a new tab',
+    labelText: message.get('menuContentBookmarkGeneralNewTab'),
     action: () => {
 
       groupAndBookmark.render();
@@ -184,7 +186,7 @@ bookmarkSetting.general = (parent) => {
     object: state.get.current(),
     path: 'bookmark.size',
     id: 'bookmark-size',
-    labelText: 'Bookmark size',
+    labelText: message.get('menuContentBookmarkGeneralSize'),
     value: state.get.current().bookmark.size,
     defaultValue: state.get.default().bookmark.size,
     min: state.get.minMax().bookmark.size.min,
@@ -241,8 +243,8 @@ bookmarkSetting.style = (parent) => {
   bookmarkSetting.control.style = new Control_radio({
     object: state.get.current(),
     radioGroup: [
-      { id: 'bookmark-style-block', labelText: 'Block', description: 'Square shaped Bookmark tiles.', value: 'block' },
+      { id: 'bookmark-style-block', labelText: message.get('menuContentBookmarkStyleBlockLabel'), description: message.get('menuContentBookmarkStyleBlockDescription'), value: 'block' },
-      { id: 'bookmark-style-list', labelText: 'List', description: 'Short and wide Bookmark tiles.', value: 'list' }
+      { id: 'bookmark-style-list', labelText: message.get('menuContentBookmarkStyleListLabel'), description: message.get('menuContentBookmarkStyleListDescription'), value: 'list' }
     ],
     groupName: 'bookmark-style',
     path: 'bookmark.style',
@@ -296,8 +298,8 @@ bookmarkSetting.orientation = (parent) => {
   bookmarkSetting.control.orientation.orientationElement = new Control_radio({
     object: state.get.current(),
     radioGroup: [
-      { id: 'bookmark-orientation-top', labelText: 'Top', value: 'top' },
+      { id: 'bookmark-orientation-top', labelText: message.get('menuContentBookmarkOrientationTop'), value: 'top' },
-      { id: 'bookmark-orientation-bottom', labelText: 'Bottom', value: 'bottom' }
+      { id: 'bookmark-orientation-bottom', labelText: message.get('menuContentBookmarkOrientationBottom'), value: 'bottom' }
     ],
     groupName: 'bookmark-orientation',
     path: 'bookmark.orientation',
@@ -325,7 +327,7 @@ bookmarkSetting.orientation = (parent) => {
   });
 
   bookmarkSetting.control.orientation.orientationHelper = new Control_helperText({
-    text: ['Display the URL and Controls either at the top or bottom of a Bookmark Tile.']
+    text: [message.get('menuContentBookmarkOrientationHelperPara1')]
   });
 
   parent.appendChild(
@@ -340,7 +342,7 @@ bookmarkSetting.orientation = (parent) => {
 bookmarkSetting.sort = (parent) => {
 
   bookmarkSetting.control.sort.letter = new Button({
-    text: 'By letter',
+    text: message.get('menuContentBookmarkSortLetter'),
     style: ['line'],
     func: () => {
 
@@ -368,7 +370,7 @@ bookmarkSetting.sort = (parent) => {
   });
 
   bookmarkSetting.control.sort.icon = new Button({
-    text: 'By icon',
+    text: message.get('menuContentBookmarkSortIcon'),
     style: ['line'],
     func: () => {
 
@@ -396,7 +398,7 @@ bookmarkSetting.sort = (parent) => {
   });
 
   bookmarkSetting.control.sort.name = new Button({
-    text: 'By name',
+    text: message.get('menuContentBookmarkSortName'),
     style: ['line'],
     func: () => {
 

src/component/menuContent/coffeeSetting/index.js

@@ -1,10 +1,9 @@
-import { APP_NAME } from '../../../constant';
+import { message } from '../../message';
 
 import * as form from '../../form';
 
 import { Link } from '../../link';
 
-
 import { node } from '../../../utility/node';
 import { complexNode } from '../../../utility/complexNode';
 
@@ -16,11 +15,11 @@ coffeeSetting.coffee = (parent) => {
     node('div', [
       complexNode({
         tag: 'p',
-        text: APP_NAME + ' is free, appreciation is welcome in the form of coffee!'
+        text: message.get('menuContentCoffeePara')
       }),
       form.wrap({
         children: [(new Link({
-          text: 'Buy me a coffee',
+          text: message.get('menuContentCoffeeButton'),
           href: 'https://www.buymeacoffee.com/zombieFox',
           iconName: 'coffee',
           iconPosition: 'left',

src/component/menuContent/dataSetting/index.js

@@ -1,6 +1,7 @@
+import { message } from '../../message';
+
 import { data } from '../../data';
 import { menu } from '../../menu';
-import { APP_NAME } from '../../../constant';
 
 import * as form from '../../form';
 
@@ -28,7 +29,7 @@ dataSetting.restore = (parent) => {
     id: 'restore-data',
     type: 'file',
     inputHide: true,
-    labelText: 'Import from file',
+    labelText: message.get('menuContentDataRestoreFile'),
     inputButtonStyle: ['line'],
     action: () => {
       data.import.file({
@@ -40,7 +41,7 @@ dataSetting.restore = (parent) => {
   });
 
   dataSetting.control.restore.paste = new Button({
-    text: 'Import from clipboard',
+    text: message.get('menuContentDataRestoreClipboard'),
     style: ['line'],
     func: () => {
       data.import.paste({
@@ -50,7 +51,7 @@ dataSetting.restore = (parent) => {
   });
 
   dataSetting.control.restore.restoreHelper = new Control_helperText({
-    text: ['Restore a previously exported ' + APP_NAME + ' backup.']
+    text: [message.get('menuContentDataRestoreHelperPara1')]
   });
 
   dataSetting.control.restore.feedback = form.feedback();
@@ -58,7 +59,7 @@ dataSetting.restore = (parent) => {
   data.feedback.empty.render(dataSetting.control.restore.feedback);
 
   dataSetting.control.restore.drop = new DropFile({
-    heading: 'Or drop a ' + APP_NAME + ' backup file here.',
+    heading: message.get('menuContentDataRestoreDrop'),
     dropAaction: () => {
       data.import.drop({
         fileList: dataSetting.control.restore.drop.files,
@@ -88,7 +89,7 @@ dataSetting.restore = (parent) => {
 dataSetting.backup = (parent) => {
 
   dataSetting.control.backup.export = new Button({
-    text: 'Export data',
+    text: message.get('menuContentDataBackupFile'),
     style: ['line'],
     func: () => {
       data.export();
@@ -96,7 +97,7 @@ dataSetting.backup = (parent) => {
   });
 
   dataSetting.control.backup.copy = new Button({
-    text: 'Copy to clipboard',
+    text: message.get('menuContentDataBackupClipboard'),
     style: ['line'],
     func: () => {
       navigator.clipboard.writeText(JSON.stringify(data.load()));
@@ -104,7 +105,10 @@ dataSetting.backup = (parent) => {
   });
 
   dataSetting.control.backup.exportHelper = new Control_helperText({
-    text: ['Download a backup of your ' + APP_NAME + ' Bookmarks and Settings.', 'This file can later be imported on this or another deivce.']
+    text: [
+      message.get('menuContentDataBackupHelperPara1'),
+      message.get('menuContentDataBackupHelperPara2')
+    ]
   });
 
   parent.appendChild(
@@ -131,7 +135,7 @@ dataSetting.backup = (parent) => {
 dataSetting.clear = (parent) => {
 
   dataSetting.control.clear.all = new Button({
-    text: 'Clear all data',
+    text: message.get('menuContentDataClearAll'),
     style: ['line'],
     func: () => {
       menu.close();
@@ -140,7 +144,7 @@ dataSetting.clear = (parent) => {
   });
 
   dataSetting.control.clear.partial = new Button({
-    text: 'Clear all except bookmarks',
+    text: message.get('menuContentDataClearPartial'),
     style: ['line'],
     func: () => {
       menu.close();
@@ -148,16 +152,24 @@ dataSetting.clear = (parent) => {
     }
   });
 
+  dataSetting.control.clear.link = new Link({
+    text: message.get('menuContentDataClearAlertLink'),
+    href: '#menu-content-item-backup'
+  });
+
   dataSetting.control.clear.alert = new Alert({
     iconName: 'warning',
     children: [
-      node('p:You will lose Bookmarks by clearing all data.|class:small'),
+      node(`p:${message.get('menuContentDataClearAlertPara')}|class:small`),
-      node(`p:Have you ${(new Link({ text: 'backed up your data?', href: '#menu-content-item-backup' })).link().outerHTML}|class:small`)
+      node('p|class:small', dataSetting.control.clear.link.link())
     ]
   });
 
   dataSetting.control.clear.helper = new Control_helperText({
-    text: ['Clear all data to reset ' + APP_NAME + ' to the default state.', 'Alternatively, it is possible to wipe all settings but keep the current Bookmarks and Groups.']
+    text: [
+      message.get('menuContentDataClearHelperPara1'),
+      message.get('menuContentDataClearHelperPara2')
+    ]
   });
 
   parent.appendChild(

src/component/menuContent/groupSetting/index.js

@@ -1,3 +1,5 @@
+import { message } from '../../message';
+
 import { state } from '../../state';
 import { data } from '../../data';
 import { bookmark } from '../../bookmark';
@@ -124,11 +126,11 @@ groupSetting.alignment = (parent) => {
   groupSetting.control.alignment.justify = new Control_radioGrid({
     object: state.get.current(),
     radioGroup: [
-      { id: 'group-area-justify-left', labelText: 'Left', value: 'left', position: 1 },
+      { id: 'group-area-justify-left', labelText: message.get('menuContentGroupAlignmentJustifyLeft'), value: 'left', position: 1 },
-      { id: 'group-area-justify-center', labelText: 'Center', value: 'center', position: 2 },
+      { id: 'group-area-justify-center', labelText: message.get('menuContentGroupAlignmentJustifyCenter'), value: 'center', position: 2 },
-      { id: 'group-area-justify-right', labelText: 'Right', value: 'right', position: 3 }
+      { id: 'group-area-justify-right', labelText: message.get('menuContentGroupAlignmentJustifyRight'), value: 'right', position: 3 }
     ],
-    label: 'Group details area alignment',
+    label: message.get('menuContentGroupAlignmentJustifyLabel'),
     groupName: 'group-area-justify',
     path: 'group.area.justify',
     gridSize: '3x1',
@@ -140,9 +142,10 @@ groupSetting.alignment = (parent) => {
 
   groupSetting.control.alignment.order = new Control_radio({
     object: state.get.current(),
+    label: message.get('menuContentGroupAlignmentOrderLabel'),
     radioGroup: [
-      { id: 'group-order-header-body', labelText: 'Group details then Bookmarks', description: 'Order the Group details area to appear before the Bookmarks area.', value: 'header-body' },
+      { id: 'group-order-header-body', labelText: message.get('menuContentGroupAlignmentOrderHeaderBodyLabel'), description: message.get('menuContentGroupAlignmentOrderHeaderBodyDescription'), value: 'header-body' },
-      { id: 'group-order-body-header', labelText: 'Bookmarks then Group details', description: 'Order the Bookmarks area to appear before the Group details area.', value: 'body-header' }
+      { id: 'group-order-body-header', labelText: message.get('menuContentGroupAlignmentOrderBodyHeaderLabel'), description: message.get('menuContentGroupAlignmentOrderBodyHeaderDescription'), value: 'body-header' }
     ],
     groupName: 'group-order',
     path: 'group.order',
@@ -226,7 +229,7 @@ groupSetting.name = (parent) => {
     object: state.get.current(),
     path: 'group.name.size',
     id: 'group-name-size',
-    labelText: 'Name size',
+    labelText: message.get('menuContentGroupNameSize'),
     value: state.get.current().group.name.size,
     defaultValue: state.get.default().group.name.size,
     min: state.get.minMax().group.name.size.min,
@@ -270,7 +273,7 @@ groupSetting.name = (parent) => {
   });
 
   groupSetting.control.name.show = new Button({
-    text: 'Show all',
+    text: message.get('menuContentGroupNameShow'),
     style: ['line'],
     func: () => {
 
@@ -288,7 +291,7 @@ groupSetting.name = (parent) => {
   });
 
   groupSetting.control.name.hide = new Button({
-    text: 'Hide all',
+    text: message.get('menuContentGroupNameHide'),
     style: ['line'],
     func: () => {
 
@@ -306,7 +309,7 @@ groupSetting.name = (parent) => {
   });
 
   groupSetting.control.name.helper = new Control_helperText({
-    text: ['Group Names can also be changed by editing individual Groups.']
+    text: [message.get('menuContentGroupNameHelperPara1')]
   });
 
   parent.appendChild(
@@ -331,11 +334,11 @@ groupSetting.collapse = (parent) => {
 
   groupSetting.control.collapse = {
     show: new Button({
-      text: 'Collapse all groups',
+      text: message.get('menuContentGroupCollapseShow'),
       style: ['line'],
       func: () => {
 
-        bookmark.all.forEach(item => { item.collapse = true; });
+        bookmark.all.forEach(item => { item.collapse = false; });
 
         groupAndBookmark.render();
 
@@ -348,11 +351,11 @@ groupSetting.collapse = (parent) => {
       }
     }),
     hide: new Button({
-      text: 'Open all groups',
+      text: message.get('menuContentGroupCollapseHide'),
       style: ['line'],
       func: () => {
 
-        bookmark.all.forEach(item => { item.collapse = false; });
+        bookmark.all.forEach(item => { item.collapse = true; });
 
         groupAndBookmark.render();
 
@@ -390,7 +393,7 @@ groupSetting.toolbar = (parent) => {
     object: state.get.current(),
     path: 'group.toolbar.size',
     id: 'group-toolbar-size',
-    labelText: 'Group toolbar size',
+    labelText: message.get('menuContentGroupToolbarSize'),
     value: state.get.current().group.toolbar.size,
     defaultValue: state.get.default().group.toolbar.size,
     min: state.get.minMax().group.toolbar.size.min,
@@ -448,9 +451,11 @@ groupSetting.toolbar = (parent) => {
   });
 
   groupSetting.control.toolbar.collapse = {
-    label: new Control_label({ text: 'Group Collapse control' }),
+    label: new Control_label({
+      text: message.get('menuContentGroupToolbarCollapseLabel')
+    }),
     show: new Button({
-      text: 'Show all',
+      text: message.get('menuContentGroupToolbarCollapseShow'),
       style: ['line'],
       func: () => {
 
@@ -467,7 +472,7 @@ groupSetting.toolbar = (parent) => {
       }
     }),
     hide: new Button({
-      text: 'Hide all',
+      text: message.get('menuContentGroupToolbarCollapseHide'),
       style: ['line'],
       func: () => {
 
@@ -484,14 +489,16 @@ groupSetting.toolbar = (parent) => {
       }
     }),
     helper: new Control_helperText({
-      text: ['Group toolbar collapse button can also be changed by editing individual Groups.']
+      text: [message.get('menuContentGroupToolbarCollapseHelperPara1')]
     })
   };
 
   groupSetting.control.toolbar.openAll = {
-    label: new Control_label({ text: 'Group Open all control' }),
+    label: new Control_label({
+      text: message.get('menuContentGroupToolbarOpenAllLabel')
+    }),
     show: new Button({
-      text: 'Show all',
+      text: message.get('menuContentGroupToolbarOpenAllShow'),
       style: ['line'],
       func: () => {
 
@@ -508,7 +515,7 @@ groupSetting.toolbar = (parent) => {
       }
     }),
     hide: new Button({
-      text: 'Hide all',
+      text: message.get('menuContentGroupToolbarOpenAllHide'),
       style: ['line'],
       func: () => {
 
@@ -525,7 +532,7 @@ groupSetting.toolbar = (parent) => {
       }
     }),
     helper: new Control_helperText({
-      text: ['Group toolbar open all button can also be changed by editing individual Groups.']
+      text: [message.get('menuContentGroupToolbarOpenAllHelperPara1')]
     })
   };
 

src/component/menuContent/headerSetting/index.js

@@ -1,15 +1,15 @@
+import { message } from '../../message';
+
 import { state } from '../../state';
 import { data } from '../../data';
 import { header } from '../../header';
 import { layout } from '../../layout';
 import { searchEnginePreset } from '../../searchEnginePreset';
-import { APP_NAME } from '../../../constant';
 
 import * as form from '../../form';
 
 import { Collapse } from '../../collapse';
 import { Edge } from '../../edge';
-import { Link } from '../../link';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_radio } from '../../control/radio';
@@ -402,11 +402,11 @@ headerSetting.alignment = (parent) => {
   headerSetting.alignment.alignment = new Control_radioGrid({
     object: state.get.current(),
     radioGroup: [
-      { id: 'header-item-justify-left', labelText: 'Left', value: 'left', position: 1 },
+      { id: 'header-item-justify-left', labelText: message.get('menuContentHeaderAlignmentJustifyLeft'), value: 'left', position: 1 },
-      { id: 'header-item-justify-center', labelText: 'Center', value: 'center', position: 2 },
+      { id: 'header-item-justify-center', labelText: message.get('menuContentHeaderAlignmentJustifyCenter'), value: 'center', position: 2 },
-      { id: 'header-item-justify-right', labelText: 'Right', value: 'right', position: 3 }
+      { id: 'header-item-justify-right', labelText: message.get('menuContentHeaderAlignmentJustifyRight'), value: 'right', position: 3 }
     ],
-    label: 'Header item alignment',
+    label: message.get('menuContentHeaderAlignmentJustifyLabel'),
     groupName: 'header-item-justify',
     path: 'header.item.justify',
     gridSize: '3x1',
@@ -418,7 +418,7 @@ headerSetting.alignment = (parent) => {
 
   headerSetting.alignment.alignmentHelper = new Control_helperText({
     complexText: true,
-    text: [`Effects may not be visible if the ${(new Link({ text: 'Search box size', href: '#menu-content-item-search' })).link().outerHTML} size is set to Auto and grows to fill available space.`]
+    text: [message.get('menuContentHeaderAlignmentHelperPara1')]
   });
 
   parent.appendChild(
@@ -438,8 +438,8 @@ headerSetting.greeting = (parent) => {
     object: state.get.current(),
     path: 'header.greeting.show',
     id: 'header-greeting-show',
-    labelText: 'Show Greeting',
+    labelText: message.get('menuContentHeaderGreetingShow'),
-    action: function () {
+    action: () => {
       header.item.mod.order();
       header.item.clear();
       header.item.render();
@@ -459,7 +459,7 @@ headerSetting.greeting = (parent) => {
     object: state.get.current(),
     path: 'header.greeting.size',
     id: 'header-greeting-size',
-    labelText: 'Size',
+    labelText: message.get('menuContentHeaderGreetingSize'),
     value: state.get.current().header.greeting.size,
     defaultValue: state.get.default().header.greeting.size,
     min: state.get.minMax().header.greeting.size.min,
@@ -481,9 +481,9 @@ headerSetting.greeting = (parent) => {
     object: state.get.current(),
     path: 'header.greeting.newLine',
     id: 'header-greeting-newLine',
-    labelText: 'New line',
+    labelText: message.get('menuContentHeaderGreetingNewLineLabel'),
-    description: 'Force on to a new line and seperate from other Header items.',
+    description: message.get('menuContentHeaderGreetingNewLineDescription'),
-    action: function () {
+    action: () => {
       applyCSSState('header.greeting.newLine');
       data.save();
     }
@@ -491,13 +491,13 @@ headerSetting.greeting = (parent) => {
 
   headerSetting.control.greeting.type = new Control_radio({
     object: state.get.current(),
-    label: 'Wording',
+    label: message.get('menuContentHeaderGreetingTypeLabel'),
     radioGroup: [
-      { id: 'header-greeting-type-good', labelText: '"Good morning..."', value: 'good' },
+      { id: 'header-greeting-type-good', labelText: message.get('menuContentHeaderGreetingTypeGood'), value: 'good' },
-      { id: 'header-greeting-type-hello', labelText: '"Hello..."', value: 'hello' },
+      { id: 'header-greeting-type-hello', labelText: message.get('menuContentHeaderGreetingTypeHello'), value: 'hello' },
-      { id: 'header-greeting-type-hi', labelText: '"Hi..."', value: 'hi' },
+      { id: 'header-greeting-type-hi', labelText: message.get('menuContentHeaderGreetingTypeHi'), value: 'hi' },
-      { id: 'header-greeting-type-none', labelText: 'None', description: 'Useful for just displaying your name.', value: 'none' },
+      { id: 'header-greeting-type-none', labelText: message.get('menuContentHeaderGreetingTypeNoneLabel'), description: message.get('menuContentHeaderGreetingTypeNoneDescription'), value: 'none' },
-      { id: 'header-greeting-type-custom', labelText: 'Custom', description: ['Use your own greeting.', 'Defaults to "Good morning..." if left blank.'], value: 'custom' }
+      { id: 'header-greeting-type-custom', labelText: message.get('menuContentHeaderGreetingTypeCustomLabel'), description: [message.get('menuContentHeaderGreetingTypeCustomDescriptionPara1'), message.get('menuContentHeaderGreetingTypeCustomDescriptionPara2')], value: 'custom' }
     ],
     groupName: 'header-greeting-type',
     path: 'header.greeting.type',
@@ -516,8 +516,8 @@ headerSetting.greeting = (parent) => {
     path: 'header.greeting.custom',
     id: 'header-greeting-custom',
     value: state.get.current().header.greeting.custom,
-    placeholder: 'Howdy',
+    placeholder: message.get('menuContentHeaderGreetingCustomPlaceholder'),
-    labelText: 'Custom greeting text',
+    labelText: message.get('menuContentHeaderGreetingCustomLabel'),
     srOnly: true,
     action: () => {
       header.element.greeting.update();
@@ -543,8 +543,8 @@ headerSetting.greeting = (parent) => {
     path: 'header.greeting.name',
     id: 'header-greeting-name',
     value: state.get.current().header.greeting.name,
-    placeholder: 'Nickname, alias or superhero name',
+    placeholder: message.get('menuContentHeaderGreetingNamePlaceholder'),
-    labelText: 'Name',
+    labelText: message.get('menuContentHeaderGreetingNameLabel'),
     action: () => {
       header.element.greeting.update();
       data.save();
@@ -603,7 +603,7 @@ headerSetting.transitional = (parent) => {
     object: state.get.current(),
     path: 'header.transitional.show',
     id: 'header-transitional-show',
-    labelText: 'Show Transitional words',
+    labelText: message.get('menuContentHeaderTransitionalShowLabel'),
     action: () => {
       header.item.mod.order();
       header.item.clear();
@@ -621,14 +621,30 @@ headerSetting.transitional = (parent) => {
   });
 
   headerSetting.control.transitional.showHelper = new Control_helperText({
-    text: ['Only available when Date or Time is shown.']
+    text: [message.get('menuContentHeaderTransitionalShowHelperPara1')]
+  });
+
+  headerSetting.control.transitional.type = new Control_radio({
+    object: state.get.current(),
+    label: message.get('menuContentHeaderTransitionalTypeLabel'),
+    radioGroup: [
+      { id: 'header-transitional-type-time-and-date', labelText: message.get('menuContentHeaderTransitionalTypeTimeAndDate'), value: 'time-and-date' },
+      { id: 'header-transitional-type-its', labelText: message.get('menuContentHeaderTransitionalTypeIts'), value: 'its' }
+    ],
+    groupName: 'header-transitional-type',
+    path: 'header.transitional.type',
+    action: () => {
+      header.element.transitional.update();
+      headerSetting.disable();
+      data.save();
+    }
   });
 
   headerSetting.control.transitional.size = new Control_sliderSlim({
     object: state.get.current(),
     path: 'header.transitional.size',
     id: 'header-transitional-size',
-    labelText: 'Size',
+    labelText: message.get('menuContentHeaderTransitionalSize'),
     value: state.get.current().header.transitional.size,
     defaultValue: state.get.default().header.transitional.size,
     min: state.get.minMax().header.transitional.size.min,
@@ -650,26 +666,10 @@ headerSetting.transitional = (parent) => {
     object: state.get.current(),
     path: 'header.transitional.newLine',
     id: 'header-transitional-newLine',
-    labelText: 'New line',
+    labelText: message.get('menuContentHeaderTransitionalNewLineLabel'),
-    description: 'Force on to a new line and seperate from other Header items.',
+    description: message.get('menuContentHeaderTransitionalNewLineDescription'),
-    action: function () {
-      applyCSSState('header.transitional.newLine');
-      data.save();
-    }
-  });
-
-  headerSetting.control.transitional.type = new Control_radio({
-    object: state.get.current(),
-    label: 'Wording',
-    radioGroup: [
-      { id: 'header-transitional-type-time-and-date', labelText: '"The time and date is"', value: 'time-and-date' },
-      { id: 'header-transitional-type-its', labelText: '"It\'s"', value: 'its' }
-    ],
-    groupName: 'header-transitional-type',
-    path: 'header.transitional.type',
     action: () => {
-      header.element.transitional.update();
+      applyCSSState('header.transitional.newLine');
-      headerSetting.disable();
       data.save();
     }
   });
@@ -718,7 +718,7 @@ headerSetting.clock = (parent) => {
     object: state.get.current(),
     path: 'header.clock.hour.show',
     id: 'header-clock-hour-show',
-    labelText: 'Show hours',
+    labelText: message.get('menuContentHeaderClockHourShow'),
     action: () => {
       header.item.mod.order();
       header.item.clear();
@@ -739,8 +739,8 @@ headerSetting.clock = (parent) => {
   headerSetting.control.clock.hour.display = new Control_radio({
     object: state.get.current(),
     radioGroup: [
-      { id: 'header-clock-hour-display-number', labelText: 'As number', value: 'number' },
+      { id: 'header-clock-hour-display-number', labelText: message.get('menuContentHeaderClockHourDisplayNumber'), value: 'number' },
-      { id: 'header-clock-hour-display-word', labelText: 'As word', value: 'word' }
+      { id: 'header-clock-hour-display-word', labelText: message.get('menuContentHeaderClockHourDisplayWord'), value: 'word' }
     ],
     groupName: 'header-clock-hour-display',
     path: 'header.clock.hour.display',
@@ -768,7 +768,7 @@ headerSetting.clock = (parent) => {
     object: state.get.current(),
     path: 'header.clock.minute.show',
     id: 'header-clock-minute-show',
-    labelText: 'Show minutes',
+    labelText: message.get('menuContentHeaderClockMinuteShow'),
     action: () => {
       header.item.mod.order();
       header.item.clear();
@@ -789,8 +789,8 @@ headerSetting.clock = (parent) => {
   headerSetting.control.clock.minute.display = new Control_radio({
     object: state.get.current(),
     radioGroup: [
-      { id: 'header-clock-minute-display-number', labelText: 'As number', value: 'number' },
+      { id: 'header-clock-minute-display-number', labelText: message.get('menuContentHeaderClockMinuteDisplayNumber'), value: 'number' },
-      { id: 'header-clock-minute-display-word', labelText: 'As word', value: 'word' }
+      { id: 'header-clock-minute-display-word', labelText: message.get('menuContentHeaderClockMinuteDisplayWord'), value: 'word' }
     ],
     groupName: 'header-clock-minute-display',
     path: 'header.clock.minute.display',
@@ -818,7 +818,7 @@ headerSetting.clock = (parent) => {
     object: state.get.current(),
     path: 'header.clock.second.show',
     id: 'header-clock-second-show',
-    labelText: 'Show seconds',
+    labelText: message.get('menuContentHeaderClockSecondShow'),
     action: () => {
       header.item.mod.order();
       header.item.clear();
@@ -839,8 +839,8 @@ headerSetting.clock = (parent) => {
   headerSetting.control.clock.second.display = new Control_radio({
     object: state.get.current(),
     radioGroup: [
-      { id: 'header-clock-second-display-number', labelText: 'As number', value: 'number' },
+      { id: 'header-clock-second-display-number', labelText: message.get('menuContentHeaderClockSecondDisplayNumber'), value: 'number' },
-      { id: 'header-clock-second-display-word', labelText: 'As word', value: 'word' }
+      { id: 'header-clock-second-display-word', labelText: message.get('menuContentHeaderClockSecondDisplayWord'), value: 'word' }
     ],
     groupName: 'header-clock-second-display',
     path: 'header.clock.second.display',
@@ -862,13 +862,55 @@ headerSetting.clock = (parent) => {
     }]
   });
 
+  headerSetting.control.clock.separator = {};
+
+  headerSetting.control.clock.separator.show = new Control_checkbox({
+    object: state.get.current(),
+    path: 'header.clock.separator.show',
+    id: 'header-clock-separator-show',
+    labelText: message.get('menuContentHeaderClockSeparatorShow'),
+    action: () => {
+      header.element.clock.update();
+      headerSetting.control.clock.separator.collapse.update();
+      headerSetting.disable();
+      data.save();
+    }
+  });
+
+  headerSetting.control.clock.separator.text = new Control_textReset({
+    object: state.get.current(),
+    path: 'header.clock.separator.text',
+    id: 'header-clock-separator-text',
+    value: state.get.current().header.clock.separator.text,
+    defaultValue: state.get.default().header.clock.separator.text,
+    placeholder: message.get('menuContentHeaderClockSeparatorPlaceholder'),
+    labelText: message.get('menuContentHeaderClockSeparatorLabel'),
+    srOnly: true,
+    action: () => {
+      header.element.clock.update();
+      data.save();
+    }
+  });
+
+  headerSetting.control.clock.separator.area = node('div', [
+    headerSetting.control.clock.separator.text.wrap()
+  ]);
+
+  headerSetting.control.clock.separator.collapse = new Collapse({
+    type: 'checkbox',
+    checkbox: headerSetting.control.clock.separator.show,
+    target: [{
+      content: headerSetting.control.clock.separator.area
+    }]
+  });
+
   headerSetting.control.clock.hour24 = {
     show: new Control_checkbox({
       object: state.get.current(),
       path: 'header.clock.hour24.show',
       id: 'header-clock-hour24-show',
-      labelText: '24 hours',
+      labelText: message.get('menuContentHeaderClockHour24'),
-      action: function () {
+      action: () => {
         header.element.clock.update();
         headerSetting.disable();
         data.save();
@@ -881,8 +923,8 @@ headerSetting.clock = (parent) => {
       object: state.get.current(),
       path: 'header.clock.meridiem.show',
       id: 'header-clock-meridiem-show',
-      labelText: 'AM / PM',
+      labelText: message.get('menuContentHeaderClockMeridiem'),
-      action: function () {
+      action: () => {
         header.element.clock.update();
         data.save();
       }
@@ -893,7 +935,7 @@ headerSetting.clock = (parent) => {
     object: state.get.current(),
     path: 'header.clock.size',
     id: 'header-clock-size',
-    labelText: 'Size',
+    labelText: message.get('menuContentHeaderClockSize'),
     value: state.get.current().header.clock.size,
     defaultValue: state.get.default().header.clock.size,
     min: state.get.minMax().header.clock.size.min,
@@ -915,56 +957,14 @@ headerSetting.clock = (parent) => {
     object: state.get.current(),
     path: 'header.clock.newLine',
     id: 'header-clock-newLine',
-    labelText: 'New line',
+    labelText: message.get('menuContentHeaderClockNewLineLabel'),
-    description: 'Force on to a new line and seperate from other Header items.',
+    description: message.get('menuContentHeaderClockNewLineDescription'),
-    action: function () {
+    action: () => {
       applyCSSState('header.clock.newLine');
       data.save();
     }
   });
 
-  headerSetting.control.clock.separator = {};
-
-  headerSetting.control.clock.separator.show = new Control_checkbox({
-    object: state.get.current(),
-    path: 'header.clock.separator.show',
-    id: 'header-clock-separator-show',
-    labelText: 'Show separator',
-    action: () => {
-      header.element.clock.update();
-      headerSetting.control.clock.separator.collapse.update();
-      headerSetting.disable();
-      data.save();
-    }
-  });
-
-  headerSetting.control.clock.separator.text = new Control_textReset({
-    object: state.get.current(),
-    path: 'header.clock.separator.text',
-    id: 'header-clock-separator-text',
-    value: state.get.current().header.clock.separator.text,
-    defaultValue: state.get.default().header.clock.separator.text,
-    placeholder: ':',
-    labelText: 'Separator character',
-    srOnly: true,
-    action: () => {
-      header.element.clock.update();
-      data.save();
-    }
-  });
-
-  headerSetting.control.clock.separator.area = node('div', [
-    headerSetting.control.clock.separator.text.wrap()
-  ]);
-
-  headerSetting.control.clock.separator.collapse = new Collapse({
-    type: 'checkbox',
-    checkbox: headerSetting.control.clock.separator.show,
-    target: [{
-      content: headerSetting.control.clock.separator.area
-    }]
-  });
-
   headerSetting.control.clock.area = node('div', [
     node('hr'),
     headerSetting.control.clock.separator.show.wrap(),
@@ -1050,7 +1050,7 @@ headerSetting.date = (parent) => {
     object: state.get.current(),
     path: 'header.date.day.show',
     id: 'header-date-day-show',
-    labelText: 'Show Day',
+    labelText: message.get('menuContentHeaderDateDayShow'),
     action: () => {
       header.item.mod.order();
       header.item.clear();
@@ -1071,8 +1071,8 @@ headerSetting.date = (parent) => {
   headerSetting.control.date.day.display = new Control_radio({
     object: state.get.current(),
     radioGroup: [
-      { id: 'header-date-day-display-number', labelText: 'As number', value: 'number' },
+      { id: 'header-date-day-display-number', labelText: message.get('menuContentHeaderDateDayDisplayNumber'), value: 'number' },
-      { id: 'header-date-day-display-word', labelText: 'As word', value: 'word' }
+      { id: 'header-date-day-display-word', labelText: message.get('menuContentHeaderDateDayDisplayWord'), value: 'word' }
     ],
     groupName: 'header-date-day-display',
     path: 'header.date.day.display',
@@ -1093,10 +1093,10 @@ headerSetting.date = (parent) => {
 
   headerSetting.control.date.day.weekStart = new Control_radio({
     object: state.get.current(),
-    label: 'Start of the week',
+    label: message.get('menuContentHeaderDateDayDisplayWeekStartLabel'),
     radioGroup: [
-      { id: 'header-date-day-week-start-monday', labelText: 'Monday', value: 'monday' },
+      { id: 'header-date-day-week-start-monday', labelText: message.get('menuContentHeaderDateDayDisplayWeekStartMonday'), value: 'monday' },
-      { id: 'header-date-day-week-start-sunday', labelText: 'Sunday', value: 'sunday' }
+      { id: 'header-date-day-week-start-sunday', labelText: message.get('menuContentHeaderDateDayDisplayWeekStartSunday'), value: 'sunday' }
     ],
     groupName: 'header-date-day-week-start',
     path: 'header.date.day.weekStart',
@@ -1116,10 +1116,10 @@ headerSetting.date = (parent) => {
 
   headerSetting.control.date.day.length = new Control_radio({
     object: state.get.current(),
-    label: 'Word length',
+    label: message.get('menuContentHeaderDateDayDisplayLengthLabel'),
     radioGroup: [
-      { id: 'header-date-day-length-long', labelText: 'Long', value: 'long' },
+      { id: 'header-date-day-length-long', labelText: message.get('menuContentHeaderDateDayDisplayLengthLong'), value: 'long' },
-      { id: 'header-date-day-length-short', labelText: 'Short', value: 'short' }
+      { id: 'header-date-day-length-short', labelText: message.get('menuContentHeaderDateDayDisplayLengthShort'), value: 'short' }
     ],
     groupName: 'header-date-day-length',
     path: 'header.date.day.length',
@@ -1158,7 +1158,7 @@ headerSetting.date = (parent) => {
     object: state.get.current(),
     path: 'header.date.date.show',
     id: 'header-date-date-show',
-    labelText: 'Show Date',
+    labelText: message.get('menuContentHeaderDateDateShow'),
     action: () => {
       header.item.mod.order();
       header.item.clear();
@@ -1179,8 +1179,8 @@ headerSetting.date = (parent) => {
   headerSetting.control.date.date.display = new Control_radio({
     object: state.get.current(),
     radioGroup: [
-      { id: 'header-date-date-display-number', labelText: 'As number', value: 'number' },
+      { id: 'header-date-date-display-number', labelText: message.get('menuContentHeaderDateDateDisplayNumber'), value: 'number' },
-      { id: 'header-date-date-display-word', labelText: 'As word', value: 'word' }
+      { id: 'header-date-date-display-word', labelText: message.get('menuContentHeaderDateDateDisplayWord'), value: 'word' }
     ],
     groupName: 'header-date-date-display',
     path: 'header.date.date.display',
@@ -1202,7 +1202,7 @@ headerSetting.date = (parent) => {
     object: state.get.current(),
     path: 'header.date.date.ordinal',
     id: 'header-date-date-ordinal',
-    labelText: 'Ordinal numbers',
+    labelText: message.get('menuContentHeaderDateDateDisplayOrdinal'),
     action: () => {
       header.element.date.update();
       data.save();
@@ -1228,7 +1228,7 @@ headerSetting.date = (parent) => {
     object: state.get.current(),
     path: 'header.date.month.show',
     id: 'header-date-month-show',
-    labelText: 'Show Month',
+    labelText: message.get('menuContentHeaderDateMonthShow'),
     action: () => {
       header.item.mod.order();
       header.item.clear();
@@ -1249,8 +1249,8 @@ headerSetting.date = (parent) => {
   headerSetting.control.date.month.display = new Control_radio({
     object: state.get.current(),
     radioGroup: [
-      { id: 'header-date-month-display-number', labelText: 'As number', value: 'number' },
+      { id: 'header-date-month-display-number', labelText: message.get('menuContentHeaderDateMonthDisplayNumber'), value: 'number' },
-      { id: 'header-date-month-display-word', labelText: 'As word', value: 'word' }
+      { id: 'header-date-month-display-word', labelText: message.get('menuContentHeaderDateMonthDisplayWord'), value: 'word' }
     ],
     groupName: 'header-date-month-display',
     path: 'header.date.month.display',
@@ -1271,10 +1271,10 @@ headerSetting.date = (parent) => {
 
   headerSetting.control.date.month.length = new Control_radio({
     object: state.get.current(),
-    label: 'Word length',
+    label: message.get('menuContentHeaderDateMonthDisplayLengthLabel'),
     radioGroup: [
-      { id: 'header-date-month-length-long', labelText: 'Long', value: 'long' },
+      { id: 'header-date-month-length-long', labelText: message.get('menuContentHeaderDateMonthDisplayLengthLong'), value: 'long' },
-      { id: 'header-date-month-length-short', labelText: 'Short', value: 'short' }
+      { id: 'header-date-month-length-short', labelText: message.get('menuContentHeaderDateMonthDisplayLengthShort'), value: 'short' }
     ],
     groupName: 'header-date-month-length',
     path: 'header.date.month.length',
@@ -1296,7 +1296,7 @@ headerSetting.date = (parent) => {
     object: state.get.current(),
     path: 'header.date.month.ordinal',
     id: 'header-date-month-ordinal',
-    labelText: 'Ordinal numbers',
+    labelText: message.get('menuContentHeaderDateMonthDisplayOrdinal'),
     action: () => {
       header.element.date.update();
       data.save();
@@ -1324,7 +1324,7 @@ headerSetting.date = (parent) => {
     object: state.get.current(),
     path: 'header.date.year.show',
     id: 'header-date-year-show',
-    labelText: 'Show Year',
+    labelText: message.get('menuContentHeaderDateYearShow'),
     action: () => {
       header.item.mod.order();
       header.item.clear();
@@ -1345,8 +1345,8 @@ headerSetting.date = (parent) => {
   headerSetting.control.date.year.display = new Control_radio({
     object: state.get.current(),
     radioGroup: [
-      { id: 'header-date-year-display-number', labelText: 'As number', value: 'number' },
+      { id: 'header-date-year-display-number', labelText: message.get('menuContentHeaderDateYearDisplayNumber'), value: 'number' },
-      { id: 'header-date-year-display-word', labelText: 'As word', value: 'word' }
+      { id: 'header-date-year-display-word', labelText: message.get('menuContentHeaderDateYearDisplayWord'), value: 'word' }
     ],
     groupName: 'header-date-year-display',
     path: 'header.date.year.display',
@@ -1382,7 +1382,7 @@ headerSetting.date = (parent) => {
     object: state.get.current(),
     path: 'header.date.separator.show',
     id: 'header-date-separator-show',
-    labelText: 'Show separator',
+    labelText: message.get('menuContentHeaderDateSeparatorShow'),
     action: () => {
       header.element.date.update();
       headerSetting.control.date.separator.collapse.update();
@@ -1402,8 +1402,8 @@ headerSetting.date = (parent) => {
     id: 'header-date-separator-text',
     value: state.get.current().header.date.separator.text,
     defaultValue: state.get.default().header.date.separator.text,
-    placeholder: ':',
+    placeholder: message.get('menuContentHeaderDateSeparatorPlaceholder'),
-    labelText: 'Separator character',
+    labelText: message.get('menuContentHeaderDateSeparatorLabel'),
     srOnly: true,
     action: () => {
       header.element.date.update();
@@ -1425,10 +1425,10 @@ headerSetting.date = (parent) => {
 
   headerSetting.control.date.format = new Control_radio({
     object: state.get.current(),
-    label: 'Format',
+    label: message.get('menuContentHeaderDateFormatLabel'),
     radioGroup: [
-      { id: 'header-date-format-date-month', labelText: 'Date / Month', value: 'date-month' },
+      { id: 'header-date-format-date-month', labelText: message.get('menuContentHeaderDateFormatDateMonth'), value: 'date-month' },
-      { id: 'header-date-format-month-date', labelText: 'Month / Date', value: 'month-date' }
+      { id: 'header-date-format-month-date', labelText: message.get('menuContentHeaderDateFormatMonthDate'), value: 'month-date' }
     ],
     groupName: 'header-date-format',
     path: 'header.date.format',
@@ -1442,7 +1442,7 @@ headerSetting.date = (parent) => {
     object: state.get.current(),
     path: 'header.date.size',
     id: 'header-date-size',
-    labelText: 'Size',
+    labelText: message.get('menuContentHeaderDateSize'),
     value: state.get.current().header.date.size,
     defaultValue: state.get.default().header.date.size,
     min: state.get.minMax().header.date.size.min,
@@ -1464,9 +1464,9 @@ headerSetting.date = (parent) => {
     object: state.get.current(),
     path: 'header.date.newLine',
     id: 'header-date-newLine',
-    labelText: 'New line',
+    labelText: message.get('menuContentHeaderDateNewLineLabel'),
-    description: 'Force on to a new line and seperate from other Header items.',
+    description: message.get('menuContentHeaderDateNewLineDescription'),
-    action: function () {
+    action: () => {
       applyCSSState('header.date.newLine');
       data.save();
     }
@@ -1532,7 +1532,7 @@ headerSetting.search = (parent) => {
     object: state.get.current(),
     path: 'header.search.show',
     id: 'header-search-show',
-    labelText: 'Show Search',
+    labelText: message.get('menuContentHeaderSearchShow'),
     action: () => {
       header.item.mod.order();
       header.item.clear();
@@ -1549,204 +1549,13 @@ headerSetting.search = (parent) => {
     }
   });
 
-  headerSetting.control.search.size = new Control_sliderSlim({
-    object: state.get.current(),
-    path: 'header.search.size',
-    id: 'header-search-size',
-    labelText: 'Size',
-    value: state.get.current().header.search.size,
-    defaultValue: state.get.default().header.search.size,
-    min: state.get.minMax().header.search.size.min,
-    max: state.get.minMax().header.search.size.max,
-    action: () => {
-      applyCSSVar('header.search.size');
-      headerSetting.edge.search.size.track();
-      data.save();
-    },
-    mouseDownAction: () => {
-      headerSetting.edge.search.size.show();
-    },
-    mouseUpAction: () => {
-      headerSetting.edge.search.size.hide();
-    }
-  });
-
-  headerSetting.control.search.newTab = new Control_checkbox({
-    object: state.get.current(),
-    path: 'header.search.newTab',
-    id: 'header-search-newTab',
-    labelText: 'Open Search results in a new tab',
-    action: function () {
-      header.item.mod.order();
-      header.item.clear();
-      header.item.render();
-      layout.area.assemble();
-      headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
-      headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
-      headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
-      headerSetting.edge.date.size.update.primary(header.element.date.date());
-      headerSetting.edge.search.size.update.primary(header.element.search.search());
-      data.save();
-    }
-  });
-
-  headerSetting.control.search.newLine = new Control_checkbox({
-    object: state.get.current(),
-    path: 'header.search.newLine',
-    id: 'header-search-newLine',
-    labelText: 'New line',
-    description: 'Force on to a new line and seperate from other Header items.',
-    action: function () {
-      applyCSSState('header.search.newLine');
-      data.save();
-    }
-  });
-
-  const searchEngineList = [];
-
-  for (let key in searchEnginePreset) {
-
-    searchEngineList.push({ id: `header-search-engine-selected-${key}`, labelText: searchEnginePreset[key].name, value: key });
-
-  }
-
-  searchEngineList.push({ id: 'header-search-engine-selected-custom', labelText: 'Custom', value: 'custom' });
-
-  headerSetting.control.search.engine = {
-    selected: new Control_radio({
-      object: state.get.current(),
-      label: 'Search engine',
-      radioGroup: searchEngineList,
-      groupName: 'header-search-engine-selected',
-      path: 'header.search.engine.selected',
-      action: () => {
-        header.item.mod.order();
-        header.item.clear();
-        header.item.render();
-        layout.area.assemble();
-        headerSetting.disable();
-        headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
-        headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
-        headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
-        headerSetting.edge.date.size.update.primary(header.element.date.date());
-        headerSetting.edge.search.size.update.primary(header.element.search.search());
-        headerSetting.control.search.engine.custom.collapse.update();
-        data.save();
-      }
-    }),
-    custom: {
-      name: new Control_text({
-        object: state.get.current(),
-        path: 'header.search.engine.custom.name',
-        id: 'header-search-engine-custom-name',
-        value: state.get.current().header.search.engine.custom.name,
-        placeholder: 'Search engine name',
-        labelText: 'Name',
-        action: () => {
-          header.item.mod.order();
-          header.item.clear();
-          header.item.render();
-          layout.area.assemble();
-          headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
-          headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
-          headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
-          headerSetting.edge.date.size.update.primary(header.element.date.date());
-          headerSetting.edge.search.size.update.primary(header.element.search.search());
-          data.save();
-        }
-      }),
-      url: new Control_text({
-        object: state.get.current(),
-        path: 'header.search.engine.custom.url',
-        id: 'header-search-engine-custom-url',
-        value: state.get.current().header.search.engine.custom.url,
-        placeholder: 'HTTPS://',
-        labelText: 'URL',
-        action: () => {
-          header.item.mod.order();
-          header.item.clear();
-          header.item.render();
-          layout.area.assemble();
-          headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
-          headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
-          headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
-          headerSetting.edge.date.size.update.primary(header.element.date.date());
-          headerSetting.edge.search.size.update.primary(header.element.search.search());
-          data.save();
-        }
-      }),
-      urlHelper: new Control_helperText({
-        text: ['Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="', APP_NAME + ' will add the search term entered into the Search box at the end of the above URL.']
-      }),
-      queryName: new Control_text({
-        object: state.get.current(),
-        path: 'header.search.engine.custom.queryName',
-        id: 'header-search-engine-custom-queryName',
-        value: state.get.current().header.search.engine.custom.queryName,
-        placeholder: 'q',
-        labelText: 'Name attribute',
-        action: () => {
-          header.item.mod.order();
-          header.item.clear();
-          header.item.render();
-          layout.area.assemble();
-          headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
-          headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
-          headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
-          headerSetting.edge.date.size.update.primary(header.element.date.date());
-          headerSetting.edge.search.size.update.primary(header.element.search.search());
-          data.save();
-        }
-      }),
-      queryNameHelper: new Control_helperText({
-        text: ['Sets the name attribute on the Search input field.', 'This defines the name passed to the search engine when submitting. If not sure leave blank.']
-      })
-    }
-  };
-
-  headerSetting.control.search.engine.custom.area = node('div', [
-    headerSetting.control.search.engine.custom.name.wrap(),
-    headerSetting.control.search.engine.custom.url.wrap(),
-    headerSetting.control.search.engine.custom.urlHelper.wrap(),
-    headerSetting.control.search.engine.custom.queryName.wrap(),
-    headerSetting.control.search.engine.custom.queryNameHelper.wrap()
-  ]);
-
-  headerSetting.control.search.engine.custom.collapse = new Collapse({
-    type: 'radio',
-    radioGroup: headerSetting.control.search.engine.selected,
-    target: [{
-      id: headerSetting.control.search.engine.selected.radioSet[headerSetting.control.search.engine.selected.radioSet.length - 1].radio.value,
-      content: headerSetting.control.search.engine.custom.area
-    }]
-  });
-
-  headerSetting.control.search.text = {
-    justify: new Control_radioGrid({
-      object: state.get.current(),
-      radioGroup: [
-        { id: 'header-search-text-justify-left', labelText: 'Left', value: 'left', position: 1 },
-        { id: 'header-search-text-justify-center', labelText: 'Center', value: 'center', position: 2 },
-        { id: 'header-search-text-justify-right', labelText: 'Right', value: 'right', position: 3 }
-      ],
-      label: 'Search text alignment',
-      groupName: 'header-search-text-justify',
-      path: 'header.search.text.justify',
-      gridSize: '3x1',
-      action: () => {
-        applyCSSClass('header.search.text.justify');
-        data.save();
-      }
-    })
-  };
-
   headerSetting.control.search.width = {
     by: new Control_radio({
       object: state.get.current(),
-      label: 'Search box width',
+      label: message.get('menuContentHeaderSearchWidthLabel'),
       radioGroup: [
-        { id: 'header-search-width-by-auto', labelText: 'Auto width', description: 'Search box will grow to best fit available space.', value: 'auto' },
+        { id: 'header-search-width-by-auto', labelText: message.get('menuContentHeaderSearchWidthAutoLabel'), description: message.get('menuContentHeaderSearchWidthAutoDescription'), value: 'auto' },
-        { id: 'header-search-width-by-custom', labelText: 'Custom width', description: 'Define how wide the Search box should be inside the Header Area.', value: 'custom' }
+        { id: 'header-search-width-by-custom', labelText: message.get('menuContentHeaderSearchWidthCustomLabel'), description: message.get('menuContentHeaderSearchWidthCustomDescription'), value: 'custom' }
       ],
       groupName: 'header-search-width-by',
       path: 'header.search.width.by',
@@ -1761,7 +1570,7 @@ headerSetting.search = (parent) => {
       object: state.get.current(),
       path: 'header.search.width.size',
       id: 'header-search-size',
-      labelText: 'Width',
+      labelText: message.get('menuContentHeaderSearchWidthSize'),
       value: state.get.current().header.search.width.size,
       defaultValue: state.get.default().header.search.width.size,
       min: state.get.minMax().header.search.width.size.min,
@@ -1793,6 +1602,203 @@ headerSetting.search = (parent) => {
     }]
   });
 
+  headerSetting.control.search.size = new Control_sliderSlim({
+    object: state.get.current(),
+    path: 'header.search.size',
+    id: 'header-search-size',
+    labelText: message.get('menuContentHeaderSearchSize'),
+    value: state.get.current().header.search.size,
+    defaultValue: state.get.default().header.search.size,
+    min: state.get.minMax().header.search.size.min,
+    max: state.get.minMax().header.search.size.max,
+    action: () => {
+      applyCSSVar('header.search.size');
+      headerSetting.edge.search.size.track();
+      data.save();
+    },
+    mouseDownAction: () => {
+      headerSetting.edge.search.size.show();
+    },
+    mouseUpAction: () => {
+      headerSetting.edge.search.size.hide();
+    }
+  });
+
+  headerSetting.control.search.newLine = new Control_checkbox({
+    object: state.get.current(),
+    path: 'header.search.newLine',
+    id: 'header-search-newLine',
+    labelText: message.get('menuContentHeaderSearchNewLineLabel'),
+    description: message.get('menuContentHeaderSearchNewLineDescription'),
+    action: () => {
+      applyCSSState('header.search.newLine');
+      data.save();
+    }
+  });
+
+  const searchEngineList = [];
+
+  for (let key in searchEnginePreset) {
+
+    searchEngineList.push({ id: `header-search-engine-selected-${key}`, labelText: searchEnginePreset[key].name, value: key });
+
+  }
+
+  searchEngineList.push({ id: 'header-search-engine-selected-custom', labelText: message.get('menuContentHeaderSearchEngineSelectedCustom'), value: 'custom' });
+
+  headerSetting.control.search.engine = {
+    selected: new Control_radio({
+      object: state.get.current(),
+      label: message.get('menuContentHeaderSearchEngineSelectedLabel'),
+      radioGroup: searchEngineList,
+      groupName: 'header-search-engine-selected',
+      path: 'header.search.engine.selected',
+      action: () => {
+        header.item.mod.order();
+        header.item.clear();
+        header.item.render();
+        layout.area.assemble();
+        headerSetting.disable();
+        headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
+        headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
+        headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
+        headerSetting.edge.date.size.update.primary(header.element.date.date());
+        headerSetting.edge.search.size.update.primary(header.element.search.search());
+        headerSetting.control.search.engine.custom.collapse.update();
+        data.save();
+      }
+    }),
+    custom: {
+      name: new Control_text({
+        object: state.get.current(),
+        path: 'header.search.engine.custom.name',
+        id: 'header-search-engine-custom-name',
+        value: state.get.current().header.search.engine.custom.name,
+        placeholder: message.get('menuContentHeaderSearchEngineCustomNamePlaceholder'),
+        labelText: message.get('menuContentHeaderSearchEngineCustomNameLabel'),
+        action: () => {
+          header.item.mod.order();
+          header.item.clear();
+          header.item.render();
+          layout.area.assemble();
+          headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
+          headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
+          headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
+          headerSetting.edge.date.size.update.primary(header.element.date.date());
+          headerSetting.edge.search.size.update.primary(header.element.search.search());
+          data.save();
+        }
+      }),
+      url: new Control_text({
+        object: state.get.current(),
+        path: 'header.search.engine.custom.url',
+        id: 'header-search-engine-custom-url',
+        value: state.get.current().header.search.engine.custom.url,
+        placeholder: message.get('menuContentHeaderSearchEngineCustomUrlPlaceholder'),
+        labelText: message.get('menuContentHeaderSearchEngineCustomUrlLabel'),
+        action: () => {
+          header.item.mod.order();
+          header.item.clear();
+          header.item.render();
+          layout.area.assemble();
+          headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
+          headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
+          headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
+          headerSetting.edge.date.size.update.primary(header.element.date.date());
+          headerSetting.edge.search.size.update.primary(header.element.search.search());
+          data.save();
+        }
+      }),
+      urlHelper: new Control_helperText({
+        text: [
+          message.get('menuContentHeaderSearchEngineCustomUrlHelperPara1'),
+          message.get('menuContentHeaderSearchEngineCustomUrlHelperPara2')
+        ]
+      }),
+      queryName: new Control_text({
+        object: state.get.current(),
+        path: 'header.search.engine.custom.queryName',
+        id: 'header-search-engine-custom-queryName',
+        value: state.get.current().header.search.engine.custom.queryName,
+        placeholder: message.get('menuContentHeaderSearchEngineCustomQueryNamePlaceholder'),
+        labelText: message.get('menuContentHeaderSearchEngineCustomQueryNameLabel'),
+        action: () => {
+          header.item.mod.order();
+          header.item.clear();
+          header.item.render();
+          layout.area.assemble();
+          headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
+          headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
+          headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
+          headerSetting.edge.date.size.update.primary(header.element.date.date());
+          headerSetting.edge.search.size.update.primary(header.element.search.search());
+          data.save();
+        }
+      }),
+      queryNameHelper: new Control_helperText({
+        text: [
+          message.get('menuContentHeaderSearchEngineCustomQueryNameHelperPara1'),
+          message.get('menuContentHeaderSearchEngineCustomQueryNameHelperPara2')
+        ]
+      })
+    }
+  };
+
+  headerSetting.control.search.engine.custom.area = node('div', [
+    headerSetting.control.search.engine.custom.name.wrap(),
+    headerSetting.control.search.engine.custom.url.wrap(),
+    headerSetting.control.search.engine.custom.urlHelper.wrap(),
+    headerSetting.control.search.engine.custom.queryName.wrap(),
+    headerSetting.control.search.engine.custom.queryNameHelper.wrap()
+  ]);
+
+  headerSetting.control.search.engine.custom.collapse = new Collapse({
+    type: 'radio',
+    radioGroup: headerSetting.control.search.engine.selected,
+    target: [{
+      id: headerSetting.control.search.engine.selected.radioSet[headerSetting.control.search.engine.selected.radioSet.length - 1].radio.value,
+      content: headerSetting.control.search.engine.custom.area
+    }]
+  });
+
+  headerSetting.control.search.text = {
+    justify: new Control_radioGrid({
+      object: state.get.current(),
+      radioGroup: [
+        { id: 'header-search-text-justify-left', labelText: message.get('menuContentHeaderSearchEngineTextJustifyLeft'), value: 'left', position: 1 },
+        { id: 'header-search-text-justify-center', labelText: message.get('menuContentHeaderSearchEngineTextJustifyCenter'), value: 'center', position: 2 },
+        { id: 'header-search-text-justify-right', labelText: message.get('menuContentHeaderSearchEngineTextJustifyRight'), value: 'right', position: 3 }
+      ],
+      label: message.get('menuContentHeaderSearchEngineTextJustifyLabel'),
+      groupName: 'header-search-text-justify',
+      path: 'header.search.text.justify',
+      gridSize: '3x1',
+      action: () => {
+        applyCSSClass('header.search.text.justify');
+        data.save();
+      }
+    })
+  };
+
+  headerSetting.control.search.newTab = new Control_checkbox({
+    object: state.get.current(),
+    path: 'header.search.newTab',
+    id: 'header-search-newTab',
+    labelText: message.get('menuContentHeaderSearchNewTab'),
+    action: () => {
+      header.item.mod.order();
+      header.item.clear();
+      header.item.render();
+      layout.area.assemble();
+      headerSetting.edge.greeting.size.update.primary(header.element.greeting.greeting());
+      headerSetting.edge.transitional.size.update.primary(header.element.transitional.transitional());
+      headerSetting.edge.clock.size.update.primary(header.element.clock.clock());
+      headerSetting.edge.date.size.update.primary(header.element.date.date());
+      headerSetting.edge.search.size.update.primary(header.element.search.search());
+      data.save();
+    }
+  });
+
   headerSetting.control.search.area = node('div', [
     headerSetting.control.search.width.by.wrap(),
     form.wrap({

src/component/menuContent/index.js

@@ -1,21 +1,24 @@
+import { message } from '../message';
+
 import { debugSetting } from './debugSetting';
-import { APP_NAME } from '../../constant';
 import { layoutSetting } from './layoutSetting';
 import { groupSetting } from './groupSetting';
 import { bookmarkSetting } from './bookmarkSetting';
 import { headerSetting } from './headerSetting';
 import { toolbarSetting } from './toolbarSetting';
 import { themeSetting } from './themeSetting';
+import { languageSetting } from './languageSetting';
 import { dataSetting } from './dataSetting';
 import { supportSetting } from './supportSetting';
 import { coffeeSetting } from './coffeeSetting';
 import { appSetting } from './appSetting';
 
 import { node } from '../../utility/node';
+import { uppercaseFirstLetter } from '../../utility/uppercaseFirstLetter';
 
 import './index.css';
 
-export const MenuContent = function ({
+export const MenuContent = function({
   activeNavData = {},
   container = false
 } = {}) {
@@ -49,7 +52,9 @@ export const MenuContent = function ({
 
         const menuContentItem = this.element.content(item);
 
-        menuContentItem.appendChild(this.element.header(item));
+        menuContentItem.appendChild(this.element.header(
+          message.get(`menuNav${uppercaseFirstLetter(activeNavData.name)}SubNav${uppercaseFirstLetter(item)}`)
+        ));
 
         const formElement = this.element.form({ indent: true });
 
@@ -131,9 +136,19 @@ export const MenuContent = function ({
 
       switch (this.makeId(activeNavData.name)) {
 
+        case 'language':
+
+          menuContentItem.appendChild(this.element.header(message.get(`menuNav${uppercaseFirstLetter(activeNavData.name)}Label`)));
+
+          formElement = this.element.form({ indent: true });
+
+          languageSetting[this.makeId(activeNavData.name)](formElement);
+
+          break;
+
         case 'support':
 
-          menuContentItem.appendChild(this.element.header(activeNavData.name));
+          menuContentItem.appendChild(this.element.header(message.get(`menuNav${uppercaseFirstLetter(activeNavData.name)}Label`)));
 
           formElement = this.element.form({ indent: true });
 
@@ -143,7 +158,7 @@ export const MenuContent = function ({
 
         case 'coffee':
 
-          menuContentItem.appendChild(this.element.header(activeNavData.name));
+          menuContentItem.appendChild(this.element.header(message.get(`menuNav${uppercaseFirstLetter(activeNavData.name)}Label`)));
 
           formElement = this.element.form({ indent: true });
 
@@ -151,7 +166,7 @@ export const MenuContent = function ({
 
           break;
 
-        case this.makeId(APP_NAME):
+        case 'app':
 
           formElement = this.element.form();
 

src/component/menuContent/languageSetting/index.js

@@ -0,0 +1,81 @@
+import { message } from '../../message';
+
+import { state } from '../../state';
+import { data } from '../../data';
+import { header } from '../../header';
+import { groupAndBookmark } from '../../groupAndBookmark';
+import { menu } from '../../menu';
+import { toolbar } from '../../toolbar';
+
+import { APP_NAME } from '../../../constant';
+
+import { Alert } from '../../alert';
+import { Link } from '../../link';
+
+import { Control_select } from '../../control/select';
+
+import { node } from '../../../utility/node';
+
+const languageSetting = {};
+
+languageSetting.control = {
+  language: {}
+};
+
+languageSetting.language = (parent) => {
+
+  const selectedLanguageIndex = () => {
+
+    let index = 0;
+
+    index = message.language.code().indexOf(state.get.current().language);
+
+    return index;
+
+  };
+
+  languageSetting.control.language.selected = new Control_select({
+    path: 'language.selected',
+    id: 'language-selected',
+    labelText: message.get('menuContentLanguageSelect'),
+    srOnly: true,
+    option: message.language.list(),
+    selected: selectedLanguageIndex(),
+    action: () => {
+
+      state.get.current().language = message.language.code()[languageSetting.control.language.selected.selected()];
+      data.save();
+      toolbar.bar.render();
+      header.item.clear();
+      header.item.render();
+      groupAndBookmark.render();
+      menu.close();
+      menu.open();
+
+    }
+  });
+
+  languageSetting.control.link = new Link({
+    text: message.get('menuContentLanguageAlertLink'),
+    href: `https://github.com/zombieFox/${APP_NAME}`,
+    openNew: true
+  });
+
+  languageSetting.control.alert = new Alert({
+    iconName: 'globe',
+    children: [
+      node(`p:${message.get('menuContentLanguageAlertPara')}`),
+      node('p', languageSetting.control.link.link())
+    ]
+  });
+
+  parent.appendChild(
+    node('div', [
+      languageSetting.control.language.selected.wrap(),
+      languageSetting.control.alert.wrap()
+    ])
+  );
+
+};
+
+export { languageSetting };

src/component/menuContent/layoutSetting/index.js

@@ -1,3 +1,5 @@
+import { message } from '../../message';
+
 import { state } from '../../state';
 import { data } from '../../data';
 import { header } from '../../header';
@@ -8,7 +10,6 @@ import { theme } from '../../theme';
 import * as form from '../../form';
 
 import { Edge } from '../../edge';
-import { Link } from '../../link';
 
 import { Control_helperText } from '../../control/helperText';
 import { Control_radio } from '../../control/radio';
@@ -109,7 +110,7 @@ layoutSetting.scaling = (parent) => {
     object: state.get.current(),
     path: 'layout.size',
     id: 'layout-size',
-    labelText: 'Global size',
+    labelText: message.get('menuContentLayoutScalingSize'),
     value: state.get.current().layout.size,
     defaultValue: state.get.default().layout.size,
     min: state.get.minMax().layout.size.min,
@@ -147,7 +148,7 @@ layoutSetting.area = (parent) => {
     object: state.get.current(),
     path: 'layout.width',
     id: 'layout-width',
-    labelText: 'Layout area width',
+    labelText: message.get('menuContentLayoutAreaWidth'),
     value: state.get.current().layout.width,
     defaultValue: state.get.default().layout.width,
     min: state.get.minMax().layout.width.min,
@@ -170,7 +171,7 @@ layoutSetting.area = (parent) => {
       object: state.get.current(),
       path: 'layout.area.header.width',
       id: 'layout-area-header-width',
-      labelText: 'Header area width',
+      labelText: message.get('menuContentLayoutAreaHeaderWidth'),
       value: state.get.current().layout.area.header.width,
       defaultValue: state.get.default().layout.area.header.width,
       min: state.get.minMax().layout.area.header.width.min,
@@ -190,11 +191,11 @@ layoutSetting.area = (parent) => {
     justify: new Control_radioGrid({
       object: state.get.current(),
       radioGroup: [
-        { id: 'layout-area-header-justify-left', labelText: 'Left', value: 'left', position: 1 },
+        { id: 'layout-area-header-justify-left', labelText: message.get('menuContentLayoutAreaHeaderJustifyLeft'), value: 'left', position: 1 },
-        { id: 'layout-area-header-justify-center', labelText: 'Center', value: 'center', position: 2 },
+        { id: 'layout-area-header-justify-center', labelText: message.get('menuContentLayoutAreaHeaderJustifyCenter'), value: 'center', position: 2 },
-        { id: 'layout-area-header-justify-right', labelText: 'Right', value: 'right', position: 3 }
+        { id: 'layout-area-header-justify-right', labelText: message.get('menuContentLayoutAreaHeaderJustifyRight'), value: 'right', position: 3 }
       ],
-      label: 'Header area alignment',
+      label: message.get('menuContentLayoutAreaHeaderJustifyLabel'),
       groupName: 'layout-area-header-justify',
       path: 'layout.area.header.justify',
       gridSize: '3x1',
@@ -204,11 +205,11 @@ layoutSetting.area = (parent) => {
       }
     }),
     justifyHelper1: new Control_helperText({
-      text: ['Effects may not be visible if the Header Area is full width.']
+      text: [message.get('menuContentLayoutAreaHeaderJustifyHelper1Para1')]
     }),
     justifyHelper2: new Control_helperText({
       complexText: true,
-      text: [`Only available when ${(new Link({ text: 'Layout Direction', href: '#menu-content-item-alignment' })).link().outerHTML} is Vertical and Header items are shown.`]
+      text: [message.get('menuContentLayoutAreaHeaderJustifyHelper2Para1')]
     })
   };
 
@@ -217,7 +218,7 @@ layoutSetting.area = (parent) => {
       object: state.get.current(),
       path: 'layout.area.bookmark.width',
       id: 'layout-area-bookmark-width',
-      labelText: 'Bookmark area width',
+      labelText: message.get('menuContentLayoutAreaBookmarkWidth'),
       value: state.get.current().layout.area.bookmark.width,
       defaultValue: state.get.default().layout.area.bookmark.width,
       min: state.get.minMax().layout.area.bookmark.width.min,
@@ -237,11 +238,11 @@ layoutSetting.area = (parent) => {
     justify: new Control_radioGrid({
       object: state.get.current(),
       radioGroup: [
-        { id: 'layout-area-bookmark-justify-left', labelText: 'Left', value: 'left', position: 1 },
+        { id: 'layout-area-bookmark-justify-left', labelText: message.get('menuContentLayoutAreaBookmarkJustifyLeft'), value: 'left', position: 1 },
-        { id: 'layout-area-bookmark-justify-center', labelText: 'Center', value: 'center', position: 2 },
+        { id: 'layout-area-bookmark-justify-center', labelText: message.get('menuContentLayoutAreaBookmarkJustifyCenter'), value: 'center', position: 2 },
-        { id: 'layout-area-bookmark-justify-right', labelText: 'Right', value: 'right', position: 3 }
+        { id: 'layout-area-bookmark-justify-right', labelText: message.get('menuContentLayoutAreaBookmarkJustifyRight'), value: 'right', position: 3 }
       ],
-      label: 'Bookmark area alignment',
+      label: message.get('menuContentLayoutAreaBookmarkJustifyLabel'),
       groupName: 'layout-area-bookmark-justify',
       path: 'layout.area.bookmark.justify',
       gridSize: '3x1',
@@ -251,11 +252,11 @@ layoutSetting.area = (parent) => {
       }
     }),
     justifyHelper1: new Control_helperText({
-      text: ['Effects may not be visible if the Bookmark Area is full width.']
+      text: [message.get('menuContentLayoutAreaBookmarkJustifyHelper1Para1')]
     }),
     justifyHelper2: new Control_helperText({
       complexText: true,
-      text: [`Only available when ${(new Link({ text: 'Layout Direction', href: '#menu-content-item-alignment' })).link().outerHTML} is Vertical and Header items are shown.`]
+      text: [message.get('menuContentLayoutAreaBookmarkJustifyHelper2Para1')]
     })
   };
 
@@ -293,7 +294,7 @@ layoutSetting.padding = (parent) => {
     object: state.get.current(),
     path: 'layout.padding',
     id: 'layout-padding',
-    labelText: 'Space around Header and Bookmark Area',
+    labelText: message.get('menuContentLayoutPadding'),
     value: state.get.current().layout.padding,
     defaultValue: state.get.default().layout.padding,
     min: state.get.minMax().layout.padding.min,
@@ -327,7 +328,7 @@ layoutSetting.gutter = (parent) => {
     object: state.get.current(),
     path: 'layout.gutter',
     id: 'layout-gutter',
-    labelText: 'Space between Header and Bookmark items',
+    labelText: message.get('menuContentLayoutGutter'),
     value: state.get.current().layout.gutter,
     defaultValue: state.get.default().layout.gutter,
     min: state.get.minMax().layout.gutter.min,
@@ -358,17 +359,17 @@ layoutSetting.alignment = (parent) => {
   layoutSetting.control.alignment.alignment = new Control_radioGrid({
     object: state.get.current(),
     radioGroup: [
-      { id: 'layout-alignment-top-left', labelText: 'Top Left', value: 'top-left', position: 1 },
+      { id: 'layout-alignment-top-left', labelText: message.get('menuContentLayoutAlignmentTopLeft'), value: 'top-left', position: 1 },
-      { id: 'layout-alignment-top-center', labelText: 'Top Center', value: 'top-center', position: 2 },
+      { id: 'layout-alignment-top-center', labelText: message.get('menuContentLayoutAlignmentTopCenter'), value: 'top-center', position: 2 },
-      { id: 'layout-alignment-top-right', labelText: 'Top Right', value: 'top-right', position: 3 },
+      { id: 'layout-alignment-top-right', labelText: message.get('menuContentLayoutAlignmentTopRight'), value: 'top-right', position: 3 },
-      { id: 'layout-alignment-center-left', labelText: 'Center Left', value: 'center-left', position: 4 },
+      { id: 'layout-alignment-center-left', labelText: message.get('menuContentLayoutAlignmentCenterLeft'), value: 'center-left', position: 4 },
-      { id: 'layout-alignment-center-center', labelText: 'Center Center', value: 'center-center', position: 5 },
+      { id: 'layout-alignment-center-center', labelText: message.get('menuContentLayoutAlignmentCenterCenter'), value: 'center-center', position: 5 },
-      { id: 'layout-alignment-center-right', labelText: 'Center Right', value: 'center-right', position: 6 },
+      { id: 'layout-alignment-center-right', labelText: message.get('menuContentLayoutAlignmentCenterRight'), value: 'center-right', position: 6 },
-      { id: 'layout-alignment-bottom-left', labelText: 'Bottom Left', value: 'bottom-left', position: 7 },
+      { id: 'layout-alignment-bottom-left', labelText: message.get('menuContentLayoutAlignmentBottomLeft'), value: 'bottom-left', position: 7 },
-      { id: 'layout-alignment-bottom-center', labelText: 'Bottom Center', value: 'bottom-center', position: 8 },
+      { id: 'layout-alignment-bottom-center', labelText: message.get('menuContentLayoutAlignmentBottomCenter'), value: 'bottom-center', position: 8 },
-      { id: 'layout-alignment-bottom-right', labelText: 'Bottom Right', value: 'bottom-right', position: 9 }
+      { id: 'layout-alignment-bottom-right', labelText: message.get('menuContentLayoutAlignmentBottomRight'), value: 'bottom-right', position: 9 }
     ],
-    label: 'Area alignment',
+    label: message.get('menuContentLayoutAlignmentLabel'),
     groupName: 'layout-alignment',
     path: 'layout.alignment',
     gridSize: '3x3',
@@ -381,8 +382,8 @@ layoutSetting.alignment = (parent) => {
   layoutSetting.control.alignment.direction = new Control_radio({
     object: state.get.current(),
     radioGroup: [
-      { id: 'layout-direction-horizontal', labelText: 'Align horizontal', description: 'Stack the Header and Bookmarks in a row side by side.', value: 'horizontal' },
+      { id: 'layout-direction-horizontal', labelText: message.get('menuContentLayoutDirectionHorizontalLabel'), description: message.get('menuContentLayoutDirectionHorizontalDescription'), value: 'horizontal' },
-      { id: 'layout-direction-vertical', labelText: 'Align vertical', description: 'Stack the Header and Bookmarks in a column one above the other.', value: 'vertical' }
+      { id: 'layout-direction-vertical', labelText: message.get('menuContentLayoutDirectionVerticalLabel'), description: message.get('menuContentLayoutDirectionVerticalDescription'), value: 'vertical' }
     ],
     groupName: 'layout-direction',
     path: 'layout.direction',
@@ -396,8 +397,8 @@ layoutSetting.alignment = (parent) => {
   layoutSetting.control.alignment.order = new Control_radio({
     object: state.get.current(),
     radioGroup: [
-      { id: 'layout-order-header-bookmark', labelText: 'Header then Bookmarks', description: 'Order the Header area to appear before the Bookmarks area.', value: 'header-bookmark' },
+      { id: 'layout-order-header-bookmark', labelText: message.get('menuContentLayoutOrderHeaderBookmarkLabel'), description: message.get('menuContentLayoutOrderHeaderBookmarkDescription'), value: 'header-bookmark' },
-      { id: 'layout-order-bookmark-header', labelText: 'Bookmarks then Header', description: 'Order the Bookmarks area to appear before the Header area.', value: 'bookmark-header' }
+      { id: 'layout-order-bookmark-header', labelText: message.get('menuContentLayoutOrderBookmarkHeaderLabel'), description: message.get('menuContentLayoutOrderBookmarkHeaderDescription'), value: 'bookmark-header' }
     ],
     groupName: 'layout-order',
     path: 'layout.order',
@@ -428,8 +429,8 @@ layoutSetting.page = (parent) => {
     id: 'layout-title',
     value: state.get.current().layout.title,
     defaultValue: state.get.default().layout.title,
-    placeholder: 'New Tab',
+    placeholder: message.get('menuContentLayoutPageTitlePlaceholder'),
-    labelText: 'Title',
+    labelText: message.get('menuContentLayoutPageTitleLabel'),
     action: () => {
       layout.title.render();
       data.save();
@@ -442,8 +443,8 @@ layoutSetting.page = (parent) => {
     id: 'layout-favicon',
     value: state.get.current().layout.favicon,
     defaultValue: state.get.default().layout.favicon,
-    placeholder: 'https://www.example.com/favicon.svg',
+    placeholder: message.get('menuContentLayoutPageFaviconPlaceholder'),
-    labelText: 'Favicon URL',
+    labelText: message.get('menuContentLayoutPageFaviconLabel'),
     action: () => {
       layout.favicon.render();
       data.save();
@@ -451,16 +452,16 @@ layoutSetting.page = (parent) => {
   });
 
   layoutSetting.control.page.faviconHelper = new Control_helperText({
-    text: ['Not supported by all browsers.']
+    text: [message.get('menuContentLayoutPageFaviconHelperPara1')]
   });
 
   layoutSetting.control.page.scrollbar = new Control_radio({
     object: state.get.current(),
-    label: 'Scrollbar',
+    label: message.get('menuContentLayoutPageScrollbarLabel'),
     radioGroup: [
-      { id: 'layout-scrollbar-auto', labelText: 'Auto', value: 'auto' },
+      { id: 'layout-scrollbar-auto', labelText: message.get('menuContentLayoutPageScrollbarAuto'), value: 'auto' },
-      { id: 'layout-scrollbar-thin', labelText: 'Thin', value: 'thin' },
+      { id: 'layout-scrollbar-thin', labelText: message.get('menuContentLayoutPageScrollbarThin'), value: 'thin' },
-      { id: 'layout-scrollbar-none', labelText: 'Hidden', value: 'none' }
+      { id: 'layout-scrollbar-none', labelText: message.get('menuContentLayoutPageScrollbarNone'), value: 'none' }
     ],
     groupName: 'layout-scrollbar',
     path: 'layout.scrollbar',
@@ -471,7 +472,7 @@ layoutSetting.page = (parent) => {
   });
 
   layoutSetting.control.page.scrollbarHelper = new Control_helperText({
-    text: ['Not supported by all browsers.']
+    text: [message.get('menuContentLayoutPageScrollbarHelperPara1')]
   });
 
   layoutSetting.control.page.overscroll = {
@@ -479,7 +480,7 @@ layoutSetting.page = (parent) => {
       object: state.get.current(),
       path: 'layout.overscroll.active',
       id: 'layout-overscroll-active',
-      labelText: 'Scroll past end',
+      labelText: message.get('menuContentLayoutPageOverscrollActive'),
       action: () => {
         applyCSSState('layout.overscroll.active');
         layoutSetting.disable();
@@ -490,10 +491,10 @@ layoutSetting.page = (parent) => {
       object: state.get.current(),
       path: 'layout.overscroll.unblur',
       id: 'layout-overscroll-unblur-background',
-      labelText: 'Unblur background image or video',
+      labelText: message.get('menuContentLayoutPageOverscrollUnblurLabel'),
       description: [
-        'Background image or video will unblur when scrolled to the bottom of the page.',
+        message.get('menuContentLayoutPageOverscrollUnblurDescriptionPara1'),
-        'Image or video blur can be found under Theme Background.'
+        message.get('menuContentLayoutPageOverscrollUnblurDescriptionPara2')
       ],
       action: () => {
         theme.background.image.render();

src/component/menuContent/supportSetting/index.js

@@ -1,28 +1,71 @@
+import { message } from '../../message';
+
 import { APP_NAME } from '../../../constant';
 
 import * as form from '../../form';
 
 import { Link } from '../../link';
 
-
 import { node } from '../../../utility/node';
 
 const supportSetting = {};
 
-supportSetting.link = {
+supportSetting.supportPage = {
-  url: 'https://github.com/zombieFox/' + APP_NAME + '/wiki/',
+  get: () => {
-  page: {
+
-    applyToAll: 'Applying-bookmark-settings-to-all',
+    const supportLink = {};
-    browser: 'Browser-support',
+
-    cookies: 'Cookies-and-cache',
+    supportLink.baseUrl = 'https://github.com/zombieFox/' + APP_NAME + '/wiki/';
-    data: 'Data-backup-and-restore',
+
-    localBackgroundImage: 'Local-background-image',
+    supportLink.page = {
-    protectedUrl: 'Protected-URLs',
+      applyToAll: {
-    recovering: 'Recovering-settings-and-bookmarks',
+        label: message.get('menuContentSupportPageApplyToAll'),
-    resetting: 'Resetting-when-opening-the-browser',
+        url: 'Applying-bookmark-settings-to-all'
-    privacy: 'Respecting-your-privacy',
+      },
-    backgroundImageVideo: 'Setting-a-background-video-or-image',
+      browser: {
-    firefox: 'Setting-' + APP_NAME + '-as-your-Firefox-homepage'
+        label: message.get('menuContentSupportPageBrowser'),
+        url: 'Browser-support'
+      },
+      cookies: {
+        label: message.get('menuContentSupportPageCookies'),
+        url: 'Cookies-and-cache'
+      },
+      data: {
+        label: message.get('menuContentSupportPageData'),
+        url: 'Data-backup-and-restore'
+      },
+      localBackgroundImage: {
+        label: message.get('menuContentSupportPageLocalBackgroundImage'),
+        url: 'Local-background-image'
+      },
+      protectedUrl: {
+        label: message.get('menuContentSupportPageProtectedUrl'),
+        url: 'Protected-URLs'
+      },
+      recovering: {
+        label: message.get('menuContentSupportPageRecovering'),
+        url: 'Recovering-settings-and-bookmarks'
+      },
+      resetting: {
+        label: message.get('menuContentSupportPageResetting'),
+        url: 'Resetting-when-opening-the-browser'
+      },
+      privacy: {
+        label: message.get('menuContentSupportPagePrivacy'),
+        url: 'Respecting-your-privacy'
+      },
+      backgroundImageVideo: {
+        label: message.get('menuContentSupportPageBackgroundImageVideo'),
+        url: 'Setting-a-background-video-or-image'
+      },
+      firefox: {
+        label: message.get('menuContentSupportPageFirefox'),
+        url: 'Setting-' + APP_NAME + '-as-your-Firefox-homepage'
+      },
+    };
+
+    return supportLink;
+
   }
 };
 
@@ -34,15 +77,17 @@ supportSetting.support = (parent) => {
 
     const list = node('ul|class:list-feature');
 
-    for (var key in supportSetting.link.page) {
+    const supportLink = supportSetting.supportPage.get();
 
-      const supportLink = new Link({
+    for (var key in supportLink.page) {
-        text: supportSetting.link.page[key].replace(/-/g, ' '),
+
-        href: supportSetting.link.url + supportSetting.link.page[key],
+      const linkItem = new Link({
+        text: supportLink.page[key].label,
+        href: supportLink.baseUrl + supportLink.page[key].url,
         openNew: true
       });
 
-      list.appendChild(node('li', [supportLink.link()]));
+      list.appendChild(node('li', [linkItem.link()]));
 
     }
 
@@ -52,15 +97,33 @@ supportSetting.support = (parent) => {
 
   };
 
-  const para = node('p');
+  supportSetting.support.para = node('p');
 
-  para.innerHTML = `For more support or feedback, submit an ${(new Link({ text: 'Issue', href: `https://github.com/zombieFox/${APP_NAME}/issues`, openNew: true })).link().outerHTML} or check the ${(new Link({ text: 'Wiki', href: `https://github.com/zombieFox/${APP_NAME}/wiki`, openNew: true })).link().outerHTML}.`;
+  supportSetting.support.para.innerHTML = message.get('menuContentSupportPara');
+
+  supportSetting.support.linkIssue = new Link({
+    text: message.get('menuContentSupportLink1'),
+    href: `https://github.com/zombieFox/${APP_NAME}/issues`,
+    openNew: true
+  });
+
+  supportSetting.support.linkWiki = new Link({
+    text: message.get('menuContentSupportLink2'),
+    href: `https://github.com/zombieFox/${APP_NAME}/wiki`,
+    openNew: true
+  });
 
   parent.appendChild(
     node('div', [
       makeLinks(),
       node('hr'),
-      para
+      supportSetting.support.para,
+      form.indent({
+        children: [
+          node('p', supportSetting.support.linkIssue.link()),
+          node('p', supportSetting.support.linkWiki.link())
+        ]
+      })
     ])
   );
 

src/component/menuContent/themeSetting/index.js

@@ -1,3 +1,5 @@
+import { message } from '../../message';
+
 import { state } from '../../state';
 import { data } from '../../data';
 import { header } from '../../header';
@@ -273,7 +275,7 @@ themeSetting.disable = () => {
 themeSetting.preset = (parent) => {
 
   themeSetting.control.preset.presetHelper = new Control_helperText({
-    text: ['Applying a Preset will replace the current Colour, Accent, Font, Style, Opacity, Radius, Shadow, Shade and Background.']
+    text: [message.get('menuContentThemePresetHelperPara1')]
   });
 
   const preset = () => {
@@ -310,10 +312,10 @@ themeSetting.saved = (parent) => {
   themeSetting.control.saved = {
     savedElement: node('div|class:theme-custom'),
     customHelper: new Control_helperText({
-      text: ['Saving a Theme will record the current Colour, Accent, Font, Style, Opacity, Radius, Shadow, Shade and Background.']
+      text: [message.get('menuContentThemeSavedHelperPara1')]
     }),
     saveButton: new Button({
-      text: 'Save current theme',
+      text: message.get('menuContentThemeSavedSave'),
       style: ['line'],
       func: () => {
         menu.close();
@@ -321,7 +323,7 @@ themeSetting.saved = (parent) => {
       }
     }),
     edit: new Button({
-      text: 'Edit saved themes',
+      text: message.get('menuContentThemeSavedEdit'),
       iconName: 'edit',
       style: ['line'],
       srOnly: true,
@@ -384,9 +386,9 @@ themeSetting.style = (parent) => {
   themeSetting.control.style = new Control_radio({
     object: state.get.current(),
     radioGroup: [
-      { id: 'theme-style-dark', labelText: 'Dark mode', description: false, value: 'dark' },
+      { id: 'theme-style-dark', labelText: message.get('menuContentThemeStyleDarkLabel'), description: false, value: 'dark' },
-      { id: 'theme-style-light', labelText: 'Light mode', description: false, value: 'light' },
+      { id: 'theme-style-light', labelText: message.get('menuContentThemeStyleLightLabel'), description: false, value: 'light' },
-      { id: 'theme-style-system', labelText: 'Automatic', description: 'Follow the system Light or Dark mode.', value: 'system' }
+      { id: 'theme-style-system', labelText: message.get('menuContentThemeStyleAutomaticLabel'), description: message.get('menuContentThemeStyleAutomaticDescription'), value: 'system' }
     ],
     groupName: 'theme-style',
     path: 'theme.style',
@@ -405,7 +407,7 @@ themeSetting.style = (parent) => {
 
 };
 
-themeSetting.colour = (parent) => {
+themeSetting.color = (parent) => {
 
   const shade = () => {
 
@@ -444,7 +446,7 @@ themeSetting.colour = (parent) => {
           object: state.get.current(),
           path: 'theme.color.range.primary.h',
           id: 'theme-color-range-primary-h',
-          labelText: 'Primary colour',
+          labelText: message.get('menuContentThemeColorRangePrimaryH'),
           value: state.get.current().theme.color.range.primary.h,
           defaultValue: state.get.default().theme.color.range.primary.h,
           min: state.get.minMax().theme.color.range.primary.h.min,
@@ -459,7 +461,7 @@ themeSetting.colour = (parent) => {
           object: state.get.current(),
           path: 'theme.color.range.primary.s',
           id: 'theme-color-range-primary-s',
-          labelText: 'Saturation',
+          labelText: message.get('menuContentThemeColorRangePrimaryS'),
           value: state.get.current().theme.color.range.primary.s,
           defaultValue: state.get.default().theme.color.range.primary.s,
           min: state.get.minMax().theme.color.range.primary.s.min,
@@ -474,12 +476,12 @@ themeSetting.colour = (parent) => {
     },
     contrast: new Control_sliderDouble({
       object: state.get.current(),
-      labelText: 'Contrast range',
+      labelText: message.get('menuContentThemeColorContrastLabel'),
       style: 'contrast',
       left: {
         path: 'theme.color.contrast.start',
         id: 'theme-color-contrast-start',
-        labelText: 'Contrast start',
+        labelText: message.get('menuContentThemeColorContrastLeft'),
         value: state.get.current().theme.color.contrast.start,
         defaultValue: state.get.default().theme.color.contrast.start,
         min: state.get.minMax().theme.color.contrast.start.min,
@@ -492,7 +494,7 @@ themeSetting.colour = (parent) => {
       right: {
         path: 'theme.color.contrast.end',
         id: 'theme-color-contrast-end',
-        labelText: 'Contrast end',
+        labelText: message.get('menuContentThemeColorContrastRight'),
         value: state.get.current().theme.color.contrast.end,
         defaultValue: state.get.default().theme.color.contrast.end,
         min: state.get.minMax().theme.color.contrast.end.min,
@@ -505,16 +507,16 @@ themeSetting.colour = (parent) => {
     }),
     contrastHelper: new Control_helperText({
       text: [
-        'Move the Contrast range controls close together for a muted look.',
+        message.get('menuContentThemeColorContrastHelperPara1'),
-        'Move the Contrast range controls far apart from each other for a sharp vivid look.'
+        message.get('menuContentThemeColorContrastHelperPara2')
       ]
     }),
     shade: {
       helper: new Control_helperText({
         text: [
-          'Backgrounds, Bookmarks and Modals use shades from the left.',
+          message.get('menuContentThemeColorShadeHelperPara1'),
-          'Text and form elements use shades from the right.',
+          message.get('menuContentThemeColorShadeHelperPara2'),
-          'For a light look switch to the Light Style and then select a Primary colour. And vice versa for a dark look.'
+          message.get('menuContentThemeColorShadeHelperPara3')
         ]
       })
     }
@@ -564,7 +566,7 @@ themeSetting.accent = (parent) => {
     object: state.get.current(),
     path: 'theme.accent',
     id: 'theme-accent',
-    labelText: 'Accent colour',
+    labelText: message.get('menuContentThemeAccentColor'),
     defaultValue: state.get.default().theme.accent.rgb,
     minMaxObject: state.get.minMax(),
     randomColor: true,
@@ -589,7 +591,7 @@ themeSetting.accent = (parent) => {
     object: state.get.current(),
     path: 'theme.accent.random.active',
     id: 'theme-accent-random-active',
-    labelText: 'Random Accent colour on load/refresh',
+    labelText: message.get('menuContentThemeAccentRandomActive'),
     action: () => {
       themeSetting.disable();
       themeSetting.control.accent.random.collapse.update();
@@ -600,11 +602,11 @@ themeSetting.accent = (parent) => {
   themeSetting.control.accent.random.style = new Control_radio({
     object: state.get.current(),
     radioGroup: [
-      { id: 'theme-accent-random-style-any', labelText: 'Any', value: 'any' },
+      { id: 'theme-accent-random-style-any', labelText: message.get('menuContentThemeAccentRandomStyleAny'), value: 'any' },
-      { id: 'theme-accent-random-style-light', labelText: 'Light', value: 'light' },
+      { id: 'theme-accent-random-style-light', labelText: message.get('menuContentThemeAccentRandomStyleLight'), value: 'light' },
-      { id: 'theme-accent-random-style-dark', labelText: 'Dark', value: 'dark' },
+      { id: 'theme-accent-random-style-dark', labelText: message.get('menuContentThemeAccentRandomStyleDark'), value: 'dark' },
-      { id: 'theme-accent-random-style-pastel', labelText: 'Pastel', value: 'pastel' },
+      { id: 'theme-accent-random-style-pastel', labelText: message.get('menuContentThemeAccentRandomStylePastel'), value: 'pastel' },
-      { id: 'theme-accent-random-style-saturated', labelText: 'Saturated', value: 'saturated' },
+      { id: 'theme-accent-random-style-saturated', labelText: message.get('menuContentThemeAccentRandomStyleSaturated'), value: 'saturated' },
     ],
     groupName: 'theme-accent-random-style',
     path: 'theme.accent.random.style',
@@ -614,7 +616,7 @@ themeSetting.accent = (parent) => {
   });
 
   themeSetting.control.accent.randomiseNow = new Button({
-    text: 'Randomise now',
+    text: message.get('menuContentThemeAccentRandomRandomise'),
     style: ['line'],
     func: () => {
       theme.accent.random.render();
@@ -651,7 +653,7 @@ themeSetting.accent = (parent) => {
   themeSetting.control.accent.cycle.alert = new Alert({
     iconName: 'info',
     children: [
-      node('p:Take care as a fast changing Accent hue may cause performance issues.|class:small')
+      node(`p:${message.get('menuContentThemeAccentCycleAlert')}|class:small`)
     ]
   });
 
@@ -659,7 +661,7 @@ themeSetting.accent = (parent) => {
     object: state.get.current(),
     path: 'theme.accent.cycle.active',
     id: 'theme-accent-random-cycle-active',
-    labelText: 'Auto change Accent hue',
+    labelText: message.get('menuContentThemeAccentCycleActive'),
     action: () => {
       themeSetting.control.accent.cycle.collapse.update();
       theme.accent.cycle.bind();
@@ -673,7 +675,7 @@ themeSetting.accent = (parent) => {
     object: state.get.current(),
     path: 'theme.accent.cycle.speed',
     id: 'theme-accent-random-cycle-speed',
-    labelText: 'Change delay',
+    labelText: message.get('menuContentThemeAccentCycleSpeed'),
     value: state.get.current().theme.accent.cycle.speed,
     defaultValue: state.get.default().theme.accent.cycle.speed,
     min: state.get.minMax().theme.accent.cycle.speed.min,
@@ -688,7 +690,7 @@ themeSetting.accent = (parent) => {
     object: state.get.current(),
     path: 'theme.accent.cycle.step',
     id: 'theme-accent-random-cycle-step',
-    labelText: 'Change steps',
+    labelText: message.get('menuContentThemeAccentCycleStep'),
     value: state.get.current().theme.accent.cycle.step,
     defaultValue: state.get.default().theme.accent.cycle.step,
     min: state.get.minMax().theme.accent.cycle.step.min,
@@ -700,7 +702,7 @@ themeSetting.accent = (parent) => {
   });
 
   themeSetting.control.accent.cycle.stepHelper = new Control_helperText({
-    text: ['Auto change Accent hue will not work when the Accent colour is a grey or black.']
+    text: [message.get('menuContentThemeAccentCycleHelperPara1')]
   });
 
   themeSetting.control.accent.cycle.area = node('div', [
@@ -761,8 +763,8 @@ themeSetting.font = (parent) => {
       id: 'theme-font-display-name',
       value: state.get.current().theme.font.display.name,
       defaultValue: state.get.default().theme.font.display.name,
-      placeholder: 'Google font name',
+      placeholder: message.get('menuContentThemeFontDisplayNamePlaceholder'),
-      labelText: 'Display font',
+      labelText: message.get('menuContentThemeFontDisplayNameLabel'),
       action: () => {
         theme.font.display.delay();
         data.save();
@@ -771,16 +773,17 @@ themeSetting.font = (parent) => {
     nameHelper: new Control_helperText({
       complexText: true,
       text: [
-        `Use a ${(new Link({ text: 'Google Font', href: 'https://fonts.google.com/', openNew: true })).link().outerHTML} to customise the Clock, Date, Group names and Bookmark Letters.`,
+        message.get('menuContentThemeFontDisplayNameHelperPara1'),
-        'Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Kanit"',
+        (new Link({ text: message.get('menuContentThemeFontDisplayNameHelperLink'), href: 'https://fonts.google.com/', openNew: true })).link().outerHTML,
-        'Clear the field to use the default font "Fjalla One".'
+        message.get('menuContentThemeFontDisplayNameHelperPara2'),
+        message.get('menuContentThemeFontDisplayNameHelperPara3')
       ]
     }),
     weight: new Control_slider({
       object: state.get.current(),
       path: 'theme.font.display.weight',
       id: 'theme-font-display-weight',
-      labelText: 'Font weight',
+      labelText: message.get('menuContentThemeFontDisplayWeightLabel'),
       value: state.get.current().theme.font.display.weight,
       defaultValue: state.get.default().theme.font.display.weight,
       step: state.get.step().theme.font.display.weight,
@@ -792,7 +795,7 @@ themeSetting.font = (parent) => {
       }
     }),
     weightLight: new Button({
-      text: 'Light',
+      text: message.get('menuContentThemeFontDisplayWeightLight'),
       style: ['line'],
       func: () => {
         state.get.current().theme.font.display.weight = fontWeight.light;
@@ -802,7 +805,7 @@ themeSetting.font = (parent) => {
       }
     }),
     weightRegular: new Button({
-      text: 'Regular',
+      text: message.get('menuContentThemeFontDisplayWeightRegular'),
       style: ['line'],
       func: () => {
         state.get.current().theme.font.display.weight = fontWeight.regular;
@@ -812,7 +815,7 @@ themeSetting.font = (parent) => {
       }
     }),
     weightBold: new Button({
-      text: 'Bold',
+      text: message.get('menuContentThemeFontDisplayWeightBold'),
       style: ['line'],
       func: () => {
         state.get.current().theme.font.display.weight = fontWeight.bold;
@@ -822,13 +825,13 @@ themeSetting.font = (parent) => {
       }
     }),
     weightHelper: new Control_helperText({
-      text: ['Not all fonts support all weights. Refer to the Google Font page to see which are available.']
+      text: [message.get('menuContentThemeFontDisplayWeightHelperPara1')]
     }),
     style: new Control_radio({
       object: state.get.current(),
       radioGroup: [
-        { id: 'theme-font-display-style-normal', labelText: 'Normal', value: 'normal' },
+        { id: 'theme-font-display-style-normal', labelText: message.get('menuContentThemeFontDisplayStyleNormal'), value: 'normal' },
-        { id: 'theme-font-display-style-italic', labelText: 'Italic', value: 'italic' }
+        { id: 'theme-font-display-style-italic', labelText: message.get('menuContentThemeFontDisplayStyleItalic'), value: 'italic' }
       ],
       groupName: 'theme-font-display-style',
       path: 'theme.font.display.style',
@@ -849,8 +852,8 @@ themeSetting.font = (parent) => {
       id: 'theme-font-ui-name',
       value: state.get.current().theme.font.ui.name,
       defaultValue: state.get.default().theme.font.ui.name,
-      placeholder: 'Google font name',
+      placeholder: message.get('menuContentThemeFontUiNamePlaceholder'),
-      labelText: 'User interface font',
+      labelText: message.get('menuContentThemeFontUiNameLabel'),
       action: () => {
         theme.font.ui.delay();
         data.save();
@@ -859,16 +862,17 @@ themeSetting.font = (parent) => {
     nameHelper: new Control_helperText({
       complexText: true,
       text: [
-        `Use a ${(new Link({ text: 'Google Font', href: 'https://fonts.google.com/', openNew: true })).link().outerHTML} to customise the Bookmark name, URL and form elements.`,
+        message.get('menuContentThemeFontUiNameHelperPara1'),
-        'Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto", "Source Sans Pro" or "Noto Sans"',
+        (new Link({ text: message.get('menuContentThemeFontUiNameHelperLink'), href: 'https://fonts.google.com/', openNew: true })).link().outerHTML,
-        'Clear the field to use the default font "Open Sans".'
+        message.get('menuContentThemeFontUiNameHelperPara2'),
+        message.get('menuContentThemeFontUiNameHelperPara3')
       ]
     }),
     weight: new Control_slider({
       object: state.get.current(),
       path: 'theme.font.ui.weight',
       id: 'theme-font-ui-weight',
-      labelText: 'Font weight',
+      labelText: message.get('menuContentThemeFontUiWeightLabel'),
       value: state.get.current().theme.font.ui.weight,
       defaultValue: state.get.default().theme.font.ui.weight,
       step: state.get.step().theme.font.ui.weight,
@@ -880,7 +884,7 @@ themeSetting.font = (parent) => {
       }
     }),
     weightLight: new Button({
-      text: 'Light',
+      text: message.get('menuContentThemeFontUiWeightLight'),
       style: ['line'],
       func: () => {
         state.get.current().theme.font.ui.weight = fontWeight.light;
@@ -890,7 +894,7 @@ themeSetting.font = (parent) => {
       }
     }),
     weightRegular: new Button({
-      text: 'Regular',
+      text: message.get('menuContentThemeFontUiWeightRegular'),
       style: ['line'],
       func: () => {
         state.get.current().theme.font.ui.weight = fontWeight.regular;
@@ -900,7 +904,7 @@ themeSetting.font = (parent) => {
       }
     }),
     weightBold: new Button({
-      text: 'Bold',
+      text: message.get('menuContentThemeFontUiWeightBold'),
       style: ['line'],
       func: () => {
         state.get.current().theme.font.ui.weight = fontWeight.bold;
@@ -910,13 +914,13 @@ themeSetting.font = (parent) => {
       }
     }),
     weightHelper: new Control_helperText({
-      text: ['Not all fonts support all weights. Refer to the Google Font page to see which are available.']
+      text: [message.get('menuContentThemeFontUiWeightHelperPara1')]
     }),
     style: new Control_radio({
       object: state.get.current(),
       radioGroup: [
-        { id: 'theme-font-ui-style-normal', labelText: 'Normal', value: 'normal' },
+        { id: 'theme-font-ui-style-normal', labelText: message.get('menuContentThemeFontUiStyleNormal'), value: 'normal' },
-        { id: 'theme-font-ui-style-italic', labelText: 'Italic', value: 'italic' }
+        { id: 'theme-font-ui-style-italic', labelText: message.get('menuContentThemeFontUiStyleItalic'), value: 'italic' }
       ],
       groupName: 'theme-font-ui-style',
       path: 'theme.font.ui.style',
@@ -992,7 +996,7 @@ themeSetting.radius = (parent) => {
     object: state.get.current(),
     path: 'theme.radius',
     id: 'theme-radius',
-    labelText: 'Corners radius',
+    labelText: message.get('menuContentThemeRadius'),
     value: state.get.current().theme.radius,
     defaultValue: state.get.default().theme.radius,
     min: state.get.minMax().theme.radius.min,
@@ -1017,7 +1021,7 @@ themeSetting.shadow = (parent) => {
     object: state.get.current(),
     path: 'theme.shadow',
     id: 'theme-shadow',
-    labelText: 'Shadow size',
+    labelText: message.get('menuContentThemeShadow'),
     value: state.get.current().theme.shadow,
     defaultValue: state.get.default().theme.shadow,
     min: state.get.minMax().theme.shadow.min,
@@ -1043,7 +1047,7 @@ themeSetting.shade = (parent) => {
       object: state.get.current(),
       path: 'theme.shade.opacity',
       id: 'theme.shade.opacity',
-      labelText: 'Shade opacity',
+      labelText: message.get('menuContentThemeShadeOpacity'),
       value: state.get.current().theme.shade.opacity,
       defaultValue: state.get.default().theme.shade.opacity,
       min: state.get.minMax().theme.shade.opacity.min,
@@ -1057,7 +1061,7 @@ themeSetting.shade = (parent) => {
       object: state.get.current(),
       path: 'theme.shade.blur',
       id: 'theme.shade.blur',
-      labelText: 'Shade blur',
+      labelText: message.get('menuContentThemeShadeBlurLabel'),
       value: state.get.current().theme.shade.blur,
       defaultValue: state.get.default().theme.shade.blur,
       min: state.get.minMax().theme.shade.blur.min,
@@ -1068,7 +1072,7 @@ themeSetting.shade = (parent) => {
       }
     }),
     blurHelper: new Control_helperText({
-      text: ['Not supported by all browsers.']
+      text: [message.get('menuContentThemeShadeBlurHelperPara1')]
     })
   };
 
@@ -1088,7 +1092,7 @@ themeSetting.opacity = (parent) => {
     object: state.get.current(),
     path: 'theme.opacity.general',
     id: 'theme-opacity-general',
-    labelText: 'All opacity',
+    labelText: message.get('menuContentThemeOpacityGeneralLabel'),
     value: state.get.current().theme.opacity.general,
     defaultValue: state.get.default().theme.opacity.general,
     min: state.get.minMax().theme.opacity.general.min,
@@ -1133,14 +1137,17 @@ themeSetting.opacity = (parent) => {
   });
 
   themeSetting.control.opacity.generalHelper = new Control_helperText({
-    text: ['Change the opacity of Search bar, Bookmarks, Group controls and the Toolbar.', 'Opacity can also be changed when editing individual Bookmarks.']
+    text: [
+      message.get('menuContentThemeOpacityGeneralHelperPara1'),
+      message.get('menuContentThemeOpacityGeneralHelperPara2')
+    ]
   });
 
   themeSetting.control.opacity.toolbar = new Control_sliderSlim({
     object: state.get.current(),
     path: 'theme.toolbar.opacity',
     id: 'theme-toolbar-opacity',
-    labelText: 'Toolbar',
+    labelText: message.get('menuContentThemeOpacityToolbar'),
     value: state.get.current().theme.toolbar.opacity,
     defaultValue: state.get.default().theme.toolbar.opacity,
     min: state.get.minMax().theme.toolbar.opacity.min,
@@ -1160,7 +1167,7 @@ themeSetting.opacity = (parent) => {
     object: state.get.current(),
     path: 'theme.bookmark.item.opacity',
     id: 'theme-bookmark-item-opacity',
-    labelText: 'Bookmark',
+    labelText: message.get('menuContentThemeOpacityBookmark'),
     value: state.get.current().theme.bookmark.item.opacity,
     defaultValue: state.get.default().theme.bookmark.item.opacity,
     min: state.get.minMax().theme.bookmark.item.opacity.min,
@@ -1182,7 +1189,7 @@ themeSetting.opacity = (parent) => {
     object: state.get.current(),
     path: 'theme.header.search.opacity',
     id: 'theme-header-search-opacity',
-    labelText: 'Search box',
+    labelText: message.get('menuContentThemeOpacitySearch'),
     value: state.get.current().theme.header.search.opacity,
     defaultValue: state.get.default().theme.header.search.opacity,
     min: state.get.minMax().theme.header.search.opacity.min,
@@ -1203,7 +1210,7 @@ themeSetting.opacity = (parent) => {
       object: state.get.current(),
       path: 'theme.group.toolbar.opacity',
       id: 'theme-group-toolbar-opacity',
-      labelText: 'Group toolbar',
+      labelText: message.get('menuContentThemeOpacityGroupToolbar'),
       value: state.get.current().theme.group.toolbar.opacity,
       defaultValue: state.get.default().theme.group.toolbar.opacity,
       min: state.get.minMax().theme.group.toolbar.opacity.min,
@@ -1249,6 +1256,8 @@ themeSetting.opacity = (parent) => {
 
 themeSetting.background = (parent) => {
 
+  const supportLink = supportSetting.supportPage.get();
+
   const updateVideoPlayState = () => {
 
     if (theme.background.element.video) {
@@ -1265,12 +1274,12 @@ themeSetting.background = (parent) => {
     type: new Control_radio({
       object: state.get.current(),
       radioGroup: [
-        { id: 'theme-background-type-theme', labelText: 'Background by Theme', description: 'Use the Background colour defined by the Theme.', value: 'theme' },
+        { id: 'theme-background-type-theme', labelText: message.get('menuContentThemeBackgroundTypeThemeLabel'), description: message.get('menuContentThemeBackgroundTypeThemeDescription'), value: 'theme' },
-        { id: 'theme-background-type-accent', labelText: 'Background by Accent', description: 'Use the Accent colour for the Background.', value: 'accent' },
+        { id: 'theme-background-type-accent', labelText: message.get('menuContentThemeBackgroundTypeAccentLabel'), description: message.get('menuContentThemeBackgroundTypeAccentDescription'), value: 'accent' },
-        { id: 'theme-background-type-color', labelText: 'Custom colour', value: 'color' },
+        { id: 'theme-background-type-color', labelText: message.get('menuContentThemeBackgroundTypeColor'), value: 'color' },
-        { id: 'theme-background-type-gradient', labelText: 'Gradient', value: 'gradient' },
+        { id: 'theme-background-type-gradient', labelText: message.get('menuContentThemeBackgroundTypeGradient'), value: 'gradient' },
-        { id: 'theme-background-type-image', labelText: 'Image', value: 'image' },
+        { id: 'theme-background-type-image', labelText: message.get('menuContentThemeBackgroundTypeImage'), value: 'image' },
-        { id: 'theme-background-type-video', labelText: 'Video', value: 'video' }
+        { id: 'theme-background-type-video', labelText: message.get('menuContentThemeBackgroundTypeVideo'), value: 'video' }
       ],
       groupName: 'theme-background-type',
       path: 'theme.background.type',
@@ -1287,7 +1296,7 @@ themeSetting.background = (parent) => {
       object: state.get.current(),
       path: 'theme.background.color',
       id: 'theme-background-color',
-      labelText: 'Background colour',
+      labelText: message.get('menuContentThemeBackgroundColor'),
       defaultValue: state.get.default().theme.background.color.rgb,
       minMaxObject: state.get.minMax(),
       randomColor: true,
@@ -1309,7 +1318,7 @@ themeSetting.background = (parent) => {
         object: state.get.current(),
         path: 'theme.background.gradient.angle',
         id: 'theme-background-gradient-angle',
-        labelText: 'Background gradient angle',
+        labelText: message.get('menuContentThemeBackgroundGradientAngle'),
         value: state.get.current().theme.background.gradient.angle,
         defaultValue: state.get.default().theme.background.gradient.angle,
         min: state.get.minMax().theme.background.gradient.angle.min,
@@ -1324,7 +1333,7 @@ themeSetting.background = (parent) => {
         object: state.get.current(),
         path: 'theme.background.gradient.start',
         id: 'theme-background-gradient-start',
-        labelText: 'Background gradient start',
+        labelText: message.get('menuContentThemeBackgroundGradientLeft'),
         defaultValue: state.get.default().theme.background.gradient.start.rgb,
         minMaxObject: state.get.minMax(),
         randomColor: true,
@@ -1345,7 +1354,7 @@ themeSetting.background = (parent) => {
         object: state.get.current(),
         path: 'theme.background.gradient.end',
         id: 'theme-background-gradient-end',
-        labelText: 'Background gradient end',
+        labelText: message.get('menuContentThemeBackgroundGradientRight'),
         defaultValue: state.get.default().theme.background.gradient.end.rgb,
         minMaxObject: state.get.minMax(),
         randomColor: true,
@@ -1367,8 +1376,8 @@ themeSetting.background = (parent) => {
       alert: new Alert({
         iconName: 'info',
         children: [
-          node('p:Local images can no longer be used. Images must be hosted somewhere online.|class:small'),
+          node(`p:${message.get('menuContentThemeBackgroundImageAlertPara1')}|class:small`),
-          complexNode({ tag: 'p', attr: [{ key: 'class', value: 'small' }], node: [(new Link({ text: 'Why has this changed?', href: supportSetting.link.url + supportSetting.link.page.localBackgroundImage, openNew: true })).link()] })
+          complexNode({ tag: 'p', attr: [{ key: 'class', value: 'small' }], node: [(new Link({ text: message.get('menuContentThemeBackgroundImageAlertPara2'), href: supportLink.baseUrl + supportLink.page.localBackgroundImage.url, openNew: true })).link()] })
         ]
       }),
       url: new Control_textarea({
@@ -1376,8 +1385,8 @@ themeSetting.background = (parent) => {
         path: 'theme.background.image.url',
         id: 'theme-background-image-url',
         value: state.get.current().theme.background.image.url,
-        placeholder: 'https://www.example.com/image.jpg',
+        placeholder: message.get('menuContentThemeBackgroundImageUrlPlaceholder'),
-        labelText: 'URL',
+        labelText: message.get('menuContentThemeBackgroundImageUrlLabel'),
         action: () => {
           theme.background.image.render();
           data.save();
@@ -1385,17 +1394,17 @@ themeSetting.background = (parent) => {
       }),
       urlHelper: new Control_helperText({
         text: [
-          'Add more than one URL separated by spaces or on new lines for a random background image on load.',
+          message.get('menuContentThemeBackgroundImageUrlHelperPara1'),
-          'Unsplash can be used for random images, eg:',
+          message.get('menuContentThemeBackgroundImageUrlHelperPara2'),
-          'https://source.unsplash.com/random/1920x1080/?night,day,sky',
+          message.get('menuContentThemeBackgroundImageUrlHelperPara3'),
-          'Change parameters after .../random/ for more options. Loading times may vary.'
+          message.get('menuContentThemeBackgroundImageUrlHelperPara4')
         ]
       }),
       blur: new Control_sliderSlim({
         object: state.get.current(),
         path: 'theme.background.image.blur',
         id: 'theme-background-image-blur',
-        labelText: 'Blur',
+        labelText: message.get('menuContentThemeBackgroundImageBlur'),
         value: state.get.current().theme.background.image.blur,
         defaultValue: state.get.default().theme.background.image.blur,
         min: state.get.minMax().theme.background.image.blur.min,
@@ -1409,7 +1418,7 @@ themeSetting.background = (parent) => {
         object: state.get.current(),
         path: 'theme.background.image.grayscale',
         id: 'theme-background-image-grayscale',
-        labelText: 'Grayscale',
+        labelText: message.get('menuContentThemeBackgroundImageGrayscale'),
         value: state.get.current().theme.background.image.grayscale,
         defaultValue: state.get.default().theme.background.image.grayscale,
         min: state.get.minMax().theme.background.image.grayscale.min,
@@ -1423,7 +1432,7 @@ themeSetting.background = (parent) => {
         object: state.get.current(),
         path: 'theme.background.image.scale',
         id: 'theme-background-image-scale',
-        labelText: 'Scale',
+        labelText: message.get('menuContentThemeBackgroundImageScale'),
         value: state.get.current().theme.background.image.scale,
         defaultValue: state.get.default().theme.background.image.scale,
         min: state.get.minMax().theme.background.image.scale.min,
@@ -1437,7 +1446,7 @@ themeSetting.background = (parent) => {
         object: state.get.current(),
         path: 'theme.background.image.accent',
         id: 'theme-background-image-accent',
-        labelText: 'Accent',
+        labelText: message.get('menuContentThemeBackgroundImageAccent'),
         value: state.get.current().theme.background.image.accent,
         defaultValue: state.get.default().theme.background.image.accent,
         min: state.get.minMax().theme.background.image.accent.min,
@@ -1451,7 +1460,7 @@ themeSetting.background = (parent) => {
         object: state.get.current(),
         path: 'theme.background.image.opacity',
         id: 'theme-background-image-opacity',
-        labelText: 'Opacity',
+        labelText: message.get('menuContentThemeBackgroundImageOpacity'),
         value: state.get.current().theme.background.image.opacity,
         defaultValue: state.get.default().theme.background.image.opacity,
         min: state.get.minMax().theme.background.image.opacity.min,
@@ -1466,7 +1475,7 @@ themeSetting.background = (parent) => {
           object: state.get.current(),
           path: 'theme.background.image.vignette.opacity',
           id: 'theme-background-image-vignette-opacity',
-          labelText: 'Vignette',
+          labelText: message.get('menuContentThemeBackgroundImageVignetteOpacity'),
           value: state.get.current().theme.background.image.vignette.opacity,
           defaultValue: state.get.default().theme.background.image.vignette.opacity,
           min: state.get.minMax().theme.background.image.vignette.opacity.min,
@@ -1478,11 +1487,11 @@ themeSetting.background = (parent) => {
         }),
         range: new Control_sliderDouble({
           object: state.get.current(),
-          labelText: 'Shade start and end',
+          labelText: message.get('menuContentThemeBackgroundImageVignetteRangeLabel'),
           left: {
             path: 'theme.background.image.vignette.end',
             id: 'theme-background-image-vignette-end',
-            labelText: 'Shade end',
+            labelText: message.get('menuContentThemeBackgroundImageVignetteRangeLeft'),
             value: state.get.current().theme.background.image.vignette.end,
             defaultValue: state.get.default().theme.background.image.vignette.end,
             min: state.get.minMax().theme.background.image.vignette.end.min,
@@ -1496,7 +1505,7 @@ themeSetting.background = (parent) => {
           right: {
             path: 'theme.background.image.vignette.start',
             id: 'theme-background-image-vignette-start',
-            labelText: 'Shade start',
+            labelText: message.get('menuContentThemeBackgroundImageVignetteRangeRight'),
             value: state.get.current().theme.background.image.vignette.start,
             defaultValue: state.get.default().theme.background.image.vignette.start,
             min: state.get.minMax().theme.background.image.vignette.start.min,
@@ -1514,8 +1523,8 @@ themeSetting.background = (parent) => {
       alert: new Alert({
         iconName: 'info',
         children: [
-          node('p:YouTube page URLs <strong>can not</strong> be used.|class:small'),
+          node(`p:${message.get('menuContentThemeBackgroundVideoAlertPara1')}.|class:small`),
-          complexNode({ tag: 'p', attr: [{ key: 'class', value: 'small' }], node: [(new Link({ text: 'How to link to a video file.', href: supportSetting.link.url + supportSetting.link.page.backgroundImageVideo, openNew: true })).link()] })
+          complexNode({ tag: 'p', attr: [{ key: 'class', value: 'small' }], node: [(new Link({ text: message.get('menuContentThemeBackgroundVideoAlertPara2'), href: supportLink.baseUrl + supportLink.page.backgroundImageVideo.url, openNew: true })).link()] })
         ]
       }),
       url: new Control_textarea({
@@ -1523,8 +1532,8 @@ themeSetting.background = (parent) => {
         path: 'theme.background.video.url',
         id: 'theme-background-video-url',
         value: state.get.current().theme.background.video.url,
-        placeholder: 'https://www.example.com/video.mp4',
+        placeholder: message.get('menuContentThemeBackgroundVideoUrlPlaceholder'),
-        labelText: 'URL',
+        labelText: message.get('menuContentThemeBackgroundVideoUrlLabel'),
         action: () => {
           theme.background.video.clear();
           theme.background.video.render();
@@ -1533,15 +1542,15 @@ themeSetting.background = (parent) => {
       }),
       urlHelper: new Control_helperText({
         text: [
-          'Background video only supports a direct URL to a video file. Supports MP4 and WebM format.',
+          message.get('menuContentThemeBackgroundVideoUrlHelperPara1'),
-          'Add more than one URL separated by spaces or on new lines for a random background video on load.'
+          message.get('menuContentThemeBackgroundVideoUrlHelperPara2')
         ]
       }),
       blur: new Control_sliderSlim({
         object: state.get.current(),
         path: 'theme.background.video.blur',
         id: 'theme-background-video-blur',
-        labelText: 'Blur',
+        labelText: message.get('menuContentThemeBackgroundVideoBlur'),
         value: state.get.current().theme.background.video.blur,
         defaultValue: state.get.default().theme.background.video.blur,
         min: state.get.minMax().theme.background.video.blur.min,
@@ -1555,7 +1564,7 @@ themeSetting.background = (parent) => {
         object: state.get.current(),
         path: 'theme.background.video.grayscale',
         id: 'theme-background-video-grayscale',
-        labelText: 'Grayscale',
+        labelText: message.get('menuContentThemeBackgroundVideoGrayscale'),
         value: state.get.current().theme.background.video.grayscale,
         defaultValue: state.get.default().theme.background.video.grayscale,
         min: state.get.minMax().theme.background.video.grayscale.min,
@@ -1569,7 +1578,7 @@ themeSetting.background = (parent) => {
         object: state.get.current(),
         path: 'theme.background.video.scale',
         id: 'theme-background-video-scale',
-        labelText: 'Scale',
+        labelText: message.get('menuContentThemeBackgroundVideoScale'),
         value: state.get.current().theme.background.video.scale,
         defaultValue: state.get.default().theme.background.video.scale,
         min: state.get.minMax().theme.background.video.scale.min,
@@ -1583,7 +1592,7 @@ themeSetting.background = (parent) => {
         object: state.get.current(),
         path: 'theme.background.video.accent',
         id: 'theme-background-video-accent',
-        labelText: 'Accent',
+        labelText: message.get('menuContentThemeBackgroundVideoAccent'),
         value: state.get.current().theme.background.video.accent,
         defaultValue: state.get.default().theme.background.video.accent,
         min: state.get.minMax().theme.background.video.accent.min,
@@ -1597,7 +1606,7 @@ themeSetting.background = (parent) => {
         object: state.get.current(),
         path: 'theme.background.video.opacity',
         id: 'theme-background-video-opacity',
-        labelText: 'Opacity',
+        labelText: message.get('menuContentThemeBackgroundVideoOpacity'),
         value: state.get.current().theme.background.video.opacity,
         defaultValue: state.get.default().theme.background.video.opacity,
         min: state.get.minMax().theme.background.video.opacity.min,
@@ -1612,7 +1621,7 @@ themeSetting.background = (parent) => {
           object: state.get.current(),
           path: 'theme.background.video.vignette.opacity',
           id: 'theme-background-video-vignette-opacity',
-          labelText: 'Vignette',
+          labelText: message.get('menuContentThemeBackgroundVideoVignetteOpacity'),
           value: state.get.current().theme.background.video.vignette.opacity,
           defaultValue: state.get.default().theme.background.video.vignette.opacity,
           min: state.get.minMax().theme.background.video.vignette.opacity.min,
@@ -1624,11 +1633,11 @@ themeSetting.background = (parent) => {
         }),
         range: new Control_sliderDouble({
           object: state.get.current(),
-          labelText: 'Shade start and end',
+          labelText: message.get('menuContentThemeBackgroundVideoVignetteRangeLabel'),
           left: {
             path: 'theme.background.video.vignette.end',
             id: 'theme-background-video-vignette-end',
-            labelText: 'Shade end',
+            labelText: message.get('menuContentThemeBackgroundVideoVignetteRangeLeft'),
             value: state.get.current().theme.background.video.vignette.end,
             defaultValue: state.get.default().theme.background.video.vignette.end,
             min: state.get.minMax().theme.background.video.vignette.end.min,
@@ -1642,7 +1651,7 @@ themeSetting.background = (parent) => {
           right: {
             path: 'theme.background.video.vignette.start',
             id: 'theme-background-video-vignette-start',
-            labelText: 'Shade start',
+            labelText: message.get('menuContentThemeBackgroundVideoVignetteRangeRight'),
             value: state.get.current().theme.background.video.vignette.start,
             defaultValue: state.get.default().theme.background.video.vignette.start,
             min: state.get.minMax().theme.background.video.vignette.start.min,
@@ -1752,10 +1761,10 @@ themeSetting.layout = (parent) => {
   themeSetting.control.layout.color.by = new Control_radio({
     object: state.get.current(),
     radioGroup: [
-      { id: 'theme-layout-by-theme', labelText: 'Transparent', description: 'No background colour behind the Layout.', value: 'theme' },
+      { id: 'theme-layout-by-theme', labelText: message.get('menuContentThemeLayoutColorByTransparentLabel'), description: message.get('menuContentThemeLayoutColorByTransparentDescription'), value: 'theme' },
-      { id: 'theme-layout-by-custom', labelText: 'Custom colour', description: 'Use a custom colour behind the Layout.', value: 'custom' }
+      { id: 'theme-layout-by-custom', labelText: message.get('menuContentThemeLayoutColorByCustomLabel'), description: message.get('menuContentThemeLayoutColorByCustomDescription'), value: 'custom' }
     ],
-    label: 'Layout background colour',
+    label: message.get('menuContentThemeLayoutColorLabel'),
     groupName: 'theme-layout-by',
     path: 'theme.layout.color.by',
     action: () => {
@@ -1770,7 +1779,7 @@ themeSetting.layout = (parent) => {
     object: state.get.current(),
     path: 'theme.layout.color',
     id: 'theme-layout-color',
-    labelText: 'Layout background colour',
+    labelText: message.get('menuContentThemeLayoutColorColor'),
     defaultValue: state.get.default().theme.layout.color.rgb,
     minMaxObject: state.get.minMax(),
     action: () => {
@@ -1790,7 +1799,7 @@ themeSetting.layout = (parent) => {
     object: state.get.current(),
     path: 'theme.layout.color.opacity',
     id: 'theme-layout-color-opacity',
-    labelText: 'Background opacity',
+    labelText: message.get('menuContentThemeLayoutColorOpacity'),
     value: state.get.current().theme.layout.color.opacity,
     defaultValue: state.get.default().theme.layout.color.opacity,
     min: state.get.minMax().theme.layout.color.opacity.min,
@@ -1807,7 +1816,7 @@ themeSetting.layout = (parent) => {
     object: state.get.current(),
     path: 'theme.layout.color.blur',
     id: 'theme.layout-blur',
-    labelText: 'Background blur',
+    labelText: message.get('menuContentThemeLayoutColorBlurLabel'),
     value: state.get.current().theme.layout.color.blur,
     defaultValue: state.get.default().theme.layout.color.blur,
     min: state.get.minMax().theme.layout.color.blur.min,
@@ -1821,7 +1830,7 @@ themeSetting.layout = (parent) => {
   });
 
   themeSetting.control.layout.color.blurHelper = new Control_helperText({
-    text: ['Not supported by all browsers.']
+    text: [message.get('menuContentThemeLayoutColorBlurHelperPara1')]
   });
 
   themeSetting.control.layout.color.area = node('div', [
@@ -1845,7 +1854,7 @@ themeSetting.layout = (parent) => {
       object: state.get.current(),
       path: 'theme.layout.divider.size',
       id: 'theme.layout-divider-size',
-      labelText: 'Divider between Header and Bookmark area',
+      labelText: message.get('menuContentThemeLayoutDivider'),
       value: state.get.current().theme.layout.divider.size,
       defaultValue: state.get.default().theme.layout.divider.size,
       min: state.get.minMax().theme.layout.divider.size.min,
@@ -1889,10 +1898,10 @@ themeSetting.header = (parent) => {
   themeSetting.control.header.color.by = new Control_radio({
     object: state.get.current(),
     radioGroup: [
-      { id: 'theme-header-by-theme', labelText: 'Transparent', description: 'No background colour behind the Header area.', value: 'theme' },
+      { id: 'theme-header-by-theme', labelText: message.get('menuContentThemeHeaderColorByTransparentLabel'), description: message.get('menuContentThemeHeaderColorByTransparentDescription'), value: 'theme' },
-      { id: 'theme-header-by-custom', labelText: 'Custom colour', description: 'Use a custom colour behind the Header area.', value: 'custom' }
+      { id: 'theme-header-by-custom', labelText: message.get('menuContentThemeHeaderColorByCustomLabel'), description: message.get('menuContentThemeHeaderColorByCustomDescription'), value: 'custom' }
     ],
-    label: 'Header background colour',
+    label: message.get('menuContentThemeHeaderColorLabel'),
     groupName: 'theme-header-by',
     path: 'theme.header.color.by',
     action: () => {
@@ -1907,7 +1916,7 @@ themeSetting.header = (parent) => {
     object: state.get.current(),
     path: 'theme.header.color',
     id: 'theme-header-color',
-    labelText: 'Header area background colour',
+    labelText: message.get('menuContentThemeHeaderColorColor'),
     defaultValue: state.get.default().theme.header.color.rgb,
     minMaxObject: state.get.minMax(),
     action: () => {
@@ -1927,7 +1936,7 @@ themeSetting.header = (parent) => {
     object: state.get.current(),
     path: 'theme.header.color.opacity',
     id: 'theme-header-color-opacity',
-    labelText: 'Background opacity',
+    labelText: message.get('menuContentThemeHeaderColorOpacity'),
     value: state.get.current().theme.header.color.opacity,
     defaultValue: state.get.default().theme.header.color.opacity,
     min: state.get.minMax().theme.header.color.opacity.min,
@@ -1978,10 +1987,10 @@ themeSetting.bookmark = (parent) => {
   themeSetting.control.bookmark.color.by = new Control_radio({
     object: state.get.current(),
     radioGroup: [
-      { id: 'theme-bookmark-by-theme', labelText: 'Transparent', description: 'No background colour behind the Bookmark area.', value: 'theme' },
+      { id: 'theme-bookmark-by-theme', labelText: message.get('menuContentThemeBookmarkColorByTransparentLabel'), description: message.get('menuContentThemeBookmarkColorByTransparentDescription'), value: 'theme' },
-      { id: 'theme-bookmark-by-custom', labelText: 'Custom colour', description: 'Use a custom colour behind the Bookmark area.', value: 'custom' }
+      { id: 'theme-bookmark-by-custom', labelText: message.get('menuContentThemeBookmarkColorByCustomLabel'), description: message.get('menuContentThemeBookmarkColorByCustomDescription'), value: 'custom' }
     ],
-    label: 'Bookmark area background colour',
+    label: message.get('menuContentThemeBookmarkColorLabel'),
     groupName: 'theme-bookmark-by',
     path: 'theme.bookmark.color.by',
     action: () => {
@@ -1996,7 +2005,7 @@ themeSetting.bookmark = (parent) => {
     object: state.get.current(),
     path: 'theme.bookmark.color',
     id: 'theme-bookmark-color',
-    labelText: 'Header area background colour',
+    labelText: message.get('menuContentThemeBookmarkColorColor'),
     defaultValue: state.get.default().theme.bookmark.color.rgb,
     minMaxObject: state.get.minMax(),
     action: () => {
@@ -2016,7 +2025,7 @@ themeSetting.bookmark = (parent) => {
     object: state.get.current(),
     path: 'theme.bookmark.color.opacity',
     id: 'theme-bookmark-color-opacity',
-    labelText: 'Background opacity',
+    labelText: message.get('menuContentThemeBookmarkColorOpacity'),
     value: state.get.current().theme.bookmark.color.opacity,
     defaultValue: state.get.default().theme.bookmark.color.opacity,
     min: state.get.minMax().theme.bookmark.color.opacity.min,
@@ -2049,7 +2058,7 @@ themeSetting.bookmark = (parent) => {
     object: state.get.current(),
     path: 'theme.bookmark.item.border',
     id: 'theme-bookmark-item-border',
-    labelText: 'Bookmark border',
+    labelText: message.get('menuContentThemeBookmarkItemBorderLabel'),
     value: state.get.current().theme.bookmark.item.border,
     defaultValue: state.get.default().theme.bookmark.item.border,
     min: state.get.minMax().theme.bookmark.item.border.min,
@@ -2062,12 +2071,15 @@ themeSetting.bookmark = (parent) => {
   });
 
   themeSetting.control.bookmark.item.borderHelper = new Control_helperText({
-    text: ['Bookmark border can also be changed when editing individual Bookmarks.', 'The colour of the Border is defined by the Accent which can also be changed when editing individual Bookmarks.']
+    text: [
+      message.get('menuContentThemeBookmarkItemBorderHelperPara1'),
+      message.get('menuContentThemeBookmarkItemBorderHelperPara2')
+    ]
   });
 
   themeSetting.control.bookmark.item.rainbow = {
     add: new Button({
-      text: 'Add unique accent to each Bookmark',
+      text: message.get('menuContentThemeBookmarkItemRainbowAdd'),
       style: ['line'],
       func: () => {
         theme.accent.rainbow.render();
@@ -2075,7 +2087,7 @@ themeSetting.bookmark = (parent) => {
       }
     }),
     remove: new Button({
-      text: 'Remove all accent overrides',
+      text: message.get('menuContentThemeBookmarkItemRainbowRemove'),
       style: ['line'],
       func: () => {
         theme.accent.rainbow.clear();
@@ -2083,7 +2095,7 @@ themeSetting.bookmark = (parent) => {
       }
     }),
     helper: new Control_helperText({
-      text: ['Bookmark custom Accent can also be changed when editing individual Bookmarks.']
+      text: [message.get('menuContentThemeBookmarkItemRainbowHelperPara1')]
     })
   };
 

src/component/menuContent/toolbarSetting/index.js

@@ -1,10 +1,11 @@
+import { message } from '../../message';
+
 import { state } from '../../state';
 import { data } from '../../data';
 import { header } from '../../header';
 import { layout } from '../../layout';
 import { toolbar } from '../../toolbar';
 
-
 import { Edge } from '../../edge';
 
 import { Control_helperText } from '../../control/helperText';
@@ -69,7 +70,7 @@ toolbarSetting.size = (parent) => {
     object: state.get.current(),
     path: 'toolbar.size',
     id: 'toolbar-size',
-    labelText: 'Toolbar size',
+    labelText: message.get('menuContentToolbarSize'),
     value: state.get.current().toolbar.size,
     defaultValue: state.get.default().toolbar.size,
     min: state.get.minMax().toolbar.size.min,
@@ -99,8 +100,8 @@ toolbarSetting.location = (parent) => {
   toolbarSetting.control.location.locationElement = new Control_radio({
     object: state.get.current(),
     radioGroup: [
-      { id: 'toolbar-location-corner', labelText: 'In a corner', value: 'corner' },
+      { id: 'toolbar-location-corner', labelText: message.get('menuContentToolbarLocationCorner'), value: 'corner' },
-      { id: 'toolbar-location-header', labelText: 'In the Header', value: 'header' }
+      { id: 'toolbar-location-header', labelText: message.get('menuContentToolbarLocationHeader'), value: 'header' }
     ],
     groupName: 'toolbar-location',
     path: 'toolbar.location',
@@ -110,7 +111,6 @@ toolbarSetting.location = (parent) => {
       toolbar.current.update.style();
       header.item.mod.order();
       header.item.clear();
-      header.item.clear();
       header.item.render();
       toolbar.bar.render();
       layout.area.assemble();
@@ -133,23 +133,23 @@ toolbarSetting.location = (parent) => {
   });
 
   toolbarSetting.control.location.locationHelper = new Control_helperText({
-    text: ['Position the Toolbar inside the Header or in a corner of the window.']
+    text: [message.get('menuContentToolbarLocationHelperPara1')]
   });
 
   toolbarSetting.control.location.newLine = new Control_checkbox({
     object: state.get.current(),
     path: 'toolbar.newLine',
     id: 'header-newLine',
-    labelText: 'New line',
+    labelText: message.get('menuContentToolbarLocationNewLineLabel'),
-    description: 'Force on to a new line and seperate from other Header items.',
+    description: message.get('menuContentToolbarLocationNewLineDescription'),
-    action: function () {
+    action: function() {
       applyCSSState('toolbar.newLine');
       data.save();
     }
   });
 
   toolbarSetting.control.location.newLineHelper = new Control_helperText({
-    text: ['Only available when the Toolbar is positioned inside the Header.']
+    text: [message.get('menuContentToolbarLocationNewLineHelperPara1')]
   });
 
   parent.appendChild(
@@ -169,12 +169,12 @@ toolbarSetting.position = (parent) => {
   toolbarSetting.control.positionElement = new Control_radioGrid({
     object: state.get.current(),
     radioGroup: [
-      { id: 'toolbar-position-top-left', labelText: 'Top left', value: 'top-left', position: 1 },
+      { id: 'toolbar-position-top-left', labelText: message.get('menuContentToolbarPositionTopLeft'), value: 'top-left', position: 1 },
-      { id: 'toolbar-position-top-right', labelText: 'Top right', value: 'top-right', position: 2 },
+      { id: 'toolbar-position-top-right', labelText: message.get('menuContentToolbarPositionTopRight'), value: 'top-right', position: 2 },
-      { id: 'toolbar-position-bottom-left', labelText: 'Bottom left', value: 'bottom-left', position: 3 },
+      { id: 'toolbar-position-bottom-left', labelText: message.get('menuContentToolbarPositionBottomLeft'), value: 'bottom-left', position: 3 },
-      { id: 'toolbar-position-bottom-right', labelText: 'Bottom right', value: 'bottom-right', position: 4 }
+      { id: 'toolbar-position-bottom-right', labelText: message.get('menuContentToolbarPositionBottomRight'), value: 'bottom-right', position: 4 }
     ],
-    label: 'Toolbar position',
+    label: message.get('menuContentToolbarPositionLabel'),
     groupName: 'toolbar-position',
     path: 'toolbar.position',
     gridSize: '2x2',
@@ -187,11 +187,11 @@ toolbarSetting.position = (parent) => {
   });
 
   toolbarSetting.control.positionElementHelper1 = new Control_helperText({
-    text: ['Position the Toolbar in one of the four corners of the window.']
+    text: [message.get('menuContentToolbarPositionHelper1Para1')]
   });
 
   toolbarSetting.control.positionElementHelper2 = new Control_helperText({
-    text: ['Only available when the Toolbar is positioned in a corner.']
+    text: [message.get('menuContentToolbarPositionHelper2Para1')]
   });
 
   parent.appendChild(
@@ -210,7 +210,7 @@ toolbarSetting.controls = (parent) => {
     object: state.get.current(),
     id: 'toolbar-accent-show',
     path: 'toolbar.accent.show',
-    labelText: 'Show Accent control',
+    labelText: message.get('menuContentToolbarControlsAccent'),
     action: () => {
       toolbar.current.update.control();
       data.save();
@@ -221,7 +221,7 @@ toolbarSetting.controls = (parent) => {
     object: state.get.current(),
     id: 'toolbar-add-show',
     path: 'toolbar.add.show',
-    labelText: 'Show Add control',
+    labelText: message.get('menuContentToolbarControlsAdd'),
     action: () => {
       toolbar.current.update.control();
       data.save();
@@ -232,7 +232,7 @@ toolbarSetting.controls = (parent) => {
     object: state.get.current(),
     id: 'toolbar-edit-show',
     path: 'toolbar.edit.show',
-    labelText: 'Show Edit control',
+    labelText: message.get('menuContentToolbarControlsEdit'),
     action: () => {
       toolbar.current.update.control();
       data.save();

src/component/menuNav/index.js

@@ -1,10 +1,13 @@
+import { message } from '../message';
+
 import { Button } from '../button';
 
 import { node } from '../../utility/node';
+import { uppercaseFirstLetter } from '../../utility/uppercaseFirstLetter';
 
 import './index.css';
 
-export const MenuNav = function ({
+export const MenuNav = function({
   navData = {},
   action = false
 } = {}) {
@@ -116,6 +119,8 @@ export const MenuNav = function ({
 
     navData.forEach((item) => {
 
+      const navTop = item.name;
+
       const navItem = {
         topLevel: false,
         subLevel: false,
@@ -123,7 +128,7 @@ export const MenuNav = function ({
       };
 
       const navButton = new Button({
-        text: item.name,
+        text: message.get(`menuNav${uppercaseFirstLetter(navTop)}Label`),
         style: ['link'],
         block: true,
         classList: ['menu-nav-tab'],
@@ -148,7 +153,7 @@ export const MenuNav = function ({
 
         item.sub.forEach((item) => {
 
-          const subLevelLink = node('a:' + item + '|href:#menu-content-item-' + this.makeId(item) + ',class:menu-nav-sub button button-link button-small,tabindex:1');
+          const subLevelLink = node('a:' + message.get(`menuNav${uppercaseFirstLetter(navTop)}SubNav${uppercaseFirstLetter(item)}`) + '|href:#menu-content-item-' + this.makeId(item) + ',class:menu-nav-sub button button-link button-small,tabindex:1');
 
           subNav.appendChild(subLevelLink);
 

src/component/message/index.js

@@ -0,0 +1,134 @@
+import { APP_NAME } from '../../constant';
+
+import { state } from '../state';
+import { browserDetect } from '../browserDetect';
+
+import { default as bn } from '../../locale/bn/messages.json';
+import { default as de } from '../../locale/de/messages.json';
+import { default as en_GB } from '../../locale/en_GB/messages.json';
+import { default as en_US } from '../../locale/en_US/messages.json';
+import { default as es } from '../../locale/es/messages.json';
+import { default as fil } from '../../locale/fil/messages.json';
+import { default as fr } from '../../locale/fr/messages.json';
+import { default as gu } from '../../locale/gu/messages.json';
+import { default as hi } from '../../locale/hi/messages.json';
+import { default as id } from '../../locale/id/messages.json';
+import { default as it } from '../../locale/it/messages.json';
+import { default as ja } from '../../locale/ja/messages.json';
+import { default as ms } from '../../locale/ms/messages.json';
+import { default as pt } from '../../locale/pt/messages.json';
+import { default as ru } from '../../locale/ru/messages.json';
+import { default as uk } from '../../locale/uk/messages.json';
+import { default as vi } from '../../locale/vi/messages.json';
+
+const message = {};
+
+message.language = {
+  pack: { bn, de, en_GB, en_US, es, fil, fr, gu, hi, id, it, ja, ms, pt, ru, uk, vi }
+};
+
+message.language.list = () => {
+
+  return [
+    { code: 'system', name: message.get('menuContentLanguageSystem') }, // system
+    { name: '–', disabled: true },
+    { code: 'bn', name: 'বাংলা [bn]' }, // Bengali
+    { code: 'de', name: 'Deutsch [de]' }, // German
+    { code: 'en_GB', name: 'English [en] (GB)' }, // English GB
+    { code: 'en_US', name: 'English [en] (US)' }, // English USA
+    { code: 'es', name: 'Español [es]' }, // Spanish
+    { code: 'fil', name: 'Filipino [fi]' }, // Filipino
+    { code: 'fr', name: 'Français [fr]' }, // French
+    { code: 'gu', name: 'ગુજરાતી [gu]' }, // Gujarati
+    { code: 'hi', name: 'हिंदी [hi]' }, // Hindi
+    { code: 'id', name: 'Indonesia [id]' }, // Indonesian
+    { code: 'it', name: 'Italiano [it]' }, // Italian
+    { code: 'ja', name: '日本語 [ja]' }, // Japanese
+    { code: 'ms', name: 'Melayu [ms]' }, // Malay
+    { code: 'pt', name: 'Português [pt]' }, // Portuguese
+    { code: 'ru', name: 'Pусский [ru]' }, // Russian
+    { code: 'uk', name: 'український [uk]' }, // Ukrainian
+    { code: 'vi', name: 'англійська [vi]' } // Vietnamese
+  ];
+
+};
+
+message.language.name = () => message.language.list().map(item => item.name);
+
+message.language.code = () => message.language.list().map(item => item.code);
+
+message.get = (stringId) => {
+
+  let string;
+
+  switch (state.get.current().language) {
+
+    // use system language
+    case 'system':
+
+      if (browserDetect().chrome && typeof chrome != 'undefined') {
+        // if browser is chrome
+
+        if ('i18n' in chrome) {
+          // if installed as extension
+
+          string = chrome.i18n.getMessage(stringId);
+
+        } else {
+
+          string = message.language.pack.en_GB[stringId].message;
+
+        }
+
+      } else if (browserDetect().firefox && typeof browser != 'undefined') {
+        // if browser is firefox
+
+        if ('i18n' in browser) {
+          // if installed as addon
+
+          string = browser.i18n.getMessage(stringId);
+
+        } else {
+
+          string = message.language.pack.en_GB[stringId].message;
+
+        }
+
+      } else {
+
+        string = message.language.pack.en_GB[stringId].message;
+
+      }
+
+      break;
+
+      // use manually selected language
+    default:
+
+      if (stringId in message.language.pack[state.get.current().language]) {
+
+        // string found in chosen language
+        string = message.language.pack[state.get.current().language][stringId].message;
+
+      } else {
+
+        // or use default language
+        string = message.language.pack.en_GB[stringId].message;
+
+      }
+
+      break;
+
+  }
+
+  if (string.indexOf('{appName}') > -1) {
+
+    string = string.replaceAll('{appName}', APP_NAME);
+
+  }
+
+  return string;
+
+};
+
+export { message };

src/component/state/index.js

@@ -3,6 +3,7 @@ const state = {};
 state.current = {};
 
 state.default = {
+  language: 'system',
   layout: {
     area: {
       header: { width: 100, justify: 'center' },
@@ -269,6 +270,7 @@ state.set = {
   restore: {
     setup: (dataToRestore) => {
 
+      state.current.language = dataToRestore.state.language;
       state.current.layout = dataToRestore.state.layout;
       state.current.header = dataToRestore.state.header;
       state.current.bookmark = dataToRestore.state.bookmark;

src/component/themePreset/index.js

@@ -1,4 +1,3 @@
-
 import { acrid } from './acrid';
 import { aerial } from './aerial';
 import { app } from './app';

src/component/toolbarControl/index.js

@@ -1,3 +1,5 @@
+import { message } from '../message';
+
 import { state } from '../state';
 import { menu } from '../menu';
 import { data } from '../data';
@@ -19,7 +21,7 @@ import { applyCSSState } from '../../utility/applyCSSState';
 
 import './index.css';
 
-export const ToolbarControl = function () {
+export const ToolbarControl = function() {
 
   this.element = {
     toolbar: node('div|class:toolbar'),
@@ -35,7 +37,7 @@ export const ToolbarControl = function () {
       path: 'theme.accent',
       id: 'theme-accent-quick',
       type: 'color',
-      labelText: 'Accent colour',
+      labelText: message.get('toolbarAccent'),
       srOnly: true,
       inputButtonStyle: ['dot', 'line'],
       inputButtonClassList: ['toolbar-item'],
@@ -53,18 +55,20 @@ export const ToolbarControl = function () {
       }
     }),
     add: new Dropdown({
-      text: 'Add',
+      title: message.get('toolbarAddLabel'),
+      text: message.get('toolbarAddLabel'),
       buttonStyle: ['line'],
       buttonClassList: ['toolbar-item'],
       srOnly: true,
       iconName: 'add',
       menuItem: [
-        { text: 'New Group', iconName: 'addGroup', action: () => { group.add.render(); } },
+        { text: message.get('toolbarAddGroup'), iconName: 'addGroup', action: () => { group.add.render(); } },
-        { text: 'New Bookmark', iconName: 'addBookmark', action: () => { bookmark.add.render(); } }
+        { text: message.get('toolbarAddBookmark'), iconName: 'addBookmark', action: () => { bookmark.add.render(); } }
       ]
     }),
     edit: new Button({
-      text: 'Enter edit bookmark mode',
+      title: message.get('toolbarEdit'),
+      text: message.get('toolbarEdit'),
       srOnly: true,
       iconName: 'edit',
       classList: ['toolbar-item'],
@@ -78,7 +82,8 @@ export const ToolbarControl = function () {
       }
     }),
     setting: new Button({
-      text: 'Open settings menu',
+      title: message.get('toolbarSetting'),
+      text: message.get('toolbarSetting'),
       srOnly: true,
       iconName: 'settings',
       classList: ['toolbar-item'],

src/component/update/index.js

@@ -570,6 +570,7 @@ update.mod['7.0.0'] = function(data) {
   delete data.state.dropdown;
 
   return data;
+
 };
 
 update.mod['7.1.0'] = function(data) {
@@ -604,6 +605,7 @@ update.mod['7.1.0'] = function(data) {
   });
 
   return data;
+
 };
 
 update.mod['7.4.0'] = function(data) {
@@ -614,6 +616,15 @@ update.mod['7.4.0'] = function(data) {
   };
 
   return data;
+
+};
+
+update.mod['7.5.0'] = function(data) {
+
+  data.state.language = { system: true, selected: 'en_GB' };
+
+  return data;
+
 };
 
 update.run = (data) => {

src/component/version/index.js

@@ -1,6 +1,6 @@
 export const version = {};
 
-version.number = '7.4.0';
+version.number = '7.5.0';
 
 version.name = 'Delightful Komodo Dragon';
 

src/index.js

@@ -1,4 +1,5 @@
 import { component } from './component';
+
 import { APP_NAME } from './constant';
 
 console.log(APP_NAME + ' version:', component.version.number, component.version.name);

src/manifest.json

@@ -1,9 +1,10 @@
 {
-  "name": "nightTab",
+  "name": "__MSG_appName__",
-  "short_name": "nightTab",
+  "short_name": "__MSG_appShortName__",
-  "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
+  "description": "__MSG_appDescription__",
-  "version": "7.4.0",
+  "version": "7.5.0",
   "manifest_version": 2,
+  "default_locale": "en_GB",
   "chrome_url_overrides": {
     "newtab": "index.html"
   },

src/utility/uppercaseFirstLetter.js

@@ -0,0 +1,5 @@
+export const uppercaseFirstLetter = (string) => {
+
+  return string.charAt(0).toUpperCase() + string.slice(1);
+
+};

webpack.common.js

@@ -52,6 +52,9 @@ module.exports = {
       }, {
         from: './src/icon/',
         to: './icon/'
+      }, {
+        from: './src/locale',
+        to: './_locales'
       }, {
         from: './src/initialBackground.js',
         to: './initialBackground.js'

webpack.prod.js

@@ -7,7 +7,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 
 const version = require('./src/manifest.json').version;
-const name = require('./src/manifest.json').name;
+const name = require('./src/locale/en_GB/messages.json').appName.message;
 
 module.exports = merge(common, {
   mode: 'production',