Firefox-UI-Fix icon indicating copy to clipboard operation
Firefox-UI-Fix copied to clipboard

After upgrading to 136 stable, the audio playing icon has changed behavior and the tab expands/shrinks when it appears/disappears

Open deusexcalamus opened this issue 9 months ago • 42 comments

Describe the bug

As the title says, when audio is played on a tab (ex a youtube video) the speaker icon has changed from the previous one, as well as the 'play tab' icon, I think. Both seem to have reverted to the old behavior. Additionally, when the icon switches to the speaker, the tab size increases if you have multiple tabs open.

Expected behavior

The icon should remain the old one and the tab should not resize.

Screenshots

No response

OS

Windows 10

OS - Others

x64 pro, latest version

Firefox Version

136

Distribution

Theme

Theme - More Info

Default firefox dark theme in compact mode.

user.js setup

user.js setup
// v8.6.6 Lepton-Photon-Style
// ** Theme Default Options ****************************************************
// userchrome.css usercontent.css activate
user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);

// Fill SVG Color
user_pref("svg.context-properties.content.enabled", true);

// Restore Compact Mode - 89 Above
user_pref("browser.compactmode.show", true);

// about:home Search Bar - 89 Above
user_pref("browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar", false);

// CSS's `:has()` selector #457 - 103 Above
user_pref("layout.css.has-selector.enabled", true);

// Browser Theme Based Scheme - Will be activate 95 Above
// user_pref("layout.css.prefers-color-scheme.content-override", 3);

// ** Theme Related Options ****************************************************
// == Theme Distribution Settings ==============================================
// The rows that are located continuously must be changed `true`/`false` explicitly because there is a collision.
// https://github.com/black7375/Firefox-UI-Fix/wiki/Options#important
user_pref("userChrome.tab.connect_to_window",          true); // Original, Photon
user_pref("userChrome.tab.color_like_toolbar",         true); // Original, Photon

user_pref("userChrome.tab.lepton_like_padding",       false); // Original
user_pref("userChrome.tab.photon_like_padding",        true); // Photon

user_pref("userChrome.tab.dynamic_separator",         false); // Original, Proton
user_pref("userChrome.tab.static_separator",           true); // Photon
user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option
user_pref("userChrome.tab.bar_separator",             false); // Just option

user_pref("userChrome.tab.newtab_button_like_tab",    false); // Original
user_pref("userChrome.tab.newtab_button_smaller",      true); // Photon
user_pref("userChrome.tab.newtab_button_proton",      false); // Proton

user_pref("userChrome.icon.panel_full",               false); // Original, Proton
user_pref("userChrome.icon.panel_photon",              true); // Photon

// Original Only
user_pref("userChrome.tab.box_shadow",                false);
user_pref("userChrome.tab.bottom_rounded_corner",     false);

// Photon Only
user_pref("userChrome.tab.photon_like_contextline",    true);
user_pref("userChrome.rounding.square_tab",            true);

// Proton Only
// user_pref("userChrome.tab.supernova_like_contextline",   true);

// == Theme Compatibility Settings =============================================
// user_pref("userChrome.compatibility.accent_color",         true); // Firefox v103 Below
// user_pref("userChrome.compatibility.covered_header_image", true);
// user_pref("userChrome.compatibility.panel_cutoff",         true);
// user_pref("userChrome.compatibility.navbar_top_border",    true);
// user_pref("userChrome.compatibility.dynamic_separator",    true); // Need dynamic_separator

// user_pref("userChrome.compatibility.os.linux_non_native_titlebar_button", true);
// user_pref("userChrome.compatibility.os.windows_maximized", true);
// user_pref("userChrome.compatibility.os.win11",             true);

// == Theme Custom Settings ====================================================
// -- User Chrome --------------------------------------------------------------
// user_pref("userChrome.theme.private",                       true);
// user_pref("userChrome.theme.proton_color.dark_blue_accent", true);
// user_pref("userChrome.theme.monospace",                     true);
// user_pref("userChrome.theme.transparent.frame",             true);
// user_pref("userChrome.theme.transparent.menu",              true);
// user_pref("userChrome.theme.transparent.panel",             true);
// user_pref("userChrome.theme.non_native_menu",               true); // only for linux

