From 72adafd35bf7041535c880c59ef430b706e172c8 Mon Sep 17 00:00:00 2001 From: Guilherme Marmiroli Date: Thu, 22 Aug 2024 18:57:32 -0300 Subject: [PATCH 01/11] Favorites! --- src/background.js | 2 +- src/components/sidebar/sidebar.html | 23 +++++++++++------ src/components/sidebar/sidebar.js | 40 +++++++++++++++++++++-------- src/components/sidebar/style.css | 28 +++++++++++++++++--- 4 files changed, 71 insertions(+), 22 deletions(-) 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/sidebar.html b/src/components/sidebar/sidebar.html index 5253fbb..a8c5ff4 100644 --- a/src/components/sidebar/sidebar.html +++ b/src/components/sidebar/sidebar.html @@ -28,13 +28,20 @@
- +
+ + +
✨ @@ -72,6 +79,6 @@

Coming soon!

- + diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js index e8c2fd7..19d7c64 100644 --- a/src/components/sidebar/sidebar.js +++ b/src/components/sidebar/sidebar.js @@ -1,6 +1,8 @@ // Define variables let tabs = []; let activeTab = null; +var openedFavorites = [] +var openedFavoritesIds = [] const searchInput = document.getElementById("search-input"); const tabList = document.getElementById("tab-list"); const newTabButton = document.getElementById("new-tab-button"); @@ -259,7 +261,9 @@ const renderItems = (data) => { node.classList.add('active'); } - list.appendChild(node); + if (!openedFavoritesIds.includes(tab.id)) { + list.appendChild(node); + } }); }; @@ -306,16 +310,11 @@ const navigateToTab = (e) => { browser.tabs.update(tabId, { active: true, highlighted: false }); updateSearchBar(); - const currentActiveTab = list.querySelector('.active'); - if (currentActiveTab) { - currentActiveTab.classList.remove('active'); - } + list.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'); - } + list.querySelector(`[data-tab-id="${activeTabId}"]`)?.classList.add('active'); e.currentTarget.classList.add('current-tab'); }; @@ -323,13 +322,34 @@ const navigateToTab = (e) => { /* 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, height: 600 }); })*/ +// Favorites +var favorites = [] +document.querySelectorAll('.favorite').forEach((element) => { + 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(); + } +}) + 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..4a83522 100644 --- a/src/components/sidebar/style.css +++ b/src/components/sidebar/style.css @@ -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: inline-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 { From ca4ad048a60bcbfa787936e8a51c906f6f640765 Mon Sep 17 00:00:00 2001 From: Guilherme Marmiroli Date: Thu, 22 Aug 2024 22:09:54 -0300 Subject: [PATCH 02/11] New settings page and more We also made Favorites more reliable --- .../fonts/Nunito-VariableFont_wght.ttf | Bin src/components/settings/settings.html | 31 +++++-- src/components/settings/settings.js | 15 ++++ src/components/sidebar/sidebar.html | 17 +--- src/components/sidebar/sidebar.js | 76 +++++++++++++----- src/components/sidebar/style.css | 8 +- src/manifest.json | 2 +- 7 files changed, 102 insertions(+), 47 deletions(-) rename src/components/{sidebar => }/fonts/Nunito-VariableFont_wght.ttf (100%) create mode 100644 src/components/settings/settings.js 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/settings/settings.html b/src/components/settings/settings.html index 9bbb7e8..7b4eb8f 100644 --- a/src/components/settings/settings.html +++ b/src/components/settings/settings.html @@ -1,10 +1,31 @@ -Peek tabs by pressing shift while clicking on a link - +

General

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

Favorites

