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
		
			
				
	
	
		
			181 lines
		
	
	
		
			7.4 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			181 lines
		
	
	
		
			7.4 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<html id="stylus">
 | 
						|
 | 
						|
<head>
 | 
						|
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 | 
						|
  <title i18n-text="manageTitle"></title>
 | 
						|
  <link rel="stylesheet" href="manage.css">
 | 
						|
  <link rel="stylesheet" href="msgbox/msgbox.css">
 | 
						|
 | 
						|
  <style id="style-overrides"></style>
 | 
						|
 | 
						|
  <!-- Notes:
 | 
						|
    * Chrome doesn't garbage-collect (or even leaks) SVG <symbol> referenced via <use> so we'll embed the code directly
 | 
						|
    * inter-tag whitespace in templates is automatically removed in localization.js
 | 
						|
    * i18n-anything attribute automatically creates "anything" attribute
 | 
						|
  -->
 | 
						|
 | 
						|
  <template data-id="style">
 | 
						|
    <div class="entry">
 | 
						|
      <h2 class="style-name">
 | 
						|
        <a class="style-name-link" href="edit.html?id="></a>
 | 
						|
        <a target="_blank" class="homepage">
 | 
						|
          <svg class="svg-icon" viewBox="0 0 20 20">
 | 
						|
            <polygon shape-rendering="crispEdges" points="3,3 3,17 17,17 17,13 15,13 15,15 5,15 5,5 7,5 7,3 "/>
 | 
						|
            <polygon points="10,3 12.5,5.5 8,10 10,12 14.5,7.5 17,10 17,3 "/>
 | 
						|
          </svg>
 | 
						|
        </a>
 | 
						|
      </h2>
 | 
						|
      <p class="applies-to">
 | 
						|
        <label i18n-text="appliesDisplay"></label>
 | 
						|
        <span class="targets"></span>
 | 
						|
      </p>
 | 
						|
      <p class="actions">
 | 
						|
        <a class="style-edit-link" href="edit.html?id=">
 | 
						|
          <button i18n-text="editStyleLabel"></button>
 | 
						|
        </a>
 | 
						|
        <button class="enable" i18n-text="enableStyleLabel"></button>
 | 
						|
        <button class="disable" i18n-text="disableStyleLabel"></button>
 | 
						|
        <button class="delete" i18n-text="deleteStyleLabel"></button>
 | 
						|
        <button class="check-update" i18n-text="checkForUpdate"></button>
 | 
						|
        <button class="update" i18n-text="installUpdate"></button>
 | 
						|
        <span class="update-note"></span>
 | 
						|
      </p>
 | 
						|
    </div>
 | 
						|
  </template>
 | 
						|
 | 
						|
  <template data-id="styleCompact">
 | 
						|
    <div class="entry">
 | 
						|
      <h2 class="style-name">
 | 
						|
        <input class="checker" type="checkbox" i18n-title="toggleStyle">
 | 
						|
        <a class="style-name-link" href="edit.html?id="></a>
 | 
						|
      </h2>
 | 
						|
      <p class="actions">
 | 
						|
        <a target="_blank" class="homepage">
 | 
						|
          <svg class="svg-icon" viewBox="0 0 20 20">
 | 
						|
            <polygon shape-rendering="crispEdges" points="3,3 3,17 17,17 17,13 15,13 15,15 5,15 5,5 7,5 7,3 "/>
 | 
						|
            <polygon points="10,3 12.5,5.5 8,10 10,12 14.5,7.5 17,10 17,3 "/>
 | 
						|
          </svg>
 | 
						|
        </a>
 | 
						|
        <span i18n-title="deleteStyleLabel">
 | 
						|
          <svg class="svg-icon delete" viewBox="0 0 14 16">
 | 
						|
            <path shape-rendering="crispEdges" fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/>
 | 
						|
          </svg>
 | 
						|
        </span>
 | 
						|
        <span class="updater-icons">
 | 
						|
          <span class="check-update" i18n-title="checkForUpdate">
 | 
						|
            <svg class="svg-icon" viewBox="0 0 20 20">
 | 
						|
              <path d="M15,11c-0.5,2.3-2.5,4.1-5,4.1c-2.4,0-4.5-1.7-5-4.1H3.3c0.5,3.3,3.3,5.8,6.7,5.8s6.2-2.5,6.7-5.8H15z"/>
 | 
						|
              <path d="M10,3.2C6.6,3.2,3.8,5.7,3.3,9H5c0.5-2.3,2.5-4.1,5-4.1c2.4,0,4.5,1.7,5,4.1h1.7C16.2,5.7,13.4,3.2,10,3.2z"/>
 | 
						|
              <polygon shape-rendering="crispEdges" points="17,3 17,9 11,9 "/>
 | 
						|
              <polygon shape-rendering="crispEdges" points="9.1,11 3,11 3,17.1 "/>
 | 
						|
              <polygon points="19.9,18.6 15.1,13.8 13.8,15.1 18.6,19.9 "/>
 | 
						|
            </svg>
 | 
						|
          </span>
 | 
						|
          <span class="update" i18n-title="installUpdate">
 | 
						|
            <svg class="svg-icon" viewBox="0 0 20 20">
 | 
						|
              <polygon points="16,8 12,8 12,3 8,3 8,8 4,8 10,14 "/>
 | 
						|
              <rect shape-rendering="crispEdges" x="4" y="15" width="12" height="2"/>
 | 
						|
            </svg>
 | 
						|
          </span>
 | 
						|
          <span class="up-to-date" i18n-title="updateCheckSucceededNoUpdate">
 | 
						|
            <svg class="svg-icon" viewBox="0 0 20 20">
 | 
						|
              <polygon shape-rendering="crispEdges" points="4,9 8,13 18,3 19,4 8,15 3,10 "/>
 | 
						|
            </svg>
 | 
						|
          </span>
 | 
						|
          <span class="updated" i18n-title="updateCompleted">
 | 
						|
            <svg class="svg-icon" viewBox="0 0 20 20">
 | 
						|
              <polygon shape-rendering="crispEdges" points="4,9 8,13 18,3 19,4 8,15 3,10 "/>
 | 
						|
            </svg>
 | 
						|
          </span>
 | 
						|
          <span class="update-note"></span>
 | 
						|
        </span>
 | 
						|
      </p>
 | 
						|
      <div class="applies-to">
 | 
						|
        <div class="targets"></div>
 | 
						|
        <span class="expander">...</span>
 | 
						|
      </div>
 | 
						|
    </div>
 | 
						|
  </template>
 | 
						|
 | 
						|
  <template data-id="appliesToTarget">
 | 
						|
    <span class="target"></span>
 | 
						|
  </template>
 | 
						|
 | 
						|
  <template data-id="appliesToSeparator">
 | 
						|
    <span class="sep">, </span>
 | 
						|
  </template>
 | 
						|
 | 
						|
  <template data-id="appliesToEverything">
 | 
						|
    <span class="target" i18n-text="appliesToEverything"></span>
 | 
						|
  </template>
 | 
						|
 | 
						|
  <template data-id="extraAppliesTo">
 | 
						|
    <details class="applies-to-extra">
 | 
						|
      <summary i18n-html="appliesDisplayTruncatedSuffix"></summary>
 | 
						|
    </details>
 | 
						|
  </template>
 | 
						|
 | 
						|
  <script src="dom.js"></script>
 | 
						|
  <script src="messaging.js"></script>
 | 
						|
  <script src="prefs.js"></script>
 | 
						|
  <script src="apply.js"></script>
 | 
						|
  <script src="localization.js"></script>
 | 
						|
  <script src="manage.js"></script>
 | 
						|
</head>
 | 
						|
 | 
						|
<body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage">
 | 
						|
<div id="header">
 | 
						|
  <h1 id="manage-heading" i18n-text="manageHeading"></h1>
 | 
						|
  <fieldset>
 | 
						|
    <legend id="filters" i18n-text="manageFilters"></legend>
 | 
						|
    <label><input id="manage.onlyEnabled" type="checkbox"><span i18n-text="manageOnlyEnabled"></span></label>
 | 
						|
    <label><input id="manage.onlyEdited" type="checkbox"><span i18n-text="manageOnlyEdited"></span></label>
 | 
						|
    <label id="onlyUpdates" class="hidden"><input type="checkbox"><span i18n-text="manageOnlyUpdates"></span></label>
 | 
						|
    <input id="search" type="search" i18n-placeholder="searchStyles">
 | 
						|
  </fieldset>
 | 
						|
  <p>
 | 
						|
    <button id="check-all-updates" i18n-text="checkAllUpdates"></button>
 | 
						|
  </p>
 | 
						|
  <p>
 | 
						|
    <button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
 | 
						|
    <span id="update-all-no-updates" class="hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
 | 
						|
  </p>
 | 
						|
  <p>
 | 
						|
    <a href="edit.html">
 | 
						|
      <button id="add-style-label" i18n-text="addStyleLabel"></button>
 | 
						|
    </a>
 | 
						|
  </p>
 | 
						|
  <div id="options">
 | 
						|
    <h2 id="options-heading" i18n-text="optionsHeading"></h2>
 | 
						|
    <label><input id="manage.newUI" type="checkbox"><span i18n-text="manageNewUI"></span></label>
 | 
						|
    <div id="newUIoptions">
 | 
						|
      <label><input id="manage.newUI.favicons" type="checkbox"><span i18n-text="manageFavicons"></span></label>
 | 
						|
      <label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
 | 
						|
    </div>
 | 
						|
    <p>
 | 
						|
      <button id="manage-options-button" i18n-text="openOptionsManage"></button>
 | 
						|
      <button id="manage-shortcuts-button" class="chromium-only" i18n-text="openOptionsShortcuts"></button>
 | 
						|
    </p>
 | 
						|
    <p>
 | 
						|
      <a id="find-editor-styles" i18n-text="editorStylesButton"
 | 
						|
       href="https://userstyles.org/styles/browse/chrome-extension" target="_blank"></a>
 | 
						|
    <p>
 | 
						|
  </div>
 | 
						|
  <div id="backup">
 | 
						|
    <h2 id="backup-title" i18n-text="backupButtons"></h2>
 | 
						|
    <span id="backup-message" i18n-text="backupMessage"></span>
 | 
						|
    <p>
 | 
						|
      <button id="file-all-styles" i18n-text="bckpInstStyles"></button>
 | 
						|
      <button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
 | 
						|
    </p>
 | 
						|
  </div>
 | 
						|
  <p id="manage-text" i18n-html="manageText"></p>
 | 
						|
</div>
 | 
						|
<div id="installed"></div>
 | 
						|
 | 
						|
<script src="backup/fileSaveLoad.js"></script>
 | 
						|
<script src="msgbox/msgbox.js"></script>
 | 
						|
 | 
						|
</body>
 | 
						|
</html>
 |