ShyFox 4.0-css teaser

[Naezr]

2024-08-11.19-55-01.webm

upd:

2024-09-19.11-49-54.webm

[niksingh710]

firefox should hire you buddy... this is sick ....

[loaykhalifa]

Thanks for awesome theme, this suggest for URL

[Naezr]

New Firefox sidebar is cool

2024-08-14.18-46-46.webm

[Naezr]

Native vertical tabs now lack only one function: spaces. It’s still in development, so let’s hope for the best. Otherwise, the new sidebar available in Firefox Nightly has all the other important features that Sidebery gives. Except for spaces of course

[niksingh710]

Firefox new update integrating default vertical bar

[Naezr]

[Naezr]

I think it would be cool to have the ability to add some blurred image on the sidebar background

[niksingh710]

I think it would be cool to have the ability to add some blurred image on the sidebar background

Make the wallpaper blurred there

[loaykhalifa]

Yes, yes, yes
Second photo, the URL is awesome
that make everything in sidebar (URL, TOOLBAR & TABS)
share beta version, I can test it in mac if you want.
I already run your theme in Firefox nightly.

[Naezr]

share beta version

https://github.com/Naezr/ShyFox/tree/4.0-alpha

[Naezr]

2024-08-18.12-44-14.webm

[loaykhalifa]

Can't show close & minimize button in alpha 4.0
even I do

** - On macOS, you need to disable native context menus to see icons.
widget.macos.native-context-menus => false

[loaykhalifa]

can you add sidbary css in alpha too

[Naezr]

The window control buttons have not yet been implemented. First I need to make the left side autohide. The window control buttons have to adapt to everything around it. And when everything around is not done yet, there is no point in making them. 4.0 is being written from scratch, and this is just an early prototype, nothing more. Styles for Sidebery are easily ported from 3.0, as well as some other things. However, that's not as important now as the implementation of the core functionality.

---

** - On macOS, you need to disable native context menus to see icons. widget.macos.native-context-menus => false

It has nothing to do with alpha 4.0 at the moment. It doesn't have context menu styles and icons in it. Obviously that will come later, but there are more important things right now

[loaykhalifa]

You main this issue ?!!

[Naezr]

Realize it's alpha. Nothing's finalized yet. Even the most basic things aren't done yet

[Naezr]

2024-08-19.15-00-51.webm

[armindarvish]

@Naezr Since you are working on 4.0, I think in addition to the native vertical tabs and sideberry, it would be nice if you could add support for other some other vertical tab bar extensions as well. I, personally, prefer the simplicity of "Tab Center Reborn" over the bells and whistles in sideberry and it takes less room on the right side and looks much cleaner too.

I have modified shyfox in my own setup to do this, but with the complexity of the code you have, it's now hard to update every time. Here is a screenshot:

[Naezr]

Quite realizable

[loaykhalifa]

There are three spots

First spot: sidebar ON with new firefox functions (AI chatbot,....)

Second spot: can you hide this section? At all.
To make sideBERY wider like you see in second photo

Third spot: there is a cut-off of sideBERY on the bottom when turn ON (true)

• shyfox.position.navbar
• shyfox.position.bookmarkbar
  

[loaykhalifa]

This is what I mean

[Naezr]

That's roughly how I imagine the future “Sidebery mode” to look like.

Since Firefox will have its own vertical tabs, some users will want to use them instead of Sidebery. It will also provide some benefits, like transparency and the ability to use the other sidebar applets.

For fans of Sidebery and other extensions with vertical tabs, there will be a special setting in 4.0. When this setting is enabled, if Sidebery (or another extension) is opened in the sidebar, then the rest of the sidebar interface will disappear. Like the current behavior in 3.0. If this setting is disabled, extensions with vertical tabs will behave like other sidebar extensions.

[awwpotato]

As of Firefox v130 Sidebery can be transparent. You just need to enable browser.tabs.allow_transparent_browser and add window#webextpanels-window { background: transparent !important; } to userChrome.

[loaykhalifa]

Nice work
sideBERY Heights fixed

[loaykhalifa]

The main webpage doesn't fold
& sideBERY Heights fixed 👍 (bottom issue)

[loaykhalifa]

After last alpha update everything work smoothly thank you very much Naezr
But I still prefer sideBERY functionality on photo no. [2]&[3]
Because SideBERY customizable

photo [1]

• sideBERY OFF
  Native nightly Firefox
• Sidebar ON
• Vertical tab ON
  

---

photo [2]

• sideBERY ON
  Native nightly Firefox
• Sidebar OFF
• Vertical tab OFF
• show sidebar (toolbar icon) OFF

i know you will kill me about that 😅
A. please add window bottoms (close,min,max) for mac
B. Remove sideBERY header

---

photo [3]

• sideBERY ON
  Native nightly Firefox
• Sidebar ON
• Vertical tab OFF
• show sidebar (toolbar icon) ON
  

[loaykhalifa]

I know this is alpha version, so i'm Sorry for too much photos and suggestion, that's because I am so excited for this project and I want you to take a look for Zen browser they make sidebar side-by-side with vertical tab

[Naezr]

A. please add window bottoms (close,min,max) for mac

Those buttons are now missing not only on the mac, but everywhere else in general. I've disabled them. Everything else needs to be finalized first, in order to implement those buttons there. They will come later.

B. Remove sideBERY header

