stylus/options/index.html

<!DOCTYPE html>
<html id="stylus">
<head>
  <title i18n-text-append="optionsHeading">Stylus </title>
  <link rel="stylesheet" href="index.css">
  <script src="/dom.js"></script>
  <script src="/messaging.js"></script>
  <script src="/localization.js"></script>
  <script src="/prefs.js"></script>
  <script src="/apply.js"></script>
</head>

<body>
  <div id="options">

    <div class="block">
      <h1 i18n-text="optionsCustomizeBadge"></h1>
      <div class="items">
        <label>
          <span i18n-text="prefShowBadge"></span>
          <span class="onoffswitch">
            <input type="checkbox" class="onoffswitch-checkbox" id="show-badge">
            <span class="onoffswitch-label"></span>
          </span>
        </label>
        <label>
          <span i18n-text="optionsBadgeNormal"></span>
          <input type="color" id="badgeNormal">
        </label>
        <label>
          <span i18n-text="optionsBadgeDisabled"></span>
          <input type="color" id="badgeDisabled">
        </label>
      </div>
    </div>

    <div class="block">
      <h1 i18n-text="optionsCustomizePopup"></h1>
      <div class="items">
        <label>
          <span i18n-text="optionsPopupWidth"></span>
          <input type="number" id="popupWidth" min="200" max="800">
        </label>
        <label>
          <span i18n-text="popupStylesFirst"></span>
          <span class="onoffswitch">
            <input type="checkbox" class="onoffswitch-checkbox" id="popup.stylesFirst">
            <span class="onoffswitch-label" for="popup.stylesFirst"></span>
          </span>
        </label>
      </div>
    </div>

    <div class="block">
      <h1 i18n-text="optionsCustomizeUpdate"></h1>
      <div class="items">
        <label>
          <span i18n-text="optionsUpdateInterval"><sup>1</sup></span>
          <input type="number" min="0" id="updateInterval">
        </label>
      </div>
    </div>

    <div class="block">
      <h1 i18n-text="optionsAdvanced"></h1>
      <div class="items">
        <label>
          <span i18n-text="optionsAdvancedExposeIframes"> <sup>2</sup></span>
          <span class="onoffswitch">
            <input type="checkbox" class="onoffswitch-checkbox" id="exposeIframes">
            <span class="onoffswitch-label" for="exposeIframes"></span>
          </span>
        </label>
      </div>
    </div>

    <div class="block" id="actions">
      <button data-cmd="reset" i18n-text="optionsResetButton" i18n-title="optionsReset"></button>
      <button data-cmd="open-manage" i18n-text="optionsOpenManager"><sup class="chromium-only">3</sup></button>
      <div data-cmd="check-updates">
        <button i18n-text="optionsCheck" i18n-title="optionsCheckUpdate">
          <span id="update-progress"></span>
        </button>
        <div id="updates-installed" i18n-text="updatesCurrentlyInstalled"></div>
      </div>
    </div>
  </div>

  <div id="notes">
    <ol>
      <li>
        <p i18n-text="optionsUpdateIntervalNote"></p>
        <p i18n-text="optionsUpdateImportNote"></p>
      </li>
      <li i18n-text="optionsAdvancedExposeIframesNote"></li>
      <li class="chromium-only">
        <a data-cmd="open-keyboard"
           i18n-text="optionsOpenManagerNote"
           href="chrome://extensions/configureCommands"></a>
      </li>
    </ol>
  </div>

  <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>`
options: localize the title 2017-04-10 06:47:09 +00:00			`<title i18n-text-append="optionsHeading">Stylus </title>`
adding options UI (fixes #22, #24) 2017-02-14 15:35:53 +00:00			`<link rel="stylesheet" href="index.css">`
polyfill DOM enumerables for Chrome 49 2017-04-08 10:19:44 +00:00			`<script src="/dom.js"></script>`
OptionsUI: restructure html, make it userstylable 2017-03-28 00:42:07 +00:00			`<script src="/messaging.js"></script>`
own page load microopt: reduce blocking on i18n * localStorage cache is faster than chrome.i18n.get * TreeWalker is faster than tHTML for removing extraneous whitespace * simple for() is faster than for-of with [...iterable] 2017-04-17 15:54:39 +00:00			`<script src="/localization.js"></script>`
Isolate storage.js in background context To prevent cross-page leaks we need to create/copy prefs and cachedStyles inside the background page context. * storage.js is now used only in the background page * messaging.js now contains less bg-specific methods and more common methods. Added saveStyleSafe, deleteStyleSafe which automatically invoke onRuntimeMessage of the current page or just handleUpdate/handleDelete when notify:false * prefs.js with 'prefs' for background and UI pages: separate objects because a UI page may load before the background page and it can read prefs from localStorage/sync/defaults 2017-04-11 10:51:40 +00:00			`<script src="/prefs.js"></script>`
			`<script src="/apply.js"></script>`
adding options UI (fixes #22, #24) 2017-02-14 15:35:53 +00:00			`</head>`

			`<body>`
optionsUI: group options and shorten labels 2017-04-14 07:50:52 +00:00			`<div id="options">`
Expose iframes via HTML[stylus-iframe] * convert actions to buttons 2017-04-28 23:36:10 +00:00
optionsUI: group options and shorten labels 2017-04-14 07:50:52 +00:00			`<div class="block">`
			`<h1 i18n-text="optionsCustomizeBadge"></h1>`
			`<div class="items">`
Expose iframes via HTML[stylus-iframe] * convert actions to buttons 2017-04-28 23:36:10 +00:00			`<label>`
			`<span i18n-text="prefShowBadge"></span>`
			`<span class="onoffswitch">`
			`<input type="checkbox" class="onoffswitch-checkbox" id="show-badge">`
			`<span class="onoffswitch-label"></span>`
			`</span>`
			`</label>`
optionsUI: group options and shorten labels 2017-04-14 07:50:52 +00:00			`<label>`
			`<span i18n-text="optionsBadgeNormal"></span>`
			`<input type="color" id="badgeNormal">`
			`</label>`
			`<label>`
			`<span i18n-text="optionsBadgeDisabled"></span>`
			`<input type="color" id="badgeDisabled">`
			`</label>`
			`</div>`
			`</div>`
Expose iframes via HTML[stylus-iframe] * convert actions to buttons 2017-04-28 23:36:10 +00:00
optionsUI: group options and shorten labels 2017-04-14 07:50:52 +00:00			`<div class="block">`
			`<h1 i18n-text="optionsCustomizePopup"></h1>`
			`<div class="items">`
			`<label>`
			`<span i18n-text="optionsPopupWidth"></span>`
			`<input type="number" id="popupWidth" min="200" max="800">`
			`</label>`
			`<label>`
			`<span i18n-text="popupStylesFirst"></span>`
			`<span class="onoffswitch">`
OptionsUI: add 2 global options + simplify * [x] show badge with active styles count * [x] styles on top in the popup * Simplify since we use a persistent background page so it's always there for us 2017-03-28 10:05:58 +00:00			`<input type="checkbox" class="onoffswitch-checkbox" id="popup.stylesFirst">`
optionsUI: group options and shorten labels 2017-04-14 07:50:52 +00:00			`<span class="onoffswitch-label" for="popup.stylesFirst"></span>`
			`</span>`
			`</label>`
			`</div>`
OptionsUI: restructure html, make it userstylable 2017-03-28 00:42:07 +00:00			`</div>`
Expose iframes via HTML[stylus-iframe] * convert actions to buttons 2017-04-28 23:36:10 +00:00
optionsUI: group options and shorten labels 2017-04-14 07:50:52 +00:00			`<div class="block">`
			`<h1 i18n-text="optionsCustomizeUpdate"></h1>`
			`<div class="items">`
			`<label>`
			`<span i18n-text="optionsUpdateInterval"><sup>1</sup></span>`
			`<input type="number" min="0" id="updateInterval">`
			`</label>`
			`</div>`
			`</div>`
Expose iframes via HTML[stylus-iframe] * convert actions to buttons 2017-04-28 23:36:10 +00:00
optionsUI: group options and shorten labels 2017-04-14 07:50:52 +00:00			`<div class="block">`
Expose iframes via HTML[stylus-iframe] * convert actions to buttons 2017-04-28 23:36:10 +00:00			`<h1 i18n-text="optionsAdvanced"></h1>`
optionsUI: group options and shorten labels 2017-04-14 07:50:52 +00:00			`<div class="items">`
			`<label>`
Expose iframes via HTML[stylus-iframe] * convert actions to buttons 2017-04-28 23:36:10 +00:00			`<span i18n-text="optionsAdvancedExposeIframes"> <sup>2</sup></span>`
			`<span class="onoffswitch">`
			`<input type="checkbox" class="onoffswitch-checkbox" id="exposeIframes">`
			`<span class="onoffswitch-label" for="exposeIframes"></span>`
			`</span>`
optionsUI: group options and shorten labels 2017-04-14 07:50:52 +00:00			`</label>`
Expose iframes via HTML[stylus-iframe] * convert actions to buttons 2017-04-28 23:36:10 +00:00			`</div>`
			`</div>`

			`<div class="block" id="actions">`
			`<button data-cmd="reset" i18n-text="optionsResetButton" i18n-title="optionsReset"></button>`
			`<button data-cmd="open-manage" i18n-text="optionsOpenManager"><sup class="chromium-only">3</sup></button>`
			`<div data-cmd="check-updates">`
			`<button i18n-text="optionsCheck" i18n-title="optionsCheckUpdate">`
			`<span id="update-progress"></span>`
			`</button>`
optionsUI: show progress bar and # of installed updates 2017-04-14 15:30:09 +00:00			`<div id="updates-installed" i18n-text="updatesCurrentlyInstalled"></div>`
optionsUI: group options and shorten labels 2017-04-14 07:50:52 +00:00			`</div>`
			`</div>`
OptionsUI: restructure html, make it userstylable 2017-03-28 00:42:07 +00:00			`</div>`

			`<div id="notes">`
			`<ol>`
optionsUI: add a post-import update hint 2017-04-27 11:39:51 +00:00			`<li>`
			`<p i18n-text="optionsUpdateIntervalNote"></p>`
			`<p i18n-text="optionsUpdateImportNote"></p>`
			`</li>`
Expose iframes via HTML[stylus-iframe] * convert actions to buttons 2017-04-28 23:36:10 +00:00			`<li i18n-text="optionsAdvancedExposeIframesNote"></li>`
fixups for Opera/Vivaldi/Firefox-compatibility 2017-04-09 06:43:51 +00:00			`<li class="chromium-only">`
			`<a data-cmd="open-keyboard"`
			`i18n-text="optionsOpenManagerNote"`
			`href="chrome://extensions/configureCommands"></a>`
OptionsUI: restructure html, make it userstylable 2017-03-28 00:42:07 +00:00			`</li>`
			`</ol>`
adding options UI (fixes #22, #24) 2017-02-14 15:35:53 +00:00			`</div>`

			`<script src="index.js"></script>`
			`</body>`
			`</html>`