Tabs Below Address Bar and Bookmark Bar

adacom

@nomadic - again thanks

yes that gives the top bar the correct height - what i am trying to achieve is this

ie - no top bar - windows buttons and vivaldi button on navbar

i realise that needs more code so i may be jumping many steps ahead without thinking or looking and your code may well be the start point - too early here and not enough coffee yet to think clearly

nomadic

@adacom If you can share the old code you are using to get that menu button and window control placement, then I can help you update it.

I don't know if you went for a JS or CSS approach, but tweaking a slightly broken existing solution is much easier.

adacom

@nomadic - thanks i have solved it by using

/* brings vivaldi button and win controls to front */
#browser.tabs-top #header {
     background-color: none; 
     backdrop-filter: none; 
     contain: none; 
}

no idea if its good code or not but it works

i have another problem with the moving of the zoom buttons to the tabbar - they dont show then they do - will start a new thread later on that

eLeSands

@nomadic said in Tabs Below Address Bar and Bookmark Bar:

And if anyone is interested in trying to get a CSS only version working with setting the tab position to Left, here is some of my experimental CSS:

Only expand if you want to make your own CSS mod, not necessary otherwise [very rough] ...

#tabs-tabbar-container.left {
  flex-direction: column-reverse;
  flex: 0 1 auto;
  padding: 0 0 4px 0;
  height: 33px;
  width: 100% !important;
}

#tabs-container.left {
  flex: 0 1 auto;
  flex-direction: unset;
}

#tabs-container.left .resize {
  flex-direction: unset;
  max-height: unset;
  overflow-x: unset;
  overflow-y: unset;
}

.tab-position {
  --newWidth: 180;
  --Width: calc(1px * var(--newWidth)) !important;
  --PositionX: calc(var(--PositionY) * (var(--newWidth) / 30)) !important;
  transform: translateX(var(--PositionX)) translateY(0px);
}

Been working on this since last night. This is probably not the best way to do this, and there are still some things that aren't exactly working (new tabs that exceed the browser width need to be scrolled to and compact tab stack tabs have a space after them for some reason probably hidden in the .js.

/* START LEFT TABS OVER WEBVIEW */
/* 3.9.2289.3 (Official Build) (64-bit) */
/*
    Order for containers is Tabs (on top) with Panels to the Right of Webview
    
    Panels and Webview order can be swapped, but for this to work the Tabs Order Number needs to be higher than the Order Number of the other Containers
    
    To display everything correctly set Margin Top of the other Containers to be 1px more than the Height of the Tabs Container
    
    Set Margin Left of the Tabs Container to be -100% so the Webview Container displays correctly
*/
/* CONTAINER ORDER */
/* Webview Container */
#webview-container {
    order: -2 !important;
    margin-top: 34px !important;
}

/* Panels Container */
#panels-container {
    order: -3 !important;
    margin-top: 34px !important;
}

/*
    For the 3.9.2289.3 SNAPSHOT this is the order of <ELEMENTS> in the Tabs Tabbar Container:    
    <div id="tabs-tabbar-container" class="left">
    (#tabs-tabbar-container.left)
        Contains Tabs Container Div, Tab Stack Two-Level Toolbar, and Slidebar Button
    
    <div id="tabs-container" class="left">
    (#tabs-container.left)
        Contains the Resize Div, Sync and Trash Container, and Slidebar Button
    
    <div id="" class="resize">
    (.resize)
        For the re-sizable area the Left/Right Tabs live
    
    <div id="" class="tab-strip">
    (.tab-strip)
        Contains the Tab Spans as well as the New Tab Button
    
    <span id="" class="">
    ()
        Each Tab is inclosed in an empty Span
    
    <div id="" class="tab-position">
    (.tab-position)
        Tab Position is calculated from the element.style, which is determined via javascript
    <div id="tab-[NUM]" class="tab">
    (#tab-[NUM].tab)
        [NUM] is the random number assigned to each tab
*/
/* Tabs Tabbar Container */
#tabs-tabbar-container.left {
    flex-direction: unset !important;
    flex: none !important;
    padding: 0 !important;    
    /* Height needs to be set to at least 3px more than Tab Height */
    height: 33px !important;
    width: 100% !important;
    order: 1 !important;
    margin-left: -100% !important;
    /* Not really necessary */
    z-index: 1 !important;
    /* enables horizonal scrolling */
    /* Overlay puts the scrollbar over the tabs/ Scroll puts the scrollbar under the tabs */
    overflow-x: overlay !important;
}

