Font size and tab size not ideal, and a couple other issues/questions

[ghost]

Hello!

Fantastic theme, I absolutely love the vertical tabs option, and I'm so glad to see you back here on Github. However, I'm wondering if it would be possible for you to use something like Sidebery to move the URL bar on the left side like Arc Browser. It's a lot better to have the URL bar on the left, where all the tabs are just like Arc.

Also, not sure if you know, but it might be beneficial to switch to Sidebery for your vertical tabs implementation. Sidebery allows resizing of the sidebar, alongside a couple other things. It's also fully customizable. Here's an example of Sidebery being used with a custom UI. Either way, you've done a fantastic job.

Now for the bugs, I noticed a couple issues with the vertical tabs. First, in your screenshots, the text size and tab size seem a lot more bigger than in the final version. Check screenshot:

Second, the only way to have transparency in the sidebar is to enable 'system auto' in the theme. It's not possible to have transparency if you select light or dark.

Third, watching videos on YouTube on Twitch in full screen will keep the sidebar on the left. It's not a proper full screen.

Fourth, it's not possible to reorder tabs. If I want to change where a tab is and drag it, I can't do that.

I'm extremely impressed by your work. Seriously, you should be extremely proud of the work you've done here. Good job!

[akkva]

首先谢谢你的喜欢和支持

关于你反馈的几个问题我简单说一下

1.字体/标签页大小差异是不是分辨率的问题

2、3的问题已经修复

第4个问题暂时无解

还有就是Sidebery相关的，我之前有出过一版不知道你有没有留意

等我有空再折腾一下看看

如果你喜欢arc样式这边推荐你可以看一下这个主题EdgyArc-fr

[akkva]

@drkhero

I noticed a new bug while using the theme, basically when I bring up mission control on macOS (F3 to bring up mission control), or try resizing the Firefox window, the animation will be very laggy. Howver, when I i'm no using the theme and use mission control, the animation is very smooth. The lag only happens when using the theme. The fastest way to see the difference is by spamming the mission control button on mac with at least 1 other app opened, and you'll see that the theme has a very very obvious lag in the animation. I think that the lag may be caused because of the amount of shadow used around the Firefox window. I may be wrong. Let me know if there's a fix!

这个问题在V126中修复了😊

[akkva]

[WIP]Arc Style😉

[ghost]

[WIP]Arc Style😉

Wow nice work! This looks amazing! Let me know how to enable the Arc Style 👏👍

[akkva]

[WIP]Arc Style😉

Wow nice work! This looks amazing! Let me know how to enable the Arc Style 👏👍

🥳完成了，快来试试

[ghost]

[WIP]Arc Style😉

Wow nice work! This looks amazing! Let me know how to enable the Arc Style 👏👍

🥳完成了，快来试试

I just tried, and wow, I'm incredibly impressed. Really amazing work on the URL integration on the left. The popup animation, and everything just looks perfect! Fantastic job!

Only a couple things to fix though:

1. The URL bar shouldn't be showing "https", or the padlock icon. It should only show the URL, just like on Arc. This way we have a lot more space to see the full URL properly:

   

2. Could you show me how to change the color of a selected tab ? On Arc, the selected tab is fully white, whereas on here it's a little bit grey. I prefect the selected tab to be fully white. rgb (255,255,255)

3. There's also a couple of small bugs I found, I'll let you know about them later

[akkva]

[WIP]Arc Style😉

Wow nice work! This looks amazing! Let me know how to enable the Arc Style 👏👍

🥳完成了，快来试试

I just tried, and wow, I'm incredibly impressed. Really amazing work on the URL integration on the left. The popup animation, and everything just looks perfect! Fantastic job!

Only a couple things to fix though:

1. The URL bar shouldn't be showing "https", or the padlock icon. It should only show the URL, just like on Arc. This way we have a lot more space to see the full URL properly:

2. Could you show me how to change the color of a selected tab ? On Arc, the selected tab is fully white, whereas on here it's a little bit grey. I prefect the selected tab to be fully white. rgb (255,255,255)

3. There's also a couple of small bugs I found, I'll let you know about them later

