v2.5.2

Favorites are here! More info on releases
betterbrowser · Aug 25, 2024 · 92c33a0 · 92c33a0
2 parents 3464049 + e7b1a8c
commit 92c33a0
Show file tree

Hide file tree

Showing 11 changed files with 274 additions and 62 deletions.
diff --git 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 <a href="https://github.com/betterbrowser/arcfox/issues">issue</a> or use our <a href="https://discord.gg/jDASpgt68t">discord</a>
 </pre>
 
-## Rebuild roadmap
+## Our Roadmap
 
 ### Essential:
 
@@ -40,6 +40,10 @@ If you want to contact us, open a <a href="https://github.com/betterbrowser/arcf
 
 ### Non-Essential:
 
+- [x] Peek
+  - [x] Use Shift to Peek
+  - [x] Works in most webpages (Report if smth doesn't work as expected)
+  - [ ] Favorites Peek by default
 - [ ] Folders
   - [ ] Folders Feature
   - [ ] Stackable Folders
@@ -80,8 +84,9 @@ If you want to contact us, open a <a href="https://github.com/betterbrowser/arcf
 - [ ] Boosts
   - [ ] Boosts Feature
   - [ ] Boosts Store
+  - [ ] Arc Palette
 
-##
+ArcFox still has a lot of features to be implemented and you can see our <a href="https://github.com/orgs/betterbrowser/projects/2">Full Roadmap</a> for a better understanding of the upcoming features and things we are working on :D
 
 <p align="center">
   <a href="#">
@@ -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 <a href="https://github.com/betterbrowser/arcfox/releases">releases.</a>
 - Restart firefox.
 
-# Roadmap
-
-ArcFox still have a lot of features to be implemented and you can see our <a href="https://github.com/orgs/betterbrowser/projects/2">Roadmap</a> 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
@@ -12,7 +12,7 @@ function handleShortcut(command) {
 browser.commands.onCommand.addListener(handleShortcut);
 
 // Remove X-frame headers - required for Peek to work
-var defaultRgx = ["<all_urls>", "*://*/*", "https://*.w3schools.com/*"].join('\n')
+var defaultRgx = ["<all_urls>", "*://*/*"].join('\n')
 var theRegex = null;
 var headersdo = {
     "content-security-policy": (x => { return false }),

diff --git a/...idebar/fonts/Nunito-VariableFont_wght.ttf → ...onents/fonts/Nunito-VariableFont_wght.ttf b/...idebar/fonts/Nunito-VariableFont_wght.ttf → ...onents/fonts/Nunito-VariableFont_wght.ttf
diff --git 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,[email protected],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
@@ -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();
-        }
-    };
-});
+
+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();
diff --git a/src/components/settings/settings.html b/src/components/settings/settings.html
@@ -1,10 +1,76 @@
-<span>Peek tabs by pressing shift while clicking on a link</span>
-<input type="checkbox" name="" id="" />
+<h3>General</h3>
+<span>Open a Peek window when clicking on links with Shift held</span>
+<input disabled type="checkbox" name="" id="" checked />
+<h3>Favorites</h3>
+<span>Pin some tabs!</span>
+<div style="height: 10px"></div>
+<input type="text" id="f1" placeholder="Favorite 1..." />
+<input type="text" id="f2" placeholder="Favorite 2..." />
+<input type="text" id="f3" placeholder="Favorite 3..." />
+<button id="btn">Save and <i>restart</i> ArcFox</button>
+<button id="save">Restart later</button>
 <style>
+  * {
+    user-select: none;
+  }
   body {
-    font-family: Arial;
-    display: inline;
-    background-color: #292d2d;
+    font-family: Nunito;
+    background-color: #1a1d25;
+    color: white;
+    padding: 10px;
+  }
+  @font-face {
+    font-family: Nunito;
+    src: URL("../fonts/Nunito-VariableFont_wght.ttf") format("truetype");
+  }
+  h3 {
+    margin: 15px 0 6px 0;
+    padding: auto;
+  }
+  ::selection {
+    background-color: #565c78;
+  }
+  input {
     color: white;
+    background: transparent;
+    font-family: Nunito;
+    font-size: 16px;
+    padding: 8px;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.398);
+    transition: 0.2s;
+    cursor: pointer;
+    margin-bottom: 10px;
+  }
+  input:focus {
+    scale: 0.98;
+    outline: none;
+    cursor: default;
+  }
+  button {
+    background-color: rgb(93, 93, 130);
+    color: white;
+    padding: 10px;
+    border: 0;
+    border-radius: 10px;
+    font-family: Nunito;
+    font-size: 14px;
+    font-weight: 800;
+    cursor: pointer;
+    transition: 0.1s;
+  }
+  button:hover {
+    scale: 1.02;
+  }
+  button:active {
+    scale: 0.98;
+  }
+  button#save {
+    margin-top: 10px;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.65);
+    font-weight: 400;
+    border: 1px solid rgba(255, 255, 255, 0.226);
   }
 </style>
+<script src="settings.js"></script>
diff --git a/src/components/settings/settings.js 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
+    });
+  })
+}
diff --git a/src/components/sidebar/sidebar.html b/src/components/sidebar/sidebar.html
@@ -18,23 +18,15 @@
             <button id="size"><i class="fa-solid fa-circle"></i></button>
             <button id="hide"><i class="fa-solid fa-circle"></i></button>
           </div>
-          <!-- Settings page?
           <button id="settings"><i class="fa-solid fa-gear"></i></button>
-          -->
           <button id="back"><i class="fa-solid fa-arrow-left"></i></button>
           <button id="front"><i class="fa-solid fa-arrow-right"></i></button>
           <button id="refresh"><i class="fa-solid fa-rotate-right"></i></button>
         </div>
         <div class="address-bar">
           <input id="search-input" type="text" placeholder="Search..." />
         </div>
-        <!-- Favorites?
-        <button class="favorite">
-          <img
-            src="https://mailmeteor.com/logos/assets/PNG/Gmail_Logo_512px.png"
-            alt=""
-          />
-        </button>-->
+        <div id="favorites"></div>
         <div id="space-info">
           ✨
           <input id="space-name" value="Space 1" />