diff --git a/README.md b/README.md index 46f0d3e..c7c6650 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ And things that would make it great but are not actually necessary. If you want to contact us, open a issue or use our discord -## Rebuild roadmap +## Our Roadmap ### Essential: @@ -40,6 +40,10 @@ If you want to contact us, open a Full Roadmap for a better understanding of the upcoming features and things we are working on :D

@@ -129,10 +134,6 @@ To install arcfox-theme you need to open your firefox configurations and turn st - Inside the "chrome" folder, drop the "userChrome.css" that you find on the releases. - Restart firefox. -# Roadmap - -ArcFox still have a lot of features to be implemented and you can see our Roadmap for a better understanding of the upcoming features and things we are working on :D - # Removing ArcFox If you have a major issue, or just want a different/default look, here is how to remove ArcFox. diff --git a/src/background.js b/src/background.js index f2273a1..5596167 100644 --- a/src/background.js +++ b/src/background.js @@ -12,7 +12,7 @@ function handleShortcut(command) { browser.commands.onCommand.addListener(handleShortcut); // Remove X-frame headers - required for Peek to work -var defaultRgx = ["", "*://*/*", "https://*.w3schools.com/*"].join('\n') +var defaultRgx = ["", "*://*/*"].join('\n') var theRegex = null; var headersdo = { "content-security-policy": (x => { return false }), diff --git a/src/components/sidebar/fonts/Nunito-VariableFont_wght.ttf b/src/components/fonts/Nunito-VariableFont_wght.ttf similarity index 100% rename from src/components/sidebar/fonts/Nunito-VariableFont_wght.ttf rename to src/components/fonts/Nunito-VariableFont_wght.ttf diff --git a/src/components/peek/peek.css b/src/components/peek/peek.css index 40489ed..678e82b 100644 --- a/src/components/peek/peek.css +++ b/src/components/peek/peek.css @@ -1,5 +1,11 @@ @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"); +/* Arc Palette */ +:root { + --arc-palette-background: #1c1a26 !important; +} + +/* Peek */ div#peekpage { height: 100vh; width: 74vw; @@ -35,6 +41,11 @@ div#peekpage iframe { animation: buttonappear 1s; background: white; color: black; + transition: 0.1s; +} + +.peektools:hover { + background: #dbdbdb; } .peektools::after { diff --git a/src/components/peek/peek.js b/src/components/peek/peek.js index 84e7208..9e33744 100644 --- a/src/components/peek/peek.js +++ b/src/components/peek/peek.js @@ -41,18 +41,23 @@ document.body.appendChild(peekBackdrop); document.body.appendChild(peekPage); peekPage.appendChild(peekIframe); -// Make peek functional in Anchor elements -let collection = document.getElementsByTagName("a"); -Array.from(collection).forEach(function (element) { - element.removeAttribute("jsaction"); - element.removeAttribute("target"); - element.onclick = (event) => { - if (event.shiftKey) { - event.preventDefault(); - peekIframe.src = element.href; - peekBackdrop.style.display = 'block'; - document.body.style.overflow = 'hidden'; - peekPage.showPopover(); - } - }; -}); \ No newline at end of file + +document.addEventListener('DOMSubtreeModified', loadPeek, false); +function loadPeek() { + // Make peek functional in Anchor elements + let collection = document.getElementsByTagName("a"); + Array.from(collection).forEach(function (element) { + element.removeAttribute("jsaction"); + element.removeAttribute("target"); + element.onclick = (event) => { + if (event.shiftKey) { + event.preventDefault(); + peekIframe.src = element.href; + peekBackdrop.style.display = 'block'; + document.body.style.overflow = 'hidden'; + peekPage.showPopover(); + } + }; + }); +} +loadPeek(); \ No newline at end of file diff --git a/src/components/settings/settings.html b/src/components/settings/settings.html index 9bbb7e8..91ce8d6 100644 --- a/src/components/settings/settings.html +++ b/src/components/settings/settings.html @@ -1,10 +1,76 @@ -Peek tabs by pressing shift while clicking on a link - +