// user_pref("userChrome.decoration.disable_panel_animate",    true);
// user_pref("userChrome.decoration.disable_sidebar_animate",  true);
// user_pref("userChrome.decoration.panel_button_separator",   true);
// user_pref("userChrome.decoration.panel_arrow",              true);

// user_pref("userChrome.autohide.tab",                        true);
// user_pref("userChrome.autohide.tab.opacity",                true);
// user_pref("userChrome.autohide.tab.blur",                   true);
// user_pref("userChrome.autohide.tabbar",                     true);
// user_pref("userChrome.autohide.navbar",                     true);
// user_pref("userChrome.autohide.bookmarkbar",                true);
// user_pref("userChrome.autohide.sidebar",                    true);
// user_pref("userChrome.autohide.fill_urlbar",                true);
// user_pref("userChrome.autohide.back_button",                true);
// user_pref("userChrome.autohide.forward_button",             true);
// user_pref("userChrome.autohide.page_action",                true);
// user_pref("userChrome.autohide.toolbar_overlap",            true);
// user_pref("userChrome.autohide.toolbar_overlap.allow_layout_shift", true);

// user_pref("userChrome.hidden.tab_icon",                     true);
// user_pref("userChrome.hidden.tab_icon.always",              true);
// user_pref("userChrome.hidden.tabbar",                       true);
// user_pref("userChrome.hidden.navbar",                       true);
// user_pref("userChrome.hidden.private_indicator",            true);
// user_pref("userChrome.hidden.titlebar_container",           true);
// user_pref("userChrome.hidden.sidebar_header",               true);
// user_pref("userChrome.hidden.sidebar_header.vertical_tab_only", true);
// user_pref("userChrome.hidden.urlbar_iconbox",               true);
// user_pref("userChrome.hidden.urlbar_iconbox.label_only",    true);
// user_pref("userChrome.hidden.bookmarkbar_icon",             true);
// user_pref("userChrome.hidden.bookmarkbar_label",            true);
// user_pref("userChrome.hidden.disabled_menu",                true);

// user_pref("userChrome.centered.tab",                        true);
// user_pref("userChrome.centered.tab.label",                  true);
// user_pref("userChrome.centered.urlbar",                     true);
// user_pref("userChrome.centered.bookmarkbar",                true);

// user_pref("userChrome.counter.tab",                         true);
// user_pref("userChrome.counter.bookmark_menu",               true);

// user_pref("userChrome.combined.nav_button",                 true);
// user_pref("userChrome.combined.nav_button.home_button",     true);
// user_pref("userChrome.combined.urlbar.nav_button",          true);
// user_pref("userChrome.combined.urlbar.home_button",         true);
// user_pref("userChrome.combined.urlbar.reload_button",       true);
// user_pref("userChrome.combined.sub_button.none_background", true);
// user_pref("userChrome.combined.sub_button.as_normal",       true);

// user_pref("userChrome.rounding.square_button",              true);
// user_pref("userChrome.rounding.square_dialog",              true);
// user_pref("userChrome.rounding.square_panel",               true);
// user_pref("userChrome.rounding.square_panelitem",           true);
// user_pref("userChrome.rounding.square_menupopup",           true);
// user_pref("userChrome.rounding.square_menuitem",            true);
// user_pref("userChrome.rounding.square_infobox",             true);
// user_pref("userChrome.rounding.square_toolbar",             true);
// user_pref("userChrome.rounding.square_field",               true);
// user_pref("userChrome.rounding.square_urlView_item",        true);
// user_pref("userChrome.rounding.square_checklabel",          true);

// user_pref("userChrome.padding.first_tab",                   true);
// user_pref("userChrome.padding.first_tab.always",            true);
// user_pref("userChrome.padding.drag_space",                  true);
// user_pref("userChrome.padding.drag_space.maximized",        true);

// user_pref("userChrome.padding.toolbar_button.compact",      true);
// user_pref("userChrome.padding.menu_compact",                true);
// user_pref("userChrome.padding.bookmark_menu.compact",       true);
// user_pref("userChrome.padding.urlView_expanding",           true);
// user_pref("userChrome.padding.urlView_result",              true);
// user_pref("userChrome.padding.panel_header",                true);

// user_pref("userChrome.urlbar.iconbox_with_separator",       true);

