Added option for a nested context menu

src/_locales/en/messages.json

@@ -118,6 +118,10 @@
     }
   },
 
+  "menuCaseCasing": {
+    "message": "Change casing",
+    "description": "An entry in the context menu. This is an entry for the case."
+  },
   "menuCaseLowercase": {
     "message": "Lowercase",
     "description": "An entry in the context menu. This is an entry for the case."
@@ -139,6 +143,14 @@
     "message": "Superscript",
     "description": "An entry in the context menu. This is an entry for the Unicode font."
   },
+  "menuFontSubscript": {
+    "message": "Subscript",
+    "description": "An entry in the context menu. This is an entry for the Unicode font."
+  },
+  "menuFontSmallCapsSmallCaps": {
+    "message": "Small Caps",
+    "description": "An entry in the context menu. This is an entry for the Unicode font."
+  },
   "menuFontSmallCaps": {
     "message": "Small Caps",
     "description": "An entry in the context menu. This is an entry for the Unicode font."
@@ -151,6 +163,10 @@
     "message": "Unicase",
     "description": "An entry in the context menu. This is an entry for the Unicode font."
   },
+  "menuFontSerif": {
+    "message": "Serif",
+    "description": "An entry in the context menu. This is an entry for the Unicode font."
+  },
   "menuFontSerifBold": {
     "message": "Serif bold",
     "description": "An entry in the context menu. This is an entry for the Unicode font."
@@ -163,6 +179,10 @@
     "message": "Serif bold italic",
     "description": "An entry in the context menu. This is an entry for the Unicode font."
   },
+  "menuFontSansSerifSansSerif": {
+    "message": "Sans-serif",
+    "description": "An entry in the context menu. This is an entry for the Unicode font."
+  },
   "menuFontSansSerif": {
     "message": "Sans-serif",
     "description": "An entry in the context menu. This is an entry for the Unicode font."
@@ -179,6 +199,10 @@
     "message": "Sans-serif bold italic",
     "description": "An entry in the context menu. This is an entry for the Unicode font."
   },
+  "menuFontScriptScript": {
+    "message": "Script",
+    "description": "An entry in the context menu. This is an entry for the Unicode font."
+  },
   "menuFontScript": {
     "message": "Script",
     "description": "An entry in the context menu. This is an entry for the Unicode font."
@@ -187,7 +211,11 @@
     "message": "Script bold",
     "description": "An entry in the context menu. This is an entry for the Unicode font."
   },
-  "menuFontScriptFraktur": {
+  "menuFontFrakturFraktur": {
+    "message": "Fraktur",
+    "description": "An entry in the context menu. This is an entry for the Unicode font."
+  },
+  "menuFontFraktur": {
     "message": "Fraktur",
     "description": "An entry in the context menu. This is an entry for the Unicode font."
   },
@@ -203,6 +231,10 @@
     "message": "Double-struck",
     "description": "An entry in the context menu. This is an entry for the Unicode font."
   },