Same thing with Sidebery. It's very easy to remove the sidebar header when Sidebery is open, it's a small thing. But first I need to finalize all logic to implement this properly.

[Naezr]

they make sidebar side-by-side with vertical tab

Quite realizable, but only the width of the sidebar will be fixed and it will not be possible to change it by dragging over the edge.

---

Thanks for sharing about Zen Browser. They do things that I can't do with CSS alone. It's definitely a cool project and I'll be keeping an eye on it. However, in my opinion both Floorp and Zen Browser still feel pretty raw relative to vanilla Firefox. Zen looks neater, but there are still a lot of bugs and nasty rough edges.

But Zen has some cool animations, such as the popup animation. They can be ported to ShyFox. There's probably some other interesting stuff in there. I will dig into this project for interesting solutions that can be used in ShyFox.

[KAGEYAM4]

Does anybody know what is the behaviour of ArcBrowser when pin tabs increases, let's say 10. In sideberry the Ui is not usable if there are that many pinned items. ( Note - i may be on v3.8.0 of ShyForx )

[Naezr]

Sidebery styles are not designed to use the navigation bar on the side. Tabs should be grouped three to a row

[KAGEYAM4]

Sidebery styles are not designed to use the navigation bar on the side. Tabs should be grouped three to a row

ohh my bad. got it.

By the way have you tried vertical navigaton bar. I find it very useful as i have more than 10 panels and having navigation bar vertically seprates thing visually as we alaready have horizontal for tabs, pin - tabs .

[loaykhalifa]

I will use your theme as it is, so please please
Tell me how to window bottoms (close, min, max) for mac
yes i know I will live with bug ,but i love your SHYFOX so much
can't Wait until you done.

[Naezr]

It's more complicated than you think. You can't just turn these buttons on

[loaykhalifa]

Disable hover after URL opened

CleanShot.20240919.-.01-37.mp4

[Naezr]

I think it's already fixed

[Naezr]

shyfox.appearance.leftbar.gapless

try this after updating

[loaykhalifa]

👍 ... it fixed after i turn
shyfox.position.extbutton ..... false
shyfox.appearance.leftbar.gapless ... true

[claymorwan]

The layout looks fire tho how did u make it

[Naezr]

[loaykhalifa]

Media Full-screen issue

[Naezr]

fixed

[loaykhalifa]

urlbar have too much icon

[Naezr]

2024-09-25.18-02-50.webm

[loaykhalifa]

All URL field disappear

[loaykhalifa]

Import this if you want to save some width in bookmark Toolbar
I know you can do something better

/* Kill bookmark folder icons in the Personal Toolbar */
toolbarbutton.bookmark-item > .toolbarbutton-icon {
  display: none !important;
}

[Naezr]

All URL field disappear

Your Firefox version?

[loaykhalifa]

nightly; now working fine

[Naezr]

2024-09-25.22-54-18.webm

[KAGEYAM4]

#135 (comment)

Anyone having this lag in 4.0, i don't have 4.0. What about 3.8 stable ?

just wanted to know if this lag can be improved in 4.0.

or is this lag only with me and something is wrong on my side?

[loaykhalifa]

I love what you did in last update 4.0 for url

There is a suggestion , you can put all icons of URL in (three dot icon)
It will be much cleaner & instead of bookmarks icon (star icon) put reload icon
to save space in upper navbar for windows control {close,min,max}

[Naezr]

https://addons.mozilla.org/firefox/addon/reload-in-address-bar/

Alas, it is impossible to create a drop-down menu for all these buttons using css styles alone.

[loaykhalifa]

Sidebar still open when popup window is open

[Naezr]

should be fixed now

[loaykhalifa]

Please, @Naezr I try many times for windows control, but I can't with 4.0
could you please do that

[Naezr]

2024-10-02.12-21-27.webm

[Naezr]

Nightly 133 just broke everything...

[Naezr]

ok, not everything

[Naezr]

I hope the developers will leave the option to leave the tab bar without the tabs themselves alone. Because now, when you enable vertical tabs, all buttons from the tab bar are raked into the navigation bar. And even if you move them manually back, they will all be moved to the navigation bar on restart.

[Naezr]

[kubakakauko]

hot.

[loaykhalifa]

is that ready in 4.0 ?

[Halbour]

yooooooooo this left me so hype for 4.0!!
can't wait for the stable release...

[Naezr]

A little reflection:

I ran into the limitations of adequate CSS when creating 4.0, but was able to break through that wall with some complex tricks. However, along with this, CSS styles became very confusing and hard to read. At the same time, I started hitting the actual limitations of CSS, which can't be circumvented with tricks.

For this reason, I'm thinking of going back to fx-autoconfig to implement custom scripts, or even make my own Firefox fork. However, I can't pull off a fork just yet, since I'm alone and don't have enough knowledge to do it. So I will probably switch to fx-autoconfig in development 4.0. With this I will be able to do everything much easier, clearer, faster and at the same time many times cooler. If I can implement all of my ideas, it will be incredible.

In the meantime, I plan to continue supporting the current ShyFox so that browser updates don't break it.

[Neubulae]

Just a quick question: I didn't enjoy Firefox's own implementation of Sidebar so I decided to stick to the original Sideberry experience, plus I truly admire a "real borderless" experience(which removes visible border), so I need to tweak my own parameters. Would you include a blank file that is kept untouched(e.g.: shy-user.css) so people would whip up some of their own parameters in there?

[loaykhalifa]

+1