Skip to content

Commit bf52639

Browse files
aminoughtaminought
authored
update README.md
1 parent b872406 commit bf52639

File tree

1 file changed

+95
-90
lines changed

1 file changed

+95
-90
lines changed

‎README.md

Lines changed: 95 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,111 @@
11
# Second Sidebar for Firefox
22

3-
A Firefox userChrome.js script for adding a second sidebar with web panels like in Vivaldi/Floorp/Zen.
3+
A Firefox userChrome.js script for adding a second sidebar with web panels like in Vivaldi/Floorp/Zen but better.
44

5-
![promo_rounded](https://github.com/user-attachments/assets/d81493d3-a7f7-4798-9249-a2b9e5e3a8b7)
5+
![promo_rounded](https://github.com/user-attachments/assets/d3cd7163-6b9c-4005-a422-2995490c1be0)
66

77
## Motivation
88

99
There are many forks of Firefox, but I prefer to continue using the original browser. However, I have also tried other browsers such as Vivaldi, Floorp and Zen. I also miss the feature of having a decent sidebar with web panels, which is why I decided to create my own version, with blackjack and hookers.
1010

1111
## Demo
1212

13-
https://github.com/user-attachments/assets/e11f7657-62b0-4936-994f-5c8ae13618f6
13+
https://github.com/user-attachments/assets/a92fb9b5-84d5-42a1-99f3-ad718767383f
1414

1515
## Features
1616

17-
<table>
18-
<tr>
19-
<td>
20-
<h3>Adding new web panel</h3>
21-
<ol>
22-
<li>Left-click on the Plus button.</li>
23-
<li>Enter the web address. The current address will be automatically inserted into the field.</li>
24-
<li>Press Enter or click on the "Create" button.</li>
25-
<li>A new web panel will be created with default settings.</li>
26-
</ol>
27-
</td>
28-
<td><img src="https://github.com/user-attachments/assets/da636324-3408-4c6b-b625-84d6a0090e88" width="400px" /></td>
29-
</tr>
30-
<tr>
31-
<td>
32-
<h3>Changing width of the web panel</h3>
33-
After creating a web panel, you might want to consider changing its width. To achieve this, position the mouse cursor at the edge of the web panel opposite the sidebar and then drag it.
34-
</td>
35-
<td><img src="https://github.com/user-attachments/assets/6c47c56d-4d7c-467f-83b8-018cc3547370" width="400px" /></td>
36-
</tr>
37-
<tr>
38-
<td>
39-
<h3>Pinning and unpinning the web panel</h3>
40-
Depending on your needs, you can pin the web panel to the side of the web page or make it appear on top of the content.
41-
</td>
42-
<td><img src="https://github.com/user-attachments/assets/048fd1e2-d50e-4ffc-beba-dc33d06e7251" width="400px" /></td>
43-
</tr>
44-
<tr>
45-
<td>
46-
<h3>Mobile view and zooming</h3>
47-
There is an option to open the website using the mobile user agent. There are also buttons to zoom in and out of the content.
48-
</td>
49-
<td><img src="https://github.com/user-attachments/assets/fad1d08e-f906-47d1-990d-9e6568e1512b" width="400px" /></td>
50-
</tr>
51-
<tr>
52-
<td>
53-
<h3>Unloading the web panel from memory</h3>
54-
To save memory, you can manually unload the web panel using two methods: the toolbar button or the context menu.
55-
</td>
56-
<td><img src="https://github.com/user-attachments/assets/d41a7e0b-f751-45a4-9403-653254417ee1" width="400px" /></td>
57-
</tr>
58-
<tr>
59-
<td>
60-
<h3>Web panel settings</h3>
61-
Here you can change the following:
62-
<ol>
63-
<li>Page address. After changing the relevant field, please wait one second for the changes to be temporarily applied. They will be saved or canceled depending on your next action.
64-
</li>
65-
<li>Favicon address. The same as for the page address.</li>
66-
<li>Web panel type: floating or pinned.</li>
67-
<li>Use mobile User Agent.</li>
68-
<li>Load into memory at startup: automatic loading of the web panel. </li>
69-
<li>Unload from memory after closing.</li>
70-
<li>Hide toolbar: "headless" web panel.</li>
71-
<li>Zoom.</li>
72-
<li>Position of the web panel button.</li>
73-
</ol>
74-
All changes are applied instantly, but can be rolled back by clicking the "Cancel" button or by losing focus. They are saved only after clicking the "Save" button.
75-
</td>
76-
<td><img src="https://github.com/user-attachments/assets/78d01e86-26cf-4726-8dae-8f8588a30c2e" width="400px" /></td>
77-
</tr>
78-
<tr>
79-
<td>
80-
<h3>Deleting the web panel</h3>
81-
There is confirmation of the deletion, so you don't need to worry about accidentally deleting the web panel.
82-
</td>
83-
<td><img src="https://github.com/user-attachments/assets/f564e590-a7ab-4a66-aa50-d7e8169a3f89" width="400px" /></td>
84-
</tr>
85-
<tr>
86-
<td>
87-
<h3>Sidebar settings</h3>
88-
Here you can change the following:
89-
<ol>
90-
<li>Sidebar position: left or right.</li>
91-
<li>Sidebar buttons position: top or bottom.</li>
92-
<li>Plus button position: above web panel buttons or below them.</li>
93-
<li>Sidebar width with predefined values.</li>
94-
<li>Sidebar buttons size in pixels.</li>
95-
<li>Floating web panel offset.</li>
96-
<li>Hide sidebar in popup windows.</li>
97-
<li>Auto-hide of back and forward buttons from toolbar.</li>
98-
</ol>
99-
All changes are applied instantly, but can be rolled back by clicking the "Cancel" button or by losing focus. They are saved only after clicking the "Save" button.
100-
</td>
101-
<td><img src="https://github.com/user-attachments/assets/21fc96c3-8cf5-463a-a2ba-f3ca75a70132" width="400px" /></td>
102-
</tr>
103-
</table>
17+
<details>
18+
<summary>⚠️ Warning: data-intensive GIFs under spoiler ⚠️</summary>
19+
<table>
20+
<tr>
21+
<td>
22+
<h3>Adding new web panel</h3>
23+
<ol>
24+
<li>Left-click on the Plus button.</li>
25+
<li>Enter the web address. The current address will be automatically inserted into the field.</li>
26+
<li>Choose Multi-Account Container if you want.</li>
27+
<li>Press Enter or click on the "Create" button.</li>
28+
<li>A new web panel will be created with default settings.</li>
29+
</ol>
30+
</td>
31+
<td><img src="https://github.com/user-attachments/assets/5b7c3802-3de7-4ac3-8c3d-93ea07c91f09" width="400px" /></td>
32+
</tr>
33+
<tr>
34+
<td>
35+
<h3>Pinning and unpinning the web panel</h3>
36+
Depending on your needs, you can pin the web panel to the side of the web page or make it appear on top of the content.
37+
</td>
38+
<td><img src="https://github.com/user-attachments/assets/048fd1e2-d50e-4ffc-beba-dc33d06e7251" width="400px" /></td>
39+
</tr>
40+
<tr>
41+
<td>
42+
<h3>Mobile view and zooming</h3>
43+
There is an option to open the website using the mobile user agent. There are also buttons to zoom in and out of the content.
44+
</td>
45+
<td><img src="https://github.com/user-attachments/assets/fad1d08e-f906-47d1-990d-9e6568e1512b" width="400px" /></td>
46+
</tr>
47+
<tr>
48+
<td>
49+
<h3>Unloading the web panel from memory</h3>
50+
To save memory, you can manually unload the web panel using two methods: the toolbar button or the context menu.
51+
</td>
52+
<td><img src="https://github.com/user-attachments/assets/520b38dd-5515-47dc-89c9-407ad9dc7155" width="400px" /></td>
53+
</tr>
54+
<tr>
55+
<td>
56+
<h3>Web panel settings</h3>
57+
Here you can change the following:
58+
<ol>
59+
<li>Page address. After changing the relevant field, please wait one second for the changes to be temporarily applied. They will be saved or canceled depending on your next action.
60+
</li>
61+
<li>Multi-Account Container.</li>
62+
<li>Favicon address. The same as for the page address.</li>
63+
<li>Web panel type: floating or pinned.</li>
64+
<li>Use mobile User Agent.</li>
65+
<li>Load into memory at startup: automatic loading of the web panel. </li>
66+
<li>Unload from memory after closing.</li>
67+
<li>Hide toolbar: "headless" web panel.</li>
68+
<li>Zoom.</li>
69+
<li>Position of the web panel button.</li>
70+
</ol>
71+
All changes are applied instantly, but can be rolled back by clicking the "Cancel" button or by losing focus. They are saved only after clicking the "Save" button.
72+
</td>
73+
<td><img src="https://github.com/user-attachments/assets/a19976d6-b4f8-4baa-a99b-c22bce6ab864" width="400px" /></td>
74+
</tr>
75+
<tr>
76+
<td>
77+
<h3>Deleting the web panel</h3>
78+
There is confirmation of the deletion, so you don't need to worry about accidentally deleting the web panel.
79+
</td>
80+
<td><img src="https://github.com/user-attachments/assets/5a870ce7-76d3-4297-a8e4-5603cb1dff3a" width="400px" /></td>
81+
</tr>
82+
<tr>
83+
<td>
84+
<h3>Sidebar settings</h3>
85+
Here you can change the following:
86+
<ol>
87+
<li>Sidebar position: left or right.</li>
88+
<li>Sidebar width (padding).</li>
89+
<li>Floating web panel offset: distance between sidebar and floating web panel.</li>
90+
<li>New web panel position: before or after "Plus" button.</li>
91+
<li>Container indicator position: which side of web panel button to color.</li>
92+
<li>Hide sidebar in popup windows.</li>
93+
<li>Auto-hide of back and forward buttons from toolbar.</li>
94+
</ol>
95+
All changes are applied instantly, but can be rolled back by clicking the "Cancel" button or by losing focus. They are saved only after clicking the "Save" button.
96+
</td>
97+
<td><img src="https://github.com/user-attachments/assets/b0cea2a7-99bc-4098-b417-08d2416c0c65" width="400px" /></td>
98+
</tr>
99+
<tr>
100+
<td>
101+
<h3>Customization</h3>
102+
You can customize the Second Sidebar like any other toolbar in Firefox: https://support.mozilla.org/en-US/kb/customize-firefox-controls-buttons-and-toolbars.
103+
Moreover, you can also move your web panel buttons to other toolbars!
104+
</td>
105+
<td><img src="https://github.com/user-attachments/assets/51403ab6-c9e8-4317-bf40-2b68691308d6" width="400px" /></td>
106+
</tr>
107+
</table>
108+
</details>
104109

105110
## Install (fx-autoconfig)
106111

0 commit comments

Comments
 (0)