/* Tabs Tabbar Container Scrollbar */
/* Use [Ctrl] + Mouse Wheel */
/* Otherwise remove to display the default scrollbar */
#tabs-tabbar-container.left::-webkit-scrollbar {
    display: none !important;
}

/* Tabs Container */
#tabs-container.left {
    flex: 1 1 auto !important;
    flex-direction: unset !important;
}

/* Tabs Container Resize */
#tabs-container.left .resize {
    flex-direction: unset !important;
    max-height: unset !important;
    overflow-x: unset !important;
    overflow-y: unset !important;
}

/* Tab Strip "Bottom" Toolbar */
/* This contains the New Tab Button */
#tabs-container.left .tab-strip .toolbar.toolbar-tabbar.toolbar-large.tab-position {
    display: none !important;
}

/* Slidebar Button */
/* No tab slider */
.left button.SlideBar.SlideBar--FullHeight {
    display: none !important;
}

/* Tab Position */
.left .tab-position {
    max-height: 30px !important;
    height: 30px !important;
    --Height: 30px !important;
    --newWidth: 100;
    --Width: calc(1px * var(--newWidth)) !important;
    --PositionX: calc(var(--PositionY) * (var(--newWidth) / 30)) !important;
    transform: translateX(var(--PositionX)) translateY(0px) !important;
    bottom: 1px !important;
}

/* Tab */
/* Default Tab Height is 30px */
.left .tab {
    max-height: 30px !important;
    height: 30px !important;
}

/* No Sync/Trash */
/* would need to move after tabs */
.left .sync-and-trash-container {
    display: none !important;
}
/* END LEFT TABS OVER WEBVIEW */

This is super hacky, but it works

nomadic

@elesands Haha, glad someone decided to give it a go.

I will have to check it out! Might be able to figure out some of the current issues as well.

My original intention was to use another calc() for --newWidth to shrink tabs like the current tab bar behavior, but I decided to just make the JS version before I got around to implementing that aspect.

eLeSands

@nomadic
I tried to assign the tabbar width to a variable, then divide by number of tabs.... but I don't think it's possible to get the tab amount with pure css.

(I was thinking maybe get the tabstrip children minus one, or just count the spans? But I have no idea how to do that? Maybe possible with nth-child psuedo-class?)

nomadic

Edit: Had some time to think about it, and I think it could probably be done in an easier way using stuff similar to the CSS for multi line tabs. Could also use percentages for widths to avoid all the media query nonsense.

@elesands Yeah, that is an issue. Maybe something like this could be used. It obviously wouldn't scale well to large numbers of tabs, but as long as you don't go overboard on the number of tabs it should work.

I wrote the above text, but then my curiosity got the better of me. I deviated from the original design intent a bit and ended up with something more along the lines of this: Make tabs span to full width

Here is the result I got:

Looks great, right? And all it took was about 120 lines of code! Well... not really...

I cheated a bit. I used SCSS instead of CSS. Those 120 lines generate just under 6500 lines of CSS , so we can call this more academic rather than something that should actually be used, but it does work.

The worst part was the way I determined the window width. There is probably a better way to do it, but my "solution" was to use media queries going through each pixel size from the minimum window width to the width of my screen.

Like so:

...

@media screen and (min-width: 1320px) {
  .tab-strip {
    --screenWidth: 1320;
  }
}

@media screen and (min-width: 1321px) {
  .tab-strip {
    --screenWidth: 1321;
  }
}

...

Here is the complete SCSS (I am not including the generated CSS for what I assume are obvious reasons):

// update screen size
$minVivaldiWidth: 500;
$maxVivaldiWidth: 1536; // your screen width
@for $i from $minVivaldiWidth through $maxVivaldiWidth {
  @media screen and (min-width: #{$i}px) {
    .tab-strip {
      --screenWidth: #{$i};
    }
  }
}

/* Webview Container */
#webview-container {
  order: -2 !important;
  margin-top: 34px !important;
}

/* Panels Container */
#panels-container {
  order: -3 !important;
  margin-top: 34px !important;
}

