open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

speed up and simplify i18n

Browse Source
This commit is contained in:
tophf 2022-02-18 00:19:03 +03:00
parent 8d3e01e05a
commit a58af7f816
8 changed files with 353 additions and 398 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
edit.html
View File

@ -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"/>

24
edit/settings.html
View File

@ -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>

28
install-usercss.html
View File

@ -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"/>

45
js/dom.js
View File

@ -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);

125
js/localization.js
View File

@ -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});

132
manage.html
View File

@ -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>

121
options.html
View File

@ -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>

119
popup.html
View File

@ -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"/>