Skip to content

Commit

Permalink
ArcFox v2.5.3
Browse files Browse the repository at this point in the history
  • Loading branch information
GuiMar10 authored Sep 5, 2024
2 parents eb4c867 + d35058f commit ce950e5
Show file tree
Hide file tree
Showing 16 changed files with 886 additions and 271 deletions.
16 changes: 8 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,11 @@ If you want to contact us, open a <a href="https://github.com/betterbrowser/arcf

### Non-Essential:

- [x] Notes
- [x] Share Notes
- [x] Keep notes on refresh
- [ ] Rich-text and Markdown features
- [ ] Dynamic color
- [x] Peek
- [x] Use Shift to Peek
- [x] Works in most webpages (Report if smth doesn't work as expected)
Expand All @@ -49,11 +54,6 @@ If you want to contact us, open a <a href="https://github.com/betterbrowser/arcf
- [ ] Stackable Folders
- [ ] Rename Folders
- [ ] Pin Folder?
- [x] Notes
- [x] Share Notes
- [x] Keep notes on refresh
- [ ] Rich-text and Markdown features
- [ ] Dynamic color
- [ ] Easels (under development)
- [ ] Share Easels
- [ ] Move elements
Expand All @@ -78,13 +78,13 @@ If you want to contact us, open a <a href="https://github.com/betterbrowser/arcf
- [ ] Bookmarks
- [ ] Spaces
- [ ] Spaces Feature
- [ ] Rename Spaces
- [x] Rename Spaces
- [ ] Change Spaces Icon
- [ ] Launchpad (you can use omni while it's not out)
- [ ] Boosts
- [ ] Boosts Feature
- [ ] Boosts Store
- [ ] Arc Palette
- [x] 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

Expand All @@ -107,7 +107,7 @@ ArcFox still has a lot of features to be implemented and you can see our <a href

<img src="public/media/screenshot.png"/>

ArcFox is a pack of firefox improvements that brings the appearance and some of the features of arc browser to firefox. Recently, The Browser Company © (the developers of arc browser) announced a windows version, so this project almost lost the reason to exist. But there still a linux version to be made and some people just like firefox and don't want to change.
ArcFox is a pack of firefox improvements that brings the appearance and some of the features of arc browser to firefox. Recently, The Browser Company © (the developers of arc browser) announced a Windows version, so this project almost lost the reason to exist. But there's still a linux version to be made and some people just like firefox and don't want to change.

I really recomend you to give a try on arc browser if you can. But we gonna do our best to make firefox nice as arc.

Expand Down
34 changes: 23 additions & 11 deletions src/components/peek/peek.css
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@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-foregroundPrimary: #c7c0e9 !important;
--arc-palette-background: #1c1a26 !important;
--arc-palette-backgroundExtra: #2b2839 !important;
}

/* Peek */
Expand All @@ -14,21 +14,31 @@ div#peekpage {
padding: 0;
border-radius: 4px;
animation: peekopen 0.5s;
}
div#peekpage::backdrop {
background: rgba(57, 59, 82, 0.6);
transition: scale 0.21s cubic-bezier(0.63, -0.01, 0.47, 1) !important;
}
div#peekpage iframe {
width: 100%;
height: 100%;
border: 0;
margin-bottom: -5px;
}
div#peekbackdrop {
display: none;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
position: fixed;
z-index: 2147483647;
background: rgba(57, 59, 82, 0.6);
transition: opacity 0.3s;
opacity: 0;
}

.peektools {
border-radius: 100px;
border: 0;
font-family: "Material Symbols Outlined";
display: inline-flex;
font-size: 20px;
font-weight: 300;
width: 30px;
Expand All @@ -37,19 +47,21 @@ div#peekpage iframe {
position: fixed;
transform: translateX(calc(74vw + 10px));
z-index: 1000;
cursor: default;
cursor: default !important;
animation: buttonappear 1s;
background: white;
color: black;
transition: 0.1s;
transition: background 0.1s !important;
}

.peektools:hover {
background: #dbdbdb;
background: #d4d4d4;
}

.peektools::after {
content: attr(id);
.peektools img {
width: 17px;
position: relative;
margin: auto;
}

.peektools#open_in_full {
Expand Down
35 changes: 26 additions & 9 deletions src/components/peek/peek.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ peekPage.popover = true;

// Backdrop
var peekBackdrop = document.createElement('div');
peekBackdrop.style = "display: none; height: 100vh; width: 100vw; top: 0; left: 0; position: fixed; z-index: 2147483647;";
peekBackdrop.id = 'peekbackdrop'
peekBackdrop.onclick = () => closePeek();

// Iframe
Expand All @@ -16,20 +16,27 @@ var peekIframe = document.createElement("iframe");
var tools = [{ name: 'close' }, { name: 'open_in_full' }]
tools.forEach((tool) => {
var btn = document.createElement('button');
var icn = document.createElement('img')
btn.className = 'peektools'
btn.id = tool.name
if (tool.name == 'close') {
icn.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAADQklEQVR4Xu2cgU0cMRBFoQNKoIS0QAfQQVJJSoioICVAB1ACJVBCSognOqNTuNsd7+33/5P8lSwhnY/xvLdj39mru77yRSVwTY3u4FcWQL4JLMACyATI4V0BFkAmQA7vCrAAMgFyeFeABZAJkMO7AiyATIAc3hVgAWQC5PCuAAsgEyCHdwVYAJkAObwr4D8QcNNy/NHaY2tv5Hyz4b+0jt9b+9bar+ybtvRDV0DA/9na/SGRuwISAv5Ta7eHscaYYRKQAo7h95sjElGWcAy/jzmqFiYBJeAUfHUJp+DDJSAELMFXlbAEHyoBISDm/K+JBUllOsrA7+m8HqajRHq5LggBkdBLa1EJaxdbwgj8GGt8KnpeS2rkdYSAiF9BAh1+gEIJUJcgAR8tQFWCDPwZAtQkSMGfJUBFghz8mQLYEiThzxbAkiALnyFgtgRp+CwBsyTIw2cKQEsoAZ8tACWhDHwFAXtLKAVfRcBeEsrBVxJwqYSS8NUEbJUQ7+tnuPH30gXZUl4LuvQ6cjd067hGt7ID6m0imBx8xQroHEckJNj/eaph98OUTOC1PooVsLcEWfjKFbCXBGn4FQSMLszHFS8Pv4qALRJKwK8mIPtRM/JiP22xtvZ+vK68CB+vAyPw+/tKSFAXMPIN99RdJy9BWcCl8EtUgqqAveDLS1AUMAI/ppi4bhKrnuR0pCZgFH5sL7y3VuVZ1E/3iZKALfCfDxmN7B1JVYKKgEvgb9m2kJGgIGAP+GUlsAXsCb+kBKYABPxyElgCkPBLSWAImAG/jITZAmbCLyFhpgAGfHkJswQw4UtLmCFAAb6sBLQAJfiSEpACFOHLSUAJUIYvJQEhoAJ8GQkIAXGAfp88IFF4XHBkK/u15XWXyC3dBSEgTqfigCQSO3fFdrAC/JFKeGudH1p7T9NNdEQIiLBLEtTgZyRA4EdglIBzElThL0mAwUcL+FuCOvxTEqDwZwjoEmJhjp+t7Ge4idmR2iXWr/ipzX7oDxsMcgqCDfpf+scWQLZpARZAJkAO7wqwADIBcnhXgAWQCZDDuwIsgEyAHN4VYAFkAuTwrgALIBMgh3cFWACZADm8K8ACyATI4V0BFkAmQA7/G7QFKHBqnVVRAAAAAElFTkSuQmCC"
btn.onclick = () => closePeek()
} else {
icn.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAACo0lEQVR4Xu2c6VEDMQxGkw4oISVASVRISqKEdAC7w2YmE5KsJB+fj8cMv5At+z3LeJ3jeOBHSuAozU7yAwLEiwABCBATEKenAhAgJiBOTwUgQExAnJ4KQICYgDg9FYCA7AR+svfo69C1qF3BvnHIohEgQ/+XGAEIsBNgC7Kzska6mLqCrSMQx7EFIcBOgAqws7JGupi6gq0jGCDufZnD1/J7CszFxdQVHBhMj01S4K/zdTF1BfdI0znmVPgIcAK/Dc8BHwFBAbngIyAgwAP/svT/tpPDta27ggOTa72JF/7ndjp6NS8XU1dw6zSd44vAPy859p60XUxdwc4Jthwehb/OCQGJZlPgI0AMHwEJAlJX/jU1W1BAQi74VIAYPgKcAnKufLagBuBTAUYJJVY+FdAAfCpgR0LJlU8FNACfCngiocbKpwIagE8F3EmoufKpgAbgUwGbBMXKN56CfWE9viAzDPxVVW8ChoLfm4Dh4PckYEj4vQgYFn4PAoaG37qA4eFHBWR9UbqR6wXf4T1jdOQYWlrAFCv/6rA1AVPBb20Lmg5+SwKmhN+KgGnhtyBgavhqAdPDVwoA/nYOVRxDgX/zIFdbAPDvnqJrCgD+gyuMWgKA/+T+qIYA4L+4vCstAPg7N6clBQDfcG1dSgDwDfBLPYh9LB1bv+zossSuH/8/G8c7XFiJCvheKJ0MpKaHX6oCDOwPwC94FbEnAPiFryJeCQB+hauIZwKAX+kq4pEA4Fe8itj7H5D698jJLTVnsfaRyey9L6jYYBMODqXHFO4fAWF0eRoiIA/HcC8ICKPL0xABeTiGe0FAGF2ehgjIwzHcS0RAOBkN/xNAgHhVIAABYgLi9FQAAsQExOmpAASICYjTUwEIEBMQp6cCECAmIE7/C1340WHSbvzYAAAAAElFTkSuQmCC"
btn.onclick = () => {
closePeek();
window.open(iframeOldSrc);
}
}
btn.appendChild(icn)
peekPage.appendChild(btn);
})

function closePeek() {
async function closePeek() {
peekPage.style.scale = 0;
peekBackdrop.style.opacity = 0;
await new Promise(resolve => setTimeout(resolve, 300));
peekPage.hidePopover();
document.body.style.overflow = ''
peekBackdrop.style.display = 'none'
Expand All @@ -41,23 +48,33 @@ document.body.appendChild(peekBackdrop);
document.body.appendChild(peekPage);
peekPage.appendChild(peekIframe);


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");
Array.from(collection).forEach((element) => {
element.onclick = (event) => {
if (event.shiftKey) {
event.preventDefault();
peekPage.showPopover();
peekPage.style.scale = "";
peekIframe.src = element.href;
peekBackdrop.style.display = 'block';
peekBackdrop.style.opacity = 1;
document.body.style.overflow = 'hidden';
peekPage.showPopover();
}
};
});
}
loadPeek();
loadPeek();

const observer = new MutationObserver((mutationsList) => {
mutationsList.forEach(mutation => {
mutation.addedNodes.forEach(node => {
if (node.nodeType == Node.ELEMENT_NODE && node.tagName == 'A') {
loadPeek();
}
});
})
});

observer.observe(document.body, { childList: true, subtree: true });
18 changes: 3 additions & 15 deletions src/components/settings/settings.html
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
<!DOCTYPE html>
<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>
<br />
<button id="btn">Save changes</button>
<style>
* {
user-select: none;
Expand Down Expand Up @@ -65,12 +60,5 @@ <h3>Favorites</h3>
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>
48 changes: 1 addition & 47 deletions src/components/settings/settings.js
Original file line number Diff line number Diff line change
@@ -1,51 +1,5 @@
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
});
})
}
})
5 changes: 4 additions & 1 deletion src/components/sidebar/sidebar.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@
<button id="size"><i class="fa-solid fa-circle"></i></button>
<button id="hide"><i class="fa-solid fa-circle"></i></button>
</div>
<button id="settings"><i class="fa-solid fa-gear"></i></button>
<!-- Settings
<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>
Expand All @@ -33,6 +35,7 @@
</div>
</div>
<div id="sidebar-content">
<hr />
<button id="new-tab-button">+ New Tab <span>Ctrl+T</span></button>
<ul id="tab-list"></ul>
</div>
Expand Down
Loading

0 comments on commit ce950e5

Please sign in to comment.