stylus/popup.html

<html id="stylus">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="popup.css">

    <template data-id="style">
        <div class="entry">
            <div class="left-gutter">
                <input class="checker" type="checkbox">
            </div>
            <div class="main-controls">
                <label class="style-name"></label>
                <div class="actions">
                    <a href="#" class="enable" i18n-text="enableStyleLabel"></a>
                    <a href="#" class="disable" i18n-text="disableStyleLabel"></a>
                    <a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel"> <!--`i18n-title` automatically creates `title` attribute -->
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon edit" fill="hsl(0, 0%, 40%)" height="16" width="14" 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>
                        </svg>
                    </a>
                    <a href="#" class="delete" i18n-title="deleteStyleLabel">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon remove" fill="hsl(0, 0%, 40%)" height="16" width="14" 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>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </template>

    <template data-id="writeStyle">
        <a class="write-style-link"></a>
    </template>

    <template data-id="noStyles">
        <div id="no-styles" class="entry" i18n-text="noStylesForSite"></div>
    </template>

    <script src="localization.js"></script>
    <script src="health.js"></script>
    <script src="storage.js"></script>
    <script src="messaging.js"></script>
    <script src="apply.js"></script>
    <script src="dom.js"></script>

    <script src="popup.js"></script>
</head>

<body id="stylus-popup">
    <!-- confirm -->
    <div id="confirm">
        <div>
            <b>Style's Name</b>
            <span i18n-text="deleteStyleConfirm"></span>
            <div>
                <button i18n-text="confirmDelete" data-cmd="ok"></button>
                <button i18n-text="confirmCancel" data-cmd="cancel"></button>
            </div>
        </div>
    </div>

    <div id="unavailable">
        <div class="main-controls">
            <span id="unavailable-message" i18n-text="stylishUnavailableForURL"></span>
        </div>
    </div>
    <div id="installed"></div>
    <div class="actions">
        <div id="disable-all-wrapper">
            <div class="left-gutter">
                <input id="disableAll" type="checkbox">
            </div>
            <div class="main-controls">
                <label id="disableAll-label" for="disableAll" i18n-text="disableAllStyles"></label>
            </div>
        </div>
        <div class="left-gutter"></div>
        <div class="main-controls">
            <div id="find-styles">
                <a id="find-styles-link" href="#" i18n-text="findStylesForSite"></a>
            </div>
            <div id="write-style">
                <span id="write-style-for" i18n-text="writeStyleFor"><br></span>
            </div>
        </div>
    <!-- Actions -->
    <div id="popup-options">
        <button id="popup-manage-button" i18n-text="openManage"></button>
        <button id="popup-options-button" i18n-text="openOptionsPopup"></button>
        <button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>
    </div>
    </div>
</body>

</html>
Add <html id="stylus"> to all pages 2017-03-23 03:41:50 +00:00			`<html id="stylus">`
initial commit 2012-04-16 01:56:12 +00:00
Options UI discoverability and other fixes #34 2017-02-28 23:57:03 +00:00			`<head>`
			`<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">`
			`<link rel="stylesheet" href="popup.css">`
Move html templates to html file 2015-07-19 15:27:19 +00:00
Options UI discoverability and other fixes #34 2017-02-28 23:57:03 +00:00			`<template data-id="style">`
confirmDelete: extract, refactor, use in manage 2017-03-25 03:04:24 +00:00			`<div class="entry">`
Options UI discoverability and other fixes #34 2017-02-28 23:57:03 +00:00			`<div class="left-gutter">`
			`<input class="checker" type="checkbox">`
			`</div>`
			`<div class="main-controls">`
			`<label class="style-name"></label>`
			`<div class="actions">`
			`<a href="#" class="enable" i18n-text="enableStyleLabel"></a>`
			`<a href="#" class="disable" i18n-text="disableStyleLabel"></a>`
revert back localization.js changes based on https://github.com/schomery/stylish-chrome/commit/2da4a8708c93740f16a4fbc5b6978b06b4d54538#commitcomment-21270367 2017-03-11 15:53:53 +00:00			<a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel"> <!--`i18n-title` automatically creates `title` attribute -->
Switch info/external style link icons from img to svg Switched info to `i` and found a pretty nice external link icon imo. @tophf As for pixelation on the info icons, you mentioned maybe a lighter color would help. For all icons besides external links, I made them lighter with darker hovers. Besides a really high zoom, I never saw any issue to begin with, but let me know if they're alright. I also changed them to use their exact original dimensions, so maybe that helps. 2017-03-30 23:49:03 +00:00			`<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon edit" fill="hsl(0, 0%, 40%)" height="16" width="14" viewBox="0 0 14 16">`
Supporting tooltip; https://github.com/schomery/stylish-chrome/issues/38#issuecomment-285350914 2017-03-11 09:11:38 +00:00			`<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>`
			`</svg>`
			`</a>`
