diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 6fe7b574..e2fe03fc 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1693,6 +1693,9 @@ "styleIncludeLabel": { "message": "Custom included sites" }, + "styleInjectionImportance": { + "message": "Toggle style's importance" + }, "styleInjectionOrder": { "message": "Style injection order", "description": "Tooltip for the button in the manager to open the dialog and also the title of this dialog" @@ -1702,7 +1705,7 @@ "description": "Hint in the injection order dialog in the manager" }, "styleInjectionOrderHint_prio": { - "message": "Important styles are listed below and are always injected last so they can override any newly installed styles. Click the style's mark to toggle its importance.", + "message": "Important styles listed below are always injected last so they can override any newly installed styles. Click the style's mark to toggle its importance.", "description": "Hint at the bottom of the injection order dialog in the manager" }, "styleExcludeLabel": { diff --git a/injection-order/injection-order.js b/injection-order/injection-order.js index 4c0606f8..fdc43e5e 100644 --- a/injection-order/injection-order.js +++ b/injection-order/injection-order.js @@ -12,6 +12,18 @@ async function InjectionOrder(show = true) { const SEL_ENTRY = '.injection-order-entry'; const groups = await API.styles.getAllOrdered(); const ols = {}; + const parts = {}; + const entry = $create('li' + SEL_ENTRY, [ + parts.name = $create('a', { + target: '_blank', + draggable: false, + }), + $create('a.injection-order-toggle', { + tabIndex: 0, + draggable: false, + title: t('styleInjectionImportance'), + }), + ]); await messageBoxProxy.show({ title: t('styleInjectionOrder'), contents: $create('fragment', Object.entries(groups).map(makeList)), @@ -21,17 +33,10 @@ async function InjectionOrder(show = true) { }); function makeEntry(style) { - return $create('li' + SEL_ENTRY + (style.enabled ? '.enabled' : ''), [ - $create('a', { - href: '/edit.html?id=' + style.id, - target: '_blank', - draggable: false, - }, style.name), - $create('a.injection-order-toggle', { - tabIndex: 0, - draggable: false, - }), - ]); + entry.classList.toggle('enabled', style.enabled); + parts.name.href = '/edit.html?id=' + style.id; + parts.name.textContent = style.name; + return entry.cloneNode(true); } function makeList([type, styles]) {