/* Tabs Tabbar Container */
#tabs-tabbar-container.left {
  flex-direction: unset !important;
  flex: none !important;
  padding: 0 !important;
  /* Height needs to be set to at least 3px more than Tab Height */
  height: 33px !important;
  width: 100% !important;
  order: 1 !important;
  margin-left: -100% !important;
  /* Not really necessary */
  z-index: 1 !important;
  /* enables horizonal scrolling */
  /* Overlay puts the scrollbar over the tabs/ Scroll puts the scrollbar under the tabs */
  overflow-x: overlay !important;
}

/* Tabs Tabbar Container Scrollbar */
/* Use [Ctrl] + Mouse Wheel */
/* Otherwise remove to display the default scrollbar */
#tabs-tabbar-container.left::-webkit-scrollbar {
  display: none !important;
}

/* Tabs Container */
#tabs-container.left {
  flex: 1 1 auto !important;
  flex-direction: unset !important;
}

/* Tabs Container Resize */
#tabs-container.left .resize {
  flex-direction: unset !important;
  max-height: unset !important;
  overflow-x: unset !important;
  overflow-y: unset !important;
}

/* Tab Strip "Bottom" Toolbar */
/* This contains the New Tab Button */
#tabs-container.left .tab-strip .toolbar.toolbar-tabbar.toolbar-large.tab-position {
  right: 0px;
  top: 3px;
}
.newtab {
  left: unset !important;
  top: unset !important;
}

/* Slidebar Button */
/* No tab slider */
.left button.SlideBar.SlideBar--FullHeight {
  display: none !important;
}

/* Position the tab close button */
.tab-position .tab .close {
  display: flex;
  visibility: hidden;
}
.tab-position .tab:hover .close {
  visibility: visible;
}

/* center tab title */
.tab-position .tab .title {
  flex: unset;
  margin: 0 auto;
  padding: 0 10px;
}

.tab-strip {
  --spaceForNewTabTrashSync: calc(28 * 2);
  --normalTabWidth: 180;
}

