[Improve] inline_tab_audio_icons.css

[emerylopes]

Is It possible to improve this css ?

1. Add Close Button only on Hover

2. Position the audio Icon on Top Left

3. Position the close Icon on Top Right

Thank you

• Changes I made to the Sound Icon is Top Right

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/inline_tab_audio_icons.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Shows tab audio icons next to the tab icon, and by default removes the tab secondary line */

.tabbrowser-tab:not([pinned]) .tab-icon-stack:is([muted],[soundplaying],[activemedia-blocked]){
grid-template-areas: "a s";
}
.tabbrowser-tab:not([pinned]) .tab-icon-overlay:is([muted],[soundplaying],[activemedia-blocked]){ grid-area: s; }
.tab-icon-overlay,
.tab-icon-image,
.tab-throbber{ opacity: 1 !important; }

.tab-icon-overlay:not([pinned]){
margin-inline: -7px 2px !important;
top: -9px
}

/* secondary audio label ain't much use with this style, but feel free to remove the next line if you want to show it. */
.tab-secondary-label{ display: none }

/* show the secondary label when video is in PiP */
.tab-secondary-label[pictureinpicture]{ display: flex }

/* These exist for compatibility with combined_favicon_and_tab_close_button.css */
.tab-icon-overlay{ pointer-events: auto }
.tab-content > .tab-icon-stack,
.tab-icon-stack:hover > .tab-icon-image{ visibility: visible }

[MrOtherGuy]

Considering that you are talking about inline_tab_audio_icons.css specifically:

1. Add Close Button only on Hover
   No, that has nothing to do with the purpose of this style.

2. Position the audio Icon on Top Left
   No. The purpose of the style is to show the icon inline, not as overlay

3. Position the close Icon on Top Right
   No, this again has nothing to do with the purpose of the style.

There exists tab_close_button_always_on_hover.css for the first point. I don't remember there existing a style in my repository for the other two requests, but those are things that could exist. But they don't belong to inline_tab_audio_icons.css

[emerylopes]

Considering that you are talking about inline_tab_audio_icons.css specifically:

1. Add Close Button only on Hover
   No, that has nothing to do with the purpose of this style.

2. Position the audio Icon on Top Left
   No. The purpose of the style is to show the icon inline, not as overlay

3. Position the close Icon on Top Right
   No, this again has nothing to do with the purpose of the style.

There exists tab_close_button_always_on_hover.css for the first point. I don't remember there existing a style in my repository for the other two requests, but those are things that could exist. But they don't belong to inline_tab_audio_icons.css

Hello MrOtherGuy ! Good morning and thank you for the reply :)

I'm trying to use icon_only_tabs.css and make the Tab, Sound icon, and Close icon clickable. Using both icon_only_tabs.css and inline_tab_audio_icons.css with some tweaks I getting this:

Its possible to you help me put this all 3 together?

[MrOtherGuy]

You can probably do that, but how exactly should a tab look like in your vision when it has close icon and audio icon?

Like, do you intend them to show all side-by-side, or either audio icon or close icon be overlay or both as overlay?

[emerylopes]

Hello MrOtherGuy ! Thank you for the reply. In my view they would appear like this:

1. Minimum size, (I use the icon_only_tabs.css)
2. But they need to be clickable and closeable
3. So I I my view the way to go is:
   a) Bottom part: always safe to click, since i want to select.
   b) Top part : intractable parte, sice I can close or mute. Close on top right side and only on mouse over and Sound on Top Let.

Im my example the mouse in over the gmail tab.

[MrOtherGuy]

I've updated icon_only_tabs.css to let it show the audio button (only for Firefox 136+ so current beta), because the audio button there is a bit different.

Anyway, with that change (and Firefox 136) you could then add this to make the layout pretty close to what you showed:

.tab-close-button:not([pinned]){
  --button-size-icon-small: 16px !important;
  background-color: var(--toolbox-bgcolor);
  display: flex;
  position: absolute;
  border-radius: var(--border-radius-circle) !important;
  top: 4px;
  right: 2px;
  width: var(--button-size-icon-small) !important;
  height: var(--button-size-icon-small) !important;
  padding: 3px !important;
}
.tab-audio-button{
  inset-inline: 0 auto;
}

[emerylopes]

Thnak you very much! Where can I find the updated updated icon_only_tabs.css.

I only seeing the old one in the repository.

[MrOtherGuy]

Oops sorry, turns out I forgot to push the update to the repository. You should now see the updated file.