stylus/options/index.html

<!DOCTYPE html>
<html id="stylus">
<head>
  <title>Stylus Options</title>
  <link rel="stylesheet" href="index.css">
  <script src="../localization.js"></script>
</head>

<body>
  <h1 i18n-text="optionsCustomize"></h1>
  <table>
    <tbody>
      <tr>
        <td i18n-text="optionsBadgeNormal"></td>
        <td><input type="color" id="badgeNormal"></td>
      </tr>
      <tr>
        <td i18n-text="optionsBadgeDisabled"></td>
        <td><input type="color" id="badgeDisabled"></td>
      </tr>
      <tr>
        <td i18n-text="optionsPopupWidth"></td>
        <td><input type="number" id="popupWidth" min="200" max="800"></td>
      </tr>
      <tr>
        <td i18n-text="optionsUpdateInterval"><sup>1</sup></td>
        <td><input type="number" min="0" id="updateInterval"></td>
      </tr>
    </tbody>
  </table>
  <div>
    <button id="save">Save</button>
    <span id="status"></span>
  </div>

  <h1 i18n-text="optionsActions"></h1>
  <table>
    <tbody>
      <tr>
        <td i18n-text="optionsOpenManager"><sup>2</sup></td>
        <td><button type="button" data-cmd="open-manage" i18n-text="optionsOpen"></button></td>
      </tr>
      <tr>
        <td i18n-text="optionsCheckUpdate"></td>
        <td>
          <span id="update-counter"></span>
          <button type="button" data-cmd="check-updates" i18n-text="optionsCheck"></button>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="notes">
    <hr>
    1: <span i18n-text="optionsUpdateIntervalNote"></span>
    <br>
    2: <span i18n-text="optionsOpenManagerNote"></span>, <a href="#" data-cmd="open-keyboard">chrome://extensions/configureCommands</a>
  </div>

  <script src="/messaging.js"></script>
  <script src="index.js"></script>
</body>
</html>
adding options UI (fixes #22, #24) 2017-02-14 15:35:53 +00:00			`<!DOCTYPE html>`
Add <html id="stylus"> to all pages 2017-03-23 03:41:50 +00:00			`<html id="stylus">`
adding options UI (fixes #22, #24) 2017-02-14 15:35:53 +00:00			`<head>`
			`<title>Stylus Options</title>`
			`<link rel="stylesheet" href="index.css">`
			`<script src="../localization.js"></script>`
			`</head>`

			`<body>`
			`<h1 i18n-text="optionsCustomize"></h1>`
			`<table>`
			`<tbody>`
			`<tr>`
			`<td i18n-text="optionsBadgeNormal"></td>`
			`<td><input type="color" id="badgeNormal"></td>`
			`</tr>`
			`<tr>`
			`<td i18n-text="optionsBadgeDisabled"></td>`
			`<td><input type="color" id="badgeDisabled"></td>`
			`</tr>`
popup width is now adjustable 2017-03-06 20:17:32 +00:00			`<tr>`
			`<td i18n-text="optionsPopupWidth"></td>`
Refactor and speed up popup & manager Popup: * Enforce 200-800px range for the popup width option Manage: * faster search via cachedStyles.byId * faster restoration of search results on history nav * style name is clickable and opens the editor * animated highlight of style element on update/add/save * expandable extra applies-to targets * remember scroll position on normal history navigation * boz-sizing in #header, also in editor * applies-to targets use structured markup * getTab, enableStyle and deleteStyle are promisified 2017-03-21 01:32:38 +00:00			`<td><input type="number" id="popupWidth" min="200" max="800"></td>`
popup width is now adjustable 2017-03-06 20:17:32 +00:00			`</tr>`
adding options UI (fixes #22, #24) 2017-02-14 15:35:53 +00:00			`<tr>`
			`<td i18n-text="optionsUpdateInterval"><sup>1</sup></td>`
			`<td><input type="number" min="0" id="updateInterval"></td>`
			`</tr>`
			`</tbody>`
			`</table>`
			`<div>`
			`<button id="save">Save</button>`
			`<span id="status"></span>`
			`</div>`

			`<h1 i18n-text="optionsActions"></h1>`
			`<table>`
			`<tbody>`
			`<tr>`
linking options page to chrome://extensions/configureCommands 2017-02-15 05:48:47 +00:00			`<td i18n-text="optionsOpenManager"><sup>2</sup></td>`
adding options UI (fixes #22, #24) 2017-02-14 15:35:53 +00:00			`<td><button type="button" data-cmd="open-manage" i18n-text="optionsOpen"></button></td>`
			`</tr>`
			`<tr>`
			`<td i18n-text="optionsCheckUpdate"></td>`
			`<td>`
			`<span id="update-counter"></span>`
			`<button type="button" data-cmd="check-updates" i18n-text="optionsCheck"></button>`
			`</td>`
			`</tr>`
			`</tbody>`
			`</table>`
			`<div class="notes">`
			`<hr>`
			`1: <span i18n-text="optionsUpdateIntervalNote"></span>`
linking options page to chrome://extensions/configureCommands 2017-02-15 05:48:47 +00:00			`<br>`
			`2: <span i18n-text="optionsOpenManagerNote"></span>, <a href="#" data-cmd="open-keyboard">chrome://extensions/configureCommands</a>`
adding options UI (fixes #22, #24) 2017-02-14 15:35:53 +00:00			`</div>`

Path for configureCommands is chosen based on user's browser (Opera incomatibility) 2017-03-16 13:36:33 +00:00			`<script src="/messaging.js"></script>`
adding options UI (fixes #22, #24) 2017-02-14 15:35:53 +00:00			`<script src="index.js"></script>`
			`</body>`
			`</html>`