Tested and reproduced on 57 beta and 58 nightly. STR (case #1): 1. Open a window with a single tab. Actual (case #1): The tab has no left border, but a right border (see screenshot "screenshot #1"). Expected (case #1): The tab should have a left border. If it should not, the right border should removed. The current state looks broken. STR (case #2): 1. Open a window with two tabs. 2. Select the first tab. Actual (case #1): The selected tab has no left border. Expected (case #1): The selected tab should have a left border. There's a border/divider between the two tabs, and and the second tab has a right border. The brokenness is less visible (at least on my monitor) due to the second tab having a dark background.

Hi all. I've been having a look at this. I am seeing something similar, which I think must be related. On my system the first tab is actually flush with the edge of the window but, when I drag the first tab across it's revealed there's no border on the left side. I think I'm able to fix this (at least I've managed to fix the issue that I'm seeing with dragged tabs). Now I've configured my browser to have space on the left side of the tab bar I should be able to dig around and find Johan's issue too. It looks like themes/shared/tabs.inc.css is where I need to be looking. Any thoughts?

Preliminary patch. Ended up appending two new css selectors to an existing rule. To force a left-border on tabs while dragging: #tabbrowser-tabs[movingtab] > .tabbrowser-tab[visuallyselected]::before To force a left-border if there is space between the first tab and the window edge: #tabbrowser-tabs:not(:first-child) > .tabbrowser-tab[first-visible-tab]::before ":not(:first-child)" should mean that this only applies if there is some other element in the tab bar before the tabs. Therefore if there tabs are flush with the window then there should be no border. --- I tested this by dragging widgets into the "pre-tab" space using the Customize menu. I couldn't figure out how to get an element with the class ".tool.toolbarbar[type="pre-tabs"]" to appear on the Linux build (it's something that's dotted all over css I modified, but I can't find what it gets applied to. On small UI bug that I'll need to iron out: 1: Open two tabs 2: Select the first tab (on the left) 3: Drag the selected tab over to the right 4: The un-selected tab (now on the left) has a full height left-separator rather than a partial one.

Hi jlogandavison, thank you for your contribution! Unfortunately it's probably preferable to wait for bug 1406691 to land before taking a stab at this one. That bug should solve the "no border on drag" issue. I believe the "no left border on first tab" issue is specific to Windows 7, is that correct? You might be able to look into what's different to other platforms here. Sorry for that, it's sometimes a little hard to handle these small issues in isolated patches.

Oops! Getting a little ahead of myself :) > I believe the "no left border on first tab" issue is specific to Windows 7, is that correct? I'm seeing the same thing on the linux build. It's just that it's not immediately apparent because the first tab is flush with the window's edge by default. I've attached a screenshot. I used the customize menu to add a bunch of widgets to the "pre-tab" area and create some space between the window's edge and the first tab and the result is pretty similar to what Johan is seeing. My build ID: Mozilla/5.0 (X11; Linux x86_64; rv:58.0) Gecko/20100101 Firefox/58.0

> On small UI bug that I'll need to iron out: > 1: Open two tabs > 2: Select the first tab (on the left) > 3: Drag the selected tab over to the right > 4: The un-selected tab (now on the left) has a full height left-separator rather than a partial one. On a second look I think this is unrelated to my patch (I can reproduce before applying my patch). Not sure if there's an existing ticket for it though..