+You need to restart to see the changes +
+
+ + + + + diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js new file mode 100644 index 0000000..f352085 --- /dev/null +++ b/src/components/settings/settings.js @@ -0,0 +1,15 @@ +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 }]; + document.querySelector('#f1').value = favorites[0].url; + document.querySelector('#f2').value = favorites[1].url; + console.log(result.favorites) +}); + +document.querySelector('#btn').addEventListener('click', () => { + browser.windows.getCurrent({ populate: true }).then((window) => { + browser.windows.remove(window.id); + }); + browser.storage.local.set({ + favorites: [{ url: document.querySelector('#f1').value, favicon: 'https://mailmeteor.com/logos/assets/PNG/Gmail_Logo_512px.png', id: 0 }, { url: document.querySelector('#f2').value, favicon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Youtube_Music_icon.svg/2048px-Youtube_Music_icon.svg.png', id: 1 }] + }); +}) \ No newline at end of file diff --git a/src/components/sidebar/sidebar.html b/src/components/sidebar/sidebar.html index a8c5ff4..0eba2d1 100644 --- a/src/components/sidebar/sidebar.html +++ b/src/components/sidebar/sidebar.html @@ -18,9 +18,7 @@ - @@ -28,20 +26,7 @@
-
- - -
+
✨ diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js index 19d7c64..fed9792 100644 --- a/src/components/sidebar/sidebar.js +++ b/src/components/sidebar/sidebar.js @@ -1,8 +1,11 @@ // Define variables let tabs = []; let activeTab = null; + +var favorites = []; var openedFavorites = [] -var openedFavoritesIds = [] +var openedFavoritesIds = []; + const searchInput = document.getElementById("search-input"); const tabList = document.getElementById("tab-list"); const newTabButton = document.getElementById("new-tab-button"); @@ -14,6 +17,12 @@ newTabButton.addEventListener("click", () => newTab() ); +// Get favorites from localstorage +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() +}); + // Put space name on localstorage spaceName.addEventListener('change', () => { spaceName.blur() @@ -319,7 +328,6 @@ const navigateToTab = (e) => { e.currentTarget.classList.add('current-tab'); }; -/* Settings page? document.getElementById('settings').addEventListener('click', () => { browser.windows.create({ url: "../settings/settings.html", @@ -327,29 +335,55 @@ document.getElementById('settings').addEventListener('click', () => { width: 1000, height: 600 }); -})*/ +}) // Favorites -var favorites = [] -document.querySelectorAll('.favorite').forEach((element) => { - 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 }); +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(); + await new Promise(resolve => setTimeout(resolve, 2500)); + 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; + console.log(favoritesc) + browser.storage.local.set({ favorites: favoritesc }) + }); } - document.querySelectorAll('[aria-label="favopen"]')?.forEach((elemento) => { - elemento.ariaLabel = ""; - }) - element.ariaLabel = "favopen"; - updateSearchBar(); - } -}) + const favIcon = document.createElement('img'); + favIcon.src = favorite.favicon; + + element.appendChild(favIcon) + document.querySelector('#favorites').appendChild(element); + + }); + + 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 4a83522..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; } @@ -326,7 +326,7 @@ div#space-info input { /* Favorites */ div#favorites { - display: inline-flex; + display: flex; gap: 8px; width: 100%; } 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" From 974cc439ad51ee0b990aa604fe9c28de3e48263e Mon Sep 17 00:00:00 2001 From: Guilherme Marmiroli Date: Thu, 22 Aug 2024 22:20:27 -0300 Subject: [PATCH 03/11] Fixed some bugs --- src/components/settings/settings.js | 17 ++++++++++++++--- src/components/sidebar/sidebar.js | 12 ++++++------ 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index f352085..73a3baa 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -9,7 +9,18 @@ document.querySelector('#btn').addEventListener('click', () => { browser.windows.getCurrent({ populate: true }).then((window) => { browser.windows.remove(window.id); }); - browser.storage.local.set({ - favorites: [{ url: document.querySelector('#f1').value, favicon: 'https://mailmeteor.com/logos/assets/PNG/Gmail_Logo_512px.png', id: 0 }, { url: document.querySelector('#f2').value, favicon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Youtube_Music_icon.svg/2048px-Youtube_Music_icon.svg.png', id: 1 }] - }); + 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 }]; + if (favoritesc[0].url !== document.querySelector('#f1').value) { + favoritesc[0].url = document.querySelector('#f1').value + favoritesc[0].favicon = 'undefined'; + } + if (favoritesc[1].url !== document.querySelector('#f2').value) { + favoritesc[1].url = document.querySelector('#f2').value + favoritesc[1].favicon = 'undefined'; + } + browser.storage.local.set({ + favorites: favoritesc + }); + }) }) \ No newline at end of file diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js index fed9792..378a784 100644 --- a/src/components/sidebar/sidebar.js +++ b/src/components/sidebar/sidebar.js @@ -361,12 +361,12 @@ function loadFavorites() { await new Promise(resolve => setTimeout(resolve, 2500)); 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; - console.log(favoritesc) - browser.storage.local.set({ favorites: favoritesc }) + 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; + console.log(favoritesc) + browser.storage.local.set({ favorites: favoritesc }) + }); }); } const favIcon = document.createElement('img'); From bb2134ee2dcd83310bdf768575debf3b78324e71 Mon Sep 17 00:00:00 2001 From: Guilherme Marmiroli Date: Fri, 23 Aug 2024 19:49:49 -0300 Subject: [PATCH 04/11] Customizable favorites --- src/components/settings/settings.html | 1 - src/components/settings/settings.js | 43 ++++++++++++++++++--------- src/components/sidebar/sidebar.js | 4 +-- 3 files changed, 31 insertions(+), 17 deletions(-) diff --git a/src/components/settings/settings.html b/src/components/settings/settings.html index 7b4eb8f..aa09612 100644 --- a/src/components/settings/settings.html +++ b/src/components/settings/settings.html @@ -7,7 +7,6 @@

Favorites


- diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index 683274c..50b74d2 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -6,13 +6,16 @@ browser.storage.local.get('favorites', function (result) { if (favorites[1] !== undefined) { document.querySelector('#f2').value = favorites[1].url; } + if (favorites[2] !== undefined) { + document.querySelector('#f3').value = favorites[2].url; + } }); document.querySelector('#btn').addEventListener('click', () => { 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].forEach((i) => { + [0, 1, 2].forEach((i) => { if (favoritesc[i] == undefined) { if (document.querySelector('#f' + (i + 1)).value !== "") { favoritesc[i] = {} @@ -35,7 +38,9 @@ document.querySelector('#btn').addEventListener('click', () => { favorites: favoritesc }); }) - browser.windows.getCurrent({ populate: true }).then((window) => { - browser.windows.remove(window.id); + browser.windows.getAll({ populate: true }).then((windows) => { + for (let window of windows) { + browser.windows.remove(window.id); + } }); }) \ No newline at end of file diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js index 5fd7820..da699c1 100644 --- a/src/components/sidebar/sidebar.js +++ b/src/components/sidebar/sidebar.js @@ -333,7 +333,7 @@ document.getElementById('settings').addEventListener('click', () => { browser.windows.create({ url: "../settings/settings.html", type: "popup", - width: 1000, + width: 400, height: 600 }); }) From d6a3db8bdea82a7a8b1d7d9c4a9c247c0f5e0553 Mon Sep 17 00:00:00 2001 From: Guilherme Marmiroli Date: Fri, 23 Aug 2024 21:37:57 -0300 Subject: [PATCH 06/11] Improved settings --- src/components/settings/settings.html | 9 ++++++++- src/components/settings/settings.js | 1 + 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/settings/settings.html b/src/components/settings/settings.html index 590ca67..8418dac 100644 --- a/src/components/settings/settings.html +++ b/src/components/settings/settings.html @@ -7,7 +7,7 @@

Favorites

- + diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index 50b74d2..7ec8f8b 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -38,6 +38,7 @@ document.querySelector('#btn').addEventListener('click', () => { favorites: favoritesc }); }) + browser.windows.create({}) browser.windows.getAll({ populate: true }).then((windows) => { for (let window of windows) { browser.windows.remove(window.id); From 62aee38791628833072e56b5db3585794a7bd139 Mon Sep 17 00:00:00 2001 From: Guilherme Marmiroli Date: Fri, 23 Aug 2024 21:43:32 -0300 Subject: [PATCH 07/11] v2.5.2.1 --- src/background.js | 1 + src/manifest.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/background.js b/src/background.js index 5596167..7853841 100644 --- a/src/background.js +++ b/src/background.js @@ -1,3 +1,4 @@ +browser.sidebarAction.open(); // Open Sidebar Shortcut - ALT+Q function handleShortcut(command) { var match = window.navigator.userAgent.match(/Firefox\/([0-9]+)\./); diff --git a/src/manifest.json b/src/manifest.json index 9c29203..6f701bd 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "ArcFox", - "version": "2.5.2", + "version": "2.5.2.1", "description": "Make firefox flow like arc.", "icons": { "48": "icon.png" From 82e30376f3adeb491f3fdd38d1905a9f8f9542a2 Mon Sep 17 00:00:00 2001 From: Guilherme Marmiroli Date: Fri, 23 Aug 2024 22:37:44 -0300 Subject: [PATCH 08/11] Fixed some visual bugs --- src/background.js | 1 - src/components/peek/peek.css | 5 +++++ src/components/sidebar/sidebar.js | 3 +++ src/manifest.json | 2 +- 4 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/background.js b/src/background.js index 7853841..5596167 100644 --- a/src/background.js +++ b/src/background.js @@ -1,4 +1,3 @@ -browser.sidebarAction.open(); // Open Sidebar Shortcut - ALT+Q function handleShortcut(command) { var match = window.navigator.userAgent.match(/Firefox\/([0-9]+)\./); diff --git a/src/components/peek/peek.css b/src/components/peek/peek.css index 40489ed..2762a7c 100644 --- a/src/components/peek/peek.css +++ b/src/components/peek/peek.css @@ -35,6 +35,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/sidebar/sidebar.js b/src/components/sidebar/sidebar.js index da699c1..6a973fd 100644 --- a/src/components/sidebar/sidebar.js +++ b/src/components/sidebar/sidebar.js @@ -210,6 +210,9 @@ document.querySelector('button#b2').addEventListener("click", function () { function newTab() { browser.tabs.create({}); + document.querySelectorAll('[aria-label="favopen"]')?.forEach((elemento) => { + elemento.ariaLabel = ""; + }) } // Sidebar Code diff --git a/src/manifest.json b/src/manifest.json index 6f701bd..9c29203 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "ArcFox", - "version": "2.5.2.1", + "version": "2.5.2", "description": "Make firefox flow like arc.", "icons": { "48": "icon.png" From fbd0d0d53a062f643df0c1f5be44f8a6beacafb0 Mon Sep 17 00:00:00 2001 From: Guilherme Marmiroli Date: Sat, 24 Aug 2024 17:13:07 -0300 Subject: [PATCH 09/11] Improved Settings and Peek --- src/components/peek/peek.css | 6 +++++ src/components/settings/settings.html | 8 ++++++ src/components/settings/settings.js | 36 +++++++++++++++------------ src/components/sidebar/sidebar.html | 2 +- src/components/sidebar/sidebar.js | 13 +++++++++- 5 files changed, 47 insertions(+), 18 deletions(-) diff --git a/src/components/peek/peek.css b/src/components/peek/peek.css index 2762a7c..089dec4 100644 --- a/src/components/peek/peek.css +++ b/src/components/peek/peek.css @@ -1,3 +1,9 @@ +/* Arc Palette */ +:root { + --arc-palette-background: #1c1a26 !important; +} + +/* Peek */ @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"); div#peekpage { diff --git a/src/components/settings/settings.html b/src/components/settings/settings.html index 8418dac..91ce8d6 100644 --- a/src/components/settings/settings.html +++ b/src/components/settings/settings.html @@ -8,6 +8,7 @@

Favorites

+ diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index 7ec8f8b..68aa11f 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -1,17 +1,27 @@ 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 }]; - if (favorites[0] !== undefined) { - document.querySelector('#f1').value = favorites[0].url; - } - if (favorites[1] !== undefined) { - document.querySelector('#f2').value = favorites[1].url; - } - if (favorites[2] !== undefined) { - document.querySelector('#f3').value = favorites[2].url; - } + // 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 }]; @@ -38,10 +48,4 @@ document.querySelector('#btn').addEventListener('click', () => { favorites: favoritesc }); }) - browser.windows.create({}) - browser.windows.getAll({ populate: true }).then((windows) => { - for (let window of windows) { - browser.windows.remove(window.id); - } - }); -}) \ No newline at end of file +} \ No newline at end of file diff --git a/src/components/sidebar/sidebar.html b/src/components/sidebar/sidebar.html index 0eba2d1..2260454 100644 --- a/src/components/sidebar/sidebar.html +++ b/src/components/sidebar/sidebar.html @@ -64,6 +64,6 @@

Coming soon!

- + diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js index 6a973fd..ffd756e 100644 --- a/src/components/sidebar/sidebar.js +++ b/src/components/sidebar/sidebar.js @@ -316,6 +316,7 @@ const closeTab = (e, middleclick = false) => { renderItems(base); } initTabSidebarControl(); + updateSearchBar(); }; const navigateToTab = (e) => { @@ -362,7 +363,17 @@ function loadFavorites() { }) element.ariaLabel = "favopen"; updateSearchBar(); - await new Promise(resolve => setTimeout(resolve, 2700)); + 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) { From 22cce5baa01195f8004eb04fdf0cd873b2dafd80 Mon Sep 17 00:00:00 2001 From: Guilherme Marmiroli Date: Sun, 25 Aug 2024 12:05:37 -0300 Subject: [PATCH 10/11] Improved Peek --- src/components/peek/peek.css | 3 ++- src/components/peek/peek.js | 35 ++++++++++++++++++------------- src/components/sidebar/sidebar.js | 9 ++++---- 3 files changed, 26 insertions(+), 21 deletions(-) diff --git a/src/components/peek/peek.css b/src/components/peek/peek.css index 089dec4..3447dea 100644 --- a/src/components/peek/peek.css +++ b/src/components/peek/peek.css @@ -1,10 +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 */ -@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"); div#peekpage { height: 100vh; 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/sidebar/sidebar.js b/src/components/sidebar/sidebar.js index ffd756e..d480500 100644 --- a/src/components/sidebar/sidebar.js +++ b/src/components/sidebar/sidebar.js @@ -388,14 +388,13 @@ function loadFavorites() { element.appendChild(favIcon) document.querySelector('#favorites').appendChild(element); - }); - - document.addEventListener('contextmenu', function (e) { - e.preventDefault(); - }, false); } +// Remove the context menu +document.addEventListener('contextmenu', function (e) { + e.preventDefault(); +}, false); // Init Sidebar function initTabSidebarControl() { From e7b1a8c38ee2388d7941895480d308c25b18bd59 Mon Sep 17 00:00:00 2001 From: Guilherme Marmiroli Date: Sun, 25 Aug 2024 18:24:31 -0300 Subject: [PATCH 11/11] Cleaned the clutter (again!) =P --- README.md | 13 +++++++------ src/components/peek/peek.css | 1 - src/components/sidebar/sidebar.js | 31 ++++++++++++++----------------- 3 files changed, 21 insertions(+), 24 deletions(-) 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/components/peek/peek.css b/src/components/peek/peek.css index 3447dea..678e82b 100644 --- a/src/components/peek/peek.css +++ b/src/components/peek/peek.css @@ -6,7 +6,6 @@ } /* Peek */ - div#peekpage { height: 100vh; width: 74vw; diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js index d480500..399346d 100644 --- a/src/components/sidebar/sidebar.js +++ b/src/components/sidebar/sidebar.js @@ -1,7 +1,6 @@ // Define variables let tabs = []; let activeTab = null; - var favorites = []; var openedFavorites = [] var openedFavoritesIds = []; @@ -9,7 +8,6 @@ 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 @@ -17,14 +15,7 @@ newTabButton.addEventListener("click", () => newTab() ); -// Get favorites from localstorage -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 }]; - console.log(favorites) - loadFavorites() -}); - -// Put space name on localstorage +// Put space name on browser storeage spaceName.addEventListener('change', () => { spaceName.blur() browser.storage.local.set({ 'spaceName': spaceName.value }) @@ -41,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") { @@ -89,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 () { @@ -216,7 +214,6 @@ function newTab() { } // Sidebar Code -const list = document.getElementById('tab-list'); let base, draggedOver, dragging, activeTabId; const init = (array) => { @@ -229,7 +226,7 @@ const init = (array) => { }; const renderItems = (data) => { - list.innerHTML = ''; + tabList.innerHTML = ''; data.forEach((tab) => { const node = document.createElement('li'); node.draggable = true; @@ -275,7 +272,7 @@ const renderItems = (data) => { } if (!openedFavoritesIds.includes(tab.id)) { - list.appendChild(node); + tabList.appendChild(node); } }); }; @@ -324,11 +321,11 @@ const navigateToTab = (e) => { browser.tabs.update(tabId, { active: true, highlighted: false }); updateSearchBar(); - list.querySelector('.active')?.classList.remove('active'); + tabList.querySelector('.active')?.classList.remove('active'); document.querySelector('[aria-label="favopen"]')?.setAttribute('aria-label', ''); activeTabId = tabId; - list.querySelector(`[data-tab-id="${activeTabId}"]`)?.classList.add('active'); + tabList.querySelector(`[data-tab-id="${activeTabId}"]`)?.classList.add('active'); e.currentTarget.classList.add('current-tab'); };