revert back localization.js changes based on https://github.com/schomery/stylish-chrome/commit/2da4a8708c93740f16a4fbc5b6978b06b4d54538#commitcomment-21270367 2017-03-11 15:53:53 +00:00			`<a href="#" class="delete" i18n-title="deleteStyleLabel">`
Switch info/external style link icons from img to svg Switched info to `i` and found a pretty nice external link icon imo. @tophf As for pixelation on the info icons, you mentioned maybe a lighter color would help. For all icons besides external links, I made them lighter with darker hovers. Besides a really high zoom, I never saw any issue to begin with, but let me know if they're alright. I also changed them to use their exact original dimensions, so maybe that helps. 2017-03-30 23:49:03 +00:00			`<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon remove" fill="hsl(0, 0%, 40%)" height="16" width="14" viewBox="0 0 14 16">`
Supporting tooltip; https://github.com/schomery/stylish-chrome/issues/38#issuecomment-285350914 2017-03-11 09:11:38 +00:00			`<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>`
			`</svg>`
			`</a>`
Options UI discoverability and other fixes #34 2017-02-28 23:57:03 +00:00			`</div>`
			`</div>`
			`</div>`
			`</template>`
initial commit 2012-04-16 01:56:12 +00:00
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			`<template data-id="writeStyle">`
			`<a class="write-style-link"></a>`
			`</template>`

confirmDelete: extract, refactor, use in manage 2017-03-25 03:04:24 +00:00			`<template data-id="noStyles">`
			`<div id="no-styles" class="entry" i18n-text="noStylesForSite"></div>`
			`</template>`

Options UI discoverability and other fixes #34 2017-02-28 23:57:03 +00:00			`<script src="localization.js"></script>`
			`<script src="health.js"></script>`
			`<script src="storage.js"></script>`
			`<script src="messaging.js"></script>`
			`<script src="apply.js"></script>`
dom.js: extract common DOM functions 2017-03-25 05:54:58 +00:00			`<script src="dom.js"></script>`
confirmDelete: extract, refactor, use in manage 2017-03-25 03:04:24 +00:00
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			`<script src="popup.js"></script>`
Options UI discoverability and other fixes #34 2017-02-28 23:57:03 +00:00			`</head>`
initial commit 2012-04-16 01:56:12 +00:00
Change 'body' id 2017-03-05 14:40:48 +00:00			`<body id="stylus-popup">`
new fix for https://github.com/schomery/stylish-chrome/issues/43#issuecomment-286154032 2017-03-13 19:26:43 +00:00			`<!-- confirm -->`
			`<div id="confirm">`
			`<div>`
			`<b>Style's Name</b>`
			`<span i18n-text="deleteStyleConfirm"></span>`
			`<div>`
confirmDelete: extract, refactor, use in manage 2017-03-25 03:04:24 +00:00			`<button i18n-text="confirmDelete" data-cmd="ok"></button>`
Reverse button order when OS is not Windows 2017-03-25 20:39:21 +00:00			`<button i18n-text="confirmCancel" data-cmd="cancel"></button>`
new fix for https://github.com/schomery/stylish-chrome/issues/43#issuecomment-286154032 2017-03-13 19:26:43 +00:00			`</div>`
			`</div>`
			`</div>`

Options UI discoverability and other fixes #34 2017-02-28 23:57:03 +00:00			`<div id="unavailable">`
confirmDelete: extract, refactor, use in manage 2017-03-25 03:04:24 +00:00			`<div class="main-controls">`
			`<span id="unavailable-message" i18n-text="stylishUnavailableForURL"></span>`
Options UI discoverability and other fixes #34 2017-02-28 23:57:03 +00:00			`</div>`
			`</div>`
			`<div id="installed"></div>`
			`<div class="actions">`
			`<div id="disable-all-wrapper">`
			`<div class="left-gutter">`
			`<input id="disableAll" type="checkbox">`
			`</div>`
			`<div class="main-controls">`
			`<label id="disableAll-label" for="disableAll" i18n-text="disableAllStyles"></label>`
			`</div>`
			`</div>`
			`<div class="left-gutter"></div>`
			`<div class="main-controls">`
			`<div id="find-styles">`
			`<a id="find-styles-link" href="#" i18n-text="findStylesForSite"></a>`
			`</div>`
a few changes in the popup look based on #38 2017-03-06 13:54:56 +00:00			`<div id="write-style">`
			`<span id="write-style-for" i18n-text="writeStyleFor"><br></span>`
Options UI discoverability and other fixes #34 2017-02-28 23:57:03 +00:00			`</div>`
			`</div>`
a few changes in the popup look based on #38 2017-03-06 13:54:56 +00:00			`<!-- Actions -->`
			`<div id="popup-options">`
			`<button id="popup-manage-button" i18n-text="openManage"></button>`
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			`<button id="popup-options-button" i18n-text="openOptionsPopup"></button>`
a few changes in the popup look based on #38 2017-03-06 13:54:56 +00:00			`<button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>`
			`</div>`
Options UI discoverability and other fixes #34 2017-02-28 23:57:03 +00:00			`</div>`
issue 44 Stop using deprecated Chrome APIs 2012-08-20 01:14:33 +00:00			`</body>`
Options UI discoverability and other fixes #34 2017-02-28 23:57:03 +00:00
a few changes in the popup look based on #38 2017-03-06 13:54:56 +00:00			`</html>`