From a58af7f81687ac5c92a02d14f95511e6ad6be601 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Fri, 18 Feb 2022 00:19:03 +0300
Subject: [PATCH] speed up and simplify i18n

---
 edit.html            | 157 +++++++++++++++++++++----------------------
 edit/settings.html   |  24 +++----
 install-usercss.html |  28 ++++----
 js/dom.js            |  45 +++++++------
 js/localization.js   | 125 +++++++++++++---------------------
 manage.html          | 132 +++++++++++++++++-------------------
 options.html         | 121 +++++++++++++++++----------------
 popup.html           | 119 ++++++++++++++++----------------
 8 files changed, 353 insertions(+), 398 deletions(-)

diff --git a/edit.html b/edit.html
index 1b08f9eb..146a3b7c 100644
--- a/edit.html
+++ b/edit.html
@@ -68,19 +68,19 @@
       <li class="applies-to-item">
         <div class="select-resizer">
           <select name="applies-type" class="applies-type style-contributor">
-            <option value="url" i18n-text="appliesUrlOption"></option>
-            <option value="url-prefix" i18n-text="appliesUrlPrefixOption"></option>
-            <option value="domain" i18n-text="appliesDomainOption"></option>
-            <option value="regexp" i18n-text="appliesRegexpOption"></option>
+            <option value="url" i18n="appliesUrlOption"></option>
+            <option value="url-prefix" i18n="appliesUrlPrefixOption"></option>
+            <option value="domain" i18n="appliesDomainOption"></option>
+            <option value="regexp" i18n="appliesRegexpOption"></option>
           </select>
           <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
         </div>
         <div class="applies-value-wrapper">
           <input name="applies-value" class="applies-value style-contributor" spellcheck="false">
-          <a class="remove-applies-to" i18n-text="appliesRemove" i18n-title="appliesRemove" tabindex="0">
+          <a class="remove-applies-to" i18n="appliesRemove, title:appliesRemove" tabindex="0">
             <svg class="svg-icon remove"><use xlink:href="#svg-icon-minus"/></svg>
           </a>
-          <a class="add-applies-to" i18n-text="appliesAdd" i18n-title="appliesAdd" tabindex="0">
+          <a class="add-applies-to" i18n="appliesAdd, title:appliesAdd" tabindex="0">
             <svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
           </a>
         </div>
@@ -88,8 +88,8 @@
     </template>
 
     <template data-id="appliesToEverything">
-      <li class="applies-to-everything" i18n-text="appliesToEverything">
-        <a class="add-applies-to" i18n-text="appliesAdd" i18n-title="appliesAdd" tabindex="0">
+      <li class="applies-to-everything" i18n="appliesToEverything">
+        <a class="add-applies-to" i18n="appliesAdd, title:appliesAdd" tabindex="0">
           <svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
         </a>
       </li>
@@ -99,11 +99,11 @@
       <div class="section">
         <!-- not using DIV to make our CSS work for #sections > div:only-of-type .remove-section -->
         <p class="deleted-section">
-          <button class="restore-section" i18n-text="sectionRestore"></button>
+          <button class="restore-section" i18n="sectionRestore"></button>
         </p>
-        <label i18n-text="sectionCode" class="code-label"></label>
+        <label i18n="sectionCode" class="code-label"></label>
         <div class="applies-to">
-          <label i18n-text="appliesLabel" data-cmd="note" i18n-title="appliesHelp">
+          <label i18n="appliesLabel, title:appliesHelp" data-cmd="note">
             <a class="svg-inline-wrapper applies-to-help" tabindex="0">
               <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
             </a>
@@ -111,13 +111,13 @@
           <ul class="applies-to-list"></ul>
         </div>
         <div class="edit-actions">
-          <button class="remove-section" i18n-text="sectionRemove"></button>
-          <button class="add-section" i18n-long-text="sectionAdd" i18n-short-text="genericAdd"></button>
-          <button class="clone-section" i18n-text="genericClone"></button>
+          <button class="remove-section" i18n="sectionRemove"></button>
+          <button class="add-section" i18n="long-text:sectionAdd, short-text:genericAdd"></button>
+          <button class="clone-section" i18n="genericClone"></button>
           <button class="move-section-up"></button>
           <button class="move-section-down"></button>
-          <button class="beautify-section" i18n-text="styleBeautify"></button>
-          <button class="test-regexp" i18n-text="genericTest"></button>
+          <button class="beautify-section" i18n="styleBeautify"></button>
+          <button class="test-regexp" i18n="genericTest"></button>
         </div>
       </div>
     </template>
@@ -127,27 +127,27 @@
         <div data-type="main">
           <div data-type="content"></div>
           <div data-type="actions">
-            <a data-action="case" i18n-title="searchCaseSensitive" tabindex="0">Aa</a>
-            <a data-action="prev" i18n-title="genericPrevious" data-hotkey-tooltip="findPrev" tabindex="0">
+            <a data-action="case" i18n="title:searchCaseSensitive" tabindex="0">Aa</a>
+            <a data-action="prev" i18n="title:genericPrevious" data-hotkey-tooltip="findPrev" tabindex="0">
               <svg class="svg-icon" style="transform: rotate(180deg)"><use xlink:href="#svg-icon-v"/></svg>
             </a>
-            <a data-action="next" i18n-title="genericNext" data-hotkey-tooltip="findNext" tabindex="0">
+            <a data-action="next" i18n="title:genericNext" data-hotkey-tooltip="findNext" tabindex="0">
               <svg class="svg-icon"><use xlink:href="#svg-icon-v"/></svg>
             </a>
-            <a data-action="close" i18n-title="confirmClose" data-hotkey-tooltip="=Esc" tabindex="0">
+            <a data-action="close" i18n="title:confirmClose" data-hotkey-tooltip="=Esc" tabindex="0">
               <svg class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg>
             </a>
           </div>
         </div>
         <div data-type="status">
           <div class="CodeMirror-search-hint" i18n-text="searchRegexp"></div>
-          <div data-type="tally" i18n-title="searchNumberOfResults"></div>
+          <div data-type="tally" i18n="title:searchNumberOfResults"></div>
         </div>
       </div>
     </template>
 
     <template data-id="clearSearch">
-      <div data-type="hover" i18n-title="confirmDelete">
+      <div data-type="hover" i18n="title:confirmDelete">
         <svg data-action="clear" class="svg-icon"><use xlink:href="#svg-icon-close"></use></svg>
       </div>
     </template>
@@ -156,7 +156,7 @@
       <div data-type="content">
         <div data-type="input-wrapper">
           <textarea class="CodeMirror-search-field" rows="1" spellcheck="false" required
-                    i18n-placeholder="search"></textarea>
+                    i18n="placeholder:search"></textarea>
         </div>
       </div>
     </template>
@@ -165,36 +165,36 @@
       <div data-type="content">
         <div data-type="input-wrapper">
           <textarea data-type="replace-from"
-                    i18n-placeholder="replace"
+                    i18n="placeholder:replace"
                     class="CodeMirror-search-field" rows="1" required
                     spellcheck="false"></textarea>
         </div>
         <div data-type="input-wrapper">
           <textarea data-type="replace-to"
-                    i18n-placeholder="replaceWith"
+                    i18n="placeholder:replaceWith"
                     class="CodeMirror-search-field" rows="1" required
                     spellcheck="false"></textarea>
         </div>
-        <button data-action="replace" i18n-text="replace" disabled></button>
-        <button data-action="replaceAll" i18n-text="replaceAll" disabled></button>
-        <button data-action="undo" i18n-text="undo" disabled></button>
+        <button data-action="replace" i18n="replace" disabled></button>
+        <button data-action="replaceAll" i18n="replaceAll" disabled></button>
+        <button data-action="undo" i18n="undo" disabled></button>
         <!--
         Using a separate set of buttons because
         1. FF can display tooltips only when specified on the <button>, ignores the nested <title> in <svg>
         2. the icon doesn't fill the entire button area so tooltips aren't shown when the edges are hovered
         -->
-        <button class="hidden" data-action="replace" i18n-title="replace" disabled>
+        <button class="hidden" data-action="replace" i18n="title:replace" disabled>
           <svg class="svg-icon" viewBox="0 0 20 20">
             <polygon points="15.83 4.75 8.76 11.82 5.2 8.26 3.51 9.95 8.76 15.19 17.52 6.43 15.83 4.75"/>
           </svg>
         </button>
-        <button class="hidden" data-action="replaceAll" i18n-title="replaceAll" disabled>
+        <button class="hidden" data-action="replaceAll" i18n="title:replaceAll" disabled>
           <svg class="svg-icon" viewBox="0 0 20 20">
             <polygon points="15.8,1.8 8.8,8.8 5.2,5.3 3.5,6.9 8.8,12.2 17.5,3.4 "/>
             <polygon points="15.8,7.8 8.8,14.8 5.2,11.3 3.5,12.9 8.8,18.2 17.5,9.4 "/>
           </svg>
         </button>
-        <button class="hidden" data-action="undo" i18n-title="undo" disabled>
+        <button class="hidden" data-action="undo" i18n="title:undo" disabled>
           <svg class="svg-icon" viewBox="0 0 20 20">
             <path d="M11.3,5.5H8.7V1.4L1.9,6.5l6.8,5.1V7.5h2.6c1.8,0,3.2,1.4,3.2,3.2s-1.4,3.2-3.2,3.2H7.8v2h3.5c2.9,0,5.2-2.3,5.2-5.2S14.2,5.5,11.3,5.5z"/>
           </svg>
@@ -203,7 +203,7 @@
     </template>
 
     <template data-id="jumpToLine">
-      <span i18n-text="editGotoLine">: <input class="CodeMirror-jump-field" type="text"></span>
+      <span i18n="editGotoLine">: <input class="CodeMirror-jump-field" type="text"></span>
     </template>
 
     <template data-id="regexpTestPartial">
@@ -211,15 +211,15 @@
     </template>
 
     <template data-id="resizeGrip">
-      <div class="resize-grip" i18n-title="cm_resizeGripHint"></div>
+      <div class="resize-grip" i18n="title:cm_resizeGripHint"></div>
     </template>
 
     <template data-id="keymapHelp">
       <table class="keymap-list can-close-on-esc">
         <thead>
           <tr>