// user_pref("userChrome.urlView.as_commandbar",               true);
// user_pref("userChrome.urlView.full_width_padding",          true);
// user_pref("userChrome.urlView.always_show_page_actions",    true);
// user_pref("userChrome.urlView.move_icon_to_left",           true);
// user_pref("userChrome.urlView.go_button_when_typing",       true);
// user_pref("userChrome.urlView.focus_item_border",           true);

// user_pref("userChrome.tabbar.as_titlebar",                  true);
// user_pref("userChrome.tabbar.fill_width",                   true);
// user_pref("userChrome.tabbar.multi_row",                    true);
// user_pref("userChrome.tabbar.unscroll",                     true);
// user_pref("userChrome.tabbar.on_bottom",                    true);
// user_pref("userChrome.tabbar.on_bottom.above_bookmark",     true); // Need on_bottom
// user_pref("userChrome.tabbar.on_bottom.menubar_on_top",     true); // Need on_bottom
// user_pref("userChrome.tabbar.on_bottom.hidden_single_tab",  true); // Need on_bottom
// user_pref("userChrome.tabbar.one_liner",                    true);
// user_pref("userChrome.tabbar.one_liner.combine_navbar",     true); // Need one_liner
// user_pref("userChrome.tabbar.one_liner.tabbar_first",       true); // Need one_liner
// user_pref("userChrome.tabbar.one_liner.responsive",         true); // Need one_liner

// user_pref("userChrome.tab.bottom_rounded_corner.all",       true);
// user_pref("userChrome.tab.bottom_rounded_corner.australis", true);
// user_pref("userChrome.tab.bottom_rounded_corner.edge",      true);
// user_pref("userChrome.tab.bottom_rounded_corner.chrome",    true);
// user_pref("userChrome.tab.bottom_rounded_corner.chrome_legacy", true);
// user_pref("userChrome.tab.bottom_rounded_corner.wave",      true);
// user_pref("userChrome.tab.always_show_tab_icon",            true);
// user_pref("userChrome.tab.close_button_at_pinned",          true);
// user_pref("userChrome.tab.close_button_at_pinned.always",   true);
// user_pref("userChrome.tab.close_button_at_pinned.background", true);
// user_pref("userChrome.tab.close_button_at_hover.always",    true); // Need close_button_at_hover
// user_pref("userChrome.tab.close_button_at_hover.with_selected", true);  // Need close_button_at_hover
// user_pref("userChrome.tab.sound_show_label",                true); // Need remove sound_hide_label
// user_pref("userChrome.tab.container.on_top",                true);
// user_pref("userChrome.tab.container.always_long",           true);
// user_pref("userChrome.tab.sound_with_favicons.on_center",   true);
// user_pref("userChrome.tab.selected_bold",                   true);

// user_pref("userChrome.navbar.as_sidebar",                   true);

// user_pref("userChrome.bookmarkbar.multi_row",               true);

// user_pref("userChrome.findbar.floating_on_top",             true);

// user_pref("userChrome.panel.remove_strip",                  true);
// user_pref("userChrome.panel.full_width_separator",          true);
// user_pref("userChrome.panel.full_width_padding",            true);

// user_pref("userChrome.sidebar.overlap",                     true);

// user_pref("userChrome.icon.disabled",                       true);
// user_pref("userChrome.icon.account_image_to_right",         true);
// user_pref("userChrome.icon.account_label_to_right",         true);
// user_pref("userChrome.icon.menu.full",                      true);
// user_pref("userChrome.icon.global_menu.mac",                true);

// -- User Content -------------------------------------------------------------
// user_pref("userContent.player.ui.twoline",                  true);

// user_pref("userContent.newTab.hidden_logo",                 true);
// user_pref("userContent.newTab.background_image",            true); // Need wallpaper image to `userContent.css`. :root { --uc-newTab-wallpaper: url("../icons/background_image.png"); }

// user_pref("userContent.page.proton_color.dark_blue_accent", true);
// user_pref("userContent.page.proton_color.system_accent",    true);
// user_pref("userContent.page.dark_mode.pdf",                 true);
// user_pref("userContent.page.monospace",                     true);

// == Theme Default Settings ===================================================
// -- User Chrome --------------------------------------------------------------
user_pref("userChrome.compatibility.theme",       true);
user_pref("userChrome.compatibility.os",          true);