// give tabs a width that fits screen
@for $i from 2 through 31 {
  .tab-strip > span:first-child:nth-last-child(#{$i}),
  .tab-strip > span:first-child:nth-last-child(#{$i}) ~ span {
    --newWidth: calc((var(--screenWidth) - var(--spaceForNewTabTrashSync)) / #{$i - 1});
  }
}

/* Tab Position */
.left span .tab-position {
  max-height: 30px !important;
  height: 30px !important;
  --Height: 30px !important;
  --Width: calc(1px * var(--newWidth)) !important;
  --PositionX: calc(var(--PositionY) * (var(--newWidth) / 30)) !important;
  transform: translateX(var(--PositionX)) translateY(0px) !important;
  bottom: 1px !important;
}

/* Tab */
/* Default Tab Height is 30px */
.left .tab {
  max-height: 30px !important;
  height: 30px !important;
}

I only made it work for a maximum of 30 tabs to keep the length of the CSS ~~reasonable~~ from taking all the storage space on my laptop. The screen size can be set at the top of the file with the variable $maxVivaldiWidth.

This is the first real time I used SCSS and I am far from an expert as CSS, so I am sure someone else could make a better solution. This was just something I threw together late at night, so only view it as a wacky experiment by a sleep deprived novice.

eLeSands

@nomadic
Oh my gosh that is so much.

I thought I had something by making a variable that took the width of the tab bar... It was working (or at least it seemed to be) like a day? ago? But then I edited it and of course I don't have previous versions of the file. Cause that would be silly And now it isn't working and what I could google says that it isn't a thing so

Really I don't know why the tabs can't just be cells in a table row :𝙸

firefox xul tabs Why is something like this so difficult to do?

(i just noticed that the title bar is all donked up TTnTT It's not cropped; it's that way on my screen :C )

nomadic

@elesands I wrote that late at night and wasn't thinking it all the way through. I don't have time to look at it right now, but you could take a look at the multi line tabs CSS and try to combine that in.

All that messing around with positioning probably isn't necessary.

eLeSands

Ok so I finally figured out that I could individually style pinned, etc, tabs by moving everything from .tab-position to .tab:

/* Tab Position */
.left .tab-position {
    position: unset !important;
    max-width: unset !important;
    width: unset !important;
    display: unset !important;
    transform: unset !important;
}

/* Tab */
/* Default Tab Height is 30px */
/* Moved everything from tab position to tab */
.left .tab-position .tab {
    position: absolute !important;
    max-height: 30px !important;
    max-width: 100% !important;
    width: var(--Width) !important;
    display: flex !important;
    height: 30px !important;
    --newWidth: 100 !important;
    --Width: calc(1px * var(--newWidth)) !important;
    --PositionX: calc(var(--PositionY) * (var(--newWidth) / 30)) !important;
    transform: translateX(var(--PositionX)) translateY(0px) !important;
    bottom: -1px !important;
}

.left .tab-position .tab.pinned {
    --newWidth: 30 !important;
    --Width: 30px !important;
    max-width: 30px !important;
}

But that still leaves a gap after the tab; same issue I was running into with compact tab stack tabs.
gap after pinned tab

Well, at least that is progress???

SallyK

@nomadic Thank you very much for linking to this, it's definitely a big step in the right direction.

I'm getting a gap on both ends of the bar (see below), I don't know if that's fixable. If not, it's still a massive improvement, I really appreciate it.

GruntZ

@nomadic - Thanks for your work.

In Vivaldi v3.8, I used the CSS modification shown in this thread:
https://forum.vivaldi.net/topic/56002/the-two-level-tab-stacks-break-the-tabs-below-address-bar-hack/3
And the result was in line with my expectations:
Capture d’écran_2021-06-13_09-24-54.png
From top to bottom, I have:

the menu bar,
the address bar,
the favorites bar,
the tab bar,
and finally the navigation window.

On a fresh installation of Vivaldi V4.0, I placed two files named "custom.css" and "custom.js" in the /opt/vivaldi/resources/vivaldi/style/custom directory, created for it like in V3.8, and I have enabled the configuration to be supported.
The result is the following:
Capture d’écran_2021-06-13_09-17-29.png
The tab bar is just below the menu, not just above the navigation zone.

Is this how to place and name these two files (.js and .css)?
The content of the two files is below, is it correct?
What must be changed to find the order I had in V3.8?

Thank you in advance for your help

Content of /opt/vivaldi/resources/vivaldi/style/custom/custom.js :

// ============================================================================================================
// Tabs Below Address Bar and Bookmark Bar (JS Version)
// URL:         https://forum.vivaldi.net/topic/56809/tabs-below-address-bar-and-bookmark-bar
// Description: Moves the tab bar under the other UI elements at the top of the screen
// Author(s):   @nomadic
// CopyRight:   No Copyright Reserved
// Tested on:   Snapshot 3.9.2289.3
// ============================================================================================================
(function () {
  function moveTabBarBelowTopUI() {
    function moveTabBar() {
      const tabBar = document.getElementById("tabs-tabbar-container");
      const urlBar = document.querySelector(".UrlBar");
      const bookmarkBar = document.querySelector(".bookmark-bar");

      const insertAfter = bookmarkBar ? bookmarkBar : urlBar;

      if (tabBar && insertAfter) {
        tabBar.remove();
        insertAfter.insertAdjacentElement("afterend", tabBar);
      }
    }

    moveTabBar();
  }

  let intervalID = setInterval(() => {
    const browser = document.getElementById("browser");
    if (browser) {
      clearInterval(intervalID);
      moveTabBarBelowTopUI();
    }
  }, 300);
})();

Content of /opt/vivaldi/resources/vivaldi/style/custom/custom.css :

/* Tabs Below Address Bar for 4.0 */

/* Remove unnecessary gap at top of tabs */
#tabs-tabbar-container {
  padding-top: unset !important;
}

/* Remove line between address bar and bookmark bar */
.address-top .toolbar-mainbar:after {
  content: unset;
}

/* Remove line between bookmark bar and tabs */
.bookmark-bar {
  border-bottom-width: 0px !important;
}

/* Make bookmark bar blend in */
.bookmark-bar {
  background-color: var(--colorAccentBg);
}
.color-behind-tabs-off .bookmark-bar button {
  background-color: var(--colorAccentBg);
}
.color-behind-tabs-on .bookmark-bar {
  background-color: var(--colorBg);
}
.color-behind-tabs-on .bookmark-bar button {
  background-color: var(--colorBg);
}

/* Fix opaque tabbar */
#browser:not(.transparent-tabbar) #tabs-tabbar-container {
  background-color: var(--colorBgDark);
}