-            <th><input i18n-placeholder="helpKeyMapHotkey" type="search"></th>
-            <th><input i18n-placeholder="helpKeyMapCommand" type="search"></th>
+            <th><input i18n="placeholder:helpKeyMapHotkey" type="search"></th>
+            <th><input i18n="placeholder:helpKeyMapCommand" type="search"></th>
           </tr>
         </thead>
         <tbody>
@@ -245,11 +245,11 @@
 
   <body id="stylus-edit">
     <div id="header">
-      <h1 id="heading" i18n-data-edit="editStyleHeading" i18n-data-add="addStyleTitle"></h1>
+      <h1 id="heading" i18n="data-edit:editStyleHeading, data-add:addStyleTitle"></h1>
       <section id="basic-info">
         <div id="basic-info-name">
           <input id="name" class="style-contributor" spellcheck="false">
-          <a id="reset-name" i18n-title="customNameResetHint" tabindex="0" hidden>
+          <a id="reset-name" i18n="title:customNameResetHint" tabindex="0" hidden>
             <svg class="svg-icon" viewBox="0 0 20 20">
               <polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
                                5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
@@ -259,13 +259,12 @@
         </div>
         <div id="basic-info-enabled">
           <label id="enabled-label"
-                 i18n-text="styleEnabledLabel"
-                 i18n-title="toggleStyle"
+                 i18n="styleEnabledLabel, title:toggleStyle"
                  data-hotkey-tooltip="toggleStyle">
             <input type="checkbox" id="enabled" class="style-contributor">
             <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
           </label>
-          <label id="preview-label" i18n-text="previewLabel" i18n-title="previewTooltip">
+          <label id="preview-label" i18n="previewLabel, title:previewTooltip">
             <input type="checkbox" id="editor.livePreview">
             <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
           </label>
@@ -275,75 +274,74 @@
       <section id="actions">
         <div class="buttons">
           <div class="split-btn">
-            <button id="save-button" i18n-text="styleSaveLabel" data-hotkey-tooltip="save" disabled></button
-            ><button class="split-btn-pedal usercss-only" i18n-menu-tpl="saveAsTemplate"></button>
+            <button id="save-button" i18n="styleSaveLabel" data-hotkey-tooltip="save" disabled></button
+            ><button class="split-btn-pedal usercss-only" i18n="menu-tpl:saveAsTemplate"></button>
           </div>
-          <button id="beautify" i18n-text="styleBeautify"></button>
-          <button id="style-settings-btn" i18n-text="settings"></button>
-          <button id="cancel-button" i18n-title="styleCancelEditLabel">↩</button>
+          <button id="beautify" i18n="styleBeautify"></button>
+          <button id="style-settings-btn" i18n="settings"></button>
+          <button id="cancel-button" i18n="title:styleCancelEditLabel">↩</button>
         </div>
         <div id="mozilla-format-buttons" class="buttons sectioned-only">
-          <button id="from-mozilla" i18n-text="importLabel"></button>
-          <button id="to-mozilla" i18n-text="exportLabel"></button>
+          <button id="from-mozilla" i18n="importLabel"></button>
+          <button id="to-mozilla" i18n="exportLabel"></button>
           <a id="to-mozilla-help" class="svg-inline-wrapper" tabindex="0"
-             i18n-title="styleMozillaFormatHeading">
+             i18n="title:styleMozillaFormatHeading">
             <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
           </a>
         </div>
       </section>
       <div id="details-wrapper">
         <details id="options" data-pref="editor.options.expanded" class="ignore-pref-if-compact">
-          <summary><h2 id="options-heading" i18n-text="editorSettings"></h2></summary>
+          <summary><h2 id="options-heading" i18n="editorSettings"></h2></summary>
           <div id="options-wrapper">
             <div class="options-column">
               <div class="option">
-                <label id="lineWrapping-label" i18n-text="cm_lineWrapping">
+                <label id="lineWrapping-label" i18n="cm_lineWrapping">
                   <input id="editor.lineWrapping" type="checkbox">
                   <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
                 </label>
               </div>
               <div class="option">
-                <label id="smartIndent-label" i18n-text="cm_smartIndent">
+                <label id="smartIndent-label" i18n="cm_smartIndent">
                   <input id="editor.smartIndent" type="checkbox">
                   <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
                 </label>
               </div>
               <div class="option">
-                <label id="indentWithTabs-label" i18n-text="cm_indentWithTabs">
+                <label id="indentWithTabs-label" i18n="cm_indentWithTabs">
                   <input id="editor.indentWithTabs" type="checkbox">
                   <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
                 </label>
               </div>
               <div class="option">
-                <label i18n-text="cm_autoCloseBrackets" i18n-title="cm_autoCloseBracketsTooltip">
+                <label i18n="cm_autoCloseBrackets, title:cm_autoCloseBracketsTooltip">
                   <input id="editor.autoCloseBrackets" type="checkbox">
                   <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
                 </label>
               </div>
               <div class="option">
-                <label i18n-text="cm_autocompleteOnTyping">
+                <label i18n="cm_autocompleteOnTyping">
                   <input id="editor.autocompleteOnTyping" type="checkbox">
                   <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
                 </label>
               </div>
               <div class="option">
-                <label i18n-text="cm_selectByTokens"
-                       i18n-title="cm_selectByTokensTooltip">
+                <label i18n="cm_selectByTokens, title:cm_selectByTokensTooltip">
                   <input id="editor.selectByTokens" type="checkbox">
                   <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
                 </label>
               </div>
               <div class="option">
-                <label i18n-text="cm_colorpicker">
+                <label i18n="cm_colorpicker">
                   <input id="editor.colorpicker" type="checkbox">
                   <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
                 </label>
-                <a id="colorpicker-settings" class="svg-inline-wrapper" i18n-title="shortcutsNote" tabindex="0">
+                <a id="colorpicker-settings" class="svg-inline-wrapper" i18n="title:shortcutsNote" tabindex="0">
                   <svg class="svg-icon settings"><use xlink:href="#svg-icon-config"/></svg>
                 </a>
               </div>
               <div class="option usercss-only">
-                <label i18n-text="appliesLineWidgetLabel" i18n-title="appliesLineWidgetWarning">
+                <label i18n="appliesLineWidgetLabel, title:appliesLineWidgetWarning">
                   <input id="editor.appliesToLineWidget" type="checkbox">
                   <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
                 </label>
@@ -351,11 +349,11 @@
             </div>
             <div class="options-column">
               <div class="option aligned">
-                <label id="tabSize-label" for="editor.tabSize" i18n-text="cm_tabSize"></label>
+                <label id="tabSize-label" for="editor.tabSize" i18n="cm_tabSize"></label>
                 <input id="editor.tabSize" type="number" min="0">
               </div>
               <div class="option aligned">
-                <label id="keyMap-label" for="editor.keyMap" i18n-text="cm_keyMap"></label>
+                <label id="keyMap-label" for="editor.keyMap" i18n="cm_keyMap"></label>
                 <div class="select-resizer">
                   <select id="editor.keyMap"></select>
                   <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
@@ -365,34 +363,34 @@
                 </a>
               </div>
               <div class="option aligned">
-                <label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
+                <label id="theme-label" for="editor.theme" i18n="cm_theme"></label>
                 <div class="select-resizer">
                   <select id="editor.theme"></select>
                   <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
                 </div>
               </div>
               <div class="option aligned">
-                <label id="highlight-label" for="editor.matchHighlight" i18n-text="cm_matchHighlight"></label>
+                <label id="highlight-label" for="editor.matchHighlight" i18n="cm_matchHighlight"></label>
                 <div class="select-resizer">
                   <select id="editor.matchHighlight">
-                    <option i18n-text="cm_matchHighlightToken" value="token">
-                    <option i18n-text="cm_matchHighlightSelection" value="selection">
-                    <option i18n-text="genericDisabledLabel" value="">
+                    <option i18n="cm_matchHighlightToken" value="token">
+                    <option i18n="cm_matchHighlightSelection" value="selection">
+                    <option i18n="genericDisabledLabel" value="">
                   </select>
                   <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
                 </div>
               </div>
               <div class="option aligned">
-                <label id="linter-label" for="editor.linter" i18n-text="cm_linter"></label>
+                <label id="linter-label" for="editor.linter" i18n="cm_linter"></label>
                   <div class="select-resizer">
                     <select id="editor.linter">
                       <option value="csslint" selected>CSSLint</option>
                       <option value="stylelint">Stylelint</option>
-                      <option value="" i18n-text="genericDisabledLabel"></option>
+                      <option value="" i18n="genericDisabledLabel"></option>
                     </select>
                     <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
                   </div>
-                <a id="linter-settings" class="svg-inline-wrapper" i18n-title="linterConfigTooltip" tabindex="0">
+                <a id="linter-settings" class="svg-inline-wrapper" i18n="title:linterConfigTooltip" tabindex="0">
                   <svg class="svg-icon settings"><use xlink:href="#svg-icon-config"/></svg>
                 </a>
               </div>
@@ -400,29 +398,28 @@
           </div>
         </details>
         <details id="publish" data-pref="editor.publish.expanded" class="ignore-pref-if-compact">
-          <summary><h2 i18n-text="publish"></h2></summary>
+          <summary><h2 i18n="publish"></h2></summary>
           <div>
             <a id="usw-url" href="https://userstyles.world" target="_blank">&nbsp;</a>
             <div id="usw-link-info">
-              <dl><dt i18n-text="styleName"></dt><dd data-usw="name"></dd></dl>
-              <dl><dt i18n-text="genericDescription"></dt><dd data-usw="description"></dd></dl>
+              <dl><dt i18n="styleName"></dt><dd data-usw="name"></dd></dl>
+              <dl><dt i18n="genericDescription"></dt><dd data-usw="description"></dd></dl>
             </div>
             <div>
               <button id="usw-publish-style"
-                      i18n-data-publish="publishStyle"
-                      i18n-data-push="publishPush"></button>
-              <button id="usw-disconnect" i18n-text="optionsSyncDisconnect"></button>
+                      i18n="data-publish:publishStyle, data-push:publishPush"></button>
+              <button id="usw-disconnect" i18n="optionsSyncDisconnect"></button>
               <span id="usw-progress"></span>
             </div>
           </div>
         </details>
         <details id="sections-list" data-pref="editor.toc.expanded" class="ignore-pref-if-compact">