user_pref("userChrome.theme.built_in_contrast",   true);
user_pref("userChrome.theme.system_default",      true);
user_pref("userChrome.theme.proton_color",        true);
user_pref("userChrome.theme.proton_chrome",       true); // Need proton_color
user_pref("userChrome.theme.fully_color",         true); // Need proton_color
user_pref("userChrome.theme.fully_dark",          true); // Need proton_color

user_pref("userChrome.decoration.cursor",         true);
user_pref("userChrome.decoration.field_border",   true);
user_pref("userChrome.decoration.download_panel", true);
user_pref("userChrome.decoration.animate",        true);

user_pref("userChrome.padding.tabbar_width",      true);
user_pref("userChrome.padding.tabbar_height",     true);
user_pref("userChrome.padding.toolbar_button",    true);
user_pref("userChrome.padding.navbar_width",      true);
user_pref("userChrome.padding.urlbar",            true);
user_pref("userChrome.padding.bookmarkbar",       true);
user_pref("userChrome.padding.infobar",           true);
user_pref("userChrome.padding.menu",              true);
user_pref("userChrome.padding.bookmark_menu",     true);
user_pref("userChrome.padding.global_menubar",    true);
user_pref("userChrome.padding.panel",             true);
user_pref("userChrome.padding.popup_panel",       true);

user_pref("userChrome.tab.multi_selected",        true);
user_pref("userChrome.tab.unloaded",              true);
user_pref("userChrome.tab.letters_cleary",        true);
user_pref("userChrome.tab.close_button_at_hover", true);
user_pref("userChrome.tab.sound_hide_label",      true);
user_pref("userChrome.tab.sound_with_favicons",   true);
user_pref("userChrome.tab.pip",                   true);
user_pref("userChrome.tab.container",             true);
user_pref("userChrome.tab.crashed",               true);

user_pref("userChrome.fullscreen.overlap",        true);
user_pref("userChrome.fullscreen.show_bookmarkbar", true);

user_pref("userChrome.icon.library",              true);
user_pref("userChrome.icon.panel",                true);
user_pref("userChrome.icon.menu",                 true);
user_pref("userChrome.icon.context_menu",         true);
user_pref("userChrome.icon.global_menu",          true);
user_pref("userChrome.icon.global_menubar",       true);
user_pref("userChrome.icon.1-25px_stroke",        true);

// -- User Content -------------------------------------------------------------
user_pref("userContent.player.ui",             true);
user_pref("userContent.player.icon",           true);
user_pref("userContent.player.noaudio",        true);
user_pref("userContent.player.size",           true);
user_pref("userContent.player.click_to_play",  true);
user_pref("userContent.player.animate",        true);

user_pref("userContent.newTab.full_icon",      true);
user_pref("userContent.newTab.animate",        true);
user_pref("userContent.newTab.pocket_to_last", true);
user_pref("userContent.newTab.searchbar",      true);

user_pref("userContent.page.field_border",     true);
user_pref("userContent.page.illustration",     true);
user_pref("userContent.page.proton_color",     true);
user_pref("userContent.page.dark_mode",        true); // Need proton_color
user_pref("userContent.page.proton",           true); // Need proton_color

// ** Useful Options ***********************************************************
// Tab preview
// https://blog.nightly.mozilla.org/2024/02/06/a-preview-of-tab-previews-these-weeks-in-firefox-issue-153/
user_pref("browser.tabs.hoverPreview.enabled", false);

// Paste suggestion at urlbar
// https://blog.nightly.mozilla.org/2023/12/04/url-gonna-want-to-check-this-out-these-weeks-in-firefox-issue-150/
user_pref("browser.urlbar.clipboard.featureGate", false);

// Integrated calculator at urlbar
user_pref("browser.urlbar.suggest.calculator", true);

// Integrated unit convertor at urlbar
// user_pref("browser.urlbar.unitConversion.enabled", true);

// Draw in Titlebar
// user_pref("browser.tabs.drawInTitlebar", true);
// user_pref("browser.tabs.inTitlebar",        1); // Nightly, 96 Above

// Searchbar, Removed from settings starting with FF v122
// user_pref("browser.search.widget.inNavBar",    true);

// Firefox view search
// https://blog.nightly.mozilla.org/2023/12/14/better-searching-in-firefox-to-close-out-2023-these-weeks-in-firefox-issue-151/
// user_pref("browser.firefox-view.search.enabled",       true);
// user_pref("browser.firefox-view.virtual-list.enabled", true);