General

+Open a Peek window when clicking on links with Shift held + +

Favorites

+Pin some tabs! +
+ + + + + + diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js new file mode 100644 index 0000000..68aa11f --- /dev/null +++ b/src/components/settings/settings.js @@ -0,0 +1,51 @@ +browser.storage.local.get('favorites', function (result) { + var favorites = result.favorites || [{ url: 'https://gmail.com', favicon: 'https://mailmeteor.com/logos/assets/PNG/Gmail_Logo_512px.png', id: 0 }, { url: 'https://music.youtube.com', favicon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Youtube_Music_icon.svg/2048px-Youtube_Music_icon.svg.png', id: 1 }]; + // Sets the URLs + [0, 1, 2].forEach(i => favorites[i] && (document.querySelector(`#f${i + 1}`).value = favorites[i].url)); +}); + +document.querySelector('#btn').addEventListener('click', () => { + saveSettings(); + browser.windows.getAll({ populate: true }).then((windows) => { + for (let window of windows) { + browser.windows.remove(window.id); + } + }); + browser.windows.create({}) +}) + +document.querySelector('#save').addEventListener('click', () => { + saveSettings(); + browser.windows.getCurrent().then((window) => { + browser.windows.remove(window.id) + }) +}) + +function saveSettings() { + browser.storage.local.get('favorites', function (result) { + var favoritesc = result.favorites || [{ url: 'https://gmail.com', favicon: 'https://mailmeteor.com/logos/assets/PNG/Gmail_Logo_512px.png', id: 0 }, { url: 'https://music.youtube.com', favicon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Youtube_Music_icon.svg/2048px-Youtube_Music_icon.svg.png', id: 1 }]; + + [0, 1, 2].forEach((i) => { + if (favoritesc[i] == undefined) { + if (document.querySelector('#f' + (i + 1)).value !== "") { + favoritesc[i] = {} + favoritesc[i].url = document.querySelector('#f' + (i + 1)).value + favoritesc[i].favicon = 'https://i0.wp.com/www.flyycredit.com/wp-content/uploads/2018/06/globe-icon-white.png?fit=512%2C512&ssl=1'; + favoritesc[i].id = i; + } + } else { + if (document.querySelector('#f' + (i + 1)).value !== "" && document.querySelector('#f' + (i + 1)).value !== favoritesc[i].url) { + favoritesc[i].url = document.querySelector('#f' + (i + 1)).value + favoritesc[i].favicon = 'https://i0.wp.com/www.flyycredit.com/wp-content/uploads/2018/06/globe-icon-white.png?fit=512%2C512&ssl=1'; + } + } + + if (document.querySelector('#f' + (i + 1)).value == "") { + delete favoritesc[i] + } + }) + browser.storage.local.set({ + favorites: favoritesc + }); + }) +} \ No newline at end of file diff --git a/src/components/sidebar/sidebar.html b/src/components/sidebar/sidebar.html index 5253fbb..2260454 100644 --- a/src/components/sidebar/sidebar.html +++ b/src/components/sidebar/sidebar.html @@ -18,9 +18,7 @@ - @@ -28,13 +26,7 @@
- +
✨ diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js index e8c2fd7..399346d 100644 --- a/src/components/sidebar/sidebar.js +++ b/src/components/sidebar/sidebar.js @@ -1,10 +1,13 @@ // Define variables let tabs = []; let activeTab = null; +var favorites = []; +var openedFavorites = [] +var openedFavoritesIds = []; + const searchInput = document.getElementById("search-input"); const tabList = document.getElementById("tab-list"); const newTabButton = document.getElementById("new-tab-button"); -const searchIcon = document.querySelector('.address-bar i'); const spaceName = document.querySelector('input#space-name'); // Add event listeners @@ -12,7 +15,7 @@ newTabButton.addEventListener("click", () => newTab() ); -// Put space name on localstorage +// Put space name on browser storeage spaceName.addEventListener('change', () => { spaceName.blur() browser.storage.local.set({ 'spaceName': spaceName.value }) @@ -29,13 +32,19 @@ browser.storage.local.get('spaceName', function (result) { }); // Auto-selects address bar on click -document.getElementById('search-input').addEventListener(`click`, () => { +searchInput.addEventListener(`click`, () => { if (document.activeElement.id == 'search-input') { - document.getElementById('search-input').select() + searchInput.select() } }); document.querySelector('div.address-bar').addEventListener(`click`, () => document.getElementById('search-input').select()); +// Loads favorites +browser.storage.local.get('favorites', function (result) { + favorites = result.favorites || [{ url: 'https://gmail.com', favicon: 'https://mailmeteor.com/logos/assets/PNG/Gmail_Logo_512px.png', id: 0 }, { url: 'https://music.youtube.com', favicon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Youtube_Music_icon.svg/2048px-Youtube_Music_icon.svg.png', id: 1 }]; + loadFavorites() +}); + // Update sidebar when a tab changes browser.tabs.onUpdated.addListener((changeInfo) => { if (changeInfo.status === "complete") { @@ -77,6 +86,7 @@ function handleBrowserControl(id) { initTabSidebarControl(); } +// Handle controls const controls = ['back', 'front', 'refresh', 'close', 'size', 'hide', 'back', 'front'] controls.forEach((control) => { document.getElementById(control).addEventListener("click", function () { @@ -198,10 +208,12 @@ document.querySelector('button#b2').addEventListener("click", function () { function newTab() { browser.tabs.create({}); + document.querySelectorAll('[aria-label="favopen"]')?.forEach((elemento) => { + elemento.ariaLabel = ""; + }) } // Sidebar Code -const list = document.getElementById('tab-list'); let base, draggedOver, dragging, activeTabId; const init = (array) => { @@ -214,7 +226,7 @@ const init = (array) => { }; const renderItems = (data) => { - list.innerHTML = ''; + tabList.innerHTML = ''; data.forEach((tab) => { const node = document.createElement('li'); node.draggable = true; @@ -259,7 +271,9 @@ const renderItems = (data) => { node.classList.add('active'); } - list.appendChild(node); + if (!openedFavoritesIds.includes(tab.id)) { + tabList.appendChild(node); + } }); }; @@ -299,6 +313,7 @@ const closeTab = (e, middleclick = false) => { renderItems(base); } initTabSidebarControl(); + updateSearchBar(); }; const navigateToTab = (e) => { @@ -306,30 +321,79 @@ const navigateToTab = (e) => { browser.tabs.update(tabId, { active: true, highlighted: false }); updateSearchBar(); - const currentActiveTab = list.querySelector('.active'); - if (currentActiveTab) { - currentActiveTab.classList.remove('active'); - } + tabList.querySelector('.active')?.classList.remove('active'); + document.querySelector('[aria-label="favopen"]')?.setAttribute('aria-label', ''); activeTabId = tabId; - const newActiveTab = list.querySelector(`[data-tab-id="${activeTabId}"]`); - if (newActiveTab) { - newActiveTab.classList.add('active'); - } + tabList.querySelector(`[data-tab-id="${activeTabId}"]`)?.classList.add('active'); e.currentTarget.classList.add('current-tab'); }; -/* Settings page? document.getElementById('settings').addEventListener('click', () => { browser.windows.create({ - url: "../settings/settings.html", // URL to open in the new window + url: "../settings/settings.html", type: "popup", - width: 1000, + width: 400, height: 600 }); -})*/ +}) + +// Favorites +function loadFavorites() { + favorites.forEach((favorite) => { + const element = document.createElement('button') + element.className = "favorite" + element.dataset.url = favorite.url; + element.onclick = async () => { + if (!element.id) { + const tabCreated = await browser.tabs.create({ url: element.dataset.url }); + element.id = tabCreated.id; + openedFavorites.push(tabCreated); + openedFavoritesIds.push(tabCreated.id); + } else { + list.querySelector('.active')?.classList.remove('active'); + browser.tabs.update(parseInt(element.id), { active: true, highlighted: false }); + } + document.querySelectorAll('[aria-label="favopen"]')?.forEach((elemento) => { + elemento.ariaLabel = ""; + }) + element.ariaLabel = "favopen"; + updateSearchBar(); + while (true) { + await new Promise(resolve => setTimeout(resolve, 200)); + var tabsn = [] + await browser.tabs.query({ currentWindow: true }).then((tabs) => { + tabsn = tabs + }) + if ((tabsn.find((elems) => elems.id == element.id).favIconUrl !== undefined)) { + break + } + } + + browser.tabs.query({ currentWindow: true }).then((tabs) => { + favIcon.src = tabs.find((elems) => elems.id == element.id).favIconUrl + browser.storage.local.get('favorites', function (result) { + var favoritesc = result.favorites || [{ url: 'https://gmail.com', favicon: 'https://mailmeteor.com/logos/assets/PNG/Gmail_Logo_512px.png' }, { url: 'https://music.youtube.com', favicon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Youtube_Music_icon.svg/2048px-Youtube_Music_icon.svg.png' }]; + favoritesc[favorite.id].favicon = favIcon.src; + browser.storage.local.set({ favorites: favoritesc }) + }); + }); + } + const favIcon = document.createElement('img'); + favIcon.src = favorite.favicon; + + element.appendChild(favIcon) + document.querySelector('#favorites').appendChild(element); + }); +} + +// Remove the context menu +document.addEventListener('contextmenu', function (e) { + e.preventDefault(); +}, false); +// Init Sidebar function initTabSidebarControl() { browser.tabs.query({ currentWindow: true }).then((tabs) => { init(tabs); diff --git a/src/components/sidebar/style.css b/src/components/sidebar/style.css index bc68a8a..decaaf5 100644 --- a/src/components/sidebar/style.css +++ b/src/components/sidebar/style.css @@ -12,7 +12,7 @@ @font-face { font-family: Nunito; - src: URL("./fonts/Nunito-VariableFont_wght.ttf") format("truetype"); + src: URL("../fonts/Nunito-VariableFont_wght.ttf") format("truetype"); } body { @@ -45,7 +45,7 @@ body { display: flex; align-items: center; flex-direction: column; - padding: 10px 2px; + padding: 10px 0; margin: 0 15px; border-bottom: 1px solid var(--outlineColor); } @@ -88,9 +88,9 @@ body { align-items: center; gap: 10px; padding: 15px; + width: 100%; border-radius: 15px; background: #323446; - width: calc(100% + 10px); margin-right: -3px; transition: scale 0.1s; } @@ -118,7 +118,6 @@ body { display: block; overflow-y: auto; max-height: calc(100% - 120px); - padding-bottom: 50px; margin: 0 12px; } @@ -131,6 +130,7 @@ body { list-style: none; margin: 0; margin-top: 10px; + margin-bottom: 110px; } #sidebar-content ul li { @@ -173,6 +173,10 @@ body { background-color: #5e5f71c1; } +#sidebar-content ul li[data-pinned="true"] { + display: none !important; +} + #sidebar-content ul li:active { scale: 0.97; } @@ -320,22 +324,40 @@ div#space-info input { cursor: pointer; } +/* Favorites */ +div#favorites { + display: flex; + gap: 8px; + width: 100%; +} button.favorite { background: #aac2d320 !important; border-radius: 10px !important; - height: 40px; + height: 45px; width: 100%; + display: inline; text-align: center; margin-top: 10px; padding: 10px !important; + transition: background 0.1s, scale 0.2s; } button.favorite:hover { background: #aac2d32d !important; } +button.favorite:active { + scale: 0.97; +} + +button.favorite[aria-label="favopen"] { + background: #aac2d343 !important; +} + button.favorite img { - width: 20px; + width: 18px; + position: relative; + top: 10%; } a { diff --git a/src/manifest.json b/src/manifest.json index 00efd01..9c29203 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "ArcFox", - "version": "2.5.1.1", + "version": "2.5.2", "description": "Make firefox flow like arc.", "icons": { "48": "icon.png"