-          <summary><h2 i18n-text="sections"></h2></summary>
+          <summary><h2 i18n="sections"></h2></summary>
           <ol id="toc"></ol>
         </details>
         <details id="lint" data-pref="editor.lint.expanded" class="ignore-pref-if-compact" hidden>
           <summary>
-            <h2><span i18n-text="linterIssues"></span><span id="issue-count"></span>
+            <h2><span i18n="linterIssues"></span><span id="issue-count"></span>
               <a id="lint-help" class="svg-inline-wrapper intercepts-click" tabindex="0">
                 <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
               </a>
@@ -431,10 +428,10 @@
           <div class="lint-report-container"></div>
         </details>
       </div>
-      <div id="header-resizer" i18n-title="headerResizerHint"></div>
+      <div id="header-resizer" i18n="title:headerResizerHint"></div>
       <div id="footer" class="hidden">
         <a href="https://github.com/openstyles/stylus/wiki/Usercss"
-           i18n-text="externalUsercssDocument"
+           i18n="externalUsercssDocument"
            target="_blank"></a>
       </div>
     </div>
@@ -450,7 +447,7 @@
         <path d="M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z"></path>
       </symbol>
 
-      <symbol id="svg-icon-help" viewBox="0 0 14 16" i18n-alt="helpAlt">
+      <symbol id="svg-icon-help" viewBox="0 0 14 16" i18n="alt:helpAlt">
         <circle cx="7" cy="5" r="1"/>
         <path d="M8,8c0-0.5-0.5-1-1-1H6C5.5,7,5,7.4,5,8h1v3c0,0.5,0.5,1,1,1h1c0.5,0,1-0.4,1-1H8V8z"/>
         <path d="M7,1c3.9,0,7,3.1,7,7s-3.1,7-7,7s-7-3.1-7-7S3.1,1,7,1z M7,2.3C3.9,2.3,1.3,4.9,1.3,8s2.6,5.7,5.7,5.7s5.7-2.6,5.7-5.7S10.1,2.3,7,2.3C7,2.3,7,2.3,7,2.3z"/>
diff --git a/edit/settings.html b/edit/settings.html
index 6d444be0..84c46ad7 100644
--- a/edit/settings.html
+++ b/edit/settings.html
@@ -3,38 +3,38 @@
     <div class="rel">
       <input id="ss-updatable" type="checkbox">
       <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-      <label i18n-text="installUpdateFromLabel" for="ss-updatable"></label>
-      <input id="ss-update-url" type="url" class="w100" i18n-placeholder="styleUpdateUrlLabel">
+      <label i18n="installUpdateFromLabel" for="ss-updatable"></label>
+      <input id="ss-update-url" type="url" class="w100" i18n="placeholder:styleUpdateUrlLabel">
     </div>
     <div id="ss-scheme">
-      <div i18n-text="preferScheme">
-        <div><small id="ss-scheme-off" i18n-text="preferSchemeAlways" hidden></small></div>
+      <div i18n="preferScheme">
+        <div><small id="ss-scheme-off" i18n="preferSchemeAlways" hidden></small></div>
       </div>
-      <label i18n-text-append="preferSchemeNone" class="radio-wrapper">
+      <label i18n="+preferSchemeNone" class="radio-wrapper">
         <input name="ss-scheme" type="radio" value="none">
       </label>
-      <label i18n-text-append="preferSchemeDark" class="radio-wrapper">
+      <label i18n="+preferSchemeDark" class="radio-wrapper">
         <input name="ss-scheme" type="radio" value="dark">
       </label>
-      <label i18n-text-append="preferSchemeLight" class="radio-wrapper">
+      <label i18n="+preferSchemeLight" class="radio-wrapper">
         <input name="ss-scheme" type="radio" value="light">
       </label>
     </div>
-    <label i18n-text="styleIncludeLabel">
+    <label i18n="styleIncludeLabel">
       <textarea id="ss-inclusions" spellcheck="false" class="w100"
                 placeholder="*://site1.com/*&#10;*://site2.com/*"></textarea>
     </label>
-    <label i18n-text="styleExcludeLabel">
+    <label i18n="styleExcludeLabel">
       <textarea id="ss-exclusions" spellcheck="false" class="w100"
                 placeholder="*://site1.com/*&#10;*://site2.com/*"></textarea>
     </label>
   </fieldset>
   <div class="buttons">
-    <button id="ss-save" i18n-text="confirmSave" disabled></button>
-    <label i18n-title="configOnChangeTooltip" i18n-text-append="configOnChange">
+    <button id="ss-save" i18n="confirmSave" disabled></button>
+    <label i18n="+configOnChange, title:configOnChangeTooltip">
       <input id="config.autosave" type="checkbox">
       <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
     </label>
-    <button id="ss-close" i18n-text="confirmClose"></button>
+    <button id="ss-close" i18n="confirmClose"></button>
   </div>
 </div>
diff --git a/install-usercss.html b/install-usercss.html
index 1b84de1e..f415654a 100644
--- a/install-usercss.html
+++ b/install-usercss.html
@@ -22,7 +22,7 @@
   <script src="content/apply.js"></script>
 
   <template data-id="jumpToLine">
-    <span i18n-text="editGotoLine">: <input class="CodeMirror-jump-field" type="text"></span>
+    <span i18n="editGotoLine">: <input class="CodeMirror-jump-field" type="text"></span>
   </template>
 
   <script src="vendor/codemirror/lib/codemirror.js"></script>
@@ -71,15 +71,15 @@
         <small class="meta-version"></small>
       </h1>
       <div id="install-wrapper">
-        <h2 class="install-show" i18n-text="installButtonInstalled"></h2>
-        <button class="install install-hide" i18n-text="installButton"></button>
-        <a class="configure-usercss" i18n-title="configureStyle" tabindex="0">
+        <h2 class="install-show" i18n="installButtonInstalled"></h2>
+        <button class="install install-hide" i18n="installButton"></button>
+        <a class="configure-usercss" i18n="title:configureStyle" tabindex="0">
           <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
         </a>
         <div class="install-show w100-full">
-          <a href="manage.html"><button i18n-text="openManage"></button></a>
-          <a id="edit" href="edit.html?id="><button i18n-text="editStyleLabel"></button></a>
-          <a id="delete" tabindex="0"><button i18n-text="deleteStyleLabel"></button></a>
+          <a href="manage.html"><button i18n="openManage"></button></a>
+          <a id="edit" href="edit.html?id="><button i18n="editStyleLabel"></button></a>
+          <a id="delete" tabindex="0"><button i18n="deleteStyleLabel"></button></a>
         </div>
       </div>
       <div id="ss-scheme" class="install-dim"></div>
@@ -87,40 +87,40 @@
         <label>
           <input type="checkbox">
           <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          <span i18n-text="installUpdateFromLabel"></span>
+          <span i18n="installUpdateFromLabel"></span>
         </label>
         <p></p>
       </div>
       <label class="live-reload checkbox-wrapper">
         <input type="checkbox">
         <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-        <span i18n-text="liveReloadLabel"></span>
+        <span i18n="liveReloadLabel"></span>
       </label>
       <div id="live-reload-install-hint" class="w100" hidden></div>
       <div class="meta-description w100 hide-empty"></div>
       <div>
-        <h3 i18n-text="author"></h3>
+        <h3 i18n="author"></h3>
         <span class="meta-author"></span>
       </div>
       <div>
-        <h3 i18n-text="license"></h3>
+        <h3 i18n="license"></h3>
         <span class="meta-license"></span>
       </div>
       <div class="external-link hide-empty"></div>
       <div class="w100">
-        <h3 i18n-text="appliesLabel"></h3>
+        <h3 i18n="appliesLabel"></h3>
         <ul class="applies-to">
         </ul>
       </div>
     </div>
-    <div id="header-resizer" i18n-title="headerResizerHint"></div>
+    <div id="header-resizer" i18n="title:headerResizerHint"></div>
   </div>
   <div class="main">
     <div class="warnings"></div>
   </div>
 
   <svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;">
-    <symbol id="svg-icon-help" viewBox="0 0 14 16" i18n-alt="helpAlt">
+    <symbol id="svg-icon-help" viewBox="0 0 14 16" i18n="alt:helpAlt">
       <circle cx="7" cy="5" r="1"/>
       <path d="M8,8c0-0.5-0.5-1-1-1H6C5.5,7,5,7.4,5,8h1v3c0,0.5,0.5,1,1,1h1c0.5,0,1-0.4,1-1H8V8z"/>
       <path d="M7,1c3.9,0,7,3.1,7,7s-3.1,7-7,7s-7-3.1-7-7S3.1,1,7,1z M7,2.3C3.9,2.3,1.3,4.9,1.3,8s2.6,5.7,5.7,5.7s5.7-2.6,5.7-5.7S10.1,2.3,7,2.3C7,2.3,7,2.3,7,2.3z"/>