/* Fix header content positioning */
.vivaldi,
#header #titlebar .window-buttongroup button:not(.vivaldi) {
  height: 25px !important;
}



/* Tabs corner rounding */
.tabs-bottom .tab-position .tab {
	border-top-left-radius: var(--radiusHalf);
	border-top-right-radius: var(--radiusHalf);
	border-bottom-left-radius: unset;
	border-bottom-right-radius: unset;
}

/* tab group indicators*/
.tabs-bottom .tab-strip .tab-group-indicator {
	bottom: 28px !important;
}

/* Personal hacks */
/* NewTab button hide */
.newtab {
	display: none;
}

nomadic

@gruntz I just saw this CSS only mod by @dude99 earlier today. Haven't tried it, but it might do what you want.

As for JavaScript(js) mods, they take a little more work to get running. I recommend checking out this pinned post from the modding forum to see how to install different types of mods.

Rayzon

@nomadic
Thank you for this Mod.
Unfortunately, I now miss the new tab button?

Screenshot 2021-06-13 102418.png

GruntZ

@nomadic - Thank you for being so responsive
I am going to test the other hack you pointed to me, and try to progress on these aspects of visual adaptation of Vivaldi's interface.
Have a nice day

GruntZ

@nomadic said in Tabs Below Address Bar and Bookmark Bar:

@gruntz I just saw this CSS only mod by @dude99 earlier today. Haven't tried it, but it might do what you want.

Thanks for the suggestion, but despite several tries, I couldn't find a way to get the expected result, too bad.

As for JavaScript(js) mods, they take a little more work to get running. I recommend checking out this pinned post from the modding forum to see how to install different types of mods.

I found the error I was making, which prevented the use of my "custom.js".
So I modified the "browser.html" by explaining the call to this file; and everything now works exactly as in V3.8.
The problem will be, as before the experimental "custom.css" support function, that each update of Vivaldi will overwrite my modification.
My /opt/vivaldi/resources/vivaldi/browser.html file looks like this:

<!DOCTYPE html>
<html>
  <head>
    <!-- Keep the styling in sync with ./window.html -->
    <meta charset="UTF-8" />
    <title>Vivaldi</title>
    <link rel="stylesheet" href="style/common.css" />
    <link rel="stylesheet" href="chrome://vivaldi-data/css-mods/css" />
    <style>
      body {
        background-color: #d2d2d2;
        background-image: url('resources/vivaldi-splash-icon.svg');
        background-size: 16%;
        background-position: center;
        background-repeat: no-repeat;
      }
      @media (prefers-color-scheme: dark) {
        body {
          background-color: #2d2d2d;
        }
      }
    </style>
  </head>
  <body>
    <div id="app" />
    <script src="background-common-bundle.js"></script>
    <script src="vendor-bundle.js"></script>
    <script src="settings-bundle.js"></script>
    <script src="urlbar-bundle.js"></script>
    <script src="components-bundle.js"></script>
    <script src="bundle.js"></script>
    <!-- Add custom scripts -->
    <script src="style/custom/custom.js"></script>
    <!-- end -->
  </body>
</html>

Many thanks again for your help

TreaKu

I have the same issue.

dude99

My pure CSS mod have been updated,

add support for menu bar & bookmark bar (on top position).
plus slightly improved instructions,

hope this will be useful to u guys.

nomadic

@dude99 said in Top Addressbar above Top Tabbar CSS mod:

Don't worry, my code are quite clean & easy to understand by CSS guru. They can fork it in the future if needed. I have wasted too much time on this useless mod (to me anyway), better invest in something I actually will use in the future... LOL

If you don't feel like supporting your new CSS version, I could fork it here and maintain it.

I don't use this mod either, but I do at least use horizontal tabs (at least until I get an ultrawide monitor), so it is slightly more relevant to me. Up to you.

add support for bookmark bar, I won't do unify color for this toolbar cuz it look kinda weird to me. but feel free to fix it if you insist...

I would probably add this, since I think it looks better.

dude99

@nomadic Great! Thanks for adopting my CSS mod. Now I can rest in peace... LOL

Tabs Below Address Bar and Bookmark Bar

Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...

Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...