open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ditch tabs & add header icons

Browse Source
This commit is contained in:
Rob Garrison 2018-12-14 07:03:49 -06:00
parent 8f87494dec
commit 596d6a9ca9
5 changed files with 150 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_locales/en/messages.json
View File

@ -554,6 +554,10 @@
"message": "Get help", "message": "Get help",
"description": "Homepage link text on the manage page e.g. https://add0n.com/stylus.html#features with chat/FAQ/intro/info" "description": "Homepage link text on the manage page e.g. https://add0n.com/stylus.html#features with chat/FAQ/intro/info"
}, },
"linkChat": {
"message": "Chat with us",
"description": "Link to open a new browser tab to chat with users & developers on Discord"
},
"linkGetStyles": { "linkGetStyles": {
"message": "Get styles", "message": "Get styles",
"description": "Help link text on the manage page e.g. https://userstyles.org" "description": "Help link text on the manage page e.g. https://userstyles.org"

107
manage.html
View File

@ -54,19 +54,19 @@
<span class="entry-labels"></span> <span class="entry-labels"></span>
</div> </div>
<div class="entry-col entry-actions"> <div class="entry-col entry-actions">
<a href="#" class="entry-homepage"> <a href="#" class="entry-homepage tt-w">
<svg class="svg-icon home" viewBox="0 0 24 24"> <svg class="svg-icon home" viewBox="0 0 24 24">
<path d="M20 21h-7v-6h-2v6H4v-8H0L12 2l12 11h-4v8zm-5-2h3v-8h1l-7-6-7 6h1v8h3v-6h6v6z"/> <path d="M20 21h-7v-6h-2v6H4v-8H0L12 2l12 11h-4v8zm-5-2h3v-8h1l-7-6-7 6h1v8h3v-6h6v6z"/>
</svg> </svg>
</a> </a>
<a href="#" class="entry-support"> <a href="#" class="entry-support tt-w">
<svg class="svg-icon help" viewBox="0 0 24 24"> <svg class="svg-icon help" viewBox="0 0 24 24">
<path d="M11 18h2v-2h-2v2zm1-16a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 <path d="M11 18h2v-2h-2v2zm1-16a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1
0-16 8.01 8.01 0 0 1 0 16zm0-14a4 4 0 0 0-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 0-16 8.01 8.01 0 0 1 0 16zm0-14a4 4 0 0 0-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3
5h2c0-2.25 3-2.5 3-5a4 4 0 0 0-4-4z"/> 5h2c0-2.25 3-2.5 3-5a4 4 0 0 0-4-4z"/>
</svg> </svg>
</a> </a>
<a href="#" class="entry-configure-usercss" i18n-data-title="configureStyle"> <a href="#" class="entry-configure-usercss tt-e" i18n-data-title="configureStyle">
<svg class="svg-icon config" viewBox="0 0 24 24"> <svg class="svg-icon config" viewBox="0 0 24 24">
<path d="M19.43 12.98a7.8 7.8 0 0 0 0-1.96l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5 <path d="M19.43 12.98a7.8 7.8 0 0 0 0-1.96l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5
0 0 0-.61-.22l-2.49 1a7.3 7.3 0 0 0-1.69-.98l-.38-2.65A.49.49 0 0 0 14 2h-4a.49.49 0 0 0-.61-.22l-2.49 1a7.3 7.3 0 0 0-1.69-.98l-.38-2.65A.49.49 0 0 0 14 2h-4a.49.49
@ -85,14 +85,14 @@
1.13zM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/> 1.13zM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
</svg> </svg>
</a> </a>
<a href="#" class="entry-edit" i18n-data-title="editStyleLabel"> <a href="#" class="entry-edit tt-e" i18n-data-title="editStyleLabel">
<svg class="svg-icon edit" viewBox="0 0 24 24"> <svg class="svg-icon edit" viewBox="0 0 24 24">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM5.92 19H5v-.92l9.06-9.06.92.92L5.92 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM5.92 19H5v-.92l9.06-9.06.92.92L5.92
19zM20.71 5.63l-2.34-2.34c-.2-.2-.45-.29-.71-.29s-.51.1-.7.29l-1.83 1.83 3.75 3.75 19zM20.71 5.63l-2.34-2.34c-.2-.2-.45-.29-.71-.29s-.51.1-.7.29l-1.83 1.83 3.75 3.75
1.83-1.83a1 1 0 0 0 0-1.41z"/> 1.83-1.83a1 1 0 0 0 0-1.41z"/>
</svg> </svg>
</a> </a>
<a href="#" class="entry-delete" i18n-data-title="deleteStyleLabel"> <a href="#" class="entry-delete tt-e" i18n-data-title="deleteStyleLabel">
<svg class="svg-icon remove" viewBox="0 0 24 24"> <svg class="svg-icon remove" viewBox="0 0 24 24">
<path d="M6 19c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4z"/> <path d="M6 19c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4z"/>
</svg> </svg>
@ -104,7 +104,7 @@
</svg> </svg>
</div> </div>
<div class="entry-col entry-version"></div> <div class="entry-col entry-version"></div>
<div class="entry-col entry-last-update"></div> <div class="entry-col entry-last-update tt-w"></div>
<div class="entry-col entry-applies-to"> <div class="entry-col entry-applies-to">
<div class="targets"></div> <div class="targets"></div>
</div> </div>
@ -113,7 +113,7 @@
<template data-id="updaterIcons"> <template data-id="updaterIcons">
<span class="updater-icons entry-col entry-update-state"> <span class="updater-icons entry-col entry-update-state">
<a href="#" class="check-update" i18n-data-title="checkForUpdate" tabindex="0"> <a href="#" class="check-update tt-e" i18n-data-title="checkForUpdate" tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20"> <svg class="svg-icon" viewBox="0 0 20 20">
<path d="M18,16.6l-3.1-3.1c0.5-0.7,0.9-1.5,1-2.5h-2.1c-0.4,1.7-2,3-3.9,3c-0.8,0-1.6-0.3-2.3-0.7 <path d="M18,16.6l-3.1-3.1c0.5-0.7,0.9-1.5,1-2.5h-2.1c-0.4,1.7-2,3-3.9,3c-0.8,0-1.6-0.3-2.3-0.7
L10,11H6.1H4.1H4v6l2.3-2.3c1,0.8,2.3,1.3,3.7,1.3c1.3,0,2.5-0.4,3.5-1.1l3.1,3.1L18,16.6z"/> L10,11H6.1H4.1H4v6l2.3-2.3c1,0.8,2.3,1.3,3.7,1.3c1.3,0,2.5-0.4,3.5-1.1l3.1,3.1L18,16.6z"/>
@ -121,18 +121,18 @@
C7,4,4.6,6.2,4.1,9h2.1C6.6,7.3,8.1,6,10,6z"/> C7,4,4.6,6.2,4.1,9h2.1C6.6,7.3,8.1,6,10,6z"/>
</svg> </svg>
</a> </a>
<a href="#" class="update" i18n-data-title="installUpdate" tabindex="0"> <a href="#" class="update tt-e" i18n-data-title="installUpdate" tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20"> <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 "/> <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"/> <rect shape-rendering="crispEdges" x="4" y="15" width="12" height="2"/>
</svg> </svg>
</a> </a>
<span class="up-to-date" i18n-data-title="updateCheckSucceededNoUpdate"> <span class="up-to-date tt-e" i18n-data-title="updateCheckSucceededNoUpdate">
<svg class="svg-icon" viewBox="0 0 20 20"> <svg class="svg-icon" viewBox="0 0 20 20">
<polygon points="15.83 4.75 8.76 11.82 5.2 8.26 3.51 9.95 8.76 15.19 17.52 6.43 15.83 4.75"/> <polygon points="15.83 4.75 8.76 11.82 5.2 8.26 3.51 9.95 8.76 15.19 17.52 6.43 15.83 4.75"/>
</svg> </svg>
</span> </span>
<span class="updated" i18n-data-title="updateCompleted"> <span class="updated tt-e" i18n-data-title="updateCompleted">
<svg class="svg-icon" viewBox="0 0 20 20"> <svg class="svg-icon" viewBox="0 0 20 20">
<polygon points="15.83 4.75 8.76 11.82 5.2 8.26 3.51 9.95 8.76 15.19 17.52 6.43 15.83 4.75"/> <polygon points="15.83 4.75 8.76 11.82 5.2 8.26 3.51 9.95 8.76 15.19 17.52 6.43 15.83 4.75"/>
</svg> </svg>
@ -141,7 +141,11 @@
</template> </template>
<template data-id="appliesToTarget"> <template data-id="appliesToTarget">
<img class="target" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23666' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm7 6h-3l-1-4 4 4zm-7-4l2 4h-4l2-4zM4 14a8 8 0 0 1 0-4h4a17 17 0 0 0 0 4H4zm1 2h3l1 4-4-4zm3-8H5l4-4-1 4zm4 12l-2-4h4l-2 4zm2-6h-4a15 15 0 0 1 0-4h4a15 15 0 0 1 0 4zm1 6l1-4h3l-4 4zm1-6a17 17 0 0 0 0-4h4a8 8 0 0 1 0 4h-4z'/></svg>" async="true"/> <span class="target tt-w">
<svg class="svg-icon" viewBox="0 0 24 24">
<path fill="#666" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm7 6h-3l-1-4 4 4zm-7-4l2 4h-4l2-4zM4 14a8 8 0 0 1 0-4h4a17 17 0 0 0 0 4H4zm1 2h3l1 4-4-4zm3-8H5l4-4-1 4zm4 12l-2-4h4l-2 4zm2-6h-4a15 15 0 0 1 0-4h4a15 15 0 0 1 0 4zm1 6l1-4h3l-4 4zm1-6a17 17 0 0 0 0-4h4a8 8 0 0 1 0 4h-4z"/>
</svg>
</span>
</template> </template>
<template data-id="appliesToEverything"> <template data-id="appliesToEverything">
@ -192,6 +196,7 @@
<body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage"> <body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage">
<h1 id="main-header"> <h1 id="main-header">
<div>
<svg id="stylus-logo" width="32" height="32" viewBox="0 0 48 48"> <svg id="stylus-logo" width="32" height="32" viewBox="0 0 48 48">
<path fill="#285959" d="M44.59 20.14c-.02-.86 0-13.6 0-13.6-.02-4.13-2.5-5.62-6.6-5.64H11.28C7.17.92 <path fill="#285959" d="M44.59 20.14c-.02-.86 0-13.6 0-13.6-.02-4.13-2.5-5.62-6.6-5.64H11.28C7.17.92
4.59 2.44 4.65 6.54v14.2c0 1.64-3.02 1.55-3.02 1.55v3.48s3.05.03 3.02 1.97v13.88c0 4.15 2.5 5.63 4.59 2.44 4.65 6.54v14.2c0 1.64-3.02 1.55-3.02 1.55v3.48s3.05.03 3.02 1.97v13.88c0 4.15 2.5 5.63
@ -211,19 +216,51 @@
<span class="ext-version"></span> <span class="ext-version"></span>
<span class="filter-stats-wrapper"> <span class="filter-stats-wrapper">
<span id="filters-stats"></span> <span id="filters-stats"></span>
<a id="reset-filters" href="#" tabindex="0"> <a id="reset-filters" class="tt-e" href="#" tabindex="0" i18n-data-title="genericResetLabel">
<svg class="svg-icon" viewBox="0 0 20 20"> <svg class="svg-icon" viewBox="0 0 20 20">
<title i18n-text="genericResetLabel"></title>
<polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5 <polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/> 5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
</svg> </svg>
</a> </a>
</span> </span>
<span class="tabs"> </div>
<a href="#" class="active">Manage</a> <div id="main-actions">
<a href="#">Options</a> <a href="edit.html" i18n-data-title="addStyleLabel" class="new-style tt-w">
<a href="#">Backup</a> <svg class="svg-icon" viewBox="0 0 24 24">
</span> <path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 16H5V5h14v14zm-8-2h2v-4h4v-2h-4V7h-2v4H7v2h4z"/>
</svg>
</a>
<span class="spacer"></span>
<a href="https://add0n.com/stylus.html#features" target="_blank" i18n-data-title="linkGetHelp" class="tt-w">
<svg class="svg-icon" viewBox="0 0 24 24">
<path d="M15 4v7H5.17L4 12.17V4h11m1-2H3a1 1 0 0 0-1 1v14l4-4h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm5 4h-2v9H6v2a1 1 0 0 0 1 1h11l4 4V7a1 1 0 0 0-1-1z"/>
</svg>
</a>
<a href="https://discordapp.com/widget?id=379521691774353408" target="_blank" i18n-data-title="linkChat" class="tt-w">
<svg class="svg-icon" viewBox="0 0 24 24">
<path d="M11 23.59v-3.6c-5.01-.26-9-4.42-9-9.49C2 5.26 6.26 1 11.5 1S21 5.26 21 10.5c0 4.95-3.44 9.93-8.57 12.4l-1.43.69zM11.5 3C7.36 3 4 6.36 4 10.5S7.36 18 11.5 18H13v2.3c3.64-2.3 6-6.08 6-9.8C19 6.36 15.64 3 11.5 3zm-1 11.5h2v2h-2zm2-1.5h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2h-2c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5z"/>
</svg>
</a>
<a href="https://github.com/openstyles/stylus/wiki" target="_blank" i18n-data-title="linkStylusWiki" class="tt-w">
<svg class="svg-icon" viewBox="0 0 24 24">
<path d="M6 2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6H6zm0 2h7v5h5v11H6V4zm2 8v2h8v-2H8zm0 4v2h8v-2H8z"/>
</svg>
</a>
<a href="https://www.transifex.com/github-7/Stylus" target="_blank" i18n-data-title="linkTranslate" class="tt-w">
<svg class="svg-icon" viewBox="0 0 24 24">
<path d="M4 2a2 2 0 0 0-2 2v9c0 1.1.9 2 2 2h1v2l2 2h2v1c0 1.1.9 2 2 2h9a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-5V4a2 2 0 0 0-2-2zm0 2h9v5h-2c-.66 0-1.23.32-1.6.81-.15-.1-.3-.24-.43-.34C9.6 8.8 10.23 8 10.75 7H12V6H9V5H8v1H5v1h1.13a.5.5 0 0 0-.1.5s.17.5.69 1.19c.19.24.45.52.75.81-1.15.97-2.13 1.4-2.13 1.4a.5.5 0 0 0 .38.94s1.2-.48 2.53-1.65c.23.18.5.35.78.53-.01.1-.03.18-.03.28v2H4zm2.88 3h2.68A9.8 9.8 0 0 1 8.2 8.84a6.59 6.59 0 0 1-.69-.75c-.44-.57-.5-.87-.5-.87A.53.53 0 0 0 6.87 7zm7.96 5h1.32L19 20h-1.16l-.75-2.19h-3.25L13.13 20H12zm.6.9c-.13.48-1.28 4.1-1.28 4.1h2.65s-1.22-3.63-1.34-4.1zM7 15h2v2H7z"/>
</svg>
</a>
<a href="https://userstyles.org" target="_blank" i18n-data-title="linkGetStyles" class="tt-w">
<svg class="svg-icon" viewBox="0 0 24 24">
<path d="M2.53 19.65l1.34.56v-9.03l-2.43 5.86a2.02 2.02 0 0 0 1.09 2.61zm19.5-3.7L17.07 3.98a2.01 2.01 0 0 0-2.6-1.08L7.1 5.95a2 2 0 0 0-1.08 2.6l4.96 11.97a2 2 0 0 0 2.6 1.08l7.36-3.05a2 2 0 0 0 1.09-2.6zm-9.2 3.8L7.87 7.79l7.35-3.04h.01l4.95 11.95-7.35 3.05z"/>
<circle cx="11" cy="9" r="1"/>
<path d="M5.88 19.75c0 1.1.9 2 2 2h1.45l-3.45-8.34v6.34z"/>
</svg>
</a>
</div>
</h1> </h1>
<div id="tools-wrapper" class="hidden"> <div id="tools-wrapper" class="hidden">
@ -254,6 +291,7 @@
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg> <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</span> </span>
<button id="bulk-actions-apply" i18n-text="bulkActionsApply"></button> <button id="bulk-actions-apply" i18n-text="bulkActionsApply"></button>
<button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
<svg class="svg-icon busy hidden" viewBox="0 0 24 24"> <svg class="svg-icon busy hidden" viewBox="0 0 24 24">
<path d="M12 23h-1v-6.57A5.97 5.97 0 0 1 7 18c-3.25 0-6-2.75-6-6v-1h6.57A5.97 5.97 0 0 1 6 7c0-3.25 2.75-6 6-6h1v6.57A5.97 5.97 0 0 1 17 6c3.25 0 6 2.75 6 6v1h-6.57A5.97 5.97 0 0 1 18 17c0 3.25-2.75 6-6 6zm1-9.87v7.74c1.7-.46 3-2.04 3-3.87s-1.3-3.41-3-3.87zM3.13 13c.46 1.7 2.04 3 3.87 3s3.41-1.3 3.87-3H3.13zm10-2h7.74c-.46-1.7-2.05-3-3.87-3s-3.41 1.3-3.87 3zM11 3.13C9.3 3.59 8 5.18 8 7s1.3 3.41 3 3.87V3.13z"/> <path d="M12 23h-1v-6.57A5.97 5.97 0 0 1 7 18c-3.25 0-6-2.75-6-6v-1h6.57A5.97 5.97 0 0 1 6 7c0-3.25 2.75-6 6-6h1v6.57A5.97 5.97 0 0 1 17 6c3.25 0 6 2.75 6 6v1h-6.57A5.97 5.97 0 0 1 18 17c0 3.25-2.75 6-6 6zm1-9.87v7.74c1.7-.46 3-2.04 3-3.87s-1.3-3.41-3-3.87zM3.13 13c.46 1.7 2.04 3 3.87 3s3.41-1.3 3.87-3H3.13zm10-2h7.74c-.46-1.7-2.05-3-3.87-3s-3.41 1.3-3.87 3zM11 3.13C9.3 3.59 8 5.18 8 7s1.3 3.41 3 3.87V3.13z"/>
<!-- supported everwhere? <!-- supported everwhere?
@ -348,24 +386,6 @@
</span> </span>
</div> </div>
<div style="display: none">
<!-- <button id="reset-filters"></button> -->
<button id="apply-all-updates"></button>
<button id="check-all-updates"></button>
<button id="check-all-updates-force"></button>
<button id="file-all-styles"></button>
<button id="unfile-all-styles"></button>
<button id="manage-options-button"></button>
<button id="manage-shortcuts-button"></button>
<button id="sorter-help"></button>
<input id="manage.newUI" type="checkbox">
<input id="manage.newUI.faviconsGray" type="checkbox">
<input id="manage.newUI.targets" type="number" min="1" max="100" value="3">
<input id="manage.newUI.favicons" type="checkbox">
</div>
</div> </div>
<div id="installed" class="manage-col-entries"> <div id="installed" class="manage-col-entries">
@ -400,6 +420,21 @@
</header> </header>
</div> </div>
<div style="display: none">
<button id="apply-all-updates"></button>
<button id="check-all-updates"></button>
<button id="check-all-updates-force"></button>
<button id="file-all-styles"></button>
<button id="unfile-all-styles"></button>
<button id="manage-options-button"></button>
<button id="manage-shortcuts-button"></button>
<button id="sorter-help"></button>
<input id="manage.newUI" type="checkbox">
<input id="manage.newUI.faviconsGray" type="checkbox">
<input id="manage.newUI.targets" type="number" min="1" max="100" value="3">
<input id="manage.newUI.favicons" type="checkbox">
</div>
<!-- <div id="manage-settings"> <!-- <div id="manage-settings">
<div class="settings-column"> <div class="settings-column">

2
manage/manage-actions.js
View File

@ -279,7 +279,7 @@ Object.assign(handleEvent, {
config(event, {styleMeta}) { config(event, {styleMeta}) {
event.preventDefault(); event.preventDefault();
configDialog(styleMeta); configDialog(styleMeta);
} },
}); });