diff --git a/js/dom.js b/js/dom.js
index 75e8962d..f9f41e18 100644
--- a/js/dom.js
+++ b/js/dom.js
@@ -372,41 +372,44 @@ function toggleDataset(el, prop, state) {
 /**
  * @param {string} selector - beware of $ quirks with `#dotted.id` that won't work with $$
  * @param {Object} [opt]
- * @param {function(HTMLElement, HTMLElement[]):boolean} [opt.recur] - called on each match
-   with (firstMatchingElement, allMatchingElements) parameters until stopOnDomReady,
+ * @param {function(HTMLElement[]):boolean} [opt.recur] - called on each match until stopOnDomReady,
    you can also return `false` to disconnect the observer
  * @param {boolean} [opt.stopOnDomReady] - stop observing on DOM ready
  * @returns {Promise<HTMLElement>} - resolves on first match
  */
 function waitForSelector(selector, {recur, stopOnDomReady = true} = {}) {
   let el = $(selector);
-  let elems, isResolved;
-  return el && (!recur || recur(el, (elems = $$(selector))) === false)
+  let elems;
+  return el && (!recur || recur(elems = $$(selector)) === false)
     ? Promise.resolve(el)
     : new Promise(resolve => {
-      const mo = new MutationObserver(() => {
+      new MutationObserver((mutations, observer) => {
         if (!el) el = $(selector);
         if (!el) return;
         if (!recur ||
-            callRecur() === false ||
-            stopOnDomReady && document.readyState === 'complete') {
-          mo.disconnect();
+          callRecur(mutations) === false ||
+          stopOnDomReady && document.readyState === 'complete') {
+          observer.disconnect();
         }
-        if (!isResolved) {
-          isResolved = true;
+        if (resolve) {
           resolve(el);
+          resolve = null;
         }
-      });
-      mo.observe(document, {childList: true, subtree: true});
+      }).observe(document, {childList: true, subtree: true});
+      function isMatching(n) {
+        return n.tagName && (n.matches(selector) || n.firstElementChild && $(selector, n));
+      }
+      function callRecur([m0, m1]) {
+        if (m1 || (m0 = m0.addedNodes)[3] || [].some.call(m0, isMatching)) { // Skipping tiny records
+          const all = $$(selector); // Using one $$ call instead of ~100 calls for each node
+          const added = !elems ? all : all.filter(el => !elems.includes(el));
+          if (added.length) {
+            elems = all;
+            return recur(added);
+          }
+        }
+      }
     });
-  function callRecur() {
-    const all = $$(selector); // simpler and faster than analyzing each node in `mutations`
-    const added = !elems ? all : all.filter(el => !elems.includes(el));
-    if (added.length) {
-      elems = all;
-      return recur(added[0], added);
-    }
-  }
 }
 
 /**
@@ -431,7 +434,7 @@ const dom = {};
 (() => {
 
   const Collapsible = {
-    bindEvents(_, elems) {
+    bindEvents(elems) {
       const prefKeys = [];
       for (const el of elems) {
         prefKeys.push(el.dataset.pref);
diff --git a/js/localization.js b/js/localization.js
index e99776c6..872ec47d 100644
--- a/js/localization.js
+++ b/js/localization.js
@@ -1,7 +1,14 @@
+/* global $$ waitForSelector */// dom.js
 /* global download */// toolbox.js
 'use strict';
 
-//#region Exports
+/**
+ * <tag i18n="id"> - like el.prepend() inserts the text as the first node
+ * <tag i18n="+id"> - like el.append() inserts the text as the last node
+ * <tag i18n="html:id"> - sets innerHTML (sanitized)
+ * <tag i18n="title: id"> - creates an attribute `title`, spaces are ignored
+ * <tag i18n="id, +id2, title:id3, placeholder:id4, data-foo:id5">
+ */
 
 function t(key, params, strict = true) {
   const s = chrome.i18n.getMessage(key, params);
@@ -11,9 +18,7 @@ function t(key, params, strict = true) {
 
 Object.assign(t, {
   template: {},
-  parser: new DOMParser(),
   ALLOWED_TAGS: ['a', 'b', 'code', 'i', 'sub', 'sup', 'wbr'],
-  PREFIX: 'i18n-',
   RX_WORD_BREAK: new RegExp([
     '(',
     /[\d\w\u007B-\uFFFF]{10}/,
@@ -24,6 +29,7 @@ Object.assign(t, {
     ')',
     /(?!\b|\s|$)/,
   ].map(rx => rx.source || rx).join(''), 'gu'),
+  SELECTOR: '[i18n], template',
 
   HTML(html) {
     return typeof html !== 'string'
@@ -35,35 +41,26 @@ Object.assign(t, {
 
   NodeList(nodes) {
     if (nodes instanceof Node) {
-      nodes = [nodes, ...nodes.getElementsByTagName('*')];
+      nodes = $$(t.SELECTOR, nodes).concat(nodes);
     }
-    for (let n = nodes.length; --n >= 0;) {
-      const node = nodes[n];
-      if (!node.localName) {
-        continue;
-      }
+    for (const node of nodes) {
+      if (!node.localName) continue;
       if (node.localName === 'template') {
-        node.remove();
         t.createTemplate(node);
         continue;
       }
-      for (let a = node.attributes.length; --a >= 0;) {
-        const attr = node.attributes[a];
-        const name = attr.nodeName;
-        if (!name.startsWith(t.PREFIX)) {
-          continue;
-        }
-        const type = name.substr(t.PREFIX.length);
-        const value = t(attr.value);
+      const attr = node.getAttribute('i18n');
+      if (!attr) continue;
+      for (const part of attr.split(',')) {
         let toInsert, before;
+        let [type, value] = part.trim().split(/\s*:\s*/);
+        if (!value) [type, value] = type.split(/(\w+)/);
+        value = t(value);
         switch (type) {
-          case 'word-break':
-            // we already know that: hasWordBreak
-            break;
-          case 'text':
+          case '':
             before = node.firstChild;
-            // fallthrough to text-append
-          case 'text-append':
+            // fallthrough
+          case '+':
             toInsert = t.createText(value);
             break;
           case 'html': {
@@ -73,12 +70,11 @@ Object.assign(t, {
           default:
             node.setAttribute(type, value);
         }
-        t.stopObserver();
         if (toInsert) {
           node.insertBefore(toInsert, before || null);
         }
-        node.removeAttribute(name);
       }
+      node.removeAttribute('i18n');
     }
   },
 
@@ -100,8 +96,11 @@ Object.assign(t, {
       }
     }
     toRemove.forEach(n => n.remove());
-    t.NodeList(content.querySelectorAll('*'));
-    t.template[el.dataset.id] = content.childNodes.length > 1 ? content : content.childNodes[0];
+    t.NodeList(content);
+    return (t.template[el.dataset.id] =
+      content.childNodes.length > 1
+        ? content
+        : content.childNodes[0]);
   },
 
   createText(str) {
@@ -109,28 +108,22 @@ Object.assign(t, {
   },
 
   createHtml(str, trusted) {
-    const root = t.parser.parseFromString(str, 'text/html').body;
+    const root = t.parse(str);
     if (!trusted) {
       t.sanitizeHtml(root);
-    } else if (str.includes('i18n-')) {
+    } else if (str.includes('i18n=')) {
       t.NodeList(root);
     }
-    const bin = document.createDocumentFragment();
-    while (root.firstChild) {
-      bin.appendChild(root.firstChild);
-    }
-    return bin;
+    return t.toFragment(root);
   },
 
-  async fetchTemplate(url, name) {
-    let el = t.template[name];
-    if (!el) {
-      el = (await download(url, {responseType: 'document'})).body.firstElementChild;
-      t.NodeList(el);
-      t.template[name] = el;
-    }
-    return el;
-  },
+  fetchTemplate: async (url, name) => t.template[name] ||
+    t.createTemplate({
+      content: t.toFragment(t.parse(await download(url))),
+      dataset: {id: name},
+    }),
+
+  parse: str => new DOMParser().parseFromString(str, 'text/html').body,
 
   sanitizeHtml(root) {
     const toRemove = [];
@@ -154,6 +147,13 @@ Object.assign(t, {
     }
   },
 
+  /** Moves child nodes to a new document fragment */
+  toFragment(el) {
+    const bin = document.createDocumentFragment();
+    for (let n; (n = el.firstChild);) bin.appendChild(n);
+    return bin;
+  },
+
   _intl: null,
   _intlY: null,
   _intlYHM: null,
@@ -186,39 +186,4 @@ Object.assign(t, {
   },
 });
 
-//#endregion
-//#region Internals
-
-(() => {
-  const observer = new MutationObserver(process);
-  let observing = false;
-  Object.assign(t, {
-    stopObserver() {
-      if (observing) {
-        observing = false;
-        observer.disconnect();
-      }
-    },
-  });
-  document.addEventListener('DOMContentLoaded', () => {
-    process(observer.takeRecords());
-    t.stopObserver();
-  }, {once: true});
-
-  t.NodeList(document);
-  start();
-
-  function process(mutations) {
-    mutations.forEach(m => t.NodeList(m.addedNodes));
-    start();
-  }
-
-  function start() {
-    if (!observing) {
-      observing = true;
-      observer.observe(document, {subtree: true, childList: true});
-    }
-  }
-})();
-
-//#endregion
+waitForSelector(t.SELECTOR, {recur: t.NodeList});
diff --git a/manage.html b/manage.html
index c71c1fd4..fbf49234 100644
--- a/manage.html
+++ b/manage.html
@@ -4,16 +4,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title i18n-text="manageTitle"></title>
+  <title i18n="manageTitle"></title>
   <link rel="stylesheet" href="global.css">
   <link href="global-dark.css" rel="stylesheet">
 
-  <!-- Notes:
-    * Chrome doesn't garbage-collect (or even leaks) SVG <symbol> referenced via <use> so we'll embed the code directly
-    * inter-tag whitespace in templates is automatically removed in localization.js
-    * i18n-anything attribute automatically creates "anything" attribute
-  -->
-
   <template data-id="style">
     <div class="entry">
       <h2 class="style-name">
@@ -24,19 +18,19 @@
         <a target="_blank" class="homepage"></a>
       </h2>
       <p class="applies-to">
-        <label i18n-text="appliesDisplay"></label>
+        <label i18n="appliesDisplay"></label>
         <span class="targets"></span>
       </p>
       <p class="actions">
         <a class="style-edit-link">
-          <button i18n-text="editStyleLabel" tabindex="-1"></button>
+          <button i18n="editStyleLabel" tabindex="-1"></button>
         </a>
-        <button class="enable" i18n-text="enableStyleLabel"></button>
-        <button class="disable" i18n-text="disableStyleLabel"></button>
-        <button class="delete" i18n-text="deleteStyleLabel"></button>
-        <button class="check-update" i18n-text="checkForUpdate"></button>
-        <button class="update" i18n-text="installUpdate"></button>
-        <button class="configure-usercss" i18n-text="configureStyle"></button>
+        <button class="enable" i18n="enableStyleLabel"></button>
+        <button class="disable" i18n="disableStyleLabel"></button>
+        <button class="delete" i18n="deleteStyleLabel"></button>
+        <button class="check-update" i18n="checkForUpdate"></button>
+        <button class="update" i18n="installUpdate"></button>
+        <button class="configure-usercss" i18n="configureStyle"></button>
         <span class="update-note"></span>
       </p>
     </div>
@@ -46,7 +40,7 @@
     <div class="entry">
       <h2 class="style-name">
         <div class="checkmate">
-          <input class="checker" type="checkbox" i18n-title="toggleStyle">
+          <input class="checker" type="checkbox" i18n="title:toggleStyle">
           <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
         </div>
         <a class="style-name-link">
@@ -56,7 +50,7 @@
       </h2>
       <p class="actions">
         <a target="_blank" class="homepage" tabindex="0"></a>
-        <a class="delete" i18n-title="deleteStyleLabel" tabindex="0">
+        <a class="delete" i18n="title:deleteStyleLabel" tabindex="0">
           <svg class="svg-icon" viewBox="0 0 20 20">
             <polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
                              5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
@@ -85,14 +79,14 @@
   </template>
 
   <template data-id="configureIcon">
-    <a class="configure-usercss" i18n-title="configureStyle" tabindex="0">
+    <a class="configure-usercss" i18n="title:configureStyle" tabindex="0">
       <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
     </a>
   </template>
 
   <template data-id="updaterIcons">
     <span class="updater-icons">
-      <a class="check-update" i18n-title="checkForUpdate" tabindex="0">
+      <a class="check-update" i18n="title:checkForUpdate" tabindex="0">
         <svg class="svg-icon" viewBox="0 0 20 20">
           <path d="M18,16.6l-3.1-3.1c0.5-0.7,0.9-1.5,1-2.5h-2.1c-0.4,1.7-2,3-3.9,3c-0.8,0-1.6-0.3-2.3-0.7
                    L10,11H6.1H4.1H4v6l2.3-2.3c1,0.8,2.3,1.3,3.7,1.3c1.3,0,2.5-0.4,3.5-1.1l3.1,3.1L18,16.6z"/>
@@ -100,18 +94,18 @@
                    C7,4,4.6,6.2,4.1,9h2.1C6.6,7.3,8.1,6,10,6z"/>
         </svg>
       </a>
-      <a class="update" i18n-title="installUpdate" tabindex="0">
+      <a class="update" i18n="title:installUpdate" tabindex="0">
         <svg class="svg-icon" viewBox="0 0 20 20">
           <polygon points="16,8 12,8 12,3 8,3 8,8 4,8 10,14 "/>
           <rect shape-rendering="crispEdges" x="4" y="15" width="12" height="2"/>
         </svg>
       </a>
-      <span class="up-to-date" i18n-title="updateCheckSucceededNoUpdate">
+      <span class="up-to-date" i18n="title:updateCheckSucceededNoUpdate">
         <svg class="svg-icon" viewBox="0 0 20 20">
           <polygon points="15.83 4.75 8.76 11.82 5.2 8.26 3.51 9.95 8.76 15.19 17.52 6.43 15.83 4.75"/>
         </svg>
       </span>
-      <span class="updated" i18n-title="updateCompleted">
+      <span class="updated" i18n="title:updateCompleted">
         <svg class="svg-icon" viewBox="0 0 20 20">
           <polygon points="15.83 4.75 8.76 11.82 5.2 8.26 3.51 9.95 8.76 15.19 17.52 6.43 15.83 4.75"/>
         </svg>
@@ -129,12 +123,12 @@
   </template>
 
   <template data-id="appliesToEverything">
-    <span class="target" i18n-text="appliesToEverything"></span>
+    <span class="target" i18n="appliesToEverything"></span>
   </template>
 
   <template data-id="extraAppliesTo">
     <details class="applies-to-extra">
-      <summary class="applies-to-extra-expander" i18n-text="appliesDisplayTruncatedSuffix"></summary>
+      <summary class="applies-to-extra-expander" i18n="appliesDisplayTruncatedSuffix"></summary>
     </details>
   </template>
 
@@ -159,21 +153,21 @@
   <script src="js/dark-themer.js"></script> <!-- must be last in HEAD to avoid FOUC -->
 </head>
 
-<body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage">
+<body id="stylus-manage" i18n="dragndrop-hint:dragDropMessage">
 
 <div id="header">
-  <h1 id="manage-heading" i18n-text="manageHeading"></h1>
+  <h1 id="manage-heading" i18n="manageHeading"></h1>
 
   <div id="manage-settings">
     <div class="settings-column">
       <details id="filters" data-pref="manage.filters.expanded">
         <summary>
-          <h2 i18n-text="manageFilters">:
+          <h2 i18n="manageFilters">:
             <div class="filter-stats-wrapper">
               <span id="filters-stats"></span>
               <a id="reset-filters" tabindex="0">
                 <svg class="svg-icon" viewBox="0 0 20 20">
-                  <title i18n-text="genericResetLabel"></title>
+                  <title i18n="genericResetLabel"></title>
                   <polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
                                    5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
                 </svg>
@@ -193,8 +187,8 @@
           </label>
           <div class="select-resizer">
             <select id="manage.onlyEnabled.invert" class="fit-width">
-              <option i18n-text="manageOnlyEnabled" value="false"></option>
-              <option i18n-text="manageOnlyDisabled" value="true"></option>
+              <option i18n="manageOnlyEnabled" value="false"></option>
+              <option i18n="manageOnlyDisabled" value="true"></option>
             </select>
             <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
           </div>
@@ -210,9 +204,9 @@
             </div>
           </label>
           <div class="select-resizer">
-            <select id="manage.onlyLocal.invert" i18n-title="manageOnlyLocalTooltip" class="fit-width">
-              <option i18n-text="manageOnlyLocal" value="false"></option>
-              <option i18n-text="manageOnlyExternal" value="true"></option>
+            <select id="manage.onlyLocal.invert" i18n="title:manageOnlyLocalTooltip" class="fit-width">
+              <option i18n="manageOnlyLocal" value="false"></option>
+              <option i18n="manageOnlyExternal" value="true"></option>
             </select>
             <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
           </div>
@@ -229,8 +223,8 @@
           </label>
           <div class="select-resizer">
             <select id="manage.onlyUsercss.invert" class="fit-width">
-              <option i18n-text="manageOnlyUsercss" value="false"></option>
-              <option i18n-text="manageOnlyNonUsercss" value="true"></option>
+              <option i18n="manageOnlyUsercss" value="false"></option>
+              <option i18n="manageOnlyNonUsercss" value="true"></option>
             </select>
             <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
           </div>
@@ -243,20 +237,20 @@
                                    .no-update:not(.update-problem),
                                    .updatable:not(.can-update):not(.update-problem):not(.update-done)">
           <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          <span i18n-text="manageOnlyUpdates"></span>
+          <span i18n="manageOnlyUpdates"></span>
         </label>
 
         <div id="search-wrapper">
-          <input id="search" type="search" i18n-placeholder="search" spellcheck="false"
+          <input id="search" type="search" i18n="placeholder:search" spellcheck="false"
                  data-filter=":not(.not-matching)"
                  data-filter-hide=".not-matching">
           <div class="select-wrapper">
             <select id="searchMode" class="fit-width">
-              <option i18n-text="searchStylesName" value="name"></option>
-              <option i18n-text="searchStylesMeta" value="meta" selected></option>
-              <option i18n-text="searchStylesCode" value="code"></option>
-              <option i18n-text="searchStylesMatchUrl" value="url"></option>
-              <option i18n-text="searchStylesAll" value="all"></option>
+              <option i18n="searchStylesName" value="name"></option>
+              <option i18n="searchStylesMeta" value="meta" selected></option>
+              <option i18n="searchStylesCode" value="code"></option>
+              <option i18n="searchStylesMatchUrl" value="url"></option>
+              <option i18n="searchStylesAll" value="all"></option>
             </select>
             <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
           </div>
@@ -268,7 +262,7 @@
       </details>
 
       <div id="sort-wrapper">
-        <div class="sorter-selection" i18n-title="sortLabel">
+        <div class="sorter-selection" i18n="title:sortLabel">
           <select id="manage.newUI.sort"></select>
           <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
         </div>
@@ -280,43 +274,43 @@
 
     <div class="settings-column">
       <details id="actions" data-pref="manage.actions.expanded">
-        <summary><h2 i18n-text="optionsActions"></h2></summary>
+        <summary><h2 i18n="optionsActions"></h2></summary>
         <div id="update-check">
-          <button id="check-all-updates" i18n-text="checkAllUpdates">
+          <button id="check-all-updates" i18n="checkAllUpdates">
             <span id="update-progress"></span>
           </button>
-          <a id="update-history" i18n-title="genericHistoryLabel" tabindex="0">
-            <svg class="svg-icon" viewBox="0 0 20 20" i18n-alt="helpAlt">
+          <a id="update-history" i18n="title:genericHistoryLabel" tabindex="0">
+            <svg class="svg-icon" viewBox="0 0 20 20" i18n="alt:helpAlt">
               <path d="M13,7H7V6h6Zm6,6.5A5.5,5.5,0,0,1,8.61,16H4V3H16V8.61A5.5,5.5,0,0,1,19,13.5ZM8,14c0-.16,0-.84,0-1H7V12H8.21a5.46,5.46,0,0,1,.39-1H7V10H9.26a5.55,5.55,0,0,1,1.09-1H7V8h7V5H6v9Zm10-.5A4.5,4.5,0,1,0,13.5,18,4.5,4.5,0,0,0,18,13.5ZM14,13V10H13v4h4V13Z"/>
             </svg>
           </a>
         </div>
 
         <div id="update-all">
-          <button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
-          <span id="update-all-no-updates" class="hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
-          <button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
+          <button id="apply-all-updates" class="hidden" i18n="applyAllUpdates"></button>
+          <span id="update-all-no-updates" class="hidden" i18n="updateAllCheckSucceededNoUpdate"></span>
+          <button id="check-all-updates-force" class="hidden" i18n="checkAllUpdatesForce"></button>
         </div>
 
         <div id="add-style-wrapper">
           <a href="edit.html">
-            <button id="add-style-label" i18n-text="addStyleLabel" tabindex="-1"></button>
+            <button id="add-style-label" i18n="addStyleLabel" tabindex="-1"></button>
           </a>
           <label id="add-style-as-usercss-wrapper">
             <input type="checkbox" id="newStyleAsUsercss">
             <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-            <span i18n-text="manageNewStyleAsUsercss" i18n-title="optionsAdvancedNewStyleAsUsercss"></span>
+            <span i18n="manageNewStyleAsUsercss, title:optionsAdvancedNewStyleAsUsercss"></span>
             <a id="usercss-wiki"
                href="https://github.com/openstyles/stylus/wiki/Usercss"
-               i18n-title="externalUsercssDocument">
+               i18n="title:externalUsercssDocument">
               <svg class="svg-icon" viewBox="0 0 20 20">
                 <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
               </svg>
             </a>
           </label>
         </div>
-        <button id="manage-options-button" i18n-text="openOptions"></button>
-        <button id="injection-order-button" i18n-title="styleInjectionOrder">
+        <button id="manage-options-button" i18n="openOptions"></button>
+        <button id="injection-order-button" i18n="title:styleInjectionOrder">
           <svg class="svg-icon"><use xlink:href="#svg-icon-reorder"/></svg>
           &nbsp;
         </button>
@@ -326,43 +320,43 @@
     <div class="settings-column">
       <details id="backup" data-pref="manage.backup.expanded">
         <summary>
-          <h2 id="backup-title" i18n-text="backupButtons"><!-- removing space
-            --><a tabindex="0" i18n-title="backupMessage" data-cmd="note">
+          <h2 id="backup-title" i18n="backupButtons"><!-- removing space
+            --><a tabindex="0" i18n="title:backupMessage" data-cmd="note">
               <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
             </a>
           </h2>
         </summary>
         <div id="backup-buttons">
           <div class="split-btn">
-            <button id="file-all-styles" i18n-text="exportLabel"></button
-            ><button class="split-btn-pedal" i18n-menu-compat="exportCompatible"></button>
+            <button id="file-all-styles" i18n="exportLabel"></button
+            ><button class="split-btn-pedal" i18n="menu-compat:exportCompatible"></button>
           </div>
-          <button id="unfile-all-styles" i18n-text="importLabel"></button>
-          <button id="sync-styles" i18n-text="optionsCustomizeSync"></button>
+          <button id="unfile-all-styles" i18n="importLabel"></button>
+          <button id="sync-styles" i18n="optionsCustomizeSync"></button>
         </div>
       </details>
 
       <div id="manage-text">
         <span>
-          <a href="https://userstyles.world/explore" target="_blank" i18n-text="linkGetShareStyles"></a>
-          <a tabindex="0" i18n-title="linkGetShareStylesInfo" data-cmd="note">
+          <a href="https://userstyles.world/explore" target="_blank" i18n="linkGetShareStyles"></a>
+          <a tabindex="0" i18n="title:linkGetShareStylesInfo" data-cmd="note">
             <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
           </a>
         </span>
         <span>
-          <a href="https://uso.kkx.one/browse/styles" target="_blank" i18n-text="linkGetStyles"></a>
-          <a tabindex="0" i18n-title="linkGetStylesInfo" data-cmd="note">
+          <a href="https://uso.kkx.one/browse/styles" target="_blank" i18n="linkGetStyles"></a>
+          <a tabindex="0" i18n="title:linkGetStylesInfo" data-cmd="note">
             <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
           </a>
         </span>
-        <span><a href="https://add0n.com/stylus.html#features" target="_blank" i18n-text="linkGetHelp"></a></span>
-        <span><a href="https://github.com/openstyles/stylus/wiki" target="_blank" i18n-text="linkStylusWiki"></a></span>
-        <span><a href="https://www.transifex.com/github-7/Stylus" target="_blank" i18n-text="linkTranslate"></a></span>
+        <span><a href="https://add0n.com/stylus.html#features" target="_blank" i18n="linkGetHelp"></a></span>
+        <span><a href="https://github.com/openstyles/stylus/wiki" target="_blank" i18n="linkStylusWiki"></a></span>
+        <span><a href="https://www.transifex.com/github-7/Stylus" target="_blank" i18n="linkTranslate"></a></span>
       </div>
     </div>
   </div>
 
-  <div id="header-resizer" i18n-title="headerResizerHint"></div>
+  <div id="header-resizer" i18n="title:headerResizerHint"></div>
 </div>
 
 <div id="installed"></div>
diff --git a/options.html b/options.html
index 0ebedb35..b67394c4 100644
--- a/options.html
+++ b/options.html
@@ -3,16 +3,16 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title i18n-text-append="optionsHeading">Stylus </title>
+  <title i18n="+optionsHeading">Stylus </title>
   <link rel="stylesheet" href="global.css">
   <link href="global-dark.css?bugfix" rel="stylesheet"> <!-- https://crbug.com/1298600 -->
 
   <script src="js/polyfill.js"></script>
   <script src="js/toolbox.js"></script>
   <script src="js/msg.js"></script>
-  <script src="js/localization.js"></script>
   <script src="js/prefs.js"></script>
   <script src="js/dom.js"></script>
+  <script src="js/localization.js"></script>
 
   <script src="content/style-injector.js"></script>
   <script src="content/apply.js"></script>
@@ -21,24 +21,24 @@
   <link rel="stylesheet" href="options/options.css">
 
   <template data-id="shortcutsFF">
-    <p style="line-height: 1.5" i18n-text="shortcutsNoteFF"></p>
+    <p style="line-height: 1.5" i18n="shortcutsNoteFF"></p>
     <table style="margin: 0 auto">
       <tr>
-        <td i18n-text="optionsCustomizePopup"></td>
+        <td i18n="optionsCustomizePopup"></td>
         <td><input id="hotkey._execute_browser_action" type="search"></td>
       </tr>
       <tr>
-        <td i18n-text="openManage"></td>
+        <td i18n="openManage"></td>
         <td><input id="hotkey.openManage" type="search"></td>
       </tr>
       <tr>
-        <td i18n-text="disableAllStyles"></td>
+        <td i18n="disableAllStyles"></td>
         <td><input id="hotkey.styleDisableAll" type="search"></td>
       </tr>
     </table>
     <p style="text-align: center">
       <a href="https://developer.mozilla.org/Add-ons/WebExtensions/manifest.json/commands#Key_combinations"
-         target="_blank" i18n-text="helpAlt"></a>
+         target="_blank" i18n="helpAlt"></a>
     </p>
   </template>
 
@@ -49,7 +49,7 @@
 <body id="stylus-options">
 
   <div id="options-header">
-    <div id="options-title" i18n-text-append="optionsHeading">
+    <div id="options-title" i18n="+optionsHeading">
       <div id="options-close-icon">
         <svg viewBox="0 0 20 20" class="svg-icon">
           <path d="M11.69,10l4.55,4.55-1.69,1.69L10,11.69,5.45,16.23,3.77,14.55,8.31,10,3.77,5.45,5.45,3.77,10,8.31l4.55-4.55,1.69,1.69Z"></path>
@@ -63,11 +63,11 @@
     <div class="options-wrapper">
 
       <div class="block" id="updates">
-        <h1 i18n-text="optionsCustomizeUpdate"></h1>
+        <h1 i18n="optionsCustomizeUpdate"></h1>
         <div class="items">
           <label>
-            <span i18n-text="optionsUpdateInterval">
-              <a i18n-title="optionsUpdateImportNote"
+            <span i18n="optionsUpdateInterval">
+              <a i18n="title:optionsUpdateImportNote"
                  data-cmd="note" class="svg-inline-wrapper" tabindex="0">
                 <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
               </a>
@@ -78,13 +78,13 @@
       </div>
 
       <div class="block sync-options">
-        <h1 i18n-text="optionsCustomizeSync"></h1>
+        <h1 i18n="optionsCustomizeSync"></h1>
         <div class="items">
           <label>
             <span class="sync-status"></span>
             <div class="select-resizer">
               <select class="cloud-name">
-                <option value="none" i18n-text="optionsSyncNone"></option>
+                <option value="none" i18n="optionsSyncNone"></option>
                 <option value="dropbox">Dropbox</option>
                 <option value="google">Google Drive</option>
                 <option value="onedrive">OneDrive</option>
@@ -95,61 +95,61 @@
           </label>
           <table class="drive-options" data-drive="webdav">
             <tr>
-              <td i18n-text="optionsSyncUrl"></td>
+              <td i18n="optionsSyncUrl"></td>
               <td><input type="url" data-option="url"></td>
             </tr>
             <tr>
-              <td i18n-text="optionsSyncUsername"></td>
+              <td i18n="optionsSyncUsername"></td>
               <td><input type="text" data-option="username"></td>
             </tr>
             <tr>
-              <td i18n-text="optionsSyncPassword"></td>
+              <td i18n="optionsSyncPassword"></td>
               <td><input type="password" data-option="password"></td>
             </tr>
           </table>
           <div class="actions">
             <button class="connect"></button>
-            <button class="sync-now" i18n-text="optionsSyncSyncNow"></button>
-            <button class="sync-login" i18n-text="optionsSyncLogin"></button>
+            <button class="sync-now" i18n="optionsSyncSyncNow"></button>
+            <button class="sync-login" i18n="optionsSyncLogin"></button>
           </div>
         </div>
       </div>
 
       <div class="block">
-        <h1 i18n-text="stylePreferSchemeLabel"></h1>
+        <h1 i18n="stylePreferSchemeLabel"></h1>
         <div class="items no-stretch">
-          <label class="radio-wrapper" i18n-text-append="preferSchemeDark">
+          <label class="radio-wrapper" i18n="+preferSchemeDark">
             <input type="radio" value="dark" name="schemeSwitcher.enabled">
           </label>
-          <label class="radio-wrapper" i18n-text-append="preferSchemeLight">
+          <label class="radio-wrapper" i18n="+preferSchemeLight">
             <input type="radio" value="light" name="schemeSwitcher.enabled">
           </label>
-          <label class="radio-wrapper" i18n-text-append="optionsAdvancedAutoSwitchSchemeBySystem">
+          <label class="radio-wrapper" i18n="+optionsAdvancedAutoSwitchSchemeBySystem">
             <input type="radio" value="system" name="schemeSwitcher.enabled">
           </label>
           <label class="radio-wrapper">
             <input type="radio" value="time" name="schemeSwitcher.enabled">
-            <span i18n-text="optionsAdvancedAutoSwitchSchemeByTime"></span>
+            <span i18n="optionsAdvancedAutoSwitchSchemeByTime"></span>
             <input type="time" required id="schemeSwitcher.nightStart">
             ~
             <input type="time" required id="schemeSwitcher.nightEnd">
           </label>
-          <label class="radio-wrapper" i18n-text-append="optionsAdvancedAutoSwitchSchemeNever">
+          <label class="radio-wrapper" i18n="+optionsAdvancedAutoSwitchSchemeNever">
             <input type="radio" value="never" name="schemeSwitcher.enabled">
           </label>
         </div>
       </div>
 
       <div class="block">
-        <h1 i18n-text="optionsCustomizeIcon"></h1>
+        <h1 i18n="optionsCustomizeIcon"></h1>
         <div class="items">
           <label>
-            <span class="radio-wrapper" i18n-text-append="optionsIconAuto">
+            <span class="radio-wrapper" i18n="+optionsIconAuto">
               <input type="radio" name="iconset" value="-1" data-value-type="number">
             </span>
           </label>
           <label>
-            <span class="radio-wrapper" i18n-text-append="optionsIconDark">
+            <span class="radio-wrapper" i18n="+optionsIconDark">
               <input type="radio" name="iconset" value="0" data-value-type="number">
             </span>
             <span>
@@ -159,7 +159,7 @@
             </span>
           </label>
           <label>
-            <span class="radio-wrapper" i18n-text-append="optionsIconLight">
+            <span class="radio-wrapper" i18n="+optionsIconLight">
               <input type="radio" name="iconset" value="1" data-value-type="number">
             </span>
             <span>
@@ -172,64 +172,63 @@
       </div>
 
       <div class="block">
-        <h1 i18n-text="optionsCustomizeBadge"></h1>
+        <h1 i18n="optionsCustomizeBadge"></h1>
         <div class="items">
           <label>
-            <span i18n-text="prefShowBadge"></span>
+            <span i18n="prefShowBadge"></span>
             <span class="onoffswitch">
               <input type="checkbox" id="show-badge" class="slider">
               <span></span>
             </span>
           </label>
           <label>
-            <span i18n-text="optionsBadgeNormal"></span>
+            <span i18n="optionsBadgeNormal"></span>
             <input type="color" id="badgeNormal">
           </label>
           <label>
-            <span i18n-text="optionsBadgeDisabled"></span>
+            <span i18n="optionsBadgeDisabled"></span>
             <input type="color" id="badgeDisabled">
           </label>
         </div>
       </div>
 
       <div class="block">
-        <h1 i18n-text="optionsCustomizePopup"></h1>
+        <h1 i18n="optionsCustomizePopup"></h1>
         <div class="items">
           <label>
-            <span i18n-text="optionsPopupWidth"></span>
+            <span i18n="optionsPopupWidth"></span>
             <input type="number" id="popupWidth" min="200" max="800">
           </label>
           <label>
-            <span i18n-text="popupOpenEditInWindow"
-                  i18n-title="popupOpenEditInWindowTooltip"></span>
+            <span i18n="popupOpenEditInWindow, title:popupOpenEditInWindowTooltip"></span>
             <span class="onoffswitch">
               <input type="checkbox" id="openEditInWindow" class="slider">
               <span></span>
             </span>
           </label>
           <label>
-            <span i18n-text="popupOpenEditInPopup"></span>
+            <span i18n="popupOpenEditInPopup"></span>
             <span class="onoffswitch">
               <input type="checkbox" id="openEditInWindow.popup" class="slider">
               <span></span>
             </span>
           </label>
           <label>
-            <span i18n-text="popupStylesFirst"></span>
+            <span i18n="popupStylesFirst"></span>
             <span class="onoffswitch">
               <input type="checkbox" id="popup.stylesFirst" class="slider">
               <span></span>
             </span>
           </label>
           <label>
-            <span i18n-text="popupAutoResort"></span>
+            <span i18n="popupAutoResort"></span>
             <span class="onoffswitch">
               <input type="checkbox" id="popup.autoResort" class="slider">
               <span></span>
             </span>
           </label>
           <label class="chromium-only chrome-no-popup-border">
-            <span i18n-text="popupBorders" i18n-title="popupBordersTooltip"></span>
+            <span i18n="popupBorders, title:popupBordersTooltip"></span>
             <span class="onoffswitch">
               <input type="checkbox" id="popup.borders" class="slider">
               <span></span>
@@ -239,18 +238,18 @@
       </div>
 
       <div class="block">
-        <h1 i18n-text="openManage"></h1>
+        <h1 i18n="openManage"></h1>
         <div class="items">
           <label>
-            <span i18n-text="manageNewUI"></span>
+            <span i18n="manageNewUI"></span>
             <span class="onoffswitch">
               <input type="checkbox" id="manage.newUI" class="slider">
               <span></span>
             </span>
           </label>
           <label>
-            <span i18n-text="manageFavicons">
-              <a i18n-title="manageFaviconsHelp"
+            <span i18n="manageFavicons">
+              <a i18n="title:manageFaviconsHelp"
                  data-cmd="note" class="svg-inline-wrapper" tabindex="0">
                 <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
               </a>
@@ -261,25 +260,25 @@
             </span>
           </label>
           <label>
-            <span i18n-text="manageFaviconsGray"></span>
+            <span i18n="manageFaviconsGray"></span>
             <span class="onoffswitch">
               <input type="checkbox" id="manage.newUI.faviconsGray" class="slider">
               <span></span>
             </span>
           </label>
           <label>
-            <span i18n-text="manageMaxTargets"></span>
+            <span i18n="manageMaxTargets"></span>
             <input id="manage.newUI.targets" type="number" min="1" max="99">
           </label>
         </div>
       </div>
 
       <div class="block" id="advanced">
-        <h1 i18n-text="optionsAdvanced"></h1>
+        <h1 i18n="optionsAdvanced"></h1>
         <div class="items">
           <label class="chromium-only">
-            <span i18n-text="optionsAdvancedStyleViaXhr">
-              <a i18n-title="optionsAdvancedStyleViaXhrNote"
+            <span i18n="optionsAdvancedStyleViaXhr">
+              <a i18n="title:optionsAdvancedStyleViaXhrNote"
                  data-cmd="note" class="svg-inline-wrapper" tabindex="0">
                 <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
               </a>
@@ -291,8 +290,8 @@
           </label>
           <label>
             <span>
-              <span i18n-html="optionsAdvancedPatchCsp"></span>
-              <a i18n-title="optionsAdvancedPatchCspNote"
+              <span i18n="html:optionsAdvancedPatchCsp"></span>
+              <a i18n="title:optionsAdvancedPatchCspNote"
                  data-cmd="note" class="svg-inline-wrapper" tabindex="0">
                 <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
               </a>
@@ -303,8 +302,8 @@
             </span>
           </label>
           <label>
-            <span i18n-text="optionsAdvancedExposeIframes">
-              <a i18n-title="optionsAdvancedExposeIframesNote"
+            <span i18n="optionsAdvancedExposeIframes">
+              <a i18n="title:optionsAdvancedExposeIframesNote"
                  data-cmd="note" class="svg-inline-wrapper" tabindex="0">
                 <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
               </a>
@@ -315,8 +314,8 @@
             </span>
           </label>
           <label class="chromium-only">
-            <span i18n-text="optionsAdvancedExposeStyleName">
-              <a i18n-title="optionsAdvancedExposeStyleNameNote"
+            <span i18n="optionsAdvancedExposeStyleName">
+              <a i18n="title:optionsAdvancedExposeStyleNameNote"
                  data-cmd="note" class="svg-inline-wrapper" tabindex="0">
                 <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
               </a>
@@ -327,7 +326,7 @@
             </span>
           </label>
           <label class="chromium-only">
-            <span i18n-text="optionsAdvancedContextDelete"></span>
+            <span i18n="optionsAdvancedContextDelete"></span>
             <span class="onoffswitch">
               <input type="checkbox" id="editor.contextDelete" class="slider">
               <span></span>
@@ -337,15 +336,15 @@
       </div>
 
       <div class="block">
-        <h1 i18n-text="cm_theme"></h1>
-        <div class="items" i18n-text="optionsStylusThemes" style="width:0"></div>
+        <h1 i18n="cm_theme"></h1>
+        <div class="items" i18n="optionsStylusThemes" style="width:0"></div>
       </div>
     </div>
 
     <div class="block" id="actions">
-      <button id="reset" i18n-text="optionsResetButton" i18n-title="optionsReset"></button>
-      <button id="shortcuts" i18n-text="shortcuts" i18n-title="shortcutsNote"></button>
-      <button id="manage" i18n-text="confirmClose"></button>
+      <button id="reset" i18n="optionsResetButton, title:optionsReset"></button>
+      <button id="shortcuts" i18n="shortcuts, title:shortcutsNote"></button>
+      <button id="manage" i18n="confirmClose"></button>
     </div>
   </div>
 
diff --git a/popup.html b/popup.html
index 05db4daa..4d3d4012 100644
--- a/popup.html
+++ b/popup.html
@@ -19,15 +19,15 @@
           </label>
         </div>
         <div class="actions">
-          <a class="configure" i18n-title="configureStyle" tabindex="0">
+          <a class="configure" i18n="title:configureStyle" tabindex="0">
             <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
           </a>
-          <a class="style-edit-link" href="edit.html" i18n-title="editStyleLabel">
+          <a class="style-edit-link" href="edit.html" i18n="title:editStyleLabel">
             <svg class="svg-icon edit" viewBox="0 0 14 16">
               <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
             </svg>
           </a>
-          <a class="menu-button" i18n-title="popupMenuButtonTooltip" tabindex="0">
+          <a class="menu-button" i18n="title:popupMenuButtonTooltip" tabindex="0">
             <svg class="svg-icon menu-button-icon" viewBox="0 0 3 16">
               <path fill-rule="evenodd" d="M0 2.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0zm0 5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0zM1.5 14a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
             </svg>
@@ -44,7 +44,7 @@
                 <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
               </div>
             </div>
-            <span i18n-text="excludeStyleByDomainLabel"></span>
+            <span i18n="excludeStyleByDomainLabel"></span>
           </label>
           <label class="menu-item exclude-by-url button">
             <div class="menu-icon">
@@ -53,11 +53,11 @@
                 <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
               </div>
             </div>
-            <span i18n-text="excludeStyleByUrlLabel"></span>
+            <span i18n="excludeStyleByUrlLabel"></span>
           </label>
           <div class="menu-buttons-wrapper">
-            <button class="delete" i18n-text="deleteStyleLabel"></button>
-            <button class="menu-close" i18n-text="confirmClose"></button>
+            <button class="delete" i18n="deleteStyleLabel"></button>
+            <button class="menu-close" i18n="confirmClose"></button>
           </div>
         </div>
       </div>
@@ -69,32 +69,32 @@
   </template>
 
   <template data-id="noStyles">
-    <div id="no-styles" i18n-text="noStylesForSite"></div>
+    <div id="no-styles" i18n="noStylesForSite"></div>
   </template>
 
   <template data-id="regexpProblemIndicator">
-    <div class="regexp-problem-indicator" i18n-title="styleRegexpProblemTooltip"></div>
+    <div class="regexp-problem-indicator" i18n="title:styleRegexpProblemTooltip"></div>
   </template>
 
   <template data-id="regexpProblemExplanation">
     <div id="regexp-explanation">
-      <div id="regexp-partial" i18n-html="styleRegexpPartialExplanation"></div>
-      <div id="regexp-invalid" i18n-text="styleRegexpInvalidExplanation"></div>
-      <button i18n-text="confirmOK"></button>
+      <div id="regexp-partial" i18n="html:styleRegexpPartialExplanation"></div>
+      <div id="regexp-invalid" i18n="styleRegexpInvalidExplanation"></div>
+      <button i18n="confirmOK"></button>
     </div>
   </template>
 
   <template data-id="unavailableInfo">
     <div class="blocked-info">
-      <label i18n-text="stylusUnavailableForURL"></label>
-      <p i18n-text="stylusUnavailableForURLdetails"></p>
+      <label i18n="stylusUnavailableForURL"></label>
+      <p i18n="stylusUnavailableForURLdetails"></p>
     </div>
   </template>
 
   <template data-id="unreachableInfo">
     <div class="blocked-info">
-      <div class="copy-message" i18n-text="copied"></div>
-      <label i18n-text="unreachableContentScript"></label>
+      <div class="copy-message" i18n="copied"></div>
+      <label i18n="unreachableContentScript"></label>
     </div>
   </template>
 
@@ -102,33 +102,33 @@
     <div class="search-result">
       <a class="search-result-title"><span></span></a>
       <div class="search-result-info">
-        <img class="search-result-screenshot" i18n-title="installButton">
+        <img class="search-result-screenshot" i18n="title:installButton">
         <div class="search-result-status"></div>
         <div class="search-result-actions">
-          <button class="search-result-install" i18n-text="installButton"></button>
-          <button class="search-result-uninstall" i18n-text="deleteStyleLabel"></button>
-          <button class="search-result-customize" i18n-text="configureStyle"></button>
+          <button class="search-result-install" i18n="installButton"></button>
+          <button class="search-result-uninstall" i18n="deleteStyleLabel"></button>
+          <button class="search-result-customize" i18n="configureStyle"></button>
         </div>
         <dl class="search-result-meta">
           <div data-type="author">
-            <dt i18n-text="author"></dt>
-            <dd><a target="_blank" i18n-title="author"></a></dd>
+            <dt i18n="author"></dt>
+            <dd><a target="_blank" i18n="title:author"></a></dd>
           </div>
           <div data-type="rating">
-            <dt i18n-text="searchResultRating"></dt>
-            <dd i18n-title="searchResultRating"></dd>
+            <dt i18n="searchResultRating"></dt>
+            <dd i18n="title:searchResultRating"></dd>
           </div>
           <div data-type="updated">
-            <dt i18n-text="searchResultUpdated"></dt>
-            <dd i18n-title="searchResultUpdated"><time></time></dd>
+            <dt i18n="searchResultUpdated"></dt>
+            <dd i18n="title:searchResultUpdated"><time></time></dd>
           </div>
           <div data-type="weekly">
-            <dt i18n-text="searchResultWeeklyCount"></dt>
-            <dd i18n-title="searchResultWeeklyCount"></dd>
+            <dt i18n="searchResultWeeklyCount"></dt>
+            <dd i18n="title:searchResultWeeklyCount"></dd>
           </div>
           <div data-type="total">
-            <dt i18n-text="searchResultInstallCount"></dt>
-            <dd i18n-title="searchResultInstallCount"></dd>
+            <dt i18n="searchResultInstallCount"></dt>
+            <dd i18n="title:searchResultInstallCount"></dd>
           </div>
         </dl>
         <div class="search-result-description"></div>
@@ -138,13 +138,13 @@
 
   <template data-id="searchNav">
     <div>
-      <button data-type="prev" i18n-title="paginationPrevious" disabled>◄</button>
+      <button data-type="prev" i18n="title:paginationPrevious" disabled>◄</button>
       <label>
-        <span data-type="page" i18n-title="paginationCurrent">-</span>
+        <span data-type="page" i18n="title:paginationCurrent">-</span>
         /
-        <span data-type="total" i18n-title="paginationEstimated">-</span>
+        <span data-type="total" i18n="title:paginationEstimated">-</span>
       </label>
-      <button data-type="next" i18n-title="paginationNext" disabled>►</button>
+      <button data-type="next" i18n="title:paginationNext" disabled>►</button>
     </div>
   </template>
 
@@ -154,8 +154,7 @@
 
   <template data-id="searchResultNotMatching">
     <p class="not-matching-explainer"
-       i18n-text="searchResultNotMatching"
-       i18n-title="searchResultNotMatchingNote"></p>
+       i18n="searchResultNotMatching, title:searchResultNotMatchingNote"></p>
   </template>
 
   <script src="js/polyfill.js"></script>
@@ -180,22 +179,22 @@
   <div id="confirm">
     <div>
       <b>Style's Name</b>
-      <span i18n-text="deleteStyleConfirm"></span>
+      <span i18n="deleteStyleConfirm"></span>
       <div>
-        <button i18n-text="confirmDelete" data-cmd="ok"></button>
-        <button i18n-text="confirmCancel" data-cmd="cancel"></button>
+        <button i18n="confirmDelete" data-cmd="ok"></button>
+        <button i18n="confirmCancel" data-cmd="cancel"></button>
       </div>
     </div>
   </div>
 
   <div id="installed">
-    <aside id="hotkey-info" i18n-title="popupHotkeysTooltip"></aside>
+    <aside id="hotkey-info" i18n="title:popupHotkeysTooltip"></aside>
   </div>
 
   <div class="actions" id="main-actions">
     <div id="disable-all-wrapper">
       <div class="main-controls">
-        <label id="disableAll-label" i18n-text="disableAllStyles">
+        <label id="disableAll-label" i18n="disableAllStyles">
           <input id="disableAll" type="checkbox">
           <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
         </label>
@@ -203,33 +202,32 @@
     </div>
     <div class="main-controls">
       <div id="find-styles">
-        <a id="find-styles-link" i18n-text="findStyles" i18n-title="findStylesForSite"
+        <a id="find-styles-link" i18n="findStyles, title:findStylesForSite"
            href="https://to.be.replaced.on.click/" target="_blank"></a>
         <span id="find-styles-inline-group">
-          <label i18n-title="findStylesInlineTooltip">
+          <label i18n="title:findStylesInlineTooltip">
             <input id="popup.findStylesInline" class="checker" type="checkbox">
             <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-            <span i18n-text="findStylesInline"></span>
+            <span i18n="findStylesInline"></span>
           </label>
         </span>
       </div>
       <div id="write-style">
         <a id="write-for-frames" title="&lsaquo;iframe&rsaquo;..." tabindex="0" hidden></a>
-        <span id="write-style-for" i18n-text="writeStyleFor"></span>
+        <span id="write-style-for" i18n="writeStyleFor"></span>
       </div>
     </div>
 
     <!-- Actions -->
     <div id="popup-options">
       <div class="split-btn">
-        <button id="popup-manage-button" i18n-text="openManage"
-                data-href="manage.html" i18n-title="popupManageTooltip"></button
-        ><button class="split-btn-pedal" i18n-menu-site="popupManageSiteStyles"></button>
+        <button id="popup-manage-button" i18n="openManage, title:popupManageTooltip"
+                data-href="manage.html"></button
+        ><button class="split-btn-pedal" i18n="menu-site:popupManageSiteStyles"></button>
       </div>
-      <button id="popup-options-button" i18n-text="openOptions"></button>
+      <button id="popup-options-button" i18n="openOptions"></button>
       <button id="popup-wiki-button"
-              i18n-text="linkStylusWiki"
-              i18n-title="linkGetHelp"
+              i18n="linkStylusWiki, title:linkGetHelp"
               data-href="https://github.com/openstyles/stylus/wiki"></button>
     </div>
   </div>
@@ -238,15 +236,14 @@
   <div id="search-results" class="hidden">
     <div class="search-results-nav" data-type="top"></div>
     <div id="search-params">
-      <input id="search-query" type="search" i18n-placeholder="search"
-             i18n-title="searchStyleQueryHint">
+      <input id="search-query" type="search" i18n="placeholder:search, title:searchStyleQueryHint">
       <div class="select-resizer">
-        <select id="search-order" i18n-title="sortStylesHelpTitle">
-          <option value="n" i18n-text="genericTitle">
-          <option value="u" i18n-text="searchResultUpdated">
-          <option value="t" i18n-text="searchResultInstallCount">
-          <option value="w" i18n-text="searchResultWeeklyCount">
-          <option value="r" i18n-text="searchResultRating">
+        <select id="search-order" i18n="title:sortStylesHelpTitle">
+          <option value="n" i18n="genericTitle">
+          <option value="u" i18n="searchResultUpdated">
+          <option value="t" i18n="searchResultInstallCount">
+          <option value="w" i18n="searchResultWeeklyCount">
+          <option value="r" i18n="searchResultRating">
         </select>
         <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
       </div>
@@ -255,7 +252,7 @@
           <input id="search-globals" type="checkbox" checked>
           <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
         </span>
-        <span i18n-text="searchGlobalStyles"></span>
+        <span i18n="searchGlobalStyles"></span>
       </label>
     </div>
     <div id="search-results-list"></div>
@@ -284,7 +281,7 @@
     </symbol>
 
     <symbol id="svg-icon-help" viewBox="0 0 14 16">
-      <title i18n-text="helpAlt"></title>
+      <title i18n="helpAlt"></title>
       <circle cx="7" cy="5" r="1"/>
       <path d="M8,8c0-0.5-0.5-1-1-1H6C5.5,7,5,7.4,5,8h1v3c0,0.5,0.5,1,1,1h1c0.5,0,1-0.4,1-1H8V8z"/>
       <path d="M7,1c3.9,0,7,3.1,7,7s-3.1,7-7,7s-7-3.1-7-7S3.1,1,7,1z M7,2.3C3.9,2.3,1.3,4.9,1.3,8s2.6,5.7,5.7,5.7s5.7-2.6,5.7-5.7S10.1,2.3,7,2.3C7,2.3,7,2.3,7,2.3z"/>