// Firefox screenshot
// https://blog.nightly.mozilla.org/2024/01/22/happy-new-year-these-weeks-in-firefox-issue-152/
// user_pref("screenshots.browser.component.enabled", true);

// ** Scrolling Settings *******************************************************
// == Only Sharpen Scrolling ===================================================
//         Pref                                             Value      Original
/*
user_pref("mousewheel.min_line_scroll_amount",                 10); //        5
user_pref("general.smoothScroll.mouseWheel.durationMinMS",     80); //       50
user_pref("general.smoothScroll.currentVelocityWeighting", "0.15"); //   "0.25"
user_pref("general.smoothScroll.stopDecelerationWeighting", "0.6"); //    "0.4"
*/

// == Smooth Scrolling ==========================================================
// ** Scrolling Options ********************************************************
// based on natural smooth scrolling v2 by aveyo
// this preset will reset couple extra variables for consistency
//         Pref                                              Value                 Original
/*
user_pref("apz.allow_zooming",                               true);            ///     true
user_pref("apz.force_disable_desktop_zooming_scrollbars",   false);            ///    false
user_pref("apz.paint_skipping.enabled",                      true);            ///     true
user_pref("apz.windows.use_direct_manipulation",             true);            ///     true
user_pref("dom.event.wheel-deltaMode-lines.always-disabled", true);            ///    false
user_pref("general.smoothScroll.currentVelocityWeighting", "0.12");            ///   "0.25" <- 1. If scroll too slow, set to "0.15"
user_pref("general.smoothScroll.durationToIntervalRatio",    1000);            ///      200
user_pref("general.smoothScroll.lines.durationMaxMS",         100);            ///      150
user_pref("general.smoothScroll.lines.durationMinMS",           0);            ///      150
user_pref("general.smoothScroll.mouseWheel.durationMaxMS",    100);            ///      200
user_pref("general.smoothScroll.mouseWheel.durationMinMS",      0);            ///       50
user_pref("general.smoothScroll.mouseWheel.migrationPercent", 100);            ///      100
user_pref("general.smoothScroll.msdPhysics.continuousMotionMaxDeltaMS", 12);   ///      120
user_pref("general.smoothScroll.msdPhysics.enabled",                  true);   ///    false
user_pref("general.smoothScroll.msdPhysics.motionBeginSpringConstant", 200);   ///     1250
user_pref("general.smoothScroll.msdPhysics.regularSpringConstant",     200);   ///     1000
user_pref("general.smoothScroll.msdPhysics.slowdownMinDeltaMS",         10);   ///       12
user_pref("general.smoothScroll.msdPhysics.slowdownMinDeltaRatio",  "1.20");   ///    "1.3"
user_pref("general.smoothScroll.msdPhysics.slowdownSpringConstant",   1000);   ///     2000
user_pref("general.smoothScroll.other.durationMaxMS",         100);            ///      150
user_pref("general.smoothScroll.other.durationMinMS",           0);            ///      150
user_pref("general.smoothScroll.pages.durationMaxMS",         100);            ///      150
user_pref("general.smoothScroll.pages.durationMinMS",           0);            ///      150
user_pref("general.smoothScroll.pixels.durationMaxMS",        100);            ///      150
user_pref("general.smoothScroll.pixels.durationMinMS",          0);            ///      150
user_pref("general.smoothScroll.scrollbars.durationMaxMS",    100);            ///      150
user_pref("general.smoothScroll.scrollbars.durationMinMS",      0);            ///      150
user_pref("general.smoothScroll.stopDecelerationWeighting", "0.6");            ///    "0.4"
user_pref("layers.async-pan-zoom.enabled",                   true);            ///     true
user_pref("layout.css.scroll-behavior.spring-constant",   "250.0");            ///   "250.0"
user_pref("mousewheel.acceleration.factor",                     3);            ///       10
user_pref("mousewheel.acceleration.start",                     -1);            ///       -1
user_pref("mousewheel.default.delta_multiplier_x",            100);            ///      100
user_pref("mousewheel.default.delta_multiplier_y",            100);            ///      100
user_pref("mousewheel.default.delta_multiplier_z",            100);            ///      100
user_pref("mousewheel.min_line_scroll_amount",                  0);            ///        5
user_pref("mousewheel.system_scroll_override.enabled",       true);            ///     true <- 2. If scroll too fast, set to false
user_pref("mousewheel.system_scroll_override_on_root_content.enabled", false); ///     true
user_pref("mousewheel.transaction.timeout",                  1500);            ///     1500
user_pref("toolkit.scrollbox.horizontalScrollDistance",         4);            ///        5
user_pref("toolkit.scrollbox.verticalScrollDistance",           3);            ///        3
*/