1. 不显示https about:config > browser.urlbar.trimHttps > true

2. userChrome.css里搜索 background: linear-gradient(#f0f0f4, #ecedf2) !important;

[ghost]

[WIP]Arc Style😉

Wow nice work! This looks amazing! Let me know how to enable the Arc Style 👏👍

🥳完成了，快来试试

I just tried, and wow, I'm incredibly impressed. Really amazing work on the URL integration on the left. The popup animation, and everything just looks perfect! Fantastic job! Only a couple things to fix though:

1. The URL bar shouldn't be showing "https", or the padlock icon. It should only show the URL, just like on Arc. This way we have a lot more space to see the full URL properly:

2. Could you show me how to change the color of a selected tab ? On Arc, the selected tab is fully white, whereas on here it's a little bit grey. I prefect the selected tab to be fully white. rgb (255,255,255)

3. There's also a couple of small bugs I found, I'll let you know about them later

1. 不显示https `about:config > browser.urlbar.trimHttps > true`

2. userChrome.css里搜索 `background: linear-gradient(#f0f0f4, #ecedf2) !important;`

Alright, so here are few of the bugs I've found so far:

1. There's an invisible bar at the top to be able to drag the browser window around, but this invisible bar is way too big, causing it to interfere with most websites. For instance, here I'm trying to select some text on Youtube, and I'm simply unable to do so because of the invisible bar:

https://github.com/akkva/gwfox/assets/155139404/b4bb33d6-bb3e-4c6e-b412-46942cecb374

2. When I open a new blank page tab, this is how it looks like (there's a random grey line in the middle and the window isn't taking the full height of the page):

3. When I hover over the URL bar, there's a few icons that pop up. How can I make it so that no icon pops up when I hover over the URL ?

https://github.com/akkva/gwfox/assets/155139404/a5e561c3-0716-48aa-9230-215d29de2426

[akkva]

[WIP]Arc Style😉

Wow nice work! This looks amazing! Let me know how to enable the Arc Style 👏👍

🥳完成了，快来试试

I just tried, and wow, I'm incredibly impressed. Really amazing work on the URL integration on the left. The popup animation, and everything just looks perfect! Fantastic job! Only a couple things to fix though:

1. The URL bar shouldn't be showing "https", or the padlock icon. It should only show the URL, just like on Arc. This way we have a lot more space to see the full URL properly:

2. Could you show me how to change the color of a selected tab ? On Arc, the selected tab is fully white, whereas on here it's a little bit grey. I prefect the selected tab to be fully white. rgb (255,255,255)

3. There's also a couple of small bugs I found, I'll let you know about them later

1. 不显示https `about:config > browser.urlbar.trimHttps > true`

2. userChrome.css里搜索 `background: linear-gradient(#f0f0f4, #ecedf2) !important;`

Alright, so here are few of the bugs I've found so far:

1. There's an invisible bar at the top to be able to drag the browser window around, but this invisible bar is way too big, causing it to interfere with most websites. For instance, here I'm trying to select some text on Youtube, and I'm simply unable to do so because of the invisible bar:

buggin.mp4

2. When I open a new blank page tab, this is how it looks like (there's a random grey line in the middle and the window isn't taking the full height of the page):

3. When I hover over the URL bar, there's a few icons that pop up. How can I make it so that no icon pops up when I hover over the URL ?

icons.mp4

1. 这个问题我做了优化，顶部预留了10px左右来拖拽移动窗口，经过测试应该不会影响文本选择了

2. 这个问题彻底修复了

3.这个需求要改的东西不少，你确定不需要这些图标的操作吗？

[ghost]

[WIP]Arc Style😉

Wow nice work! This looks amazing! Let me know how to enable the Arc Style 👏👍

🥳完成了，快来试试

I just tried, and wow, I'm incredibly impressed. Really amazing work on the URL integration on the left. The popup animation, and everything just looks perfect! Fantastic job! Only a couple things to fix though:

1. The URL bar shouldn't be showing "https", or the padlock icon. It should only show the URL, just like on Arc. This way we have a lot more space to see the full URL properly:

2. Could you show me how to change the color of a selected tab ? On Arc, the selected tab is fully white, whereas on here it's a little bit grey. I prefect the selected tab to be fully white. rgb (255,255,255)

3. There's also a couple of small bugs I found, I'll let you know about them later

1. 不显示https `about:config > browser.urlbar.trimHttps > true`

2. userChrome.css里搜索 `background: linear-gradient(#f0f0f4, #ecedf2) !important;`

Alright, so here are few of the bugs I've found so far:

1. There's an invisible bar at the top to be able to drag the browser window around, but this invisible bar is way too big, causing it to interfere with most websites. For instance, here I'm trying to select some text on Youtube, and I'm simply unable to do so because of the invisible bar:

buggin.mp4

2. When I open a new blank page tab, this is how it looks like (there's a random grey line in the middle and the window isn't taking the full height of the page):

3. When I hover over the URL bar, there's a few icons that pop up. How can I make it so that no icon pops up when I hover over the URL ?

icons.mp4

1. 这个问题我做了优化，顶部预留了10px左右来拖拽移动窗口，经过测试应该不会影响文本选择了

2. 这个问题彻底修复了

3.这个需求要改的东西不少，你确定不需要这些图标的操作吗？

I can confirm all of this is fixed! Good job!

Currently, the only issue remaining is that you can't re-order your tabs. It won't let me move a tab up or down. Do you think there's any fix for this ?

[akkva]

I can confirm all of this is fixed! Good job! Currently, the only issue remaining is that you can't re-order your tabs. It won't let me move a tab up or down. Do you think there's any fix for this ?

目前能做的就是用Move Tab Hotkeys这个扩展添加快捷键来移动

[ghost]

I can confirm all of this is fixed! Good job! Currently, the only issue remaining is that you can't re-order your tabs. It won't let me move a tab up or down. Do you think there's any fix for this ?

目前能做的就是用Move Tab Hotkeys这个扩展添加快捷键来移动

Alright thanks, I'll look into it. By the way, consider making your theme compatible with Sidebery. It might be a much easier solution considering Sidebery takes care of the Javascript side, which includes being able to re-order tabs, and also resize the sidebar.

[akkva]

I can confirm all of this is fixed! Good job! Currently, the only issue remaining is that you can't re-order your tabs. It won't let me move a tab up or down. Do you think there's any fix for this ?

目前能做的就是用Move Tab Hotkeys这个扩展添加快捷键来移动

Alright thanks, I'll look into it. By the way, consider making your theme compatible with Sidebery. It might be a much easier solution considering Sidebery takes care of the Javascript side, which includes being able to re-order tabs, and also resize the sidebar.

Sidebery做不到透明背景，没有系统半透明效果加持视觉效果差很多，这个主题的出发点就是为了好看，目前的效果已经是我能做的极致了，其实我也是小白来着😊

[ghost]

I can confirm all of this is fixed! Good job! Currently, the only issue remaining is that you can't re-order your tabs. It won't let me move a tab up or down. Do you think there's any fix for this ?

目前能做的就是用Move Tab Hotkeys这个扩展添加快捷键来移动

Alright thanks, I'll look into it. By the way, consider making your theme compatible with Sidebery. It might be a much easier solution considering Sidebery takes care of the Javascript side, which includes being able to re-order tabs, and also resize the sidebar.

Sidebery做不到透明背景，没有系统半透明效果加持视觉效果差很多，这个主题的出发点就是为了好看，目前的效果已经是我能做的极致了，其实我也是小白来着😊

No worries. You're a pro in my book 👍😄

By the way, can you provide a quick and easy way to change the color of the sidebar just like in Arc?:

[akkva]

I can confirm all of this is fixed! Good job! Currently, the only issue remaining is that you can't re-order your tabs. It won't let me move a tab up or down. Do you think there's any fix for this ?

目前能做的就是用Move Tab Hotkeys这个扩展添加快捷键来移动

Alright thanks, I'll look into it. By the way, consider making your theme compatible with Sidebery. It might be a much easier solution considering Sidebery takes care of the Javascript side, which includes being able to re-order tabs, and also resize the sidebar.

Sidebery做不到透明背景，没有系统半透明效果加持视觉效果差很多，这个主题的出发点就是为了好看，目前的效果已经是我能做的极致了，其实我也是小白来着😊

No worries. You're a pro in my book 👍😄

By the way, can you provide a quick and easy way to change the color of the sidebar just like in Arc?:

这个效果改css并不麻烦，不幸的是并没有现成的扩展让你可以简单快速的定制😎

[ghost]

这个效果改css并不麻烦，不幸的是并没有现成的扩展让你可以简单快速的定制😎

I made a few changes to the theme color, it looks perfect now 🙌

[ghost]

Hello @akkva there's something I'm wondering if you can implement.

Here's a video of the difference between the search UI on Arc Browser and the search UI on your Firefox theme. I'm wondering if you could implement the Arc Browser search UI shown in this video into the Firefox theme. I think it looks really good, and it would be awesome if you could put it into the Firefox theme. Let me know if it's possible :)

https://github.com/akkva/gwfox/assets/155139404/05a5e2ab-3a23-4b91-ba55-330a2cca09b4

[GreyAsteroid]

While I don't personally use gwfox (I need Sidebery to replicate Spaces) I'm still very impressed with how well gwfox mimic's Arc. A while back the Arc team emailed me for a survey hosted on Figma but allowed it to be copied and edited. I've based my personal Sidebery theme on that template and I figured you may also find it useful. link

[ghost]

While I don't personally use gwfox (I need Sidebery to replicate Spaces) I'm still very impressed with how well gwfox mimic's Arc. A while back the Arc team emailed me for a survey hosted on Figma but allowed it to be copied and edited. I've based my personal Sidebery theme on that template and I figured you may also find it useful. link

You could also replicate spaces using native Firefox containers.

How does your Sidebery theme look like ? I'd say we're about 80% of the way there to completely nailing the Arc experience on Firefox with gwfox's theme. There's a few things that need to be polished and done, like the command bar and the search UI, but we're really almost there.

[GreyAsteroid]

While I don't personally use gwfox (I need Sidebery to replicate Spaces) I'm still very impressed with how well gwfox mimic's Arc. A while back the Arc team emailed me for a survey hosted on Figma but allowed it to be copied and edited. I've based my personal Sidebery theme on that template and I figured you may also find it useful. link

You could also replicate spaces using native Firefox containers.

How does your Sidebery theme look like ? I'd say we're about 80% of the way there to completely nailing the Arc experience on Firefox with gwfox's theme. There's a few things that need to be polished and done, like the command bar and the search UI, but we're really almost there.

Sidebery lets me switch between "spaces" with different assigned containers akin to Arc, my understanding is that without it I'm just able to assign specific tabs to containers instead.

My Sidebery theme currently looks like this, The Figma template was helpful since it let me find the exact measurements of some items and exact shadow values without having to pixel peep. Though I'm not going for a perfect recreation. I should also note that I'm using EdgyArc-fr which accomplishes translucency on Sidebery by setting the opacity of Sidebery itself which isn't exactly ideal but at least works.

[ghost]

Though I'm not going for a perfect recreation. I should also note that I'm using EdgyArc-fr which accomplishes translucency on Sidebery by setting the opacity of Sidebery itself which isn't exactly ideal but at least works.

Nice. akkva's main reason for not using Sidebery was because he didn't think it was possible to achieve transparency on Sidebery. Turns out it is.

[akkva]

Hello @akkva there's something I'm wondering if you can implement.

Here's a video of the difference between the search UI on Arc Browser and the search UI on your Firefox theme. I'm wondering if you could implement the Arc Browser search UI shown in this video into the Firefox theme. I think it looks really good, and it would be awesome if you could put it into the Firefox theme. Let me know if it's possible :) final3.mp4

在我看来你的视频展示两者并没有多大区别，无非就是多了一些firefox建议网址还有底部工具条 所有我没有很明白你的诉求，你是想让firefox地址栏搜索界面去掉一些元素显示更简洁一点？