Make container lines larger

[fabianski7]

Is your feature request related to a problem? Please describe.
The small line below the favicon is very discreet.
The other active container indicators, like the ones in the address bar, are not as visible in the light theme and make the extensions area even more bloated.

Describe the solution you'd like
The line could be extended to the width of the tab (as it was in the previous design), at least for the active tab.

[black7375]

Is it difficult to distinguish in bright colors?
I've seen a lot of themes or users use them under favicons and I've decided it's a decent UI.

https://github.com/black7375/Firefox-UI-Fix/wiki/Screenshots#tab-state-comparison
Larger sizes can cause confusion when state becomes complex and require significant code changes.

[darius07]

Using this, I made is so there a line on the top of the bar for active tab and for containers (similar to photon):

/* CUSTOM Tab accent highlight /
#tabbrowser-tabs .tab-context-line { /* No idea if this does anything */
display: none;
}

#tabbrowser-tabs .tab-background[selected="true"] {
border-top: solid 2px var(--identity-icon-color, #4800FF) !important; /* #0078D7 is the default blue */
}

But you have to comment out/delete lines in Lepton below
/** Container Tab - Color line at icon's bottom *****************************/
if you don't want to have the same line under the favicon

How it looks in the end:

I broke something so, the line is not active when the tab is the background like in the image...

[fabianski7]

I've seen a lot of themes or users use them under favicons and I've decided it's a decent UI.

It definitely looks good, but I don't think it makes the container stand out the way it should be.

#tabbrowser-tabs .tab-context-line { /* No idea if this does anything */
display: none;
}

I think this is already in Lepton, isn't it?

#tabbrowser-tabs .tab-background[selected="true"] {
border-top: solid 2px var(--identity-icon-color, #4800FF) !important; /* #0078D7 is the default blue */
}

this is definitely a nice tip! thank you so much!

I also made a small change and left the indicators below the icon only for the non-active tabs. I really liked it

  .tab-icon-image:not([selected="true"]) {
    box-sizing: content-box;
    padding: 3px 0;

    border-bottom: 2px solid var(--identity-icon-color);
  }

[Termuellinator]

On first glance, Lepton looked quite nice, but the Container-Color only under tab Tab-Icon is a no-go for me - can't allocate the container to a tab on first glance, but have to stop and investigate the area more closely. If you change that up to have the line across the whole tab like in photon (and proton for that matter ^^), i'd give it another go ^^

[darius07]

A lot of trial and error later here is full tab length highlight for container tabs + bonus custom color for active tab:

/** Tab accent highlight for active tab and for container tabs START */

/* Moved this here as I deleted everything from "Container Tab - Color line at icon's bottom" */
#tabbrowser-tabs .tab-context-line {
display: none;
}

/* 1px highlight line at the top of background container tabs */
#tabbrowser-tabs .tab-background {
border-top: solid 1px var(--identity-icon-color) !important;
}

/* 2px highlight line at the top of active tab and custom color highlight line for active tab /
#tabbrowser-tabs .tab-background[selected="true"] {
border-top: solid 2px var(--identity-icon-color, #4800FF) !important;
/ Change #4800FF to a color you want, #0078D7 is the default blue */
}

/* Tab accent highlight for active tab and for container tabs END */

How it looks now (purple is the custom color active tab):

The active tab has a thicker highlight than background tabs:

In order for this to work without also the favicon having the same underline remove these lines from Lepton:
/** Container Tab - Color line at icon's bottom ****************************/
/ None exist favicon & Pinned to select /
/ None exist favicon - With Sound /
/ Pinned Tab - Titlechanged Indicator override /
/ Pinned Tab - Titlechanged & soundplaying */

I also removed these lines as I don't want to easily close pinned tabs
/** Pinned Tab - Replace Favicon to Close Button at Selected ***************/
/ Left Padding - Assume the icon size is 17px /
/ Right Padding - Assume the icon size is 17px /
/ Sound Tab - Don't move overlay */

[Az0r]

@Termuellinator

You can replicate photon's container line like follows:

/** Color line for Container Tab**/
  .tab-content::after {
    display: inline-block;
    width: -moz-available;
    height: 2px;
    position: absolute;
    bottom: 5px;
    left: 0;
    background: var(--identity-icon-color);
    content: '';
    margin: 0 var(--inline-tab-padding);
  }
  
  :root[uidensity="compact"] .tab-content::after {
    bottom: 3px;
  }
  
  :root[uidensity="touch"] .tab-content::after {
    bottom: 9px;
  }

In order to get rid of the line under the icon, you might have to remove border-bottom: 2px solid var(--identity-icon-color); from

/** Container Tab - Color line at icon's bottom *****************************/
  .tab-icon-image {
    box-sizing: content-box;
    padding: 3px 0;

    border-bottom: 2px solid var(--identity-icon-color);
  }

[Termuellinator]

That looks really awesome, thank you!
Should be the default imho ^^

[Woundorf]

I want to add that if there is no favicon the default implementation does not indicate container (for example open in a container any of the linked images in this issue). With @Az0r's solution it works wonderfully.

[adql]

In addition to @Woundorf's comment, there is no container indication while the tab is loading, which on some websites and especially with a slow connection can take a while.

[black7375]

I will find the appropriate way to be displayed when loading.

[black7375]

New container line inpired by #167

---

Will be introduced v4.0

[gwarser]

New container line inpired by #167

How to remove animation (I have animations disabled globally), make it static and full width? (I have the close button hidden)

---

  /** Container Tab - Color line at icon's bottom *****************************/
  .tabbrowser-tab .tab-content::before {
    /* Box Model */
    content: "";
    display: block;
    position: absolute !important;

    /* Shape */
    border-bottom: 2px solid var(--identity-icon-color);
    width: 95%;
    transform: translateY(10px) !important;
  }

---

Overflows when pinned :/

[black7375]

Just remove this line

Firefox-UI-Fix/userChrome.css

Line 1390 in a2b3d6c

transition: 0.2s !important;

[gwarser]

Nah, it looks like loading bar, I'm back at 16px.

[black7375]

There was an opinion that it looks like a loading bar, so I modified the position.