commit 1480e88081382d94f2edd6e30b120bfcb1b710dc Author: Michael Gordeev Date: Tue Mar 10 19:41:05 2020 +0300 Done extension UI and basic interactions diff --git a/collections.html b/collections.html new file mode 100644 index 0000000..df52f3d --- /dev/null +++ b/collections.html @@ -0,0 +1,56 @@ +

+ + +

+ Tabs: $(tabsCount) + $(timestamp) +

+ Restore tabs + + + +

+ +

+ $(title) + +

+ + +

\ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..e2ff917 --- /dev/null +++ b/css/style.css @@ -0,0 +1,178 @@ +.aside.pane +{ + font-family: 'Segoe UI', 'Segoe MDL2 Assets'; + user-select: none; + position: fixed; + z-index: 999; + + right: 0px; + top: 0px; + width: 40%; + min-width: 500px; + min-height: 100%; + + background-color: #f7f7f7; + border: 1px solid rgba(100, 100, 100, .5); + box-sizing: border-box; + box-shadow: 6px 0px 12px black; + + transition: .2s; +} + + .aside.pane > .header + { + margin: 20px 40px; + } + .aside.pane > .header > .title + { + display: grid; + grid-template-columns: 1fr auto; + } + + .aside.pane > .header > .title > h1 + { + margin: 10px 0px; + font-weight: normal; + font-size: 21pt; + } + + .aside.pane > .header > .title > button + { + margin: auto; + } + + .aside.pane > .header > .title > nav + { + top: 70px; + right: 40px; + } + + .aside.pane > .header > .title > nav > div + { + box-shadow: 0px 4px 5px -2px rgba(100, 100, 100, .5); + } + + .aside.pane > .header > .title > nav > p + { + margin: 10px; + } + + .aside.pane > .header > hr + { + border: 1px solid #8a8a8a; + } + + .aside.pane > #content > h2 + { + margin: 0px 40px; + font-weight: normal; + } + + .aside.pane > #content > .set > .setHeader + { + margin: 0px 20px; + display: grid; + grid-template-columns: 1fr auto; + } + + .aside.pane > #content > .set > .setHeader small + { + color: gray; + } + + .aside.pane > #content > .set > .setHeader span + { + font-weight: 600; + } + + .aside.pane > #content > .set > .setHeader a + { + font-size: 11pt; + font-weight: 500; + } + .aside.pane > #content > .set > .setHeader nav + { + width: 200px; + margin-top: 10px; + right: 50px; + } + + .aside.pane > #content > .set > .setHeader > div:first-child + { + margin: auto 0px; + } + + .aside.pane > #content > .set > .collection + { + padding: 10px 0px; + padding-left: 40px; + white-space: nowrap; + overflow: auto; + } + + .aside.pane > #content > .set > .collection > .item + { + width: 175px; + height: 148px; + margin: 5px; + + background-color: #c2c2c2; + background-image: url("../images/tab_thumbnail.png"); + + display: inline-grid; + grid-template-rows: 1fr auto; + + box-shadow: 0px 0px 5px rgba(100, 100, 100, .5); + transition: .25s; + cursor: pointer; + } + .aside.pane > #content > .set > .collection > .item:hover + { + filter: brightness(120%); + box-shadow: 0px 0px 15px rgba(100, 100, 100, .5); + } + + .aside.pane > #content > .set > .collection > .item > .caption + { + background-color: rgba(233, 233, 233, .75); + grid-row: 2; + display: grid; + grid-template-columns: auto 1fr auto; + } + + .aside.pane > #content > .set > .collection > .item > .caption > button + { + margin: auto; + margin-right: 5px; + visibility: hidden; + } + + .aside.pane > #content > .set > .collection > .item:hover > .caption > button + { + visibility: visible; + } + + .aside.pane > #content > .set > .collection > .item > .caption > div + { + width: 20px; + height: 20px; + margin: 10px; + + background-image: url("../images/tab_icon.png"); + } + + .aside.pane > #content > .set > .collection > .item > .caption > span + { + margin: auto 0px; + } + +@media only screen and (max-width: 500px) +{ + .aside.pane + { + right: initial; + width: 100%; + left: 0px; + min-width: initial; + } +} \ No newline at end of file diff --git a/css/style.dark.css b/css/style.dark.css new file mode 100644 index 0000000..2350d46 --- /dev/null +++ b/css/style.dark.css @@ -0,0 +1,54 @@ +.aside.pane +{ + background-color: #333333; + color: white; +} + +.aside button +{ + color: white; +} +.aside button:hover +{ + background-color: gray; +} +.aside button:active +{ + background-color: dimgray; +} + +.aside.pane > #content > .set > .setHeader small +{ + color: lightgray; +} + +.aside ::-webkit-scrollbar-thumb +{ + background: gray; + border-radius: 3px; +} + ::-webkit-scrollbar-thumb:hover + { + background: dimgray; + } + +.aside.pane > #content > .set > .collection > .item +{ + background-color: #0c0c0c; + background-image: url("../images/tab_thumbnail_dark.png"); +} + +.aside.pane > #content > .set > .collection > .item > .caption +{ + background-color: rgba(50, 50, 50, .75); +} + +.aside nav +{ + background-color: #3f3f3f; +} + +.aside.pane > #content > .set > .collection > .item > .caption > div +{ + background-image: url("../images/tab_icon_dark.png"); +} \ No newline at end of file diff --git a/css/style.generic.css b/css/style.generic.css new file mode 100644 index 0000000..4057a94 --- /dev/null +++ b/css/style.generic.css @@ -0,0 +1,123 @@ +.aside ::-webkit-scrollbar +{ + height: 6px; +} + +.aside ::-webkit-scrollbar-thumb +{ + background: darkgray; + border-radius: 3px; +} + ::-webkit-scrollbar-thumb:hover + { + background: gray; + } + +.aside a +{ + font-family: 'Segoe UI', 'Segoe MDL2 Assets'; + color: #0078d7; +} + .aside a:hover + { + text-decoration: underline; + cursor: pointer; + } + +.aside .slider +{ + position: relative; + display: inline-block; + + border-radius: 13px; + width: 50px; + height: 26px; + + background-color: #cccccc; + transition: .4s; +} + + .aside .slider:before + { + position: absolute; + content: ""; + + height: 16px; + width: 16px; + left: 5px; + top: 5px; + border-radius: 50%; + + margin: auto; + + background-color: white; + transition: .3s; + } + + .aside input:checked + .slider, + .aside input:focus + .slider + { + background-color: #0078d7; + } + + .aside input:checked + .slider:before + { + transform: translateX(24px); + background-color: #3f3f3f; + } + +.aside nav +{ + font-family: 'Segoe UI'; + user-select: none; + + position: absolute; + width: 250px; + + box-shadow: 0px 0px 10px black; + background-color: white; + border-radius: 5px; + + z-index: 10; + + visibility: hidden; +} + + .aside nav button + { + font-family: 'Segoe UI'; + cursor: pointer; + background-color: transparent; + border: none; + + font-size: medium; + text-align: start; + + padding: 10px; + width: 100%; + height: initial; + } + + .aside button + nav:active, + .aside button:focus + nav + { + visibility: visible; + } + +.aside button +{ + font-family: 'Segoe MDL2 Assets'; + width: 32px; + height: 32px; + background-color: transparent; + border: none; + cursor: pointer; +} + .aside button:hover + { + background-color: #c6c6c6; + } + .aside button:active + { + background-color: gray; + } \ No newline at end of file diff --git a/icons/dark/empty/128.png b/icons/dark/empty/128.png new file mode 100644 index 0000000..07c4dfe Binary files /dev/null and b/icons/dark/empty/128.png differ diff --git a/icons/dark/empty/16.png b/icons/dark/empty/16.png new file mode 100644 index 0000000..f0a6dff Binary files /dev/null and b/icons/dark/empty/16.png differ diff --git a/icons/dark/empty/32.png b/icons/dark/empty/32.png new file mode 100644 index 0000000..f0e05d1 Binary files /dev/null and b/icons/dark/empty/32.png differ diff --git a/icons/dark/empty/48.png b/icons/dark/empty/48.png new file mode 100644 index 0000000..e8035c3 Binary files /dev/null and b/icons/dark/empty/48.png differ diff --git a/icons/dark/full/128.png b/icons/dark/full/128.png new file mode 100644 index 0000000..7c199e2 Binary files /dev/null and b/icons/dark/full/128.png differ diff --git a/icons/dark/full/16.png b/icons/dark/full/16.png new file mode 100644 index 0000000..503ce23 Binary files /dev/null and b/icons/dark/full/16.png differ diff --git a/icons/dark/full/32.png b/icons/dark/full/32.png new file mode 100644 index 0000000..c3a7560 Binary files /dev/null and b/icons/dark/full/32.png differ diff --git a/icons/dark/full/48.png b/icons/dark/full/48.png new file mode 100644 index 0000000..312be4e Binary files /dev/null and b/icons/dark/full/48.png differ diff --git a/icons/light/empty/128.png b/icons/light/empty/128.png new file mode 100644 index 0000000..d51f9d4 Binary files /dev/null and b/icons/light/empty/128.png differ diff --git a/icons/light/empty/16.png b/icons/light/empty/16.png new file mode 100644 index 0000000..855dcc3 Binary files /dev/null and b/icons/light/empty/16.png differ diff --git a/icons/light/empty/32.png b/icons/light/empty/32.png new file mode 100644 index 0000000..9a17e19 Binary files /dev/null and b/icons/light/empty/32.png differ diff --git a/icons/light/empty/48.png b/icons/light/empty/48.png new file mode 100644 index 0000000..4d037fb Binary files /dev/null and b/icons/light/empty/48.png differ diff --git a/icons/light/full/128.png b/icons/light/full/128.png new file mode 100644 index 0000000..5a16320 Binary files /dev/null and b/icons/light/full/128.png differ diff --git a/icons/light/full/16.png b/icons/light/full/16.png new file mode 100644 index 0000000..21edf86 Binary files /dev/null and b/icons/light/full/16.png differ diff --git a/icons/light/full/32.png b/icons/light/full/32.png new file mode 100644 index 0000000..0fc8ce9 Binary files /dev/null and b/icons/light/full/32.png differ diff --git a/icons/light/full/48.png b/icons/light/full/48.png new file mode 100644 index 0000000..74635f6 Binary files /dev/null and b/icons/light/full/48.png differ diff --git a/images/edge_icon.png b/images/edge_icon.png new file mode 100644 index 0000000..cda0f0d Binary files /dev/null and b/images/edge_icon.png differ diff --git a/images/tab_icon.png b/images/tab_icon.png new file mode 100644 index 0000000..d303887 Binary files /dev/null and b/images/tab_icon.png differ diff --git a/images/tab_icon_dark.png b/images/tab_icon_dark.png new file mode 100644 index 0000000..ea35225 Binary files /dev/null and b/images/tab_icon_dark.png differ diff --git a/images/tab_thumbnail.png b/images/tab_thumbnail.png new file mode 100644 index 0000000..ed1a455 Binary files /dev/null and b/images/tab_thumbnail.png differ diff --git a/images/tab_thumbnail_dark.png b/images/tab_thumbnail_dark.png new file mode 100644 index 0000000..34da513 Binary files /dev/null and b/images/tab_thumbnail_dark.png differ diff --git a/js/aside-script.js b/js/aside-script.js new file mode 100644 index 0000000..2c02062 --- /dev/null +++ b/js/aside-script.js @@ -0,0 +1,40 @@ +chrome.runtime.onMessage.addListener(function(sender, request, sendResponse) +{ + var pane = document.querySelector("#aside-pane"); + if (pane.style.transform == "translateX(110%)") + { + pane.style.transform = "translateX(0%)"; + } + else + { + pane.style.transform = "translateX(110%)"; + } + + UpdateTheme(); + + sendResponse(); +}); + +var xhr = new XMLHttpRequest(); +xhr.open('GET', chrome.extension.getURL("collections.html"), true); +xhr.onreadystatechange = function () +{ + if (this.status !== 200 || document.querySelector("#aside-pane") != null) + return; + + document.body.innerHTML += this.responseText.split("%EXTENSION_PATH%").join(chrome.extension.getURL("")); +}; +xhr.send(); + +function UpdateTheme() +{ + var css = document.querySelector("#aside-pane #darkCSS") + if (window.matchMedia("(prefers-color-scheme: dark)").matches) + { + css.removeAttribute("disabled"); + } + else + { + css.setAttribute("disabled", true); + } +} \ No newline at end of file diff --git a/js/background.js b/js/background.js new file mode 100644 index 0000000..bc22dac --- /dev/null +++ b/js/background.js @@ -0,0 +1,50 @@ +function UpdateTheme() +{ + if (window.matchMedia("(prefers-color-scheme: dark)").matches) + { + chrome.browserAction.setIcon( + { + path: + { + "128": "icons/dark/empty/128.png", + "48": "icons/dark/empty/48.png", + "32": "icons/dark/empty/32.png", + "16": "icons/dark/empty/16.png" + } + }); + } + else + { + chrome.browserAction.setIcon( + { + path: + { + "128": "icons/light/empty/128.png", + "48": "icons/light/empty/48.png", + "32": "icons/light/empty/32.png", + "16": "icons/light/empty/16.png" + } + }); + } +} + +UpdateTheme(); +chrome.windows.onCreated.addListener(UpdateTheme); +chrome.windows.onRemoved.addListener(UpdateTheme); +chrome.windows.onFocusChanged.addListener(UpdateTheme); + +chrome.tabs.onUpdated.addListener(UpdateTheme); +chrome.tabs.onCreated.addListener(UpdateTheme); +chrome.tabs.onMoved.addListener(UpdateTheme); +chrome.tabs.onSelectionChanged.addListener(UpdateTheme); +chrome.tabs.onActiveChanged.addListener(UpdateTheme); +chrome.tabs.onActivated.addListener(UpdateTheme); +chrome.tabs.onHighlightChanged.addListener(UpdateTheme); +chrome.tabs.onHighlighted.addListener(UpdateTheme); +chrome.tabs.onDetached.addListener(UpdateTheme); +chrome.tabs.onAttached.addListener(UpdateTheme); +chrome.tabs.onRemoved.addListener(UpdateTheme); +chrome.tabs.onReplaced.addListener(UpdateTheme); +chrome.tabs.onZoomChange.addListener(UpdateTheme); + +// TODO: Load saved tabs \ No newline at end of file diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..b2e32af --- /dev/null +++ b/manifest.json @@ -0,0 +1,39 @@ +{ + "name": "Tabs Aside", + "version": "0.1", + "manifest_version": 2, + "description": "Classic Microsoft Edge \"Tabs Aside\" feature", + "author": "Michael \"XFox\" Gordeev", + "permissions": [ "tabs" ], + + "icons": + { + "128": "icons/light/empty/128.png", + "48": "icons/light/empty/48.png", + "32": "icons/light/empty/32.png", + "16": "icons/light/empty/16.png" + }, + "web_accessible_resources": [ "*" ], + + "browser_action": + { + "default_popup": "popup/popup.html" + }, + "content_scripts": + [ + { + "matches": [ "" ], + "js": [ "js/aside-script.js" ], + "css": + [ + "css/style.css", + "css/style.generic.css" + ] + } + ], + "background": + { + "scripts": ["js/background.js"], + "persistent": true + } +} \ No newline at end of file diff --git a/popup/popup.html b/popup/popup.html new file mode 100644 index 0000000..9dadfd8 --- /dev/null +++ b/popup/popup.html @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/popup/trigger.js b/popup/trigger.js new file mode 100644 index 0000000..ce46c81 --- /dev/null +++ b/popup/trigger.js @@ -0,0 +1,11 @@ +chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) +{ + chrome.tabs.sendMessage( + tabs[0].id, + { }, + function() + { + window.close(); + } + ); +}); \ No newline at end of file

Tabs aside

You have no aside tabs