20
manage/manage-ui.js
View File

@ -215,8 +215,7 @@ const UI = {
} }
if (numTargets) { if (numTargets) {
entryTargets.parentElement.replaceChild(targets, entryTargets); entryTargets.parentElement.replaceChild(targets, entryTargets);
} else if (!entry.classList.contains('global') || } else if (!entry.classList.contains('global') || !entryTargets.firstElementChild) {
!entryTargets.firstElementChild) {
if (entryTargets.firstElementChild) { if (entryTargets.firstElementChild) {
entryTargets.textContent = ''; entryTargets.textContent = '';
} }
@ -233,6 +232,8 @@ const UI = {
const regexpReplaceExtraCharacters = /[\\(]|((\|\w+)+\))/g; const regexpReplaceExtraCharacters = /[\\(]|((\|\w+)+\))/g;
const regexpMatchRegExp = /[\w-]+[.(]+(com|org|co|net|im|io|edu|gov|biz|info|de|cn|uk|nl|eu|ru)\b/g; const regexpMatchRegExp = /[\w-]+[.(]+(com|org|co|net|im|io|edu|gov|biz|info|de|cn|uk|nl|eu|ru)\b/g;
const regexpMatchDomain = /^.*?:\/\/([^/]+)/; const regexpMatchDomain = /^.*?:\/\/([^/]+)/;
const image = document.createElement('img');
image.async = true;
for (const target of $$('.target', container)) { for (const target of $$('.target', container)) {
const type = target.dataset.type; const type = target.dataset.type;
const targetValue = target.dataset.title; const targetValue = target.dataset.title;
@ -253,13 +254,16 @@ const UI = {
favicon = favicon ? UI.GET_FAVICON_URL + favicon[1] : ''; favicon = favicon ? UI.GET_FAVICON_URL + favicon[1] : '';
} }
if (favicon) { if (favicon) {
const img = target.children[0]; const el = $('img, svg', target);
if (!img || img.localName !== 'img') { if (!el || el.localName === 'svg') {
target.insertAdjacentElement('afterbegin', document.createElement('img')) const img = image.cloneNode();
.dataset.src = favicon;
} else if ((img.dataset.src || img.src) !== favicon) {
img.src = '';
img.dataset.src = favicon; img.dataset.src = favicon;
el.replaceWith(img);
//target.insertAdjacentElement('afterbegin', document.createElement('img'))
//.dataset.src = favicon;
} else if ((target.dataset.src || target.src) !== favicon) {
el.src = '';
el.dataset.src = favicon;
} }
} }
} }

62
manage/manage.css
View File

@ -55,6 +55,21 @@ a:hover {
fill: #666; fill: #666;
} }
#main-actions {
display: flex;
width: 200px;
height: 40px;
justify-content: space-between;
align-items: center;
}
.spacer {
width: 10px;
height: 1em;
border-right: 1px solid #777;
margin-right: 10px;
}
.entry-actions > a, .entry-actions > a,
.bulk-actions-select-wrapper, .bulk-actions-select-wrapper,
#bulk-actions-apply { #bulk-actions-apply {
@ -86,11 +101,14 @@ a:hover {
color: #ddd; color: #ddd;
position: fixed; position: fixed;
top: 0; top: 0;
width: 100vw; width: 100%;
height: var(--header-height); height: var(--header-height);
z-index: 100; z-index: 100;
padding: 2px 8px; padding: 2px 8px;
margin: 0; margin: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
} }
#main-header .ext-version { #main-header .ext-version {
@ -101,20 +119,14 @@ a:hover {
vertical-align: bottom; vertical-align: bottom;
} }
#main-header .tabs { #main-header a {
float: right;
margin-right: 20px;
}
#main-header .tabs a {
font-size: .7em; font-size: .7em;
color: #aaa; color: #999;
text-decoration: none; text-decoration: none;
} }
#main-header .tabs a.active, #main-header a:hover {
#main-header .tabs a:hover { color: hsla(180, 50%, 50%, 1);
color: #c0fff0;
} }
#main-header:lang(ja) { #main-header:lang(ja) {
@ -140,7 +152,7 @@ a:hover {
justify-content: center; justify-content: center;
} }
#installed { #installed, #options, #backup {
margin-top: calc(var(--header-height) + var(--entry-header-height)); margin-top: calc(var(--header-height) + var(--entry-header-height));
} }
@ -271,17 +283,21 @@ a:hover {
} }
.targets .target { .targets .target {
display: inline-block;
padding: 0 2px;
}
.targets .applies-to-extra .target {
padding: 2px;
}
.targets .target img {
max-width: var(--icon-size); max-width: var(--icon-size);
max-height: var(--icon-size); max-height: var(--icon-size);
width: var(--icon-size); width: var(--icon-size);
margin-left: 2px;
} }
.applies-to-extra img.target { #installed.faviconsGray .target img {
margin-bottom: 2px;
}
#installed.faviconsGray img.target {
-webkit-filter: grayscale(1); -webkit-filter: grayscale(1);
filter: grayscale(1); filter: grayscale(1);
} }
@ -457,11 +473,11 @@ a svg, .svg-icon.sort {
fill: #ef6969; fill: #ef6969;
} }
img.target:hover { .target:hover img {
background-color: inherit; background-color: inherit;
} }
img.target { .target img{
width: var(--icon-size); width: var(--icon-size);
height: var(--icon-size); height: var(--icon-size);
vertical-align: sub; vertical-align: sub;
@ -474,7 +490,7 @@ img.target {
opacity: .5; opacity: .5;
} }
.entry:hover img.target { .entry:hover .target img {
opacity: 1; opacity: 1;
/* unprefixed since Chrome 53 */ /* unprefixed since Chrome 53 */
-webkit-filter: grayscale(0); -webkit-filter: grayscale(0);
@ -669,7 +685,7 @@ details.applies-to-extra[open] {
} }
#reset-filters svg { #reset-filters svg {
fill: hsla(180, 50%, 27%, .5); fill: hsla(180, 50%, 50%, .7);
width: 24px; /* widen the click area a bit */ width: 24px; /* widen the click area a bit */
height: 20px; height: 20px;
padding: 2px; padding: 2px;
@ -677,7 +693,7 @@ details.applies-to-extra[open] {
} }
#reset-filters:hover svg { #reset-filters:hover svg {
fill: hsla(180, 50%, 27%, 1); fill: hsla(180, 50%, 50%, 1);
} }
.filter-stats-wrapper:not(.active) #reset-filters, .filter-stats-wrapper:not(.active) #reset-filters,