Skip to content

Commit 92c33a0

Browse files
GuiMar10GuiMar10
authored
v2.5.2
Favorites are here! More info on releases
2 parents 3464049 + e7b1a8c commit 92c33a0

File tree

11 files changed

+274
-62
lines changed

11 files changed

+274
-62
lines changed

‎README.md‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ And things that would make it great but are not actually necessary.
1010
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>
1111
</pre>
1212

13-
## Rebuild roadmap
13+
## Our Roadmap
1414

1515
### Essential:
1616

@@ -40,6 +40,10 @@ If you want to contact us, open a <a href="https://github.com/betterbrowser/arcf
4040

4141
### Non-Essential:
4242

43+
- [x] Peek
44+
- [x] Use Shift to Peek
45+
- [x] Works in most webpages (Report if smth doesn't work as expected)
46+
- [ ] Favorites Peek by default
4347
- [ ] Folders
4448
- [ ] Folders Feature
4549
- [ ] Stackable Folders
@@ -80,8 +84,9 @@ If you want to contact us, open a <a href="https://github.com/betterbrowser/arcf
8084
- [ ] Boosts
8185
- [ ] Boosts Feature
8286
- [ ] Boosts Store
87+
- [ ] Arc Palette
8388

84-
##
89+
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
8590

8691
<p align="center">
8792
<a href="#">
@@ -129,10 +134,6 @@ To install arcfox-theme you need to open your firefox configurations and turn st
129134
- Inside the "chrome" folder, drop the "userChrome.css" that you find on the <a href="https://github.com/betterbrowser/arcfox/releases">releases.</a>
130135
- Restart firefox.
131136

132-
# Roadmap
133-
134-
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
135-
136137
# Removing ArcFox
137138

138139
If you have a major issue, or just want a different/default look, here is how to remove ArcFox.

‎src/background.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function handleShortcut(command) {
1212
browser.commands.onCommand.addListener(handleShortcut);
1313

1414
// Remove X-frame headers - required for Peek to work
15-
var defaultRgx = ["<all_urls>", "*://*/*", "https://*.w3schools.com/*"].join('\n')
15+
var defaultRgx = ["<all_urls>", "*://*/*"].join('\n')
1616
var theRegex = null;
1717
var headersdo = {
1818
"content-security-policy": (x => { return false }),

‎src/components/sidebar/fonts/Nunito-VariableFont_wght.ttf‎ renamed to ‎src/components/fonts/Nunito-VariableFont_wght.ttf‎

File renamed without changes.

‎src/components/peek/peek.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200");
22

3+
/* Arc Palette */
4+
:root {
5+
--arc-palette-background: #1c1a26 !important;
6+
}
7+
8+
/* Peek */
39
div#peekpage {
410
height: 100vh;
511
width: 74vw;
@@ -35,6 +41,11 @@ div#peekpage iframe {
3541
animation: buttonappear 1s;
3642
background: white;
3743
color: black;
44+
transition: 0.1s;
45+
}
46+
47+
.peektools:hover {
48+
background: #dbdbdb;
3849
}
3950

4051
.peektools::after {

‎src/components/peek/peek.js‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -41,18 +41,23 @@ document.body.appendChild(peekBackdrop);
4141
document.body.appendChild(peekPage);
4242
peekPage.appendChild(peekIframe);
4343

44-
// Make peek functional in Anchor elements
45-
let collection = document.getElementsByTagName("a");
46-
Array.from(collection).forEach(function (element) {
47-
element.removeAttribute("jsaction");
48-
element.removeAttribute("target");
49-
element.onclick = (event) => {
50-
if (event.shiftKey) {
51-
event.preventDefault();
52-
peekIframe.src = element.href;
53-
peekBackdrop.style.display = 'block';
54-
document.body.style.overflow = 'hidden';
55-
peekPage.showPopover();
56-
}
57-
};
58-
});
44+
45+
document.addEventListener('DOMSubtreeModified', loadPeek, false);
46+
function loadPeek() {
47+
// Make peek functional in Anchor elements
48+
let collection = document.getElementsByTagName("a");
49+
Array.from(collection).forEach(function (element) {
50+
element.removeAttribute("jsaction");
51+
element.removeAttribute("target");
52+
element.onclick = (event) => {
53+
if (event.shiftKey) {
54+
event.preventDefault();
55+
peekIframe.src = element.href;
56+
peekBackdrop.style.display = 'block';
57+
document.body.style.overflow = 'hidden';
58+
peekPage.showPopover();
59+
}
60+
};
61+
});
62+
}
63+
loadPeek();

‎src/components/settings/settings.html‎

Lines changed: 71 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,76 @@
1-
<span>Peek tabs by pressing shift while clicking on a link</span>
2-
<input type="checkbox" name="" id="" />
1+
<h3>General</h3>
2+
<span>Open a Peek window when clicking on links with Shift held</span>
3+
<input disabled type="checkbox" name="" id="" checked />
4+
<h3>Favorites</h3>
5+
<span>Pin some tabs!</span>
6+
<div style="height: 10px"></div>
7+
<input type="text" id="f1" placeholder="Favorite 1..." />
8+
<input type="text" id="f2" placeholder="Favorite 2..." />
9+
<input type="text" id="f3" placeholder="Favorite 3..." />
10+
<button id="btn">Save and <i>restart</i> ArcFox</button>
11+
<button id="save">Restart later</button>
312
<style>
13+
* {
14+
user-select: none;
15+
}
416
body {
5-
font-family: Arial;
6-
display: inline;
7-
background-color: #292d2d;
17+
font-family: Nunito;
18+
background-color: #1a1d25;
19+
color: white;
20+
padding: 10px;
21+
}
22+
@font-face {
23+
font-family: Nunito;
24+
src: URL("../fonts/Nunito-VariableFont_wght.ttf") format("truetype");
25+
}
26+
h3 {
27+
margin: 15px 0 6px 0;
28+
padding: auto;
29+
}
30+
::selection {
31+
background-color: #565c78;
32+
}
33+
input {
834
color: white;
35+
background: transparent;
36+
font-family: Nunito;
37+
font-size: 16px;
38+
padding: 8px;
39+
border-radius: 10px;
40+
border: 1px solid rgba(255, 255, 255, 0.398);
41+
transition: 0.2s;
42+
cursor: pointer;
43+
margin-bottom: 10px;
44+
}
45+
input:focus {
46+
scale: 0.98;
47+
outline: none;
48+
cursor: default;
49+
}
50+
button {
51+
background-color: rgb(93, 93, 130);
52+
color: white;
53+
padding: 10px;
54+
border: 0;
55+
border-radius: 10px;
56+
font-family: Nunito;
57+
font-size: 14px;
58+
font-weight: 800;
59+
cursor: pointer;
60+
transition: 0.1s;
61+
}
62+
button:hover {
63+
scale: 1.02;
64+
}
65+
button:active {
66+
scale: 0.98;
67+
}
68+
button#save {
69+
margin-top: 10px;
70+
background: transparent;
71+
color: rgba(255, 255, 255, 0.65);
72+
font-weight: 400;
73+
border: 1px solid rgba(255, 255, 255, 0.226);
974
}
1075
</style>
76+
<script src="settings.js"></script>

‎src/components/settings/settings.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
browser.storage.local.get('favorites', function (result) {
2+
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 }];
3+
// Sets the URLs
4+
[0, 1, 2].forEach(i => favorites[i] && (document.querySelector(`#f${i + 1}`).value = favorites[i].url));
5+
});
6+
7+
document.querySelector('#btn').addEventListener('click', () => {
8+
saveSettings();
9+
browser.windows.getAll({ populate: true }).then((windows) => {
10+
for (let window of windows) {
11+
browser.windows.remove(window.id);
12+
}
13+
});
14+
browser.windows.create({})
15+
})
16+
17+
document.querySelector('#save').addEventListener('click', () => {
18+
saveSettings();
19+
browser.windows.getCurrent().then((window) => {
20+
browser.windows.remove(window.id)
21+
})
22+
})
23+
24+
function saveSettings() {
25+
browser.storage.local.get('favorites', function (result) {
26+
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 }];
27+
28+
[0, 1, 2].forEach((i) => {
29+
if (favoritesc[i] == undefined) {
30+
if (document.querySelector('#f' + (i + 1)).value !== "") {
31+
favoritesc[i] = {}
32+
favoritesc[i].url = document.querySelector('#f' + (i + 1)).value
33+
favoritesc[i].favicon = 'https://i0.wp.com/www.flyycredit.com/wp-content/uploads/2018/06/globe-icon-white.png?fit=512%2C512&ssl=1';
34+
favoritesc[i].id = i;
35+
}
36+
} else {
37+
if (document.querySelector('#f' + (i + 1)).value !== "" && document.querySelector('#f' + (i + 1)).value !== favoritesc[i].url) {
38+
favoritesc[i].url = document.querySelector('#f' + (i + 1)).value
39+
favoritesc[i].favicon = 'https://i0.wp.com/www.flyycredit.com/wp-content/uploads/2018/06/globe-icon-white.png?fit=512%2C512&ssl=1';
40+
}
41+
}
42+
43+
if (document.querySelector('#f' + (i + 1)).value == "") {
44+
delete favoritesc[i]
45+
}
46+
})
47+
browser.storage.local.set({
48+
favorites: favoritesc
49+
});
50+
})
51+
}

‎src/components/sidebar/sidebar.html‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,23 +18,15 @@
1818
<button id="size"><i class="fa-solid fa-circle"></i></button>
1919
<button id="hide"><i class="fa-solid fa-circle"></i></button>
2020
</div>
21-
<!-- Settings page?
2221
<button id="settings"><i class="fa-solid fa-gear"></i></button>
23-
-->
2422
<button id="back"><i class="fa-solid fa-arrow-left"></i></button>
2523
<button id="front"><i class="fa-solid fa-arrow-right"></i></button>
2624
<button id="refresh"><i class="fa-solid fa-rotate-right"></i></button>
2725
</div>
2826
<div class="address-bar">
2927
<input id="search-input" type="text" placeholder="Search..." />
3028
</div>
31-
<!-- Favorites?
32-
<button class="favorite">
33-
<img
34-
src="https://mailmeteor.com/logos/assets/PNG/Gmail_Logo_512px.png"
35-
alt=""
36-
/>
37-
</button>-->
29+
<div id="favorites"></div>
3830
<div id="space-info">
3931
✨
4032
<input id="space-name" value="Space 1" />

0 commit comments

Comments
 (0)