Locate the address bar directly above the content pane like Olde Opera
-
OK, this is a biggy to me. I hope others will like the idea.
Please make an option to locate the address bar directly above the content pane (where it was in Olde Opera).
If the address bar is above the content pane the users eyes don't have to roam far from the content area to view the start of a URL when needing to see it.
A full window width address bar is much longer than needed; the user often doesn't need to see far into a very long URL because useful information is mostly in the first 25-50 characters after http://. The rest of the string is often not human readable so a very wide address bar is a waste of screen space.
Currently if the user has the navagation buttons to the left of the address bar they are very far from the content area and long mouse moves are required to move back and forth between them and the page content or even the scrollbar. If the address bar were above the content area that travel would be much shorter.
If the address bar stayed above the content area the web panel could extend up higher past the left edge of the address bar and more content could be viewed in it.
If the user is accessing Vivaldi from a remote computer with a smaller screen than the viewing machine less panning of the workspace will be required to see the start of a URL.
I have used spacers as a hack to push the address bar over the content pane but it's kind of inelegant and space is wasted.
I'm hoping the devs will see value in this request but in the meantime can this be implemented with UI customization?
[I've wanted this for a long time and hope I haven't requested it before; I could not see that I have.]
-
@g_bartsch
Hi, may you meant this: https://forum.vivaldi.net/topic/54355/place-the-address-bar-controls-directly-above-the-page-content-area
Got no votes but this one is better to understand, I like it.
I have different width for some tabs so the content position is changing. How would you manage this? -
@mib2berlin said in Locate the address bar directly above the content pane:
Hi, may you meant this: https://forum.vivaldi.net/topic/54355/place-the-address-bar-controls-directly-above-the-page-content-area
Oops, my bad. Poor memory. Shall I delete the old one?
-
@mib2berlin said in Locate the address bar directly above the content pane:
I have different width for some tabs so the content position is changing. How would you manage this?
Because the tabs - and only the tabs - are in their own bar above the content area how wide they are doesn't affect the content with at all. It's elegant. If you could find an old version of Opera (12 maybe?) you could test it.
-
-
@mib2berlin said in Locate the address bar directly above the content pane:
Got no votes but this one is better to understand, I like it.
Please vote for it to start the ball rolling .
-
@g_bartsch
You can flag the old post for a moderator to remove or archive it.
The screenshot looks good, I meant the address bar/content have to move with the panel width or it looks like this: -
@mib2berlin said in Locate the address bar directly above the content pane:
You can flag the old post for a moderator to remove or archive it.
Thank you; I will.
-
@mib2berlin said in Locate the address bar directly above the content pane:
The screenshot looks good, I meant the address bar/content have to move with the panel width
Exactly, the Web Panel determines how wide the address bar and content area are; they resize accordingly as the Web Panel resizes.
-
Here's a screen shot from Olde Opera showing more clearly the address bar placement. It's perfect IMHO.
I guess I don't understand the rational for NOT locating the address bar this way given it worked so well for so many years and further that all Opera users were fully accustomed to using the browser that way.
-
@g_bartsch Ok, if you are willing to set a permanent width for the expanded panel (you can still collapse the panel and use the panel toggle bar), then you can get it working with just a CSS mod.
GIF showing it working (it also works with floating panels, I just forgot to record it)
First you need to know the width of your expanded panel
-
Inspect the UI
-
Find the "
panels-container
" DIV (you can use find or look under#main > .inner
) -
Look at the style attribute of the DIV and note the
width
. Make sure a panel is showing and the panel is at the width you want to use.
-
Then go to the top of the CSS provided below and change the variable
--panelWidthExpanded
to the width you found in devTools. Like so:#browser { /* Configure to the width your expanded panel normally takes */ --panelWidthExpanded: 300px;
Then it should be all set.
CSS
#browser { /* Configure to the width your expanded panel normally takes */ --panelWidthExpanded: 300px; /* Default values. DON'T CHANGE unless you use another mod that alters these values */ --addressBarHeight: 35px; --bookmarkBarHeight: 29px; --panelWidthCollapsed: 35px; --panelSwitcherWidth: 10px; } /* Set where the top of the panel should be */ #browser.address-top #panels-container { top: calc(-1 * var(--addressBarHeight)); height: calc(100% + var(--addressBarHeight)); } #browser.bookmark-bar-top #panels-container { top: calc(-1 * var(--bookmarkBarHeight)); height: calc(100% + var(--bookmarkBarHeight)); } #browser.address-top.bookmark-bar-top #panels-container { top: calc(-1 * (var(--addressBarHeight) + var(--bookmarkBarHeight))); height: calc(100% + (var(--addressBarHeight) + var(--bookmarkBarHeight))); } /* Let the panel be visible outside the bounds of its container */ #main > .inner { overflow: unset; } /* Figure out how wide the panel is based on its state */ #browser:has(#panels-container:not(.button)) { --panelSwitcherWidth: 0px; } #browser:has(#panels-container.icons) { --panelWidth: calc(var(--panelWidthCollapsed) + var(--panelSwitcherWidth)); } #browser:has(#panels-container:not(.icons)) { --panelWidth: var(--panelWidthExpanded); } #browser:has(#panels-container.switcher) { --panelWidth: var(--panelSwitcherWidth); } /* Leave a gap next to the address bar to accomidate the panel */ #browser.address-top:has(#panels-container.left) .mainbar > .toolbar-mainbar { margin-left: var(--panelWidth); } #browser.address-top:has(#panels-container.right) .mainbar > .toolbar-mainbar { margin-right: var(--panelWidth); } /* Leave a gap next to the bookmark bar to accomidate the panel */ #browser.bookmark-bar-top:has(#panels-container.left) .bookmark-bar { margin-left: var(--panelWidth); } #browser.bookmark-bar-top:has(#panels-container.right) .bookmark-bar { margin-left: var(--panelWidth); }
I tried to account for as many different settings as possible, but since Vivaldi has so many, I am sure I missed something. Let me know if you find anything that doesn't work.
Edit: Also, you might want a border below the tab bar for better separation. Let me know if you want that or need help adding that.
-
-
@g_bartsch I set my panels on the right in Opera to prevent the navigation buttons changing position on opening/closing the panel.
It is bad UI design to have frequently used controls change position.
-
@nomadic AWESOME! This is exactly what I want. THANK YOU so much!! This UI feature is one I missed so badly from original Opera and have be pining for for years.
I see what you mean about the code not being dynamic but I think I can live with that once I settle on a Web Panel width. I am able to resize the Web Panel so can make some adjustments.
The only flaw is the Address Bar background needs a bit of padding on the left end to space the two elements nicely. And the border for separation would be perfect I think. That would do it, but it's beyond me - could you perhaps look at that too?
Vivaldi needs this built-in natively as an option. It's perfect UI design.
-
@nomadic said in Locate the address bar directly above the content pane like Olde Opera:
I tried to account for as many different settings as possible, but since Vivaldi has so many, I am sure I missed something.
I found one tiny bug; there is a little space between the top of the Navigation Icon background color (on hover over the icon) and the Tab Bar. I tried fiddling with your code but haven't eliminated the line.
-
@Pesala said in Locate the address bar directly above the content pane like Olde Opera:
I set my panels on the right in Opera to prevent the navigation buttons changing position on opening/closing the panel.
I haven't tried Opera in a long time; they have a panel? For a while they didn't?
I put the panel on the right in Vivaldi but I can't manage it because I rely on the page scrollbar being right against the screen edge so I can grab it easily.
-
@g_bartsch said in Locate the address bar directly above the content pane like Olde Opera:
The only flaw is the Address Bar background needs a bit of padding on the left end to space the two elements nicely. And the border for separation would be perfect I think. That would do it, but it's beyond me - could you perhaps look at that too?
Ok, I added some padding controllable with
--addressBarPadding
and a border with a corner fillet that follows your theme's corner rounding setting.It was difficult to find a color option that would work with all themes, so it is currently set to follow the background color of address/bookmark bar, but you can uncomment the line
/* --panelTopBorderColor: red !important; */
if you want to set a specific color. The border thickness is also controlled with--panelTopBorderThickness
.I found one tiny bug; there is a little space between the top of the Navigation Icon background color (on hover over the icon) and the Tab Bar. I tried fiddling with your code but haven't eliminated the line.
That is from Vivaldi's default CSS. They set the address bar height to
35px
, while the buttons are only34px
. Removing the set height allows the buttons to define the address bar's height.New CSS
Expand
#browser { /* Configure to the width your expanded panel normally takes */ --panelWidthExpanded: 300px; --panelTopBorderThickness: 3px; --addressBarPadding: 4px; /* Uncomment the line below to set a specific color for the panel's top border */ /* --panelTopBorderColor: red !important; */ /* Default values. DON'T CHANGE unless you use another mod that alters these values */ --addressBarHeight: 35px; --bookmarkBarHeight: 29px; --panelWidthCollapsed: 35px; --panelSwitcherWidth: 10px; } /* Set where the top of the panel should be */ #browser.address-top #panels-container { top: calc(-1 * var(--addressBarHeight)); height: calc(100% + var(--addressBarHeight)); } #browser.bookmark-bar-top #panels-container { top: calc(-1 * var(--bookmarkBarHeight)); height: calc(100% + var(--bookmarkBarHeight)); } #browser.address-top.bookmark-bar-top #panels-container { top: calc(-1 * (var(--addressBarHeight) + var(--bookmarkBarHeight))); height: calc(100% + (var(--addressBarHeight) + var(--bookmarkBarHeight))); } /* Let the panel be visible outside the bounds of its container */ #main > .inner { overflow: unset; } /* Figure out how wide the panel is based on its state */ #browser:has(#panels-container:not(.button)) { --panelSwitcherWidth: 0px; } #browser:has(#panels-container.icons) { --panelWidth: calc(var(--panelWidthCollapsed) + var(--panelSwitcherWidth)); } #browser:has(#panels-container:not(.icons)) { --panelWidth: var(--panelWidthExpanded); } #browser:has(#panels-container.switcher) { --panelWidth: var(--panelSwitcherWidth); } /* Leave a gap next to the address bar to accomidate the panel */ #browser.address-top:has(#panels-container.left) .mainbar > .toolbar-mainbar { padding-left: var(--addressBarPadding); margin-left: calc(var(--panelWidth) - 1px); } #browser.address-top:has(#panels-container.right) .mainbar > .toolbar-mainbar { padding-right: var(--addressBarPadding); margin-right: var(--panelWidth); overflow-x: clip; } /* Leave a gap next to the bookmark bar to accomidate the panel */ #browser.bookmark-bar-top .bookmark-bar { z-index: 2; } #browser.bookmark-bar-top:has(#panels-container.left) .bookmark-bar { margin-left: calc(var(--panelWidth) - 1px); } #browser.bookmark-bar-top:has(#panels-container.right) .bookmark-bar { margin-right: var(--panelWidth); overflow-x: clip; } /* Add border above panels */ #browser.color-behind-tabs-on { --panelTopBorderColor: var(--colorBg); } #browser.color-behind-tabs-off { --panelTopBorderColor: var(--colorAccentBg); } #browser:is(.address-top, .bookmark-bar-top) #panels-container::before { content: ""; position: absolute; width: 100%; /* left: 35px; */ height: var(--panelTopBorderThickness); background-color: var(--panelTopBorderColor); z-index: 1; } /* Add rounded corner to the border above panels */ #browser:is(.address-top, .bookmark-bar-top) #panels-container::after { content: ""; position: absolute; top: var(--panelTopBorderThickness); right: 1px; width: var(--radiusHalf); height: var(--radiusHalf); background-color: var(--panelTopBorderColor); -webkit-mask-image: radial-gradient(circle at 0 100%, rgba(0, 0, 0, 0) 70%, #000 73%); } #browser:is(.address-top, .bookmark-bar-top) #panels-container.right::after { right: unset; transform: scaleX(-1); } /* Remove gap above buttons in address bar*/ .mainbar > .toolbar-mainbar { height: unset; }
-
@nomadic Thanks for all your work on this! The separator is great and exactly what is needed. Here's the solution for Vivaldi to build in eventually.
There are a few bugs still but I'm not worried about them mostly and don't want you to address them mostly (unless you want to):
- If I use Accordion Tab Stacks all looks good if the stack is closed but weirdness happens when I open it. If I use Compact Tab Stacks or Two Level Tab Stacks there is no problem. I'll just use one of those Tab Stacks methods.
- I don't get the rounded effect in the corner but don't mind.
- The Panel label has gotten small. I wonder if that is because I've set the UI font with this code? This would be nice to have fixed if it was easy.
/* change fonts for the entire UI*/ * { font-family: "Arial" !important; font-weight: 400 !important; font-size: 11.5px !important; }
Otherwise I'm so happy with this; thank you again!