</details>


### Additional context

_No response_

deusexcalamus avatar Mar 05 '25 21:03 deusexcalamus

For me the icon looks like this:

Image

eternal-sorrow avatar Mar 06 '25 00:03 eternal-sorrow

Mine is

Image

I'm on Linux Mint

Monsterovich avatar Mar 06 '25 14:03 Monsterovich

I'musing the dark theme so mine is white, but looks the same otherwise, the big problem (for me, at least) is how the tab expands/shrinks when the icon appears/goes away, it's visually distracting.

deusexcalamus avatar Mar 06 '25 16:03 deusexcalamus

Weird. For me it doesn't expand/shrink. It just moves the text to the left, hiding more of the text behind the cutoff.

eternal-sorrow avatar Mar 06 '25 17:03 eternal-sorrow

the big problem (for me, at least) is how the tab expands/shrinks when the icon appears/goes away, it's visually distracting.

You can fix that with the following. This is the selector that Mozilla uses in tabs.css.

/* FF v136 fix tab width changing during audio playback */
.tabbrowser-tab {
	&:is([muted], [soundplaying], [activemedia-blocked]) {
		#tabbrowser-tabs[orient="horizontal"] &:not([pinned]) {
			--tab-min-width: inherit !important;
		}
	}
}

Shadowized avatar Mar 06 '25 19:03 Shadowized

So, not to sound like an idiot, but what do I do with that?

deusexcalamus avatar Mar 06 '25 19:03 deusexcalamus

So, not to sound like an idiot, but what do I do with that?

put it in the userChrome.css file somewhere at the bottom.

Shadowized avatar Mar 06 '25 19:03 Shadowized

Oh, okay. Not 100% sure it works, though?

Image

Image I might try this: https://www.reddit.com/r/firefox/comments/1ir4or1/how_to_disable_dynamic_tab_sizing/md6g0yp/

Edit: No, that still makes the tabs resize...Then again, so does the snippet you posted too.

deusexcalamus avatar Mar 06 '25 19:03 deusexcalamus

Restart the browser once that CSS is in there. I just tested it again and it works fine so I don't know what to say.

Image

Shadowized avatar Mar 06 '25 19:03 Shadowized

It's in my UserChrome.css

Image

deusexcalamus avatar Mar 06 '25 19:03 deusexcalamus

Open the FF dev tools(Ctrl+Alt+Shift+I) and add it in there to see if its just a filesystem oddity or some other CSS rule is interfering with it.

Shadowized avatar Mar 06 '25 19:03 Shadowized

I'm assuming I've done what you ask correctly, no dice. I opened my profile by going to about:support and opening it from there, then editing UserChrome.css in Notepad++

Image

deusexcalamus avatar Mar 06 '25 19:03 deusexcalamus

type userChrome in the top-left filter box of that dev tools window there, and select the file, then add the CSS into it like how my screenshot was.

Shadowized avatar Mar 06 '25 19:03 Shadowized

Nothing shows up when I do that, I tried it the first time when you showed that screenshot, but I didn't get anything, so I just added it like I showed.

deusexcalamus avatar Mar 06 '25 19:03 deusexcalamus

you must be in the wrong devtool then, use the "browser toolbox" one which opens a standalone window that can inspect/edit firefox UI elements, which again as I mentioned opens via Ctrl+Shift+Alt+I

Image

Shadowized avatar Mar 06 '25 20:03 Shadowized

Oh! Okay, that works like you said. Now what do I do to get it to stick? Also, it hides the whole title now, which I guess is what the expansion of the tab was designed to prevent, I hope that can be fixed.

Image

deusexcalamus avatar Mar 06 '25 20:03 deusexcalamus

when you navigated to that CSS file through the toolbox, were your other edits saved in there already? if so just append my edit to the bottom of that and hit save on the left side and restart to confirm it stuck. My guess was that you were editing the wrong CSS file.

Shadowized avatar Mar 06 '25 20:03 Shadowized

