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"> <li class="applies-to-item">
<div class="select-resizer"> <div class="select-resizer">
<select name="applies-type" class="applies-type style-contributor"> <select name="applies-type" class="applies-type style-contributor">
<option value="url" i18n-text="appliesUrlOption"></option> <option value="url" i18n="appliesUrlOption"></option>
<option value="url-prefix" i18n-text="appliesUrlPrefixOption"></option> <option value="url-prefix" i18n="appliesUrlPrefixOption"></option>
<option value="domain" i18n-text="appliesDomainOption"></option> <option value="domain" i18n="appliesDomainOption"></option>
<option value="regexp" i18n-text="appliesRegexpOption"></option> <option value="regexp" i18n="appliesRegexpOption"></option>
</select> </select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg> <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div> </div>
<div class="applies-value-wrapper"> <div class="applies-value-wrapper">
<input name="applies-value" class="applies-value style-contributor" spellcheck="false"> <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> <svg class="svg-icon remove"><use xlink:href="#svg-icon-minus"/></svg>
</a> </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> <svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
</a> </a>
</div> </div>
@ -88,8 +88,8 @@
</template> </template>
<template data-id="appliesToEverything"> <template data-id="appliesToEverything">
<li class="applies-to-everything" i18n-text="appliesToEverything"> <li class="applies-to-everything" i18n="appliesToEverything">
<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> <svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
</a> </a>
</li> </li>
@ -99,11 +99,11 @@
<div class="section"> <div class="section">
<!-- not using DIV to make our CSS work for #sections > div:only-of-type .remove-section --> <!-- not using DIV to make our CSS work for #sections > div:only-of-type .remove-section -->
<p class="deleted-section"> <p class="deleted-section">
<button class="restore-section" i18n-text="sectionRestore"></button> <button class="restore-section" i18n="sectionRestore"></button>
</p> </p>
<label i18n-text="sectionCode" class="code-label"></label> <label i18n="sectionCode" class="code-label"></label>
<div class="applies-to"> <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"> <a class="svg-inline-wrapper applies-to-help" tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a> </a>
@ -111,13 +111,13 @@
<ul class="applies-to-list"></ul> <ul class="applies-to-list"></ul>
</div> </div>
<div class="edit-actions"> <div class="edit-actions">
<button class="remove-section" i18n-text="sectionRemove"></button> <button class="remove-section" i18n="sectionRemove"></button>
<button class="add-section" i18n-long-text="sectionAdd" i18n-short-text="genericAdd"></button> <button class="add-section" i18n="long-text:sectionAdd, short-text:genericAdd"></button>
<button class="clone-section" i18n-text="genericClone"></button> <button class="clone-section" i18n="genericClone"></button>
<button class="move-section-up"></button> <button class="move-section-up"></button>
<button class="move-section-down"></button> <button class="move-section-down"></button>
<button class="beautify-section" i18n-text="styleBeautify"></button> <button class="beautify-section" i18n="styleBeautify"></button>
<button class="test-regexp" i18n-text="genericTest"></button> <button class="test-regexp" i18n="genericTest"></button>
</div> </div>
</div> </div>
</template> </template>
@ -127,27 +127,27 @@
<div data-type="main"> <div data-type="main">
<div data-type="content"></div> <div data-type="content"></div>
<div data-type="actions"> <div data-type="actions">
<a data-action="case" i18n-title="searchCaseSensitive" tabindex="0">Aa</a> <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="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> <svg class="svg-icon" style="transform: rotate(180deg)"><use xlink:href="#svg-icon-v"/></svg>
</a> </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> <svg class="svg-icon"><use xlink:href="#svg-icon-v"/></svg>
</a> </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> <svg class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg>
</a> </a>
</div> </div>
</div> </div>
<div data-type="status"> <div data-type="status">
<div class="CodeMirror-search-hint" i18n-text="searchRegexp"></div> <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>
</div> </div>
</template> </template>
<template data-id="clearSearch"> <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> <svg data-action="clear" class="svg-icon"><use xlink:href="#svg-icon-close"></use></svg>
</div> </div>
</template> </template>
@ -156,7 +156,7 @@
<div data-type="content"> <div data-type="content">
<div data-type="input-wrapper"> <div data-type="input-wrapper">
<textarea class="CodeMirror-search-field" rows="1" spellcheck="false" required <textarea class="CodeMirror-search-field" rows="1" spellcheck="false" required
i18n-placeholder="search"></textarea> i18n="placeholder:search"></textarea>
</div> </div>
</div> </div>
</template> </template>
@ -165,36 +165,36 @@
<div data-type="content"> <div data-type="content">
<div data-type="input-wrapper"> <div data-type="input-wrapper">
<textarea data-type="replace-from" <textarea data-type="replace-from"
i18n-placeholder="replace" i18n="placeholder:replace"
class="CodeMirror-search-field" rows="1" required class="CodeMirror-search-field" rows="1" required
spellcheck="false"></textarea> spellcheck="false"></textarea>
</div> </div>
<div data-type="input-wrapper"> <div data-type="input-wrapper">
<textarea data-type="replace-to" <textarea data-type="replace-to"
i18n-placeholder="replaceWith" i18n="placeholder:replaceWith"
class="CodeMirror-search-field" rows="1" required class="CodeMirror-search-field" rows="1" required
spellcheck="false"></textarea> spellcheck="false"></textarea>
</div> </div>
<button data-action="replace" i18n-text="replace" disabled></button> <button data-action="replace" i18n="replace" disabled></button>
<button data-action="replaceAll" i18n-text="replaceAll" disabled></button> <button data-action="replaceAll" i18n="replaceAll" disabled></button>
<button data-action="undo" i18n-text="undo" disabled></button> <button data-action="undo" i18n="undo" disabled></button>
<!-- <!--
Using a separate set of buttons because Using a separate set of buttons because
1. FF can display tooltips only when specified on the <button>, ignores the nested <title> in <svg> 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 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"> <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"/> <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> </svg>
</button> </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"> <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,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 "/> <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> </svg>
</button> </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"> <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"/> <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> </svg>
@ -203,7 +203,7 @@
</template> </template>
<template data-id="jumpToLine"> <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>
<template data-id="regexpTestPartial"> <template data-id="regexpTestPartial">
@ -211,15 +211,15 @@
</template> </template>
<template data-id="resizeGrip"> <template data-id="resizeGrip">
<div class="resize-grip" i18n-title="cm_resizeGripHint"></div> <div class="resize-grip" i18n="title:cm_resizeGripHint"></div>
</template> </template>
<template data-id="keymapHelp"> <template data-id="keymapHelp">
<table class="keymap-list can-close-on-esc"> <table class="keymap-list can-close-on-esc">
<thead> <thead>
<tr> <tr>
<th><input i18n-placeholder="helpKeyMapHotkey" type="search"></th> <th><input i18n="placeholder:helpKeyMapHotkey" type="search"></th>
<th><input i18n-placeholder="helpKeyMapCommand" type="search"></th> <th><input i18n="placeholder:helpKeyMapCommand" type="search"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -245,11 +245,11 @@
<body id="stylus-edit"> <body id="stylus-edit">
<div id="header"> <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"> <section id="basic-info">
<div id="basic-info-name"> <div id="basic-info-name">
<input id="name" class="style-contributor" spellcheck="false"> <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"> <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 <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 "/> 5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
@ -259,13 +259,12 @@
</div> </div>
<div id="basic-info-enabled"> <div id="basic-info-enabled">
<label id="enabled-label" <label id="enabled-label"
i18n-text="styleEnabledLabel" i18n="styleEnabledLabel, title:toggleStyle"
i18n-title="toggleStyle"
data-hotkey-tooltip="toggleStyle"> data-hotkey-tooltip="toggleStyle">
<input type="checkbox" id="enabled" class="style-contributor"> <input type="checkbox" id="enabled" class="style-contributor">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label> </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"> <input type="checkbox" id="editor.livePreview">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label> </label>
@ -275,75 +274,74 @@
<section id="actions"> <section id="actions">
<div class="buttons"> <div class="buttons">
<div class="split-btn"> <div class="split-btn">
<button id="save-button" i18n-text="styleSaveLabel" data-hotkey-tooltip="save" disabled></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> ><button class="split-btn-pedal usercss-only" i18n="menu-tpl:saveAsTemplate"></button>
</div> </div>
<button id="beautify" i18n-text="styleBeautify"></button> <button id="beautify" i18n="styleBeautify"></button>
<button id="style-settings-btn" i18n-text="settings"></button> <button id="style-settings-btn" i18n="settings"></button>
<button id="cancel-button" i18n-title="styleCancelEditLabel">↩</button> <button id="cancel-button" i18n="title:styleCancelEditLabel">↩</button>
</div> </div>
<div id="mozilla-format-buttons" class="buttons sectioned-only"> <div id="mozilla-format-buttons" class="buttons sectioned-only">
<button id="from-mozilla" i18n-text="importLabel"></button> <button id="from-mozilla" i18n="importLabel"></button>
<button id="to-mozilla" i18n-text="exportLabel"></button> <button id="to-mozilla" i18n="exportLabel"></button>
<a id="to-mozilla-help" class="svg-inline-wrapper" tabindex="0" <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> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a> </a>
</div> </div>
</section> </section>
<div id="details-wrapper"> <div id="details-wrapper">
<details id="options" data-pref="editor.options.expanded" class="ignore-pref-if-compact"> <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 id="options-wrapper">
<div class="options-column"> <div class="options-column">
<div class="option"> <div class="option">
<label id="lineWrapping-label" i18n-text="cm_lineWrapping"> <label id="lineWrapping-label" i18n="cm_lineWrapping">
<input id="editor.lineWrapping" type="checkbox"> <input id="editor.lineWrapping" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label> </label>
</div> </div>
<div class="option"> <div class="option">
<label id="smartIndent-label" i18n-text="cm_smartIndent"> <label id="smartIndent-label" i18n="cm_smartIndent">
<input id="editor.smartIndent" type="checkbox"> <input id="editor.smartIndent" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label> </label>
</div> </div>
<div class="option"> <div class="option">
<label id="indentWithTabs-label" i18n-text="cm_indentWithTabs"> <label id="indentWithTabs-label" i18n="cm_indentWithTabs">
<input id="editor.indentWithTabs" type="checkbox"> <input id="editor.indentWithTabs" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label> </label>
</div> </div>
<div class="option"> <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"> <input id="editor.autoCloseBrackets" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label> </label>
</div> </div>
<div class="option"> <div class="option">
<label i18n-text="cm_autocompleteOnTyping"> <label i18n="cm_autocompleteOnTyping">
<input id="editor.autocompleteOnTyping" type="checkbox"> <input id="editor.autocompleteOnTyping" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label> </label>
</div> </div>
<div class="option"> <div class="option">
<label i18n-text="cm_selectByTokens" <label i18n="cm_selectByTokens, title:cm_selectByTokensTooltip">
i18n-title="cm_selectByTokensTooltip">
<input id="editor.selectByTokens" type="checkbox"> <input id="editor.selectByTokens" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label> </label>
</div> </div>
<div class="option"> <div class="option">
<label i18n-text="cm_colorpicker"> <label i18n="cm_colorpicker">
<input id="editor.colorpicker" type="checkbox"> <input id="editor.colorpicker" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label> </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> <svg class="svg-icon settings"><use xlink:href="#svg-icon-config"/></svg>
</a> </a>
</div> </div>
<div class="option usercss-only"> <div class="option usercss-only">
<label i18n-text="appliesLineWidgetLabel" i18n-title="appliesLineWidgetWarning"> <label i18n="appliesLineWidgetLabel, title:appliesLineWidgetWarning">
<input id="editor.appliesToLineWidget" type="checkbox"> <input id="editor.appliesToLineWidget" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label> </label>
@ -351,11 +349,11 @@
</div> </div>
<div class="options-column"> <div class="options-column">
<div class="option aligned"> <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"> <input id="editor.tabSize" type="number" min="0">
</div> </div>
<div class="option aligned"> <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"> <div class="select-resizer">
<select id="editor.keyMap"></select> <select id="editor.keyMap"></select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg> <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
@ -365,34 +363,34 @@
</a> </a>
</div> </div>
<div class="option aligned"> <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"> <div class="select-resizer">
<select id="editor.theme"></select> <select id="editor.theme"></select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg> <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div> </div>
</div> </div>
<div class="option aligned"> <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"> <div class="select-resizer">
<select id="editor.matchHighlight"> <select id="editor.matchHighlight">
<option i18n-text="cm_matchHighlightToken" value="token"> <option i18n="cm_matchHighlightToken" value="token">
<option i18n-text="cm_matchHighlightSelection" value="selection"> <option i18n="cm_matchHighlightSelection" value="selection">
<option i18n-text="genericDisabledLabel" value=""> <option i18n="genericDisabledLabel" value="">
</select> </select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg> <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div> </div>
</div> </div>
<div class="option aligned"> <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"> <div class="select-resizer">
<select id="editor.linter"> <select id="editor.linter">
<option value="csslint" selected>CSSLint</option> <option value="csslint" selected>CSSLint</option>
<option value="stylelint">Stylelint</option> <option value="stylelint">Stylelint</option>
<option value="" i18n-text="genericDisabledLabel"></option> <option value="" i18n="genericDisabledLabel"></option>
</select> </select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg> <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div> </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> <svg class="svg-icon settings"><use xlink:href="#svg-icon-config"/></svg>
</a> </a>
</div> </div>
@ -400,29 +398,28 @@
</div> </div>
</details> </details>
<details id="publish" data-pref="editor.publish.expanded" class="ignore-pref-if-compact"> <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> <div>
<a id="usw-url" href="https://userstyles.world" target="_blank">&nbsp;</a> <a id="usw-url" href="https://userstyles.world" target="_blank">&nbsp;</a>
<div id="usw-link-info"> <div id="usw-link-info">
<dl><dt i18n-text="styleName"></dt><dd data-usw="name"></dd></dl> <dl><dt i18n="styleName"></dt><dd data-usw="name"></dd></dl>
<dl><dt i18n-text="genericDescription"></dt><dd data-usw="description"></dd></dl> <dl><dt i18n="genericDescription"></dt><dd data-usw="description"></dd></dl>
</div> </div>
<div> <div>
<button id="usw-publish-style" <button id="usw-publish-style"
i18n-data-publish="publishStyle" i18n="data-publish:publishStyle, data-push:publishPush"></button>
i18n-data-push="publishPush"></button> <button id="usw-disconnect" i18n="optionsSyncDisconnect"></button>
<button id="usw-disconnect" i18n-text="optionsSyncDisconnect"></button>
<span id="usw-progress"></span> <span id="usw-progress"></span>
</div> </div>
</div> </div>
</details> </details>
<details id="sections-list" data-pref="editor.toc.expanded" class="ignore-pref-if-compact"> <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> <ol id="toc"></ol>
</details> </details>
<details id="lint" data-pref="editor.lint.expanded" class="ignore-pref-if-compact" hidden> <details id="lint" data-pref="editor.lint.expanded" class="ignore-pref-if-compact" hidden>
<summary> <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"> <a id="lint-help" class="svg-inline-wrapper intercepts-click" tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a> </a>
@ -431,10 +428,10 @@
<div class="lint-report-container"></div> <div class="lint-report-container"></div>
</details> </details>
</div> </div>
<div id="header-resizer" i18n-title="headerResizerHint"></div> <div id="header-resizer" i18n="title:headerResizerHint"></div>
<div id="footer" class="hidden"> <div id="footer" class="hidden">
<a href="https://github.com/openstyles/stylus/wiki/Usercss" <a href="https://github.com/openstyles/stylus/wiki/Usercss"
i18n-text="externalUsercssDocument" i18n="externalUsercssDocument"
target="_blank"></a> target="_blank"></a>
</div> </div>
</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> <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>
<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"/> <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="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"/> <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"> <div class="rel">
<input id="ss-updatable" type="checkbox"> <input id="ss-updatable" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<label i18n-text="installUpdateFromLabel" for="ss-updatable"></label> <label i18n="installUpdateFromLabel" for="ss-updatable"></label>
<input id="ss-update-url" type="url" class="w100" i18n-placeholder="styleUpdateUrlLabel"> <input id="ss-update-url" type="url" class="w100" i18n="placeholder:styleUpdateUrlLabel">
</div> </div>
<div id="ss-scheme"> <div id="ss-scheme">
<div i18n-text="preferScheme"> <div i18n="preferScheme">
<div><small id="ss-scheme-off" i18n-text="preferSchemeAlways" hidden></small></div> <div><small id="ss-scheme-off" i18n="preferSchemeAlways" hidden></small></div>
</div> </div>
<label i18n-text-append="preferSchemeNone" class="radio-wrapper"> <label i18n="+preferSchemeNone" class="radio-wrapper">
<input name="ss-scheme" type="radio" value="none"> <input name="ss-scheme" type="radio" value="none">
</label> </label>
<label i18n-text-append="preferSchemeDark" class="radio-wrapper"> <label i18n="+preferSchemeDark" class="radio-wrapper">
<input name="ss-scheme" type="radio" value="dark"> <input name="ss-scheme" type="radio" value="dark">
</label> </label>
<label i18n-text-append="preferSchemeLight" class="radio-wrapper"> <label i18n="+preferSchemeLight" class="radio-wrapper">
<input name="ss-scheme" type="radio" value="light"> <input name="ss-scheme" type="radio" value="light">
</label> </label>
</div> </div>
<label i18n-text="styleIncludeLabel"> <label i18n="styleIncludeLabel">
<textarea id="ss-inclusions" spellcheck="false" class="w100" <textarea id="ss-inclusions" spellcheck="false" class="w100"
placeholder="*://site1.com/*&#10;*://site2.com/*"></textarea> placeholder="*://site1.com/*&#10;*://site2.com/*"></textarea>
</label> </label>
<label i18n-text="styleExcludeLabel"> <label i18n="styleExcludeLabel">
<textarea id="ss-exclusions" spellcheck="false" class="w100" <textarea id="ss-exclusions" spellcheck="false" class="w100"
placeholder="*://site1.com/*&#10;*://site2.com/*"></textarea> placeholder="*://site1.com/*&#10;*://site2.com/*"></textarea>
</label> </label>
</fieldset> </fieldset>
<div class="buttons"> <div class="buttons">
<button id="ss-save" i18n-text="confirmSave" disabled></button> <button id="ss-save" i18n="confirmSave" disabled></button>
<label i18n-title="configOnChangeTooltip" i18n-text-append="configOnChange"> <label i18n="+configOnChange, title:configOnChangeTooltip">
<input id="config.autosave" type="checkbox"> <input id="config.autosave" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label> </label>
<button id="ss-close" i18n-text="confirmClose"></button> <button id="ss-close" i18n="confirmClose"></button>
</div> </div>
</div> </div>

28
install-usercss.html
View File

@ -22,7 +22,7 @@
<script src="content/apply.js"></script> <script src="content/apply.js"></script>
<template data-id="jumpToLine"> <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>
<script src="vendor/codemirror/lib/codemirror.js"></script> <script src="vendor/codemirror/lib/codemirror.js"></script>
@ -71,15 +71,15 @@
<small class="meta-version"></small> <small class="meta-version"></small>
</h1> </h1>
<div id="install-wrapper"> <div id="install-wrapper">
<h2 class="install-show" i18n-text="installButtonInstalled"></h2> <h2 class="install-show" i18n="installButtonInstalled"></h2>
<button class="install install-hide" i18n-text="installButton"></button> <button class="install install-hide" i18n="installButton"></button>
<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> <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
</a> </a>
<div class="install-show w100-full"> <div class="install-show w100-full">
<a href="manage.html"><button i18n-text="openManage"></button></a> <a href="manage.html"><button i18n="openManage"></button></a>
<a id="edit" href="edit.html?id="><button i18n-text="editStyleLabel"></button></a> <a id="edit" href="edit.html?id="><button i18n="editStyleLabel"></button></a>
<a id="delete" tabindex="0"><button i18n-text="deleteStyleLabel"></button></a> <a id="delete" tabindex="0"><button i18n="deleteStyleLabel"></button></a>
</div> </div>
</div> </div>
<div id="ss-scheme" class="install-dim"></div> <div id="ss-scheme" class="install-dim"></div>
@ -87,40 +87,40 @@
<label> <label>
<input type="checkbox"> <input type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<span i18n-text="installUpdateFromLabel"></span> <span i18n="installUpdateFromLabel"></span>
</label> </label>
<p></p> <p></p>
</div> </div>
<label class="live-reload checkbox-wrapper"> <label class="live-reload checkbox-wrapper">
<input type="checkbox"> <input type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<span i18n-text="liveReloadLabel"></span> <span i18n="liveReloadLabel"></span>
</label> </label>
<div id="live-reload-install-hint" class="w100" hidden></div> <div id="live-reload-install-hint" class="w100" hidden></div>
<div class="meta-description w100 hide-empty"></div> <div class="meta-description w100 hide-empty"></div>
<div> <div>
<h3 i18n-text="author"></h3> <h3 i18n="author"></h3>
<span class="meta-author"></span> <span class="meta-author"></span>
</div> </div>
<div> <div>
<h3 i18n-text="license"></h3> <h3 i18n="license"></h3>
<span class="meta-license"></span> <span class="meta-license"></span>
</div> </div>
<div class="external-link hide-empty"></div> <div class="external-link hide-empty"></div>
<div class="w100"> <div class="w100">
<h3 i18n-text="appliesLabel"></h3> <h3 i18n="appliesLabel"></h3>
<ul class="applies-to"> <ul class="applies-to">
</ul> </ul>
</div> </div>
</div> </div>
<div id="header-resizer" i18n-title="headerResizerHint"></div> <div id="header-resizer" i18n="title:headerResizerHint"></div>
</div> </div>
<div class="main"> <div class="main">
<div class="warnings"></div> <div class="warnings"></div>
</div> </div>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;"> <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"/> <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="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"/> <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"/>

35
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 {string} selector - beware of $ quirks with `#dotted.id` that won't work with $$
* @param {Object} [opt] * @param {Object} [opt]
* @param {function(HTMLElement, HTMLElement[]):boolean} [opt.recur] - called on each match * @param {function(HTMLElement[]):boolean} [opt.recur] - called on each match until stopOnDomReady,
with (firstMatchingElement, allMatchingElements) parameters until stopOnDomReady,
you can also return `false` to disconnect the observer you can also return `false` to disconnect the observer
* @param {boolean} [opt.stopOnDomReady] - stop observing on DOM ready * @param {boolean} [opt.stopOnDomReady] - stop observing on DOM ready
* @returns {Promise<HTMLElement>} - resolves on first match * @returns {Promise<HTMLElement>} - resolves on first match
*/ */
function waitForSelector(selector, {recur, stopOnDomReady = true} = {}) { function waitForSelector(selector, {recur, stopOnDomReady = true} = {}) {
let el = $(selector); let el = $(selector);
let elems, isResolved; let elems;
return el && (!recur || recur(el, (elems = $$(selector))) === false) return el && (!recur || recur(elems = $$(selector)) === false)
? Promise.resolve(el) ? Promise.resolve(el)
: new Promise(resolve => { : new Promise(resolve => {
const mo = new MutationObserver(() => { new MutationObserver((mutations, observer) => {
if (!el) el = $(selector); if (!el) el = $(selector);
if (!el) return; if (!el) return;
if (!recur || if (!recur ||
callRecur() === false || callRecur(mutations) === false ||
stopOnDomReady && document.readyState === 'complete') { stopOnDomReady && document.readyState === 'complete') {
mo.disconnect(); observer.disconnect();
} }
if (!isResolved) { if (resolve) {
isResolved = true;
resolve(el); resolve(el);
resolve = null;
} }
}); }).observe(document, {childList: true, subtree: true});
mo.observe(document, {childList: true, subtree: true}); function isMatching(n) {
}); return n.tagName && (n.matches(selector) || n.firstElementChild && $(selector, n));
function callRecur() { }
const all = $$(selector); // simpler and faster than analyzing each node in `mutations` 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)); const added = !elems ? all : all.filter(el => !elems.includes(el));
if (added.length) { if (added.length) {
elems = all; elems = all;
return recur(added[0], added); return recur(added);
} }
} }
}
});
} }
/** /**
@ -431,7 +434,7 @@ const dom = {};
(() => { (() => {
const Collapsible = { const Collapsible = {
bindEvents(_, elems) { bindEvents(elems) {
const prefKeys = []; const prefKeys = [];
for (const el of elems) { for (const el of elems) {
prefKeys.push(el.dataset.pref); prefKeys.push(el.dataset.pref);

125
js/localization.js
View File

@ -1,7 +1,14 @@
/* global $$ waitForSelector */// dom.js
/* global download */// toolbox.js /* global download */// toolbox.js
'use strict'; '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) { function t(key, params, strict = true) {
const s = chrome.i18n.getMessage(key, params); const s = chrome.i18n.getMessage(key, params);
@ -11,9 +18,7 @@ function t(key, params, strict = true) {
Object.assign(t, { Object.assign(t, {
template: {}, template: {},
parser: new DOMParser(),
ALLOWED_TAGS: ['a', 'b', 'code', 'i', 'sub', 'sup', 'wbr'], ALLOWED_TAGS: ['a', 'b', 'code', 'i', 'sub', 'sup', 'wbr'],
PREFIX: 'i18n-',
RX_WORD_BREAK: new RegExp([ RX_WORD_BREAK: new RegExp([
'(', '(',
/[\d\w\u007B-\uFFFF]{10}/, /[\d\w\u007B-\uFFFF]{10}/,
@ -24,6 +29,7 @@ Object.assign(t, {
')', ')',
/(?!\b|\s|$)/, /(?!\b|\s|$)/,
].map(rx => rx.source || rx).join(''), 'gu'), ].map(rx => rx.source || rx).join(''), 'gu'),
SELECTOR: '[i18n], template',
HTML(html) { HTML(html) {
return typeof html !== 'string' return typeof html !== 'string'
@ -35,35 +41,26 @@ Object.assign(t, {
NodeList(nodes) { NodeList(nodes) {
if (nodes instanceof Node) { 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') { if (node.localName === 'template') {
node.remove();
t.createTemplate(node); t.createTemplate(node);
continue; continue;
} }
for (let a = node.attributes.length; --a >= 0;) { const attr = node.getAttribute('i18n');
const attr = node.attributes[a]; if (!attr) continue;
const name = attr.nodeName; for (const part of attr.split(',')) {
if (!name.startsWith(t.PREFIX)) {
continue;
}
const type = name.substr(t.PREFIX.length);
const value = t(attr.value);
let toInsert, before; let toInsert, before;
let [type, value] = part.trim().split(/\s*:\s*/);
if (!value) [type, value] = type.split(/(\w+)/);
value = t(value);
switch (type) { switch (type) {
case 'word-break': case '':
// we already know that: hasWordBreak
break;
case 'text':
before = node.firstChild; before = node.firstChild;
// fallthrough to text-append // fallthrough
case 'text-append': case '+':
toInsert = t.createText(value); toInsert = t.createText(value);
break; break;
case 'html': { case 'html': {
@ -73,12 +70,11 @@ Object.assign(t, {
default: default:
node.setAttribute(type, value); node.setAttribute(type, value);
} }
t.stopObserver();
if (toInsert) { if (toInsert) {
node.insertBefore(toInsert, before || null); node.insertBefore(toInsert, before || null);
} }
node.removeAttribute(name);
} }
node.removeAttribute('i18n');
} }
}, },
@ -100,8 +96,11 @@ Object.assign(t, {
} }
} }
toRemove.forEach(n => n.remove()); toRemove.forEach(n => n.remove());
t.NodeList(content.querySelectorAll('*')); t.NodeList(content);
t.template[el.dataset.id] = content.childNodes.length > 1 ? content : content.childNodes[0]; return (t.template[el.dataset.id] =
content.childNodes.length > 1
? content
: content.childNodes[0]);
}, },
createText(str) { createText(str) {
@ -109,28 +108,22 @@ Object.assign(t, {
}, },
createHtml(str, trusted) { createHtml(str, trusted) {
const root = t.parser.parseFromString(str, 'text/html').body; const root = t.parse(str);
if (!trusted) { if (!trusted) {
t.sanitizeHtml(root); t.sanitizeHtml(root);
} else if (str.includes('i18n-')) { } else if (str.includes('i18n=')) {
t.NodeList(root); t.NodeList(root);
} }
const bin = document.createDocumentFragment(); return t.toFragment(root);
while (root.firstChild) {
bin.appendChild(root.firstChild);
}
return bin;
}, },
async fetchTemplate(url, name) { fetchTemplate: async (url, name) => t.template[name] ||
let el = t.template[name]; t.createTemplate({
if (!el) { content: t.toFragment(t.parse(await download(url))),
el = (await download(url, {responseType: 'document'})).body.firstElementChild; dataset: {id: name},
t.NodeList(el); }),
t.template[name] = el;
} parse: str => new DOMParser().parseFromString(str, 'text/html').body,
return el;
},
sanitizeHtml(root) { sanitizeHtml(root) {
const toRemove = []; 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, _intl: null,
_intlY: null, _intlY: null,
_intlYHM: null, _intlYHM: null,
@ -186,39 +186,4 @@ Object.assign(t, {
}, },
}); });
//#endregion waitForSelector(t.SELECTOR, {recur: t.NodeList});
//#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

132
manage.html
View File

@ -4,16 +4,10 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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 rel="stylesheet" href="global.css">
<link href="global-dark.css" rel="stylesheet"> <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"> <template data-id="style">
<div class="entry"> <div class="entry">
<h2 class="style-name"> <h2 class="style-name">
@ -24,19 +18,19 @@
<a target="_blank" class="homepage"></a> <a target="_blank" class="homepage"></a>
</h2> </h2>
<p class="applies-to"> <p class="applies-to">
<label i18n-text="appliesDisplay"></label> <label i18n="appliesDisplay"></label>
<span class="targets"></span> <span class="targets"></span>
</p> </p>
<p class="actions"> <p class="actions">
<a class="style-edit-link"> <a class="style-edit-link">
<button i18n-text="editStyleLabel" tabindex="-1"></button> <button i18n="editStyleLabel" tabindex="-1"></button>
</a> </a>
<button class="enable" i18n-text="enableStyleLabel"></button> <button class="enable" i18n="enableStyleLabel"></button>
<button class="disable" i18n-text="disableStyleLabel"></button> <button class="disable" i18n="disableStyleLabel"></button>
<button class="delete" i18n-text="deleteStyleLabel"></button> <button class="delete" i18n="deleteStyleLabel"></button>
<button class="check-update" i18n-text="checkForUpdate"></button> <button class="check-update" i18n="checkForUpdate"></button>
<button class="update" i18n-text="installUpdate"></button> <button class="update" i18n="installUpdate"></button>
<button class="configure-usercss" i18n-text="configureStyle"></button> <button class="configure-usercss" i18n="configureStyle"></button>
<span class="update-note"></span> <span class="update-note"></span>
</p> </p>
</div> </div>
@ -46,7 +40,7 @@
<div class="entry"> <div class="entry">
<h2 class="style-name"> <h2 class="style-name">
<div class="checkmate"> <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> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</div> </div>
<a class="style-name-link"> <a class="style-name-link">
@ -56,7 +50,7 @@
</h2> </h2>
<p class="actions"> <p class="actions">
<a target="_blank" class="homepage" tabindex="0"></a> <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"> <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 <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 "/> 5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
@ -85,14 +79,14 @@
</template> </template>
<template data-id="configureIcon"> <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> <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
</a> </a>
</template> </template>
<template data-id="updaterIcons"> <template data-id="updaterIcons">
<span class="updater-icons"> <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"> <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 <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"/> 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"/> C7,4,4.6,6.2,4.1,9h2.1C6.6,7.3,8.1,6,10,6z"/>
</svg> </svg>
</a> </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"> <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 "/> <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"/> <rect shape-rendering="crispEdges" x="4" y="15" width="12" height="2"/>
</svg> </svg>
</a> </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"> <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"/> <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> </svg>
</span> </span>
<span class="updated" i18n-title="updateCompleted"> <span class="updated" i18n="title:updateCompleted">
<svg class="svg-icon" viewBox="0 0 20 20"> <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"/> <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> </svg>
@ -129,12 +123,12 @@
</template> </template>
<template data-id="appliesToEverything"> <template data-id="appliesToEverything">
<span class="target" i18n-text="appliesToEverything"></span> <span class="target" i18n="appliesToEverything"></span>
</template> </template>
<template data-id="extraAppliesTo"> <template data-id="extraAppliesTo">
<details class="applies-to-extra"> <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> </details>
</template> </template>
@ -159,21 +153,21 @@
<script src="js/dark-themer.js"></script> <!-- must be last in HEAD to avoid FOUC --> <script src="js/dark-themer.js"></script> <!-- must be last in HEAD to avoid FOUC -->
</head> </head>
<body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage"> <body id="stylus-manage" i18n="dragndrop-hint:dragDropMessage">
<div id="header"> <div id="header">
<h1 id="manage-heading" i18n-text="manageHeading"></h1> <h1 id="manage-heading" i18n="manageHeading"></h1>
<div id="manage-settings"> <div id="manage-settings">
<div class="settings-column"> <div class="settings-column">
<details id="filters" data-pref="manage.filters.expanded"> <details id="filters" data-pref="manage.filters.expanded">
<summary> <summary>
<h2 i18n-text="manageFilters">: <h2 i18n="manageFilters">:
<div class="filter-stats-wrapper"> <div class="filter-stats-wrapper">
<span id="filters-stats"></span> <span id="filters-stats"></span>
<a id="reset-filters" tabindex="0"> <a id="reset-filters" tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20"> <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 <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 "/> 5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
</svg> </svg>
@ -193,8 +187,8 @@
</label> </label>
<div class="select-resizer"> <div class="select-resizer">
<select id="manage.onlyEnabled.invert" class="fit-width"> <select id="manage.onlyEnabled.invert" class="fit-width">
<option i18n-text="manageOnlyEnabled" value="false"></option> <option i18n="manageOnlyEnabled" value="false"></option>
<option i18n-text="manageOnlyDisabled" value="true"></option> <option i18n="manageOnlyDisabled" value="true"></option>
</select> </select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg> <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div> </div>
@ -210,9 +204,9 @@
</div> </div>
</label> </label>
<div class="select-resizer"> <div class="select-resizer">
<select id="manage.onlyLocal.invert" i18n-title="manageOnlyLocalTooltip" class="fit-width"> <select id="manage.onlyLocal.invert" i18n="title:manageOnlyLocalTooltip" class="fit-width">
<option i18n-text="manageOnlyLocal" value="false"></option> <option i18n="manageOnlyLocal" value="false"></option>
<option i18n-text="manageOnlyExternal" value="true"></option> <option i18n="manageOnlyExternal" value="true"></option>
</select> </select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg> <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div> </div>
@ -229,8 +223,8 @@
</label> </label>
<div class="select-resizer"> <div class="select-resizer">
<select id="manage.onlyUsercss.invert" class="fit-width"> <select id="manage.onlyUsercss.invert" class="fit-width">
<option i18n-text="manageOnlyUsercss" value="false"></option> <option i18n="manageOnlyUsercss" value="false"></option>
<option i18n-text="manageOnlyNonUsercss" value="true"></option> <option i18n="manageOnlyNonUsercss" value="true"></option>
</select> </select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg> <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div> </div>
@ -243,20 +237,20 @@
.no-update:not(.update-problem), .no-update:not(.update-problem),
.updatable:not(.can-update):not(.update-problem):not(.update-done)"> .updatable:not(.can-update):not(.update-problem):not(.update-done)">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<span i18n-text="manageOnlyUpdates"></span> <span i18n="manageOnlyUpdates"></span>
</label> </label>
<div id="search-wrapper"> <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=":not(.not-matching)"
data-filter-hide=".not-matching"> data-filter-hide=".not-matching">
<div class="select-wrapper"> <div class="select-wrapper">
<select id="searchMode" class="fit-width"> <select id="searchMode" class="fit-width">
<option i18n-text="searchStylesName" value="name"></option> <option i18n="searchStylesName" value="name"></option>
<option i18n-text="searchStylesMeta" value="meta" selected></option> <option i18n="searchStylesMeta" value="meta" selected></option>
<option i18n-text="searchStylesCode" value="code"></option> <option i18n="searchStylesCode" value="code"></option>
<option i18n-text="searchStylesMatchUrl" value="url"></option> <option i18n="searchStylesMatchUrl" value="url"></option>
<option i18n-text="searchStylesAll" value="all"></option> <option i18n="searchStylesAll" value="all"></option>
</select> </select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg> <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div> </div>
@ -268,7 +262,7 @@
</details> </details>
<div id="sort-wrapper"> <div id="sort-wrapper">
<div class="sorter-selection" i18n-title="sortLabel"> <div class="sorter-selection" i18n="title:sortLabel">
<select id="manage.newUI.sort"></select> <select id="manage.newUI.sort"></select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg> <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div> </div>
@ -280,43 +274,43 @@
<div class="settings-column"> <div class="settings-column">
<details id="actions" data-pref="manage.actions.expanded"> <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"> <div id="update-check">
<button id="check-all-updates" i18n-text="checkAllUpdates"> <button id="check-all-updates" i18n="checkAllUpdates">
<span id="update-progress"></span> <span id="update-progress"></span>
</button> </button>
<a id="update-history" i18n-title="genericHistoryLabel" tabindex="0"> <a id="update-history" i18n="title:genericHistoryLabel" tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20" i18n-alt="helpAlt"> <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"/> <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> </svg>
</a> </a>
</div> </div>
<div id="update-all"> <div id="update-all">
<button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button> <button id="apply-all-updates" class="hidden" i18n="applyAllUpdates"></button>
<span id="update-all-no-updates" class="hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span> <span id="update-all-no-updates" class="hidden" i18n="updateAllCheckSucceededNoUpdate"></span>
<button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button> <button id="check-all-updates-force" class="hidden" i18n="checkAllUpdatesForce"></button>
</div> </div>
<div id="add-style-wrapper"> <div id="add-style-wrapper">
<a href="edit.html"> <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> </a>
<label id="add-style-as-usercss-wrapper"> <label id="add-style-as-usercss-wrapper">
<input type="checkbox" id="newStyleAsUsercss"> <input type="checkbox" id="newStyleAsUsercss">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <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" <a id="usercss-wiki"
href="https://github.com/openstyles/stylus/wiki/Usercss" href="https://github.com/openstyles/stylus/wiki/Usercss"
i18n-title="externalUsercssDocument"> i18n="title:externalUsercssDocument">
<svg class="svg-icon" viewBox="0 0 20 20"> <svg class="svg-icon" viewBox="0 0 20 20">
<path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/> <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
</svg> </svg>
</a> </a>
</label> </label>
</div> </div>
<button id="manage-options-button" i18n-text="openOptions"></button> <button id="manage-options-button" i18n="openOptions"></button>
<button id="injection-order-button" i18n-title="styleInjectionOrder"> <button id="injection-order-button" i18n="title:styleInjectionOrder">
<svg class="svg-icon"><use xlink:href="#svg-icon-reorder"/></svg> <svg class="svg-icon"><use xlink:href="#svg-icon-reorder"/></svg>
&nbsp; &nbsp;
</button> </button>
@ -326,43 +320,43 @@
<div class="settings-column"> <div class="settings-column">
<details id="backup" data-pref="manage.backup.expanded"> <details id="backup" data-pref="manage.backup.expanded">
<summary> <summary>
<h2 id="backup-title" i18n-text="backupButtons"><!-- removing space <h2 id="backup-title" i18n="backupButtons"><!-- removing space
--><a tabindex="0" i18n-title="backupMessage" data-cmd="note"> --><a tabindex="0" i18n="title:backupMessage" data-cmd="note">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a> </a>
</h2> </h2>
</summary> </summary>
<div id="backup-buttons"> <div id="backup-buttons">
<div class="split-btn"> <div class="split-btn">
<button id="file-all-styles" i18n-text="exportLabel"></button <button id="file-all-styles" i18n="exportLabel"></button
><button class="split-btn-pedal" i18n-menu-compat="exportCompatible"></button> ><button class="split-btn-pedal" i18n="menu-compat:exportCompatible"></button>
</div> </div>
<button id="unfile-all-styles" i18n-text="importLabel"></button> <button id="unfile-all-styles" i18n="importLabel"></button>
<button id="sync-styles" i18n-text="optionsCustomizeSync"></button> <button id="sync-styles" i18n="optionsCustomizeSync"></button>
</div> </div>
</details> </details>
<div id="manage-text"> <div id="manage-text">
<span> <span>
<a href="https://userstyles.world/explore" target="_blank" i18n-text="linkGetShareStyles"></a> <a href="https://userstyles.world/explore" target="_blank" i18n="linkGetShareStyles"></a>
<a tabindex="0" i18n-title="linkGetShareStylesInfo" data-cmd="note"> <a tabindex="0" i18n="title:linkGetShareStylesInfo" data-cmd="note">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a> </a>
</span> </span>
<span> <span>
<a href="https://uso.kkx.one/browse/styles" target="_blank" i18n-text="linkGetStyles"></a> <a href="https://uso.kkx.one/browse/styles" target="_blank" i18n="linkGetStyles"></a>
<a tabindex="0" i18n-title="linkGetStylesInfo" data-cmd="note"> <a tabindex="0" i18n="title:linkGetStylesInfo" data-cmd="note">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a> </a>
</span> </span>
<span><a href="https://add0n.com/stylus.html#features" target="_blank" i18n-text="linkGetHelp"></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-text="linkStylusWiki"></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-text="linkTranslate"></a></span> <span><a href="https://www.transifex.com/github-7/Stylus" target="_blank" i18n="linkTranslate"></a></span>
</div> </div>
</div> </div>
</div> </div>
<div id="header-resizer" i18n-title="headerResizerHint"></div> <div id="header-resizer" i18n="title:headerResizerHint"></div>
</div> </div>
<div id="installed"></div> <div id="installed"></div>

121
options.html
View File

@ -3,16 +3,16 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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 rel="stylesheet" href="global.css">
<link href="global-dark.css?bugfix" rel="stylesheet"> <!-- https://crbug.com/1298600 --> <link href="global-dark.css?bugfix" rel="stylesheet"> <!-- https://crbug.com/1298600 -->
<script src="js/polyfill.js"></script> <script src="js/polyfill.js"></script>
<script src="js/toolbox.js"></script> <script src="js/toolbox.js"></script>
<script src="js/msg.js"></script> <script src="js/msg.js"></script>
<script src="js/localization.js"></script>
<script src="js/prefs.js"></script> <script src="js/prefs.js"></script>
<script src="js/dom.js"></script> <script src="js/dom.js"></script>
<script src="js/localization.js"></script>
<script src="content/style-injector.js"></script> <script src="content/style-injector.js"></script>
<script src="content/apply.js"></script> <script src="content/apply.js"></script>
@ -21,24 +21,24 @@
<link rel="stylesheet" href="options/options.css"> <link rel="stylesheet" href="options/options.css">
<template data-id="shortcutsFF"> <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"> <table style="margin: 0 auto">
<tr> <tr>
<td i18n-text="optionsCustomizePopup"></td> <td i18n="optionsCustomizePopup"></td>
<td><input id="hotkey._execute_browser_action" type="search"></td> <td><input id="hotkey._execute_browser_action" type="search"></td>
</tr> </tr>
<tr> <tr>
<td i18n-text="openManage"></td> <td i18n="openManage"></td>
<td><input id="hotkey.openManage" type="search"></td> <td><input id="hotkey.openManage" type="search"></td>
</tr> </tr>
<tr> <tr>
<td i18n-text="disableAllStyles"></td> <td i18n="disableAllStyles"></td>
<td><input id="hotkey.styleDisableAll" type="search"></td> <td><input id="hotkey.styleDisableAll" type="search"></td>
</tr> </tr>
</table> </table>
<p style="text-align: center"> <p style="text-align: center">
<a href="https://developer.mozilla.org/Add-ons/WebExtensions/manifest.json/commands#Key_combinations" <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> </p>
</template> </template>
@ -49,7 +49,7 @@
<body id="stylus-options"> <body id="stylus-options">
<div id="options-header"> <div id="options-header">
<div id="options-title" i18n-text-append="optionsHeading"> <div id="options-title" i18n="+optionsHeading">
<div id="options-close-icon"> <div id="options-close-icon">
<svg viewBox="0 0 20 20" class="svg-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> <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="options-wrapper">
<div class="block" id="updates"> <div class="block" id="updates">
<h1 i18n-text="optionsCustomizeUpdate"></h1> <h1 i18n="optionsCustomizeUpdate"></h1>
<div class="items"> <div class="items">
<label> <label>
<span i18n-text="optionsUpdateInterval"> <span i18n="optionsUpdateInterval">
<a i18n-title="optionsUpdateImportNote" <a i18n="title:optionsUpdateImportNote"
data-cmd="note" class="svg-inline-wrapper" tabindex="0"> data-cmd="note" class="svg-inline-wrapper" tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a> </a>
@ -78,13 +78,13 @@
</div> </div>
<div class="block sync-options"> <div class="block sync-options">
<h1 i18n-text="optionsCustomizeSync"></h1> <h1 i18n="optionsCustomizeSync"></h1>
<div class="items"> <div class="items">
<label> <label>
<span class="sync-status"></span> <span class="sync-status"></span>
<div class="select-resizer"> <div class="select-resizer">
<select class="cloud-name"> <select class="cloud-name">
<option value="none" i18n-text="optionsSyncNone"></option> <option value="none" i18n="optionsSyncNone"></option>
<option value="dropbox">Dropbox</option> <option value="dropbox">Dropbox</option>
<option value="google">Google Drive</option> <option value="google">Google Drive</option>
<option value="onedrive">OneDrive</option> <option value="onedrive">OneDrive</option>
@ -95,61 +95,61 @@
</label> </label>
<table class="drive-options" data-drive="webdav"> <table class="drive-options" data-drive="webdav">
<tr> <tr>
<td i18n-text="optionsSyncUrl"></td> <td i18n="optionsSyncUrl"></td>
<td><input type="url" data-option="url"></td> <td><input type="url" data-option="url"></td>
</tr> </tr>
<tr> <tr>
<td i18n-text="optionsSyncUsername"></td> <td i18n="optionsSyncUsername"></td>
<td><input type="text" data-option="username"></td> <td><input type="text" data-option="username"></td>
</tr> </tr>
<tr> <tr>
<td i18n-text="optionsSyncPassword"></td> <td i18n="optionsSyncPassword"></td>
<td><input type="password" data-option="password"></td> <td><input type="password" data-option="password"></td>
</tr> </tr>
</table> </table>
<div class="actions"> <div class="actions">
<button class="connect"></button> <button class="connect"></button>
<button class="sync-now" i18n-text="optionsSyncSyncNow"></button> <button class="sync-now" i18n="optionsSyncSyncNow"></button>
<button class="sync-login" i18n-text="optionsSyncLogin"></button> <button class="sync-login" i18n="optionsSyncLogin"></button>
</div> </div>
</div> </div>
</div> </div>
<div class="block"> <div class="block">
<h1 i18n-text="stylePreferSchemeLabel"></h1> <h1 i18n="stylePreferSchemeLabel"></h1>
<div class="items no-stretch"> <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"> <input type="radio" value="dark" name="schemeSwitcher.enabled">
</label> </label>
<label class="radio-wrapper" i18n-text-append="preferSchemeLight"> <label class="radio-wrapper" i18n="+preferSchemeLight">
<input type="radio" value="light" name="schemeSwitcher.enabled"> <input type="radio" value="light" name="schemeSwitcher.enabled">
</label> </label>
<label class="radio-wrapper" i18n-text-append="optionsAdvancedAutoSwitchSchemeBySystem"> <label class="radio-wrapper" i18n="+optionsAdvancedAutoSwitchSchemeBySystem">
<input type="radio" value="system" name="schemeSwitcher.enabled"> <input type="radio" value="system" name="schemeSwitcher.enabled">
</label> </label>
<label class="radio-wrapper"> <label class="radio-wrapper">
<input type="radio" value="time" name="schemeSwitcher.enabled"> <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.nightStart">
~ ~
<input type="time" required id="schemeSwitcher.nightEnd"> <input type="time" required id="schemeSwitcher.nightEnd">
</label> </label>
<label class="radio-wrapper" i18n-text-append="optionsAdvancedAutoSwitchSchemeNever"> <label class="radio-wrapper" i18n="+optionsAdvancedAutoSwitchSchemeNever">
<input type="radio" value="never" name="schemeSwitcher.enabled"> <input type="radio" value="never" name="schemeSwitcher.enabled">
</label> </label>
</div> </div>
</div> </div>
<div class="block"> <div class="block">
<h1 i18n-text="optionsCustomizeIcon"></h1> <h1 i18n="optionsCustomizeIcon"></h1>
<div class="items"> <div class="items">
<label> <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"> <input type="radio" name="iconset" value="-1" data-value-type="number">
</span> </span>
</label> </label>
<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"> <input type="radio" name="iconset" value="0" data-value-type="number">
</span> </span>
<span> <span>
@ -159,7 +159,7 @@
</span> </span>
</label> </label>
<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"> <input type="radio" name="iconset" value="1" data-value-type="number">
</span> </span>
<span> <span>
@ -172,64 +172,63 @@
</div> </div>
<div class="block"> <div class="block">
<h1 i18n-text="optionsCustomizeBadge"></h1> <h1 i18n="optionsCustomizeBadge"></h1>
<div class="items"> <div class="items">
<label> <label>
<span i18n-text="prefShowBadge"></span> <span i18n="prefShowBadge"></span>
<span class="onoffswitch"> <span class="onoffswitch">
<input type="checkbox" id="show-badge" class="slider"> <input type="checkbox" id="show-badge" class="slider">
<span></span> <span></span>
</span> </span>
</label> </label>
<label> <label>
<span i18n-text="optionsBadgeNormal"></span> <span i18n="optionsBadgeNormal"></span>
<input type="color" id="badgeNormal"> <input type="color" id="badgeNormal">
</label> </label>
<label> <label>
<span i18n-text="optionsBadgeDisabled"></span> <span i18n="optionsBadgeDisabled"></span>
<input type="color" id="badgeDisabled"> <input type="color" id="badgeDisabled">
</label> </label>
</div> </div>
</div> </div>
<div class="block"> <div class="block">
<h1 i18n-text="optionsCustomizePopup"></h1> <h1 i18n="optionsCustomizePopup"></h1>
<div class="items"> <div class="items">
<label> <label>
<span i18n-text="optionsPopupWidth"></span> <span i18n="optionsPopupWidth"></span>
<input type="number" id="popupWidth" min="200" max="800"> <input type="number" id="popupWidth" min="200" max="800">
</label> </label>
<label> <label>
<span i18n-text="popupOpenEditInWindow" <span i18n="popupOpenEditInWindow, title:popupOpenEditInWindowTooltip"></span>
i18n-title="popupOpenEditInWindowTooltip"></span>
<span class="onoffswitch"> <span class="onoffswitch">
<input type="checkbox" id="openEditInWindow" class="slider"> <input type="checkbox" id="openEditInWindow" class="slider">
<span></span> <span></span>
</span> </span>
</label> </label>
<label> <label>
<span i18n-text="popupOpenEditInPopup"></span> <span i18n="popupOpenEditInPopup"></span>
<span class="onoffswitch"> <span class="onoffswitch">
<input type="checkbox" id="openEditInWindow.popup" class="slider"> <input type="checkbox" id="openEditInWindow.popup" class="slider">
<span></span> <span></span>
</span> </span>
</label> </label>
<label> <label>
<span i18n-text="popupStylesFirst"></span> <span i18n="popupStylesFirst"></span>
<span class="onoffswitch"> <span class="onoffswitch">
<input type="checkbox" id="popup.stylesFirst" class="slider"> <input type="checkbox" id="popup.stylesFirst" class="slider">
<span></span> <span></span>
</span> </span>
</label> </label>
<label> <label>
<span i18n-text="popupAutoResort"></span> <span i18n="popupAutoResort"></span>
<span class="onoffswitch"> <span class="onoffswitch">
<input type="checkbox" id="popup.autoResort" class="slider"> <input type="checkbox" id="popup.autoResort" class="slider">
<span></span> <span></span>
</span> </span>
</label> </label>
<label class="chromium-only chrome-no-popup-border"> <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"> <span class="onoffswitch">
<input type="checkbox" id="popup.borders" class="slider"> <input type="checkbox" id="popup.borders" class="slider">
<span></span> <span></span>
@ -239,18 +238,18 @@
</div> </div>
<div class="block"> <div class="block">
<h1 i18n-text="openManage"></h1> <h1 i18n="openManage"></h1>
<div class="items"> <div class="items">
<label> <label>
<span i18n-text="manageNewUI"></span> <span i18n="manageNewUI"></span>
<span class="onoffswitch"> <span class="onoffswitch">
<input type="checkbox" id="manage.newUI" class="slider"> <input type="checkbox" id="manage.newUI" class="slider">
<span></span> <span></span>
</span> </span>
</label> </label>
<label> <label>
<span i18n-text="manageFavicons"> <span i18n="manageFavicons">
<a i18n-title="manageFaviconsHelp" <a i18n="title:manageFaviconsHelp"
data-cmd="note" class="svg-inline-wrapper" tabindex="0"> data-cmd="note" class="svg-inline-wrapper" tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a> </a>
@ -261,25 +260,25 @@
</span> </span>
</label> </label>
<label> <label>
<span i18n-text="manageFaviconsGray"></span> <span i18n="manageFaviconsGray"></span>
<span class="onoffswitch"> <span class="onoffswitch">
<input type="checkbox" id="manage.newUI.faviconsGray" class="slider"> <input type="checkbox" id="manage.newUI.faviconsGray" class="slider">
<span></span> <span></span>
</span> </span>
</label> </label>
<label> <label>
<span i18n-text="manageMaxTargets"></span> <span i18n="manageMaxTargets"></span>
<input id="manage.newUI.targets" type="number" min="1" max="99"> <input id="manage.newUI.targets" type="number" min="1" max="99">
</label> </label>
</div> </div>
</div> </div>
<div class="block" id="advanced"> <div class="block" id="advanced">
<h1 i18n-text="optionsAdvanced"></h1> <h1 i18n="optionsAdvanced"></h1>
<div class="items"> <div class="items">
<label class="chromium-only"> <label class="chromium-only">
<span i18n-text="optionsAdvancedStyleViaXhr"> <span i18n="optionsAdvancedStyleViaXhr">
<a i18n-title="optionsAdvancedStyleViaXhrNote" <a i18n="title:optionsAdvancedStyleViaXhrNote"
data-cmd="note" class="svg-inline-wrapper" tabindex="0"> data-cmd="note" class="svg-inline-wrapper" tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a> </a>
@ -291,8 +290,8 @@
</label> </label>
<label> <label>
<span> <span>
<span i18n-html="optionsAdvancedPatchCsp"></span> <span i18n="html:optionsAdvancedPatchCsp"></span>
<a i18n-title="optionsAdvancedPatchCspNote" <a i18n="title:optionsAdvancedPatchCspNote"
data-cmd="note" class="svg-inline-wrapper" tabindex="0"> data-cmd="note" class="svg-inline-wrapper" tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a> </a>
@ -303,8 +302,8 @@
</span> </span>
</label> </label>
<label> <label>
<span i18n-text="optionsAdvancedExposeIframes"> <span i18n="optionsAdvancedExposeIframes">
<a i18n-title="optionsAdvancedExposeIframesNote" <a i18n="title:optionsAdvancedExposeIframesNote"
data-cmd="note" class="svg-inline-wrapper" tabindex="0"> data-cmd="note" class="svg-inline-wrapper" tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a> </a>
@ -315,8 +314,8 @@
</span> </span>
</label> </label>
<label class="chromium-only"> <label class="chromium-only">
<span i18n-text="optionsAdvancedExposeStyleName"> <span i18n="optionsAdvancedExposeStyleName">
<a i18n-title="optionsAdvancedExposeStyleNameNote" <a i18n="title:optionsAdvancedExposeStyleNameNote"
data-cmd="note" class="svg-inline-wrapper" tabindex="0"> data-cmd="note" class="svg-inline-wrapper" tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a> </a>
@ -327,7 +326,7 @@
</span> </span>
</label> </label>
<label class="chromium-only"> <label class="chromium-only">
<span i18n-text="optionsAdvancedContextDelete"></span> <span i18n="optionsAdvancedContextDelete"></span>
<span class="onoffswitch"> <span class="onoffswitch">
<input type="checkbox" id="editor.contextDelete" class="slider"> <input type="checkbox" id="editor.contextDelete" class="slider">
<span></span> <span></span>
@ -337,15 +336,15 @@
</div> </div>
<div class="block"> <div class="block">
<h1 i18n-text="cm_theme"></h1> <h1 i18n="cm_theme"></h1>
<div class="items" i18n-text="optionsStylusThemes" style="width:0"></div> <div class="items" i18n="optionsStylusThemes" style="width:0"></div>
</div> </div>
</div> </div>
<div class="block" id="actions"> <div class="block" id="actions">
<button id="reset" i18n-text="optionsResetButton" i18n-title="optionsReset"></button> <button id="reset" i18n="optionsResetButton, title:optionsReset"></button>
<button id="shortcuts" i18n-text="shortcuts" i18n-title="shortcutsNote"></button> <button id="shortcuts" i18n="shortcuts, title:shortcutsNote"></button>
<button id="manage" i18n-text="confirmClose"></button> <button id="manage" i18n="confirmClose"></button>
</div> </div>
</div> </div>

119
popup.html
View File

@ -19,15 +19,15 @@
</label> </label>
</div> </div>
<div class="actions"> <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> <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
</a> </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"> <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"/> <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> </svg>
</a> </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"> <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"/> <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> </svg>
@ -44,7 +44,7 @@
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</div> </div>
</div> </div>
<span i18n-text="excludeStyleByDomainLabel"></span> <span i18n="excludeStyleByDomainLabel"></span>
</label> </label>
<label class="menu-item exclude-by-url button"> <label class="menu-item exclude-by-url button">
<div class="menu-icon"> <div class="menu-icon">
@ -53,11 +53,11 @@
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</div> </div>
</div> </div>
<span i18n-text="excludeStyleByUrlLabel"></span> <span i18n="excludeStyleByUrlLabel"></span>
</label> </label>
<div class="menu-buttons-wrapper"> <div class="menu-buttons-wrapper">
<button class="delete" i18n-text="deleteStyleLabel"></button> <button class="delete" i18n="deleteStyleLabel"></button>
<button class="menu-close" i18n-text="confirmClose"></button> <button class="menu-close" i18n="confirmClose"></button>
</div> </div>
</div> </div>
</div> </div>
@ -69,32 +69,32 @@
</template> </template>
<template data-id="noStyles"> <template data-id="noStyles">
<div id="no-styles" i18n-text="noStylesForSite"></div> <div id="no-styles" i18n="noStylesForSite"></div>
</template> </template>
<template data-id="regexpProblemIndicator"> <template data-id="regexpProblemIndicator">
<div class="regexp-problem-indicator" i18n-title="styleRegexpProblemTooltip"></div> <div class="regexp-problem-indicator" i18n="title:styleRegexpProblemTooltip"></div>
</template> </template>
<template data-id="regexpProblemExplanation"> <template data-id="regexpProblemExplanation">
<div id="regexp-explanation"> <div id="regexp-explanation">
<div id="regexp-partial" i18n-html="styleRegexpPartialExplanation"></div> <div id="regexp-partial" i18n="html:styleRegexpPartialExplanation"></div>
<div id="regexp-invalid" i18n-text="styleRegexpInvalidExplanation"></div> <div id="regexp-invalid" i18n="styleRegexpInvalidExplanation"></div>
<button i18n-text="confirmOK"></button> <button i18n="confirmOK"></button>
</div> </div>
</template> </template>
<template data-id="unavailableInfo"> <template data-id="unavailableInfo">
<div class="blocked-info"> <div class="blocked-info">
<label i18n-text="stylusUnavailableForURL"></label> <label i18n="stylusUnavailableForURL"></label>
<p i18n-text="stylusUnavailableForURLdetails"></p> <p i18n="stylusUnavailableForURLdetails"></p>
</div> </div>
</template> </template>
<template data-id="unreachableInfo"> <template data-id="unreachableInfo">
<div class="blocked-info"> <div class="blocked-info">
<div class="copy-message" i18n-text="copied"></div> <div class="copy-message" i18n="copied"></div>
<label i18n-text="unreachableContentScript"></label> <label i18n="unreachableContentScript"></label>
</div> </div>
</template> </template>
@ -102,33 +102,33 @@
<div class="search-result"> <div class="search-result">
<a class="search-result-title"><span></span></a> <a class="search-result-title"><span></span></a>
<div class="search-result-info"> <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-status"></div>
<div class="search-result-actions"> <div class="search-result-actions">
<button class="search-result-install" i18n-text="installButton"></button> <button class="search-result-install" i18n="installButton"></button>
<button class="search-result-uninstall" i18n-text="deleteStyleLabel"></button> <button class="search-result-uninstall" i18n="deleteStyleLabel"></button>
<button class="search-result-customize" i18n-text="configureStyle"></button> <button class="search-result-customize" i18n="configureStyle"></button>
</div> </div>
<dl class="search-result-meta"> <dl class="search-result-meta">
<div data-type="author"> <div data-type="author">
<dt i18n-text="author"></dt> <dt i18n="author"></dt>
<dd><a target="_blank" i18n-title="author"></a></dd> <dd><a target="_blank" i18n="title:author"></a></dd>
</div> </div>
<div data-type="rating"> <div data-type="rating">
<dt i18n-text="searchResultRating"></dt> <dt i18n="searchResultRating"></dt>
<dd i18n-title="searchResultRating"></dd> <dd i18n="title:searchResultRating"></dd>
</div> </div>
<div data-type="updated"> <div data-type="updated">
<dt i18n-text="searchResultUpdated"></dt> <dt i18n="searchResultUpdated"></dt>
<dd i18n-title="searchResultUpdated"><time></time></dd> <dd i18n="title:searchResultUpdated"><time></time></dd>
</div> </div>
<div data-type="weekly"> <div data-type="weekly">
<dt i18n-text="searchResultWeeklyCount"></dt> <dt i18n="searchResultWeeklyCount"></dt>
<dd i18n-title="searchResultWeeklyCount"></dd> <dd i18n="title:searchResultWeeklyCount"></dd>
</div> </div>
<div data-type="total"> <div data-type="total">
<dt i18n-text="searchResultInstallCount"></dt> <dt i18n="searchResultInstallCount"></dt>
<dd i18n-title="searchResultInstallCount"></dd> <dd i18n="title:searchResultInstallCount"></dd>
</div> </div>
</dl> </dl>
<div class="search-result-description"></div> <div class="search-result-description"></div>
@ -138,13 +138,13 @@
<template data-id="searchNav"> <template data-id="searchNav">
<div> <div>
<button data-type="prev" i18n-title="paginationPrevious" disabled>◄</button> <button data-type="prev" i18n="title:paginationPrevious" disabled>◄</button>
<label> <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> </label>
<button data-type="next" i18n-title="paginationNext" disabled>►</button> <button data-type="next" i18n="title:paginationNext" disabled>►</button>
</div> </div>
</template> </template>
@ -154,8 +154,7 @@
<template data-id="searchResultNotMatching"> <template data-id="searchResultNotMatching">
<p class="not-matching-explainer" <p class="not-matching-explainer"
i18n-text="searchResultNotMatching" i18n="searchResultNotMatching, title:searchResultNotMatchingNote"></p>
i18n-title="searchResultNotMatchingNote"></p>
</template> </template>
<script src="js/polyfill.js"></script> <script src="js/polyfill.js"></script>
@ -180,22 +179,22 @@
<div id="confirm"> <div id="confirm">
<div> <div>
<b>Style's Name</b> <b>Style's Name</b>
<span i18n-text="deleteStyleConfirm"></span> <span i18n="deleteStyleConfirm"></span>
<div> <div>
<button i18n-text="confirmDelete" data-cmd="ok"></button> <button i18n="confirmDelete" data-cmd="ok"></button>
<button i18n-text="confirmCancel" data-cmd="cancel"></button> <button i18n="confirmCancel" data-cmd="cancel"></button>
</div> </div>
</div> </div>
</div> </div>
<div id="installed"> <div id="installed">
<aside id="hotkey-info" i18n-title="popupHotkeysTooltip"></aside> <aside id="hotkey-info" i18n="title:popupHotkeysTooltip"></aside>
</div> </div>
<div class="actions" id="main-actions"> <div class="actions" id="main-actions">
<div id="disable-all-wrapper"> <div id="disable-all-wrapper">
<div class="main-controls"> <div class="main-controls">
<label id="disableAll-label" i18n-text="disableAllStyles"> <label id="disableAll-label" i18n="disableAllStyles">
<input id="disableAll" type="checkbox"> <input id="disableAll" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label> </label>
@ -203,33 +202,32 @@
</div> </div>
<div class="main-controls"> <div class="main-controls">
<div id="find-styles"> <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> href="https://to.be.replaced.on.click/" target="_blank"></a>
<span id="find-styles-inline-group"> <span id="find-styles-inline-group">
<label i18n-title="findStylesInlineTooltip"> <label i18n="title:findStylesInlineTooltip">
<input id="popup.findStylesInline" class="checker" type="checkbox"> <input id="popup.findStylesInline" class="checker" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<span i18n-text="findStylesInline"></span> <span i18n="findStylesInline"></span>
</label> </label>
</span> </span>
</div> </div>
<div id="write-style"> <div id="write-style">
<a id="write-for-frames" title="&lsaquo;iframe&rsaquo;..." tabindex="0" hidden></a> <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>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div id="popup-options"> <div id="popup-options">
<div class="split-btn"> <div class="split-btn">
<button id="popup-manage-button" i18n-text="openManage" <button id="popup-manage-button" i18n="openManage, title:popupManageTooltip"
data-href="manage.html" i18n-title="popupManageTooltip"></button data-href="manage.html"></button
><button class="split-btn-pedal" i18n-menu-site="popupManageSiteStyles"></button> ><button class="split-btn-pedal" i18n="menu-site:popupManageSiteStyles"></button>
</div> </div>
<button id="popup-options-button" i18n-text="openOptions"></button> <button id="popup-options-button" i18n="openOptions"></button>
<button id="popup-wiki-button" <button id="popup-wiki-button"
i18n-text="linkStylusWiki" i18n="linkStylusWiki, title:linkGetHelp"
i18n-title="linkGetHelp"
data-href="https://github.com/openstyles/stylus/wiki"></button> data-href="https://github.com/openstyles/stylus/wiki"></button>
</div> </div>
</div> </div>
@ -238,15 +236,14 @@
<div id="search-results" class="hidden"> <div id="search-results" class="hidden">
<div class="search-results-nav" data-type="top"></div> <div class="search-results-nav" data-type="top"></div>
<div id="search-params"> <div id="search-params">
<input id="search-query" type="search" i18n-placeholder="search" <input id="search-query" type="search" i18n="placeholder:search, title:searchStyleQueryHint">
i18n-title="searchStyleQueryHint">
<div class="select-resizer"> <div class="select-resizer">
<select id="search-order" i18n-title="sortStylesHelpTitle"> <select id="search-order" i18n="title:sortStylesHelpTitle">
<option value="n" i18n-text="genericTitle"> <option value="n" i18n="genericTitle">
<option value="u" i18n-text="searchResultUpdated"> <option value="u" i18n="searchResultUpdated">
<option value="t" i18n-text="searchResultInstallCount"> <option value="t" i18n="searchResultInstallCount">
<option value="w" i18n-text="searchResultWeeklyCount"> <option value="w" i18n="searchResultWeeklyCount">
<option value="r" i18n-text="searchResultRating"> <option value="r" i18n="searchResultRating">
</select> </select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg> <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div> </div>
@ -255,7 +252,7 @@
<input id="search-globals" type="checkbox" checked> <input id="search-globals" type="checkbox" checked>
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</span> </span>
<span i18n-text="searchGlobalStyles"></span> <span i18n="searchGlobalStyles"></span>
</label> </label>
</div> </div>
<div id="search-results-list"></div> <div id="search-results-list"></div>
@ -284,7 +281,7 @@
</symbol> </symbol>
<symbol id="svg-icon-help" viewBox="0 0 14 16"> <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"/> <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="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"/> <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"/>