+  "menuFontOther": {
+    "message": "Other/Emojis",
+    "description": "An entry in the context menu. This is an entry for the Unicode font."
+  },
   "menuFontCircled": {
     "message": "Circled",
     "description": "An entry in the context menu. This is an entry for the Unicode font."

src/background/modules/ContextMenu.js

@@ -5,7 +5,7 @@ import { isMobile } from "/common/modules/MobileHelper.js";
 import * as Notifications from "/common/modules/Notifications.js";
 
 import { COMMUNICATION_MESSAGE_TYPE } from "/common/modules/data/BrowserCommunicationTypes.js";
-import { menuStructure, SEPARATOR_ID, TRANSFORMATION_TYPE } from "/common/modules/data/Fonts.js";
+import { menuStructure, SEPARATOR_ID_PREFIX, TRANSFORMATION_TYPE } from "/common/modules/data/Fonts.js";
 
 const menus = browser.menus || browser.contextMenus; // fallback for Thunderbird
 const PREVIEW_STRING_CUT_LENGTH = 100; // a setting that may improve performance by not calculating invisible parts of the context menu
@@ -124,7 +124,8 @@ async function buildMenu(unicodeFontSettings, exampleText = null) {
     if (unicodeFontSettings.changeFont) {
         await addMenuItems(menuStructure[TRANSFORMATION_TYPE.FONT], unicodeFontSettings, exampleText);
     }
-    if (unicodeFontSettings.changeFont &&
+    if (!unicodeFontSettings.nested &&
+        unicodeFontSettings.changeFont &&
         unicodeFontSettings.changeCase &&
         !menuIsShown) {
         await menus.create({
@@ -149,9 +150,9 @@ async function buildMenu(unicodeFontSettings, exampleText = null) {
  * @returns {Promise<void>}
  */
 async function addMenuItems(menuItems, unicodeFontSettings = lastCachedUnicodeFontSettings, exampleText = null) {
-    for (const transformationId of menuItems) {
-        if (transformationId === SEPARATOR_ID) {
-            if (menuIsShown) {
+    for (const [transformationId, currentMenuItems] of Object.entries(menuItems)) {
+        if (transformationId.startsWith(SEPARATOR_ID_PREFIX)) {
+            if (unicodeFontSettings.nested || menuIsShown) {
                 continue;
             }
 
@@ -163,29 +164,59 @@ async function addMenuItems(menuItems, unicodeFontSettings = lastCachedUnicodeFo
             continue;
         }
 
-        const translatedMenuText = browser.i18n.getMessage(transformationId);
-        let textToBeTransformed = translatedMenuText;
-        if (unicodeFontSettings.livePreview && exampleText) {
-            textToBeTransformed = exampleText;
-        }
-        const transformedText = UnicodeTransformationHandler.transformText(textToBeTransformed, transformationId);
-
-        let menuText = transformedText;
-        if (unicodeFontSettings.showReadableText) {
-            menuText = browser.i18n.getMessage("menuReadableTextWrapper", [translatedMenuText, transformedText]);
-        }
-        menuText = menuText.replaceAll("&", "&&");
-
-        if (menuIsShown) {
-            menus.update(transformationId, {
-                title: menuText
-            });
+        if (unicodeFontSettings.nested && currentMenuItems.length > 1) {
+            const translatedMenuText = browser.i18n.getMessage(transformationId);
+            if (menuIsShown) {
+                menus.update(transformationId, {
+                    title: translatedMenuText
+                });
+            } else {
+                await menus.create({
+                    id: transformationId,
+                    title: translatedMenuText,
+                    contexts: ["editable"]
+                });
+            }
+            for (const currentTransformationId of currentMenuItems) {
+                const translatedMenuText = browser.i18n.getMessage(currentTransformationId);
+                const textToBeTransformed = unicodeFontSettings.livePreview && exampleText ? exampleText : translatedMenuText;
+                const transformedText = UnicodeTransformationHandler.transformText(textToBeTransformed, currentTransformationId);
+
+                let menuText = unicodeFontSettings.showReadableText ? browser.i18n.getMessage("menuReadableTextWrapper", [translatedMenuText, transformedText]) : transformedText;
+                menuText = menuText.replaceAll("&", "&&");
+                if (menuIsShown) {
+                    menus.update(currentTransformationId, {
+                        title: menuText
+                    });
+                } else {
+                    await menus.create({
+                        id: currentTransformationId,
+                        parentId: transformationId,
+                        title: menuText,
+                        contexts: ["editable"]
+                    });
+                }
+            }
         } else {
-            await menus.create({
-                id: transformationId,
-                title: menuText,
-                contexts: ["editable"]
-            });
+            for (const currentTransformationId of currentMenuItems) {
+                const translatedMenuText = browser.i18n.getMessage(currentTransformationId);
+                const textToBeTransformed = unicodeFontSettings.livePreview && exampleText ? exampleText : translatedMenuText;
+                const transformedText = UnicodeTransformationHandler.transformText(textToBeTransformed, currentTransformationId);
+
+                let menuText = unicodeFontSettings.showReadableText ? browser.i18n.getMessage("menuReadableTextWrapper", [translatedMenuText, transformedText]) : transformedText;
+                menuText = menuText.replaceAll("&", "&&");
+                if (menuIsShown) {
+                    menus.update(currentTransformationId, {
+                        title: menuText
+                    });
+                } else {
+                    await menus.create({
+                        id: currentTransformationId,
+                        title: menuText,
+                        contexts: ["editable"]
+                    });
+                }
+            }
         }
     }
 }

src/common/modules/data/DefaultSettings.js

@@ -24,8 +24,9 @@ const defaultSettings = {
     unicodeFont: {
         changeFont: true,
         changeCase: true,
-        showReadableText: false,
-        livePreview: false
+        showReadableText: true,
+        livePreview: true,
+        nested: true
     },
     notifications: {
         send: true

src/common/modules/data/Fonts.js

@@ -17,13 +17,13 @@ export const TRANSFORMATION_TYPE = Object.freeze({
 });
 
 /**
- * Separater symbol
+ * Separater string
  *
  * @public
  * @const
- * @type {symbol}
+ * @type {string}
  */
-export const SEPARATOR_ID = Symbol("separator");
+export const SEPARATOR_ID_PREFIX = "separator";
 
 /**
  * Unique prefix for all IDs related to casing.
@@ -48,41 +48,66 @@ export const FONT_ID_PREFIX = "menuFont";
  *
  * @public
  * @const
- * @type {Object.<symbol, string[]|symbol[]>}
+ * @type {Object.<symbol, Object.<string|symbol, Array.<string|symbol>>>}
  */
 export const menuStructure = Object.freeze({
-    [TRANSFORMATION_TYPE.FONT]: [
-        `${FONT_ID_PREFIX}Superscript`,
-        `${FONT_ID_PREFIX}SmallCaps`,
-        `${FONT_ID_PREFIX}AllSmallCaps`,
-        `${FONT_ID_PREFIX}Unicase`,
-        SEPARATOR_ID,
-        `${FONT_ID_PREFIX}SerifBold`,
-        `${FONT_ID_PREFIX}SerifItalic`,
-        `${FONT_ID_PREFIX}SerifBoldItalic`,
-        `${FONT_ID_PREFIX}SansSerif`,
-        `${FONT_ID_PREFIX}SansSerifBold`,
-        `${FONT_ID_PREFIX}SansSerifItalic`,
-        `${FONT_ID_PREFIX}SansSerifBoldItalic`,
-        `${FONT_ID_PREFIX}Script`,
-        `${FONT_ID_PREFIX}ScriptBold`,
-        `${FONT_ID_PREFIX}ScriptFraktur`,
-        `${FONT_ID_PREFIX}FrakturBold`,
-        `${FONT_ID_PREFIX}Monospace`,
-        `${FONT_ID_PREFIX}DoubleStruck`,
-        SEPARATOR_ID,
-        `${FONT_ID_PREFIX}Circled`,
-        `${FONT_ID_PREFIX}CircledBlack`,
-        `${FONT_ID_PREFIX}Squared`,
-        `${FONT_ID_PREFIX}SquaredBlack`,
-        `${FONT_ID_PREFIX}Fullwidth`
-    ],
-    [TRANSFORMATION_TYPE.CASING]: [
-        `${CASE_ID_PREFIX}Lowercase`,
-        `${CASE_ID_PREFIX}Uppercase`,
-        `${CASE_ID_PREFIX}CapitalizeEachWord`,
-        `${CASE_ID_PREFIX}ToggleCase`
-    ]
+    [TRANSFORMATION_TYPE.FONT]: {
+        [`${FONT_ID_PREFIX}Superscript`]: [
+            `${FONT_ID_PREFIX}Superscript`
+        ],
+        [`${FONT_ID_PREFIX}Subscript`]: [
+            `${FONT_ID_PREFIX}Subscript`
+        ],
+        [`${FONT_ID_PREFIX}SmallCapsSmallCaps`]: [
+            `${FONT_ID_PREFIX}SmallCaps`,
+            `${FONT_ID_PREFIX}AllSmallCaps`,
+            `${FONT_ID_PREFIX}Unicase`
+        ],
+        [`${SEPARATOR_ID_PREFIX}1`]: [],
+        [`${FONT_ID_PREFIX}Serif`]: [
+            `${FONT_ID_PREFIX}SerifBold`,
+            `${FONT_ID_PREFIX}SerifItalic`,
+            `${FONT_ID_PREFIX}SerifBoldItalic`
+        ],
+        [`${FONT_ID_PREFIX}SansSerifSansSerif`]: [
+            `${FONT_ID_PREFIX}SansSerif`,
+            `${FONT_ID_PREFIX}SansSerifBold`,
+            `${FONT_ID_PREFIX}SansSerifItalic`,
+            `${FONT_ID_PREFIX}SansSerifBoldItalic`
+        ],
+        [`${FONT_ID_PREFIX}ScriptScript`]: [
+            `${FONT_ID_PREFIX}Script`,
+            `${FONT_ID_PREFIX}ScriptBold`
+        ],
+        [`${FONT_ID_PREFIX}FrakturFraktur`]: [
+            `${FONT_ID_PREFIX}Fraktur`,
+            `${FONT_ID_PREFIX}FrakturBold`
+        ],
+        [`${FONT_ID_PREFIX}Monospace`]: [
+            `${FONT_ID_PREFIX}Monospace`
+        ],
+        [`${FONT_ID_PREFIX}DoubleStruck`]: [
+            `${FONT_ID_PREFIX}DoubleStruck`
+        ],
+        [`${SEPARATOR_ID_PREFIX}2`]: [],
+        [`${FONT_ID_PREFIX}Other`]: [
+            `${FONT_ID_PREFIX}Circled`,
+            `${FONT_ID_PREFIX}CircledBlack`,
+            `${FONT_ID_PREFIX}Squared`,
+            `${FONT_ID_PREFIX}SquaredBlack`
+        ],
+        [`${FONT_ID_PREFIX}Fullwidth`]: [
+            `${FONT_ID_PREFIX}Fullwidth`
+        ]
+    },
+    [TRANSFORMATION_TYPE.CASING]: {
+        [`${CASE_ID_PREFIX}Casing`]: [
+            `${CASE_ID_PREFIX}Lowercase`,
+            `${CASE_ID_PREFIX}Uppercase`,
+            `${CASE_ID_PREFIX}CapitalizeEachWord`,
+            `${CASE_ID_PREFIX}ToggleCase`
+        ]
+    }
 });
 
 /**
@@ -106,7 +131,7 @@ const fonts = Object.freeze({
     [`${FONT_ID_PREFIX}SansSerifBoldItalic`]: "𝘼𝘽𝘾𝘿𝙀𝙁𝙂𝙃𝙄𝙅𝙆𝙇𝙈𝙉𝙊𝙋𝙌𝙍𝙎𝙏𝙐𝙑𝙒𝙓𝙔𝙕𝙖𝙗𝙘𝙙𝙚𝙛𝙜𝙝𝙞𝙟𝙠𝙡𝙢𝙣𝙤𝙥𝙦𝙧𝙨𝙩𝙪𝙫𝙬𝙭𝙮𝙯",
     [`${FONT_ID_PREFIX}Script`]: "𝒜ℬ𝒞𝒟ℰℱ𝒢ℋℐ𝒥𝒦ℒℳ𝒩𝒪𝒫𝒬ℛ𝒮𝒯𝒰𝒱𝒲𝒳𝒴𝒵𝒶𝒷𝒸𝒹ℯ𝒻ℊ𝒽𝒾𝒿𝓀𝓁𝓂𝓃ℴ𝓅𝓆𝓇𝓈𝓉𝓊𝓋𝓌𝓍𝓎𝓏",
     [`${FONT_ID_PREFIX}ScriptBold`]: "𝓐𝓑𝓒𝓓𝓔𝓕𝓖𝓗𝓘𝓙𝓚𝓛𝓜𝓝𝓞𝓟𝓠𝓡𝓢𝓣𝓤𝓥𝓦𝓧𝓨𝓩𝓪𝓫𝓬𝓭𝓮𝓯𝓰𝓱𝓲𝓳𝓴𝓵𝓶𝓷𝓸𝓹𝓺𝓻𝓼𝓽𝓾𝓿𝔀𝔁𝔂𝔃",
-    [`${FONT_ID_PREFIX}ScriptFraktur`]: "𝔄𝔅ℭ𝔇𝔈𝔉𝔊ℌℑ𝔍𝔎𝔏𝔐𝔑𝔒𝔓𝔔ℜ𝔖𝔗𝔘𝔙𝔚𝔛𝔜ℨ𝔞𝔟𝔠𝔡𝔢𝔣𝔤𝔥𝔦𝔧𝔨𝔩𝔪𝔫𝔬𝔭𝔮𝔯𝔰𝔱𝔲𝔳𝔴𝔵𝔶𝔷",
+    [`${FONT_ID_PREFIX}Fraktur`]: "𝔄𝔅ℭ𝔇𝔈𝔉𝔊ℌℑ𝔍𝔎𝔏𝔐𝔑𝔒𝔓𝔔ℜ𝔖𝔗𝔘𝔙𝔚𝔛𝔜ℨ𝔞𝔟𝔠𝔡𝔢𝔣𝔤𝔥𝔦𝔧𝔨𝔩𝔪𝔫𝔬𝔭𝔮𝔯𝔰𝔱𝔲𝔳𝔴𝔵𝔶𝔷",
     [`${FONT_ID_PREFIX}FrakturBold`]: "𝕬𝕭𝕮𝕯𝕰𝕱𝕲𝕳𝕴𝕵𝕶𝕷𝕸𝕹𝕺𝕻𝕼𝕽𝕾𝕿𝖀𝖁𝖂𝖃𝖄𝖅𝖆𝖇𝖈𝖉𝖊𝖋𝖌𝖍𝖎𝖏𝖐𝖑𝖒𝖓𝖔𝖕𝖖𝖗𝖘𝖙𝖚𝖛𝖜𝖝𝖞𝖟",
     [`${FONT_ID_PREFIX}Monospace`]: "𝙰𝙱𝙲𝙳𝙴𝙵𝙶𝙷𝙸𝙹𝙺𝙻𝙼𝙽𝙾𝙿𝚀𝚁𝚂𝚃𝚄𝚅𝚆𝚇𝚈𝚉𝚊𝚋𝚌𝚍𝚎𝚏𝚐𝚑𝚒𝚓𝚔𝚕𝚖𝚗𝚘𝚙𝚚𝚛𝚜𝚝𝚞𝚟𝚠𝚡𝚢𝚣𝟶𝟷𝟸𝟹𝟺𝟻𝟼𝟽𝟾𝟿",
     [`${FONT_ID_PREFIX}DoubleStruck`]: "𝔸𝔹ℂ𝔻𝔼𝔽𝔾ℍ𝕀𝕁𝕂𝕃𝕄ℕ𝕆ℙℚℝ𝕊𝕋𝕌𝕍𝕎𝕏𝕐ℤ𝕒𝕓𝕔𝕕𝕖𝕗𝕘𝕙𝕚𝕛𝕜𝕝𝕞𝕟𝕠𝕡𝕢𝕣𝕤𝕥𝕦𝕧𝕨𝕩𝕪𝕫𝟘𝟙𝟚𝟛𝟜𝟝𝟞𝟟𝟠𝟡",

src/options/options.html

@@ -144,6 +144,13 @@ <h2 data-i18n="__MSG_subtitleEntryPreview__">Entry design</h2>
 						<span data-i18n="__MSG_optionMenuShowReadableTextDescr__" class="line indent helper-text">In addition to the examples of the transformation, this also shows the name of transformation as text.</span>
 					</li>
 
+					<li>
+						<div class="line">
+							<input class="setting save-on-change" type="checkbox" id="nested" data-optiongroup="unicodeFont" name="nested">
+							<label for="nested" data-i18n="__MSG_optionMenuNested__">Create nested context menu</label>
+						</div>
+					</li>
+
 					<li>
 						<div class="line">
 							<input class="setting save-on-change" type="checkbox" id="livePreview" data-optiongroup="unicodeFont" name="livePreview">