when you navigated to that CSS file through the toolbox, were your other edits saved in there already? No, they weren't, this is the entire content of that file in the toolbox:

** Import Lepton stylesheet (Chrome) *****************************************/ @import url("css/leptonChrome.css");

/** Add your custom styles below **********************************************/

/* Enable option to edit bookmark URLs under Add Bookmark (blue star) menu / / .editBMPanel_locationRow { display: initial !important; } */

/* Disable Email Image/Audio/Video and Set as Desktop Background context menu items / / #context-sendimage, #context-sendvideo, #context-sendaudio, #context-sep-setbackground, #context-setDesktopBackground { display: none !important; } */

While the file on disk has the lines that you gave me. if so just append my edit to the bottom of that and hit save on the left side and restart to confirm it stuck. My guess was that you were editing the wrong CSS file.

deusexcalamus avatar Mar 06 '25 20:03 deusexcalamus

yeah just put it at the last line, simple enough.

Shadowized avatar Mar 06 '25 20:03 Shadowized

Works now. I'm sure I was editing the correct UserChrome.css file, however, because I was going to about:support, opening my profile folder from there, and then opening UserChrome.css with Notepad++ and appending the lines at the bottom in there.

About the only thing left is the speaker icon pushing the title of the tab out of the tab and making it not able to be seen.

deusexcalamus avatar Mar 06 '25 20:03 deusexcalamus

I think that path is wrong, userChrome.css (also user should not be capitalized) is in Mozilla/Firefox/Profile/user/chrome.

I sort of cobbled together a fix to re-position the sound icon, because stupid Mozilla changed the selector elements again.

in the leptonChrome.css Find

.tab-icon-overlay:not([crashed]),
.tab-icon-overlay[pinned][crashed][selected] {
	/* Position */
	top: 0 !important;
	inset-inline-end: -9px !important;

and change it to

.button-background[size="small"]:not([crashed]),
.button-background[size="small"][pinned][crashed][selected] {
	/* Position */
	position: absolute !important;
	top: 4px !important;
	inset-inline-start: 14px !important;

you can adjust the top and inset-inline-start variables to your liking.

alternatively, you can use this.

Shadowized avatar Mar 06 '25 20:03 Shadowized

I think that path is wrong, userChrome.css (also user should not be capitalized) is in Mozilla/Firefox/Profile/user/chrome.

Oh, that would probably be why it wasn't working for me, lol.

in the leptonChrome.css Find

Will try this.

Just to confirm, the file I should be editing is myprofile/chrome/css/leptonChrome.css ?

deusexcalamus avatar Mar 06 '25 20:03 deusexcalamus

yes

Shadowized avatar Mar 06 '25 21:03 Shadowized

Image This part, right? Because I replaced it and it doesn't change the position, so I'm either a.) doing it in the wrong place or b.) something else is wrong. Do you by chance have IRC/discord/anything like that? I don't want to keep clogging the dev's bug tracker with my ineptitude.

deusexcalamus avatar Mar 06 '25 21:03 deusexcalamus

I believe the leptonChrome file has multiple references to the same selector based on which preferences you have set, if not that then search around for the others until you find the right one. Wish I could be of more help with that but I only use this project as a reference point for my own CSS edits.

Shadowized avatar Mar 06 '25 21:03 Shadowized

Okay. I'll wait and see if @black7375 has anything to say about it. In the meantime, thanks for the help that you did provide! :) Edit: I found a later instance of it and replaced it and got it working. Thanks @Shadowized :)

deusexcalamus avatar Mar 06 '25 21:03 deusexcalamus

The same problem with 8.7.0.

eternal-sorrow avatar Mar 10 '25 21:03 eternal-sorrow

The same problem with 8.7.0.

Great, I have to do this all over again? lol

deusexcalamus avatar Mar 10 '25 23:03 deusexcalamus

Hello. is there any plan for Firefox-UI-Fix to 'restore' the old appearance with the audio icon being over the favicon? If not, is there any userChrome.css code/markup that can restore it?

michaelchany avatar Mar 16 '25 02:03 michaelchany

Hello. is there any plan for Firefox-UI-Fix to 'restore' the old appearance with the audio icon being over the favicon? If not, is there any userChrome.css code/markup that can restore it?

read this thread, it's discussed and shown how to fix it.

deusexcalamus avatar Mar 16 '25 02:03 deusexcalamus