1
0

edit.html 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533
  1. <!DOCTYPE html>
  2. <html id="stylus">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link href="global.css" rel="stylesheet">
  7. <link id="cm-theme" rel="stylesheet">
  8. <script src="js/polyfill.js"></script>
  9. <script src="js/toolbox.js"></script>
  10. <script src="js/msg.js"></script>
  11. <script src="js/prefs.js"></script>
  12. <script src="js/dom.js"></script>
  13. <script src="js/localization.js"></script>
  14. <script src="content/style-injector.js"></script>
  15. <script src="content/apply.js"></script>
  16. <script src="js/sections-util.js"></script>
  17. <script src="js/event-emitter.js"></script>
  18. <script src="edit/codemirror-themes.js"></script> <!-- must precede base.js -->
  19. <script src="edit/base.js"></script>
  20. <script src="vendor/codemirror/lib/codemirror.js"></script>
  21. <script src="vendor/codemirror/mode/css/css.js"></script>
  22. <script src="vendor/codemirror/mode/stylus/stylus.js"></script>
  23. <script src="vendor/codemirror/addon/dialog/dialog.js"></script>
  24. <script src="vendor/codemirror/addon/edit/closebrackets.js"></script>
  25. <script src="vendor/codemirror/addon/scroll/annotatescrollbar.js"></script>
  26. <script src="vendor/codemirror/addon/search/searchcursor.js"></script>
  27. <script src="vendor/codemirror/addon/search/matchesonscrollbar.js"></script>
  28. <script src="vendor/codemirror/addon/comment/comment.js"></script>
  29. <script src="vendor/codemirror/addon/selection/active-line.js"></script>
  30. <script src="vendor/codemirror/addon/edit/matchbrackets.js"></script>
  31. <script src="vendor/codemirror/addon/fold/foldcode.js"></script>
  32. <script src="vendor/codemirror/addon/fold/foldgutter.js"></script>
  33. <script src="vendor/codemirror/addon/fold/brace-fold.js"></script>
  34. <script src="vendor/codemirror/addon/fold/indent-fold.js"></script>
  35. <script src="vendor/codemirror/addon/fold/comment-fold.js"></script>
  36. <script src="vendor/codemirror/addon/lint/lint.js"></script>
  37. <script src="vendor/codemirror/addon/hint/show-hint.js"></script>
  38. <script src="vendor/codemirror/addon/hint/css-hint.js"></script>
  39. <script src="vendor/codemirror/keymap/sublime.js"></script>
  40. <script src="vendor-overwrites/codemirror-addon/match-highlighter.js"></script>
  41. <script src="vendor/lz-string-unsafe/lz-string-unsafe.min.js"></script>
  42. <script src="js/color/color-converter.js"></script>
  43. <script src="js/color/color-mimicry.js"></script>
  44. <script src="js/color/color-picker.js"></script>
  45. <script src="js/color/color-view.js"></script>
  46. <script src="js/storage-util.js"></script>
  47. <script src="js/worker-util.js"></script>
  48. <script src="edit/util.js"></script>
  49. <script src="edit/codemirror-default.js"></script>
  50. <script src="edit/codemirror-factory.js"></script>
  51. <script src="edit/moz-section-finder.js"></script>
  52. <script src="edit/moz-section-widget.js"></script>
  53. <script src="edit/linter-manager.js"></script>
  54. <script src="edit/beautify.js"></script>
  55. <script src="edit/source-editor.js"></script>
  56. <script src="edit/sections-editor-section.js"></script>
  57. <script src="edit/sections-editor.js"></script>
  58. <script src="edit/usw-integration.js"></script>
  59. <script src="edit/settings.js"></script>
  60. <script src="edit/edit.js"></script>
  61. <template data-id="appliesTo">
  62. <li class="applies-to-item">
  63. <div class="select-resizer">
  64. <select name="applies-type" class="applies-type style-contributor">
  65. <option value="url" i18n-text="appliesUrlOption"></option>
  66. <option value="url-prefix" i18n-text="appliesUrlPrefixOption"></option>
  67. <option value="domain" i18n-text="appliesDomainOption"></option>
  68. <option value="regexp" i18n-text="appliesRegexpOption"></option>
  69. </select>
  70. <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
  71. </div>
  72. <div class="applies-value-wrapper">
  73. <input name="applies-value" class="applies-value style-contributor" spellcheck="false">
  74. <a class="remove-applies-to" i18n-text="appliesRemove" i18n-title="appliesRemove" tabindex="0">
  75. <svg class="svg-icon remove"><use xlink:href="#svg-icon-minus"/></svg>
  76. </a>
  77. <a class="add-applies-to" i18n-text="appliesAdd" i18n-title="appliesAdd" tabindex="0">
  78. <svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
  79. </a>
  80. </div>
  81. </li>
  82. </template>
  83. <template data-id="appliesToEverything">
  84. <li class="applies-to-everything" i18n-text="appliesToEverything">
  85. <a class="add-applies-to" i18n-text="appliesAdd" i18n-title="appliesAdd" tabindex="0">
  86. <svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
  87. </a>
  88. </li>
  89. </template>
  90. <template data-id="section">
  91. <div class="section">
  92. <!-- not using DIV to make our CSS work for #sections > div:only-of-type .remove-section -->
  93. <p class="deleted-section">
  94. <button class="restore-section" i18n-text="sectionRestore"></button>
  95. </p>
  96. <label i18n-text="sectionCode" class="code-label"></label>
  97. <div class="applies-to">
  98. <label i18n-text="appliesLabel">
  99. <a class="svg-inline-wrapper applies-to-help" tabindex="0">
  100. <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
  101. </a>
  102. </label>
  103. <ul class="applies-to-list"></ul>
  104. </div>
  105. <div class="edit-actions">
  106. <button class="remove-section" i18n-text="sectionRemove"></button>
  107. <button class="add-section" i18n-long-text="sectionAdd" i18n-short-text="genericAdd"></button>
  108. <button class="clone-section" i18n-text="genericClone"></button>
  109. <button class="move-section-up"></button>
  110. <button class="move-section-down"></button>
  111. <button class="beautify-section" i18n-text="styleBeautify"></button>
  112. <button class="test-regexp" i18n-text="styleRegexpTestButton"></button>
  113. </div>
  114. </div>
  115. </template>
  116. <template data-id="searchReplaceDialog">
  117. <div id="search-replace-dialog">
  118. <div data-type="main">
  119. <div data-type="content"></div>
  120. <div data-type="actions">
  121. <a data-action="case" i18n-title="searchCaseSensitive" tabindex="0">Aa</a>
  122. <a data-action="prev" i18n-title="genericPrevious" data-hotkey-tooltip="findPrev" tabindex="0">
  123. <svg class="svg-icon" style="transform: rotate(180deg)"><use xlink:href="#svg-icon-v"/></svg>
  124. </a>
  125. <a data-action="next" i18n-title="genericNext" data-hotkey-tooltip="findNext" tabindex="0">
  126. <svg class="svg-icon"><use xlink:href="#svg-icon-v"/></svg>
  127. </a>
  128. <a data-action="close" i18n-title="confirmClose" data-hotkey-tooltip="=Esc" tabindex="0">
  129. <svg class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg>
  130. </a>
  131. </div>
  132. </div>
  133. <div data-type="status">
  134. <div class="CodeMirror-search-hint" i18n-text="searchRegexp"></div>
  135. <div data-type="tally" i18n-title="searchNumberOfResults"></div>
  136. </div>
  137. </div>
  138. </template>
  139. <template data-id="clearSearch">
  140. <div data-type="hover" i18n-title="confirmDelete">
  141. <svg data-action="clear" class="svg-icon"><use xlink:href="#svg-icon-close"></use></svg>
  142. </div>
  143. </template>
  144. <template data-id="find">
  145. <div data-type="content">
  146. <div data-type="input-wrapper">
  147. <textarea class="CodeMirror-search-field" rows="1" spellcheck="false" required
  148. i18n-placeholder="search"></textarea>
  149. </div>
  150. </div>
  151. </template>
  152. <template data-id="replace">
  153. <div data-type="content">
  154. <div data-type="input-wrapper">
  155. <textarea data-type="replace-from"
  156. i18n-placeholder="replace"
  157. class="CodeMirror-search-field" rows="1" required
  158. spellcheck="false"></textarea>
  159. </div>
  160. <div data-type="input-wrapper">
  161. <textarea data-type="replace-to"
  162. i18n-placeholder="replaceWith"
  163. class="CodeMirror-search-field" rows="1" required
  164. spellcheck="false"></textarea>
  165. </div>
  166. <button data-action="replace" i18n-text="replace" disabled></button>
  167. <button data-action="replaceAll" i18n-text="replaceAll" disabled></button>
  168. <button data-action="undo" i18n-text="undo" disabled></button>
  169. <!--
  170. Using a separate set of buttons because
  171. 1. FF can display tooltips only when specified on the <button>, ignores the nested <title> in <svg>
  172. 2. the icon doesn't fill the entire button area so tooltips aren't shown when the edges are hovered
  173. -->
  174. <button class="hidden" data-action="replace" i18n-title="replace" disabled>
  175. <svg class="svg-icon" viewBox="0 0 20 20">
  176. <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"/>
  177. </svg>
  178. </button>
  179. <button class="hidden" data-action="replaceAll" i18n-title="replaceAll" disabled>
  180. <svg class="svg-icon" viewBox="0 0 20 20">
  181. <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 "/>
  182. <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 "/>
  183. </svg>
  184. </button>
  185. <button class="hidden" data-action="undo" i18n-title="undo" disabled>
  186. <svg class="svg-icon" viewBox="0 0 20 20">
  187. <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"/>
  188. </svg>
  189. </button>
  190. </div>
  191. </template>
  192. <template data-id="jumpToLine">
  193. <span i18n-text="editGotoLine">: <input class="CodeMirror-jump-field" type="text"></span>
  194. </template>
  195. <template data-id="regexpTestPartial">
  196. <a target="_blank" href="https://github.com/stylish-userstyles/stylish/wiki/Applying-styles-to-specific-sites#advanced-matching-with-regular-expressions"><svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></a>
  197. </template>
  198. <template data-id="resizeGrip">
  199. <div class="resize-grip" i18n-title="cm_resizeGripHint"></div>
  200. </template>
  201. <template data-id="keymapHelp">
  202. <table class="keymap-list">
  203. <thead>
  204. <tr>
  205. <th><input i18n-placeholder="helpKeyMapHotkey" type="search" class="can-close-on-esc"></th>
  206. <th><input i18n-placeholder="helpKeyMapCommand" type="search" class="can-close-on-esc" spellcheck="false"></th>
  207. </tr>
  208. </thead>
  209. <tbody>
  210. <tr>
  211. <td></td>
  212. <td></td>
  213. </tr>
  214. </tbody>
  215. </table>
  216. </template>
  217. <link href="vendor/codemirror/lib/codemirror.css" rel="stylesheet">
  218. <link href="vendor/codemirror/addon/dialog/dialog.css" rel="stylesheet">
  219. <link href="vendor/codemirror/addon/fold/foldgutter.css" rel="stylesheet">
  220. <link href="vendor/codemirror/addon/hint/show-hint.css" rel="stylesheet">
  221. <link href="vendor/codemirror/addon/lint/lint.css" rel="stylesheet">
  222. <link href="vendor/codemirror/addon/search/matchesonscrollbar.css" rel="stylesheet">
  223. <link href="js/color/color-picker.css" rel="stylesheet">
  224. <link href="edit/codemirror-default.css" rel="stylesheet">
  225. <link href="edit/edit.css" rel="stylesheet">
  226. <link rel="stylesheet" href="edit/tab.css">
  227. <link rel="stylesheet" href="edit/settings.css">
  228. </head>
  229. <body id="stylus-edit">
  230. <div id="header">
  231. <h1 id="heading" i18n-data-edit="editStyleHeading" i18n-data-add="addStyleTitle"></h1>
  232. <section id="basic-info">
  233. <div id="basic-info-name">
  234. <input id="name" class="style-contributor" spellcheck="false">
  235. <a id="reset-name" i18n-title="customNameResetHint" tabindex="0" hidden>
  236. <svg class="svg-icon" viewBox="0 0 20 20">
  237. <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
  238. 5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
  239. </svg>
  240. </a>
  241. <a id="url" target="_blank"><svg class="svg-icon"><use xlink:href="#svg-icon-external-link"/></svg></a>
  242. </div>
  243. <div id="basic-info-enabled">
  244. <label id="enabled-label"
  245. i18n-text="styleEnabledLabel"
  246. i18n-title="toggleStyle"
  247. data-hotkey-tooltip="toggleStyle">
  248. <input type="checkbox" id="enabled" class="style-contributor">
  249. <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
  250. </label>
  251. <label id="preview-label" i18n-text="previewLabel" i18n-title="previewTooltip">
  252. <input type="checkbox" id="editor.livePreview">
  253. <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
  254. </label>
  255. <span id="preview-errors" class="hidden">!</span>
  256. </div>
  257. </section>
  258. <section id="actions">
  259. <div>
  260. <button id="save-button" i18n-text="styleSaveLabel" data-hotkey-tooltip="save" disabled></button>
  261. <button id="beautify" i18n-text="styleBeautify"></button>
  262. <a href="manage.html" tabindex="-1"><button id="cancel-button" i18n-text="styleCancelEditLabel"></button></a>
  263. </div>
  264. <div id="mozilla-format-buttons" class="sectioned-only">
  265. <button id="from-mozilla" i18n-text="importLabel"></button>
  266. <button id="to-mozilla" i18n-text="exportLabel"></button>
  267. <a id="to-mozilla-help" class="svg-inline-wrapper" tabindex="0"
  268. i18n-title="styleMozillaFormatHeading">
  269. <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
  270. </a>
  271. </div>
  272. </section>
  273. <div id="details-wrapper">
  274. <details id="options" data-pref="editor.options.expanded" class="ignore-pref-if-compact">
  275. <summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
  276. <div id="options-wrapper">
  277. <div class="options-column">
  278. <div class="option">
  279. <label id="lineWrapping-label" i18n-text="cm_lineWrapping">
  280. <input id="editor.lineWrapping" type="checkbox">
  281. <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
  282. </label>
  283. </div>
  284. <div class="option">
  285. <label id="smartIndent-label" i18n-text="cm_smartIndent">
  286. <input id="editor.smartIndent" type="checkbox">
  287. <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
  288. </label>
  289. </div>
  290. <div class="option">
  291. <label id="indentWithTabs-label" i18n-text="cm_indentWithTabs">
  292. <input id="editor.indentWithTabs" type="checkbox">
  293. <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
  294. </label>
  295. </div>
  296. <div class="option">
  297. <label i18n-text="cm_autoCloseBrackets" i18n-title="cm_autoCloseBracketsTooltip">
  298. <input id="editor.autoCloseBrackets" type="checkbox">
  299. <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
  300. </label>
  301. </div>
  302. <div class="option">
  303. <label i18n-text="cm_autocompleteOnTyping">
  304. <input id="editor.autocompleteOnTyping" type="checkbox">
  305. <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
  306. </label>
  307. </div>
  308. <div class="option">
  309. <label i18n-text="cm_selectByTokens"
  310. i18n-title="cm_selectByTokensTooltip">
  311. <input id="editor.selectByTokens" type="checkbox">
  312. <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
  313. </label>
  314. </div>
  315. <div class="option">
  316. <label i18n-text="cm_colorpicker">
  317. <input id="editor.colorpicker" type="checkbox">
  318. <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
  319. </label>
  320. <a id="colorpicker-settings" class="svg-inline-wrapper" i18n-title="shortcutsNote" tabindex="0">
  321. <svg class="svg-icon settings"><use xlink:href="#svg-icon-config"/></svg>
  322. </a>
  323. </div>
  324. <div class="option usercss-only">
  325. <label i18n-text="appliesLineWidgetLabel" i18n-title="appliesLineWidgetWarning">
  326. <input id="editor.appliesToLineWidget" type="checkbox">
  327. <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
  328. </label>
  329. </div>
  330. </div>
  331. <div class="options-column">
  332. <div class="option aligned">
  333. <label id="tabSize-label" for="editor.tabSize" i18n-text="cm_tabSize"></label>
  334. <input id="editor.tabSize" type="number" min="0">
  335. </div>
  336. <div class="option aligned">
  337. <label id="keyMap-label" for="editor.keyMap" i18n-text="cm_keyMap"></label>
  338. <div class="select-resizer">
  339. <select id="editor.keyMap"></select>
  340. <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
  341. </div>
  342. <a id="keyMap-help" class="svg-inline-wrapper" tabindex="0">
  343. <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
  344. </a>
  345. </div>
  346. <div class="option aligned">
  347. <label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
  348. <div class="select-resizer">
  349. <select id="editor.theme"></select>
  350. <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
  351. </div>
  352. </div>
  353. <div class="option aligned">
  354. <label id="highlight-label" for="editor.matchHighlight" i18n-text="cm_matchHighlight"></label>
  355. <div class="select-resizer">
  356. <select id="editor.matchHighlight">
  357. <option i18n-text="cm_matchHighlightToken" value="token">
  358. <option i18n-text="cm_matchHighlightSelection" value="selection">
  359. <option i18n-text="genericDisabledLabel" value="">
  360. </select>
  361. <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
  362. </div>
  363. </div>
  364. <div class="option aligned">
  365. <label id="linter-label" for="editor.linter" i18n-text="cm_linter"></label>
  366. <div class="select-resizer">
  367. <select id="editor.linter">
  368. <option value="csslint" selected>CSSLint</option>
  369. <option value="stylelint">Stylelint</option>
  370. <option value="" i18n-text="genericDisabledLabel"></option>
  371. </select>
  372. <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
  373. </div>
  374. <a id="linter-settings" class="svg-inline-wrapper" i18n-title="linterConfigTooltip" tabindex="0">
  375. <svg class="svg-icon settings"><use xlink:href="#svg-icon-config"/></svg>
  376. </a>
  377. </div>
  378. </div>
  379. </div>
  380. </details>
  381. <details id="publish" data-pref="editor.publish.expanded" class="ignore-pref-if-compact">
  382. <summary><h2 i18n-text="publish"></h2></summary>
  383. <div>
  384. <a id="usw-url" href="https://userstyles.world" target="_blank">&nbsp;</a>
  385. <div id="usw-link-info">
  386. <dl><dt i18n-text="styleName"></dt><dd data-usw="name"></dd></dl>
  387. <dl><dt i18n-text="genericDescription"></dt><dd data-usw="description"></dd></dl>
  388. </div>
  389. <div>
  390. <button id="usw-publish-style"
  391. i18n-data-publish="publishStyle"
  392. i18n-data-push="publishPush"></button>
  393. <button id="usw-disconnect" i18n-text="optionsSyncDisconnect"></button>
  394. <span id="usw-progress"></span>
  395. </div>
  396. </div>
  397. </details>
  398. <details id="sections-list" data-pref="editor.toc.expanded" class="ignore-pref-if-compact">
  399. <summary><h2 i18n-text="sections"></h2></summary>
  400. <ol id="toc"></ol>
  401. </details>
  402. <details id="lint" data-pref="editor.lint.expanded" class="ignore-pref-if-compact">
  403. <summary>
  404. <h2 i18n-text="linterIssues">: <span id="issue-count"></span>
  405. <a id="lint-help" class="svg-inline-wrapper intercepts-click" tabindex="0">
  406. <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
  407. </a>
  408. </h2>
  409. </summary>
  410. <div class="lint-scroll-container">
  411. <div class="lint-report-container"></div>
  412. </div>
  413. </details>
  414. </div>
  415. <div id="footer">
  416. <a href="https://github.com/openstyles/stylus/wiki/Usercss"
  417. i18n-text="externalUsercssDocument"
  418. target="_blank"></a>
  419. </div>
  420. </div>
  421. <div class="main tab-container">
  422. <div class="tab-bar">
  423. <div class="tab-bar-item active" i18n-text="editorCodeLabel"></div>
  424. <div class="tab-bar-item" i18n-text="editorSettingLabel"></div>
  425. </div>
  426. <div class="tab-panel">
  427. <section id="sections" class="active"></section>
  428. <fieldset class="style-settings" disabled>
  429. <!-- <label class="style-origin">
  430. <span class="form-label" i18n-text="styleOriginLabel"></span>
  431. <input id="styleOrigin" type="text">
  432. </label> -->
  433. <label class="form-group style-update-url">
  434. <span class="form-label" i18n-text="styleUpdateUrlLabel"></span>
  435. <input type="text">
  436. </label>
  437. <div class="form-group style-prefer-scheme radio-group">
  438. <!-- FIXME: should we use a different message from install page? -->
  439. <span class="form-label" i18n-text="installPreferSchemeLabel"></span>
  440. <label class="radio-item">
  441. <input type="radio" name="preferScheme" value="none">
  442. <span class="radio-label" i18n-text="installPreferSchemeNone"></span>
  443. </label>
  444. <label class="radio-item">
  445. <input type="radio" name="preferScheme" value="dark">
  446. <span class="radio-label" i18n-text="installPreferSchemeDark"></span>
  447. </label>
  448. <label class="radio-item">
  449. <input type="radio" name="preferScheme" value="light">
  450. <span class="radio-label" i18n-text="installPreferSchemeLight"></span>
  451. </label>
  452. </div>
  453. <label class="form-group style-include">
  454. <span class="form-label" i18n-text="styleIncludeLabel"></span>
  455. <textarea spellcheck="false" placeholder="*://site1.com/*&#10;*://site2.com/*"></textarea>
  456. </label>
  457. <label class="form-group style-exclude">
  458. <span class="form-label" i18n-text="styleExcludeLabel"></span>
  459. <textarea spellcheck="false" placeholder="*://site1.com/*&#10;*://site2.com/*"></textarea>
  460. </label>
  461. <!-- <label class="style-always-important">
  462. <input type="checkbox">
  463. <span class="form-label" i18n-text="styleAlwaysImportantLabel"></span>
  464. </label> -->
  465. </fieldset>
  466. </div>
  467. </div>
  468. <div id="help-popup">
  469. <div class="title"></div><svg id="sections-help" class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg>
  470. <div class="contents"></div>
  471. </div>
  472. <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  473. <symbol id="svg-icon-external-link" viewBox="0 0 8 8">
  474. <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>
  475. </symbol>
  476. <symbol id="svg-icon-help" viewBox="0 0 14 16" i18n-alt="helpAlt">
  477. <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
  478. </symbol>
  479. <symbol id="svg-icon-close" viewBox="0 0 12 16">
  480. <path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"></path>
  481. </symbol>
  482. <symbol id="svg-icon-v" viewBox="0 0 16 16">
  483. <path d="M8,11.5L2.8,6.3l1.5-1.5L8,8.6l3.7-3.7l1.5,1.5L8,11.5z"/>
  484. </symbol>
  485. <symbol id="svg-icon-config" viewBox="0 0 16 16">
  486. <path d="M13.3,12.8l1.5-2.6l-2.2-1.5c0-0.2,0.1-0.5,0.1-0.7c0-0.2,0-0.5-0.1-0.7l2.2-1.5l-1.5-2.6l-2.4,1.2 c-0.4-0.3-0.8-0.5-1.2-0.7L9.5,1h-3L6.3,3.7C5.9,3.8,5.5,4.1,5.1,4.4L2.7,3.2L1.2,5.8l2.2,1.5c0,0.2-0.1,0.5-0.1,0.7 c0,0.2,0,0.5,0.1,0.7l-2.2,1.5l1.5,2.6l2.4-1.2c0.4,0.3,0.8,0.5,1.2,0.7L6.5,15h3l0.2-2.7c0.4-0.2,0.8-0.4,1.2-0.7L13.3,12.8z M8,10.3c-1.3,0-2.3-1-2.3-2.3c0-1.3,1-2.3,2.3-2.3c1.3,0,2.3,1,2.3,2.3C10.3,9.3,9.3,10.3,8,10.3z"/>
  487. </symbol>
  488. <symbol id="svg-icon-select-arrow" viewBox="0 0 1792 1792">
  489. <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
  490. </symbol>
  491. <symbol id="svg-icon-checked" viewBox="0 0 1000 1000">
  492. <path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
  493. </symbol>
  494. <symbol id="svg-icon-plus" viewBox="0 0 8 8">
  495. <path fill-rule="evenodd" d="M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z"/>
  496. </symbol>
  497. <symbol id="svg-icon-minus" viewBox="0 0 8 8">
  498. <path fill-rule="evenodd" d="M0 3v2h8v-2h-8z"/>
  499. </symbol>
  500. </svg>
  501. <script src="edit/tab.js"></script>
  502. </body>
  503. </html>