embed SVG to help buggy Chrome's GC
Chrome doesn't garbage-collect (or even leaks) SVG <symbol> referenced via <use> so we'll embed the code directly on manage and popup pages where dozens/hundreds of svgs are displayed.
This commit is contained in:
tophf
parent
4f5e56bc55
commit
f147b409df
84
manage.html
84
manage.html
|
|
@ -8,6 +8,12 @@
|
||||||
|
|
||||||
<style id="style-overrides"></style>
|
<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">
|
<template data-id="style">
|
||||||
<div class="entry">
|
<div class="entry">
|
||||||
<h2 class="style-name"><a class="style-name-link" href="edit.html?id="></a></h2>
|
<h2 class="style-name"><a class="style-name-link" href="edit.html?id="></a></h2>
|
||||||
|
|
@ -33,21 +39,50 @@
|
||||||
<a class="style-name-link" href="edit.html?id="></a>
|
<a class="style-name-link" href="edit.html?id="></a>
|
||||||
</h2>
|
</h2>
|
||||||
<p class="actions">
|
<p class="actions">
|
||||||
<span i18n-title="deleteStyleLabel"><svg class="svg-icon delete"><use xlink:href="#svg-icon-remove"/></svg></span>
|
<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="updater-icons">
|
||||||
<span class="check-update" i18n-title="checkForUpdate"><svg class="svg-icon"><use xlink:href="#svg-icon-check"/></svg></span>
|
<span class="check-update" i18n-title="checkForUpdate">
|
||||||
<span class="update" i18n-title="installUpdate"><svg class="svg-icon"><use xlink:href="#svg-icon-update"/></svg></span>
|
<svg class="svg-icon" viewBox="0 0 20 20">
|
||||||
<span class="up-to-date" i18n-title="updateCheckSucceededNoUpdate"><svg class="svg-icon"><use xlink:href="#svg-icon-uptodate"/></svg></span>
|
<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"/>
|
||||||
<span class="updated" i18n-title="updateCompleted"><svg class="svg-icon"><use xlink:href="#svg-icon-uptodate"/></svg></span>
|
<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 class="update-note"></span>
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<div class="applies-to"><div class="targets"></div></div>
|
<div class="applies-to">
|
||||||
|
<div class="targets"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template data-id="styleHomepage">
|
<template data-id="styleHomepage">
|
||||||
<a target="_blank" class="homepage"><svg class="svg-icon"><use xlink:href="#svg-icon-external-link"/></svg></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>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template data-id="appliesToTarget">
|
<template data-id="appliesToTarget">
|
||||||
|
|
@ -138,41 +173,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="installed"></div>
|
<div id="installed"></div>
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;">
|
|
||||||
|
|
||||||
<symbol id="svg-icon-external-link" 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 "/>
|
|
||||||
</symbol>
|
|
||||||
|
|
||||||
<symbol id="svg-icon-close" viewBox="0 0 12 16">
|
|
||||||
<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>
|
|
||||||
</symbol>
|
|
||||||
|
|
||||||
<symbol id="svg-icon-remove" 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">
|
|
||||||
</path>
|
|
||||||
</symbol>
|
|
||||||
|
|
||||||
<symbol id="svg-icon-check" 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 "/>
|
|
||||||
</symbol>
|
|
||||||
|
|
||||||
<symbol id="svg-icon-update" 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"/>
|
|
||||||
</symbol>
|
|
||||||
|
|
||||||
<symbol id="svg-icon-uptodate" viewBox="0 0 20 20">
|
|
||||||
<polygon shape-rendering="crispEdges" points="4,9 8,13 18,3 19,4 8,15 3,10 "/>
|
|
||||||
</symbol>
|
|
||||||
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<script src="backup/fileSaveLoad.js"></script>
|
<script src="backup/fileSaveLoad.js"></script>
|
||||||
<script src="msgbox/msgbox.js"></script>
|
<script src="msgbox/msgbox.js"></script>
|
||||||
|
|
||||||
|
|
|
||||||
24
popup.html
24
popup.html
|
|
@ -4,6 +4,12 @@
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||||
<link rel="stylesheet" href="popup.css">
|
<link rel="stylesheet" href="popup.css">
|
||||||
|
|
||||||
|
<!-- 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">
|
||||||
<div class="left-gutter">
|
<div class="left-gutter">
|
||||||
|
|
@ -15,11 +21,14 @@
|
||||||
<a href="#" class="enable" i18n-text="enableStyleLabel"></a>
|
<a href="#" class="enable" i18n-text="enableStyleLabel"></a>
|
||||||
<a href="#" class="disable" i18n-text="disableStyleLabel"></a>
|
<a href="#" class="disable" i18n-text="disableStyleLabel"></a>
|
||||||
<a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel">
|
<a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel">
|
||||||
<!--`i18n-title` automatically creates `title` attribute -->
|
<svg class="svg-icon edit" viewBox="0 0 14 16">
|
||||||
<svg class="svg-icon edit"><use xlink:href="#svg-icon-edit"/></svg>
|
<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>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="delete" i18n-title="deleteStyleLabel">
|
<a href="#" class="delete" i18n-title="deleteStyleLabel">
|
||||||
<svg class="svg-icon remove"><use xlink:href="#svg-icon-remove"/></svg>
|
<svg class="svg-icon remove" viewBox="0 0 14 16">
|
||||||
|
<path 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>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -101,14 +110,5 @@
|
||||||
<button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>
|
<button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
|
|
||||||
<symbol id="svg-icon-edit" width="14" height="16" 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>
|
|
||||||
</symbol>
|
|
||||||
<symbol id="svg-icon-remove" width="14" height="16" viewBox="0 0 14 16">
|
|
||||||
<path 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"></path>
|
|
||||||
</symbol>
|
|
||||||
</svg>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user