-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy path2022-08-28-browser-black-magic.md
More file actions
120 lines (96 loc) · 9.56 KB
/
Copy path2022-08-28-browser-black-magic.md
File metadata and controls
120 lines (96 loc) · 9.56 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
---
layout: post
title: "Browser Black Magic"
date: 2022-08-28
tags: [guide, coding, opinion]
authors: [Bob]
comments: true
---
As you might know, I hate Google, and I want to remove it from my life as much as I can.
So let's talk about browsers.
Chrome is not an option and even if Chromium is fully de-googled, I'm still never going to use it.
Why? It *reminds* me of Google.
I understand that a basic product which wants to achieve wide accessibility has to have a consistent UI that never changes much and has to be as flat as possible without any niche functions not everybody would use frequently -- because those would distract and confuse.
But keeping the UI as plain as possible results in a boring appearance and a very dull feeling when using it.
That's what I dislike so much about Material Design by Google.
It is so much optimised to work in every use case that it is by far the worst set of icons, colours, button designs and UI elements I have seen yet.
I would rather use a desktop designed like macOS X Cheetah than one that follows the Material Design guidelines.
And Chromium is also such a product that is so hardly optimised for everyone that it is very badly optimised for each individual user.
But I'm not grandma Dorothea who never used anything else than Chrome (installed by her grandson who studies computer science which she misinterpreted as service technician) and when suddenly a second tab opened, she is screwed and doesn't know how to navigate anymore because it now looks slightly different.
I'm not somebody who doesn't know how to use a computer.[^use-computers]
Now, what works better for me?
- Firefox.
It doesn't eat your memory as much, and I very much like the way Mozilla does things.
For example, their extensive documentations for web developers that even cover products by Google for which Google itself does not provide any documentation.
- Vivaldi.
Very customisable by default, and I can move the tabs on the left side with a simple setting.
But it's based on Chromium, so it's also memory-hungry.
- Arc.
A new hyped browser that claims to create a brand-new experience because it does everything different.
But it actually doesn't, because it's also based on chromium like everything else and just puts a fancy macOS design on it.
The tab list is great and the shortcuts and commands as well, but why the hell does it shrink the URL field to such miniscule widths?
Like, if you never want to see the path you are visiting?
I tried many things, but in the end stuck to the good old Firefox, which I modified so heavily that it neither looks, nor feels like Firefox.
It's so different from anything else that probably nobody else knows how use it.
But nobody else has to.
And because I looked at every single component to find out how I could modify it to make it better, I know exactly how it functions, and only that matters.
Because of that, I also don't have to write down how it works and since it's my computer, I don't have to explain it to anybody.
Although I'm doing precisely that right here.
So, this is how my Firefox looks like:
{:width='100%'}
What you'll find is that the tabs are on the left and in a vertical list, that they group into a tree structure, that there are no close buttons, no scrollbar, not even a button for opening a new tab.
In the address bar, there is no reload button, no back and forward buttons, no bookmarks, no title bar, no row of several extension icons.
But I can still access all of those functionalities I have hidden from the UI:
The tab close buttons are hidden on the favicon.
I can click the icon of any tab, and it closes.
No need to scroll in a horizontal row until I find it, open it so that the website loads and reveals the close button on the right of the tab.
I don't need a scrollbar, because I know it's a scrollable list.
New tabs can be created with **⌘+T**; I have always done it that way and don't need a button for it.
Tweaking some settings also places the newly opened tab next to the currently active and not 68 tabs farther down the list.
Same with reloading, which can be done with **⌘+R** and back and forward navigation, which I do with the mouse gesture or **⌘+⮂** and **⌘+⮀**.
Bookmarks are in the tab list as a second page.
This makes way more sense to only use them there as there is already a sidebar that occupies space and doesn't open a new one which causes layout shifts etc.
But most times I don't even need to open the bookmarks list, as the address bar already searches through them.
Speaking of the address bar, the font size of the URL is also reduced to fit even more of it.
Most extensions I have installed are passive, and they can rest in the overflow menu.
Removing all the unnecessary buttons from the address bar makes it possible to display far longer URLs than what's possible in other browsers (especially Arc) and keep the profile very thin at the same time.
Inside the list of search results, Firefox always shows a section with icons for other search engines and an entry to search with the second most used engine.
I removed those, as well as the prompt to log in for account synchronisation you'll find in the burger menu.
As the tab side bar is collapsible with a shortcut (set it to **^+⌥+B**) and the remaining UI is only the minimal address bar and a very large area for the website, I don't even need to go into full-screen mode anymore when I watch films or streams.
Also, the tree structure is produced when opening links from one page that open in a new background tab.
I almost always do that by holding **⌘** when clicking a link.
Tabs can also moved into groups manually.
So how have I done it?
### enable compact mode
Follow [this guide](https://support.mozilla.org/en-US/kb/compact-mode-workaround-firefox) to reduce the height of the default tab bar by enabling compact mode.
### install Sidebery extension
The sidebar listing the tabs comes from [Sidebery](https://github.com/mbnuqw/sidebery).
It has a massive amount of settings that are actually useful and worth to fully search through.
If you want to start with [my settings](https://gist.github.com/CodingBobby/4a953c5c2e4709247d1b9b7a51e8d09f), you can import them below the *help* section in Sidebery's settings.
Customising the looks of it is easy to do with the provided *styles editor*.
This is the CSS I added:
<script src="https://gist.github.com/CodingBobby/3ba7714de8e94af056579a8c3d3e87b4.js"></script>
### enable userChrome.css
In order to modify the CSS of the browser itself, the stylesheet `userChrome.css` has to be read by Firefox[^breaking-changes].
To enable it, navigate to `about:config` (enter it into the address bar) and search for the setting `toolkit.legacyUserProfileCustomizations.stylesheets` (copy that into the search field).
Double click onto the resulting setting element to set its state from `false` to `true`.
Now, find the location for the CSS file; on macOS, at `~/Library/Application Support/Firefox/Profiles/` there are several folders starting with a random ID, followed with the user profile.
You should move into the one ending in `.default-release` and create a new folder named `chrome` if not present already.
Inside there you can finally create the file `userChrome.css` and enter your custom code[^custom-css].
Changes do not apply in real-time and you have to restart Firefox to apply the changes.
Mine is this:
<script src="https://gist.github.com/CodingBobby/1db38a9b90e1bc41bab302017ecd3cc2.js"></script>
### tweak other settings
The arrangement and visibility of the other buttons in the new toolbar can be dragged and removed after you right click on the bar and go to *customise menu* (where you have previously chosen compact mode).
I removed everything except the screenshot button (because I otherwise forget that Firefox has its own screenshot tool) and very few extensions I often want to look at or click on.
And that's it!
I now have the perfect browser that protects my privacy far more than any default browser would[^extensions], has the most space efficient UI out there, and can only be used by myself (and you, who read this).
Believe me, it's a far greater experience to surf and research now.
Maybe, this little guide helps you to realise, that browsers don't have to be the most boring piece of software you're using every day, that you don't have to throw your private data at Google just to browse the internet, and that you don't have to fear to customise your computer to an extend that would confuse other people.
Go ahead, and figure out how to make your browser better!
---
{: data-content="footnotes"}
[^use-computers]: [This](http://coding2learn.org/blog/2013/07/29/kids-cant-use-computers) blog from over 9 years ago will never loose relevance.
[^breaking-changes]: You might argue that Firefox is in active development and CSS selectors and other functionalities likely change in the future and break your modified version. Yes, that will totally happen. But as it is only one CSS file I can simply rename to let it be ignored by Firefox and the tab sidebar is only an extension I can deactivate, it is very quick to get back to the default browser.
[^custom-css]: [Here](https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules) is a very extensive list of things you can do with `userChrome.css` and other hidden tweaks.
[^extensions]: Thanks to the extensions [Privacy Badger](https://privacybadger.org/), [Decentraleyes](https://decentraleyes.org/), [NeatURL](https://addons.mozilla.org/de/firefox/addon/neat-url/), [uBlock Origin](https://github.com/gorhill/uBlock#ublock-origin) and [Request Control](https://addons.mozilla.org/de/firefox/addon/requestcontrol/).