Closed Aris-t2 closed 4 years ago
Aris-t2
commented
4 years ago No problem.
There is a trick to find stuff like that. Once inside devtools you inspect the browser.xul/xhtml file by default. In the top area above the code you can find a "search bar" where you can search for classes, ids etc... and labels. I just searched for "Saved" and the panel this label was in was one of the results.
nollinvoyd
commented
4 years ago @Aris-t2
I cleaned up a few .css remnants from the past and at least partially fixed things.
This is how it looks now
Fresh profile, default customcssforfx, except only tabs below nav bar enabled
Fresh profile, default customcssforfx, except only tabs below nav bar_enabled and shrunlen min-max-close .css added
Fresh profile, all my customcssforfx tweaks, plus shrunken min-max-close .css included
Fresh profile all my customcssforfx tweaks, plus shrunken min-max-close with mouseover
Fresh profile, all customcssforfx tweaks plus all myuserchrome.css additions
Fresh profile, all customcssforfx tweaks plus all myuserchrome.css additions with mouseover
I need instructions on uploading my chrome folder
Aris-t2
commented
4 years ago @nollinvoyd
I found the bug, that was causing the caption button glitch when using tabs not on top + menubar.
It will be fixed on next update.
However, your config even in the default state looks wrong, tabs are cut off, which is not happening here for me.
Are you using tabs_below_navigation_toolbar_fx68.css and the latest files?
nollinvoyd
commented
4 years ago @Aris-t2
Updated to 2.7.3.
your config even in the default state looks wrong, tabs are cut off
I'm not sure what you mean by that.
The min-max-close works normally, but as you can see, it is barely discernible.
I'd also like to make the nav bar and menu bar a little narrower if possible
Here is my myuserchrome.css stuff, most of which you made for me
/*****************************************MY TWEAKS*******************************************************/
/* Copyright (c) 2017 Haggai Nuchi
Available for use under the MIT License:
https://opensource.org/licenses/MIT
*/
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
toolbarbutton#alltabs-button {
-moz-binding: url("userChrome.xml#js");
}
/* don't show back or forward buttons if there's nothing to go back or forward to show */
#ctraddon_back-button[disabled="true"],
#ctraddon_forward-button[disabled="true"],
#back-button[disabled="true"],
#forward-button[disabled="true"] {
display: none !important;
}
/* close icon */
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-close-button {
-moz-box-ordinal-group: 0 !important;
-moz-margin-start: -9px !important;
-moz-margin-end: 0px !important;
}
#main-window #navigator-toolbox #TabsToolbar .close-icon > .toolbarbutton-icon,
#main-window #navigator-toolbox #TabsToolbar .tab-content .close-icon {
min-width: 20px !important;
width: 20px !important;
min-height: 20px !important;
height: 20px !important;
}
/* Tab numbers on tabs / Tabs numbers in 'all tabs' popup */
#tabbrowser-tabs,
#alltabs-popup, /*Fx60-61 */
#allTabsMenu-allTabsViewTabs { /*Fx62+ */
counter-reset: n_tabs 0;
}
.tabbrowser-tab .tab-content {
-moz-padding-start: 0px;
}
.tabbrowser-tab .tab-content::before,
.alltabs-item::before, /*Fx60-61 */
.all-tabs-button::before { /*Fx62+ */
display: -moz-box;
-moz-padding-end: 8px;
counter-increment: n_tabs;
content: counter(n_tabs);
font-weight: bold !important;
font-size: 14px !important;
margin-top: -2px !important;
}
/* REMOVE EDIT MENU (IF YOU ALREADY USE ALL THE KEYBOARD SHORTCUTS) */
#edit-menu { display: none !important; }
#file-menu { display: none !important; }
#view-menu { display: none !important; }
#history-menu { display: none !important; }
#bookmarksMenu { display: none !important; }
/* drag text encoding button to menu bar before editing userChrome.css */
toolbarbutton#characterencoding-button {
-moz-binding: url("userChrome.xml#js");
}
#main-window:not([customizing="true"]) toolbarbutton#characterencoding-button {
visibility: collapse;
}
/* fix tab toolbars button width/height for default tabs */
#navigator-toolbox #TabsToolbar .scrollbutton-up,
#navigator-toolbox #TabsToolbar .scrollbutton-down,
#navigator-toolbox #TabsToolbar #alltabs-button,
#navigator-toolbox #TabsToolbar #new-tab-button {
padding: 0px !important;
}
#navigator-toolbox #TabsToolbar .scrollbutton-up > .toolbarbutton-icon,
#navigator-toolbox #TabsToolbar .scrollbutton-down > .toolbarbutton-icon,
#navigator-toolbox #TabsToolbar #alltabs-button > .toolbarbutton-icon,
#navigator-toolbox #TabsToolbar #new-tab-button > .toolbarbutton-icon,
#navigator-toolbox #TabsToolbar .tabs-newtab-button > .toolbarbutton-icon {
padding: 0px !important;
width: 16px !important;
height: 16px !important;
}
/* hide empty space before and after tabs */
hbox[type="pre-tabs"],
hbox[type="post-tabs"] {
min-width: 1px !important;
width: 1px !important;
max-width: 1px !important;
opacity: 0 !important;
}
#main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive="true"],
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] {
margin-top: unset !important;
}
#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar:not(:-moz-lwtheme),
#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar {
-moz-margin-end: 1px !important;
-moz-appearance: none !important;
background: transparent !important;
border-top: unset !important;
}
#main-window[sizemode="normal"] #navigator-toolbox #nav-bar {
border-left: 0px !important;
border-right: 0px !important;
}
#main-window[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar #nav-bar-customization-target {
-moz-padding-start: 50px !important;
}
/* selected tab text color ****************************/
/* text color */
.tabbrowser-tab[selected] .tab-label {
color: red !important;
}
/* ALTER THE URLBAR AND SEARCH BAR FONT SIZES */
#searchbar { font-size: 15px !important; }
#urlbar { font-size: 15px !important; }
/* visited link */
a:visited {
color: FF0000;
}
/* MAKE THE BOX TO THE LEFT OF THE ADDRESS BAR NARROWER ******************************************************** */
/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/locationbar/identitybox_labels_hidden.css */
#identity-icon-labels {
display: none !important;
}
#identity-box {
padding-inline-end: 4px !important;
margin-inline-end: 4px !important;
}
/**/
/* SHRINK MIN-MAX-CLOSE BUTTON - ARIS ******************************************************** */
.titlebar-button {
padding: 0 !important; /* no more wasting space */
color: yellow !important; /* set own color */
}+ toolbarbutton#alltabs-button {
You do not have to use yellow color for caption buttons, it was just an example. Use black or another color, that offers a better contrast for your configuration.
I meant your tabs top border is missing...
Aris-t2
commented
4 years ago In case here are some Thunderbird users, I moved most CSS code from my CustomizeMyBird add-on to the CustomCSSforTb repository (compatible to Thunderbird 68).
nollinvoyd
commented
4 years ago @Aris-t2
You do not have to use yellow color
Done. How can I make it bold?
I meant your tabs top border is missing...
Is it my added css? Maybe this?
`/ fix tab toolbars button width/height for default tabs /
padding: 0px !important; }
padding: 0px !important; width: 16px !important; height: 16px !important; }
` Can I make the nav bar and menu bar a little narrower?
nollinvoyd
commented
4 years ago duplicate
nollinvoyd
commented
4 years ago @Aris-t2
I have some addons buttons that display as blanks when moved to the menu bar.
One example:
Mouseover
Moved to location bar
Chrome folder disabled
I disable myuserchrome.css before imaging the results
krystian3w
commented
4 years ago https://github.com/Aris-t2/CustomCSSforFx/issues/211#issuecomment-526565104
Possible support change color if all downloads end?
Aris-t2
commented
4 years ago @nollinvoyd You can not make min, max, close buttons "bold", they are images not text.
You have to test which code causes the issue for you by removing all custom code and adding it piece by piece.
You have to look into that add-ons code, find the dark icon and force the add-on to use it instead (if possible). The add-on does not know you are using a different color that the one the by Firefox/Windows.
@krystian3w Yes,
#downloads-button[attention="success"] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon,
#downloads-button[attention="success"] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-progress-outer {
fill: red !important;
}@Aris-t2
You have to test which code causes the issue for you by removing all custom code and adding it piece by piece.
You have to look into that add-ons code, find the dark icon and force the add-on to use it instead (if possible). The add-on does not know you are using a different color that the one the by Firefox/Windows.
Are we talking about the "blank" button? When you say "custom code", do you mean the stuff in myuserchrome.css? If so, I disabled the myuserchrome.css before rendering the results I posted.
I also mentioned and displayed that when I completely disabled the Chrome folder, the button in question displayed normally.
Please explain further, because it seems I'm not understanding.
thanks
krystian3w
commented
4 years ago https://github.com/Aris-t2/CustomCSSforFx/issues/211#issuecomment-529546325 ok I try with gray colors.
Aris-t2
commented
4 years ago @nollinvoyd
Is it my added css? Maybe this?
You wrote the above statement. I meant you can try to re-add your code piece by piece back to your myuserhrome.css file to find which piece causes the glitch.
SlaveOfCats
commented
4 years ago @Aris-t2
I just updated from FF68 to FF69. I see that Mozilla has made the Compact density in the URL bar considerably less compact in 69. Anything I can do to get the old Compact density back?
Also, I tried enabling tab_scrollbuttons_both_on toolbars_end for the first time, and I find it doesn't play well with pinned tabs. Is that expected?
Thx
Aris-t2
commented
4 years ago Do you have any before/after screenshots of the density issue?
Not sure it looks different here...
tab_scrollbuttons_both_on toolbars_end.css and tab_scrollbuttons_both_on toolbars_start.css will receive fixes on next update.
Orriky
commented
4 years ago Is it possible hiding close/minimize/maximize buttons? I'm on Developer 70 and what I found on internet doesn't work on this Firefox version
Orriky
commented
4 years ago Solved
.titlebar-buttonbox {
display: none !important;
}@Orriky
Thanks, but that didn't solve the problem for me. It looks like it is related to the searchbar. In about:config, I have browser.search.widget.inNavBar set to true. If I set it to false, the issue goes away.
In FF69, the search text box seems to be no longer affected by my CustomCSSforFx options. It is now taller than my location bar text box and pushing up the total height of the nav bar.
@Aris-t2 what would be helpful for me to provide? Enabled CSS options, screen shots, more?
TroudhuK
commented
4 years ago @Aris-t2
Do you have any before/after screenshots of the density issue?
68:
69:
(larger margins)
SlaveOfCats
commented
4 years ago @Aris-t2
68:
69:
Aris-t2
commented
4 years ago Try the more "compact mode" https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L199
or code like this (from the above file)
#main-window[uidensity=compact] {
--toolbarbutton-inner-padding: 5px !important;
}
#main-window[uidensity=compact] #nav-bar #nav-bar-customization-target > toolbaritem {
margin: 0 !important;
padding: 2px 0 !important;
}@Aris-t2
I'm already using "more compact mode".
I think the problem is related to the search bar widget in FF69. Here's a screenshot of FF69 with browser.search.widget.inNavBar set to false. Notice the nav bar height is smaller.
FF69, no search bar:
FF69 with search bar:
Aris-t2
commented
4 years ago I ran some tests on Fx 60-71, but could not reproduce the mentioned issue.
Fx69
Fx71
Test on a new browser profile or in PortableFirefox.
SlaveOfCats
commented
4 years ago I'm still seeing the issue. Here's what I did:
With search widget:
Without search widget:
Aris-t2
commented
4 years ago Instead of your current chrome folder test latest files using default setup: https://github.com/Aris-t2/CustomCSSforFx/releases
SlaveOfCats
commented
4 years ago I tested with the default chrome setup, and the issue was gone. Then I enabled my current options one by one until the issue reappeared. The problem occurs when I enable locationbar_reduce_height.css.
Aris-t2
commented
4 years ago Now we are getting somewhere. :)
Edit the mentioned file and change
#urlbar,
.searchbar-textbox {
margin: 1px !important;
min-height: 0px !important;
height: 24px !important;
}to
#urlbar,#searchbar,
.searchbar-textbox {
margin: 1px !important;
min-height: 0px !important;
height: 24px !important;
}That fixes the problem, thanks!
As a separate issue, I also have searchbar_go_button_hidden enabled, and I'm noticing that it seems not to be working for me in FF69 (I see the arrow in the searchbar when I start typing). I have some more testing to do to clarify that one.
SlaveOfCats
commented
4 years ago Confirmed that searchbar_go_button_hidden works in FF68, but does not work in FF69.
Aris-t2
commented
4 years ago Same issue, same solution
/* remove search go button */
#searchbar .search-go-button,
.searchbar-textbox .search-go-button {
visibility: hidden !important;
}
Thanks, that one works, too!
TroudhuK
commented
4 years ago For me, I don't use locationbar_reduce_height.css, and I solve the difference with its inspiration, in locationbar_adjustments.css:
/* ADDED */
#urlbar,#searchbar,
.searchbar-textbox {
margin: 0px !important;
}Suuuuuuuuccess!!!!
1. Use Livemarks prefixes settings to distinguish read/unread: 1 space for unread, 2 spaces for read 2. If needed, split the images you need to have one file per image :   3. A little improvement was [pushed](https://github.com/nt1m/livemarks/pull/194) in Livemarks, for a perfect result (about the Open "thewebsite" first item), wait for a next version 4. Code in bookmark_icons_colorized.css (or in your used css) to hide favicons and add a picture instead:.bookmark-item[container][label^=" "], /* ADDED */ .bookmark-item[container][livemark] { list-style-image: url("./../../image/livemark-folder.png") !important; -moz-image-region: auto !important; } /* ADDED >>> */ .bookmark-item[container][label^=" "] > .toolbarbutton-text { margin-left: -6px !important; } .bookmark-item[container][label^=" "] > .toolbarbutton-text { margin-left: -9px !important; } .bookmark-item[container][label^=" "] .bookmark-item:not(:first-of-type) > label, #PlacesChevronPopup > menu[label^=" "] > label, #toolbar-menubar menu[label^=" "] > label { { margin-left: -4px !important; } .bookmark-item[container][label^=" "] .bookmark-item:not(:first-of-type)[label^=" "] > label, #PlacesChevronPopup > menu[label^=" "] > label, #toolbar-menubar menu[label^=" "] > label { { margin-left: -7px !important; } .bookmark-item[container][label^=" "] .bookmark-item > .menu-iconic-left > .menu-iconic-icon { display: none !important; } .bookmark-item[container][label^=" "] .bookmark-item:not(:first-of-type)::before { content: url("./../../image/livemark-item-unread.png") !important; float: left !important; margin: 2px -21px 0 5px !important; } .bookmark-item[container][label^=" "] .bookmark-item:not(:first-of-type)[label^=" "]::before { content: url("./../../image/livemark-item-read.png") !important; } /* <<< ADDED */And the result is perfect (or will be with the French quotation marks with the translation improvement I pushed too):
I changed for the 2 last blocks, better way for the same result (it positions the feed icon relative to the left instead of the right, fix display with shorter entries). Lucky that .bookmark-item::before works to add the image content!
bendover22
commented
4 years ago This is an odd issue, but I run into it enough in Fx & a few apps to be irritating. Sticking to Fx for now, what controls the width of a "resize grip" to change size of something like the treeview pane in the bookmarks library? Oh yeah, in Linux (Mint 18.1).
I searched a good bit & didn't find anyone talking about a CSS solution.
This link says GTK resize grips have been deprecated since 3.14 & should not be used, so maybe Mozilla writes it in somewhere?
Dikaiosyne
commented
4 years ago Hi I have been trying for a few days:
An experiment with: "Margim-bottom"
navigator-toolbox:hover #PersonalToolbar { opacity: 1.0 !important; transition-delay: 0s !important; margin-top: inherit !important; margin-bottom: 200px !important; }
has not led to success. I need 7 lines "--bookmark_items_lines: 7;"
Does somebody has any idea?
Thank you very much!
Aris-t2
commented
4 years ago @bendover22 You might want to try custom scrollbar settings offered by Mozilla: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/config/custom_scrollbar_appearance.css
Other than that the OS handles scrollbars.
@Dikaiosyne For autohide to work, it requires the correct height value of your bookmarks toolbar. If it is set to seven, you have to calculate the value required for the margin. That is the theory, but it does not work properly in my tests, so I wrote within userChrome.css, that both options can not be used at the same time
bendover22
commented
4 years ago @ Aris-t2
@bendover22 You might want to try custom scrollbar settings offered by Mozilla: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/config/custom_scrollbar_appearance.css
Looking at custom_scrollbar_appearance.css, there's nothing in it to do w/ "grip size" that's draggable w/ a mouse, AFAIK.
You may be thinking "scrollbar width." I'm not.
In the bookmarks file pane, the adjustable column dividers are easy to grab / resize. As are most other apps I have. But vertical treeview "grip" is ridiculously hard to grab . It's not a huge deal - thought it would be easier.
Tried other stock Mint themes - no change. I'll see if the maintainer of Gnome Commander knows what controls grip WIDTH between panes in a window.
Other than that the OS handles scrollbars.
If so, Mint makes dragging pane dividers very easy on most apps or windows, but very hard on a few.
Aris-t2
commented
4 years ago Well, this is stuff offered by Mozilla. Nothing we can do about the amount of features or the way they work.
aisen0921
commented
4 years ago @Aris-t2 Can set different appearances on unread tabs now? Thanks.
Aris-t2
commented
4 years ago "unread" state was removed a long time ago. Have not heard anything new about that since.
Pizzapops
commented
4 years ago Win10-64 Nightly-64 v9/22
Appbutton in titlebar causes icons on the navbar to be dumped in the overflow menu. Appbutton in navbar functions properly. Verified with no JS, no userContent.css and an unaltered userChrome.css. Deactivated all extensions and it still happened.
bendover22
commented
4 years ago This is barely related to tab_close_show_on_hover_only.css, so I'm not expecting a lot. The default tab close-buttons (in Fx 69 default theme) are 20 x 20px. My selected tabs are 29px -[(1px T-margin in chrome://...browser.css) +(2px selected tab top border - by me)]. No .tab-line on selected tabs.
Leaving 27px h for close-button ht, if I set margin-top: -1. On selected tabs, it didn't come close to allowing a 27, 26, 25px, etc, close-button WITHOUT causing the .tabbrowser-arrowscrollbox to pop up on hovering a selected tab. Even though the button fit the space & I couldn't find any other margins, padding except the close-button 1px top margin in browser.css.
I didn't see in devtools box model or the "computed" column, anything that would cause the arrowscrollbox to pop up. I assume it thought the button was too big. I had to use negative top / bottom margins, for a selected tab close-button > 22 px high.
Aris-t2
commented
4 years ago @Pizzapops
Thats bad news for the appbutton in tiltebar feature.
Looks like the node has always to be on navigation toolbar now. Adding a position fixed/absolute rule to the button causes this issue instantly without any other code too. There are dirty workarounds with moving the button to the top using negative margins, but I would prefer avoiding those. Maybe there will be more code changes to improve this on upcoming Nightly builds.
@bendover22 Sometimes there is no way to find out why code behaves like it does. Don't try to solve things pixel by pixel, because not everything works the way it should.
bendover22
commented
4 years ago @Aris-t2 - I agree, that here - having tabs close buttons fill exactly all space on selected & unselected tabs wasn't critical. For people w/ vision not correctable to 20/20 - like me, certain things on various UI's you either figure how to modify them or you just don't read or use them.
Re: not being able to differentiate custom-css back_forward buttons - active vs. disabled states. The custom_css_for_fx_v2.7.4/image/bf_ff_kempelton_small.png & others active & disabled states were almost the same - to me.
The /css/buttons/custom_backforward_small_kempelton.css file imports /css/buttons/custom_backforward_small.css. I found the very last line in "custom..._small.css":
line 92: #main-window #navigator-toolbox #nav-bar :-moz-any(#back-button, #forward-button)[disabled] {
**opacity: 1.0** !important; }With opacity = 1, there's little difference in active & disabled Bk / Fwd buttons to me (under Mint 18.1). To get the look in the image, changed "opacity: 0.5 !important;" in the last line. Is that intentional - does using opacity: 1.0, give a much different disabled button in Windows / OS X / other 'Nix distros than I'm seeing?
I just copied the @import line for those buttons from customCSS-userChrome.css to top of my userChrome file. The other files & images were in correct sub directories of chrome directory. Maybe under older Fx versions that setting gave good disabled state contrast?
Aris-t2
commented
4 years ago The icon of the disabled button has a 50% greyscale filter on it, but depending on display settings this might not be enough in some cases, so you were right to set a different opacity there.
pldavid2
commented
4 years ago Hello @Aris-t2 . Do you have a portable FF69 with the 'Alternative Searchbar' script working? I'm trying to use it with the switch switch_glass_and_engine_icon, to see the icon of the selected search engine instead of the magnifier, but it doesn't seem to work for me. Tried the 3 methods to install clearing startupCache after each try and toolkit.legacyUserProfileCustomizations.stylesheets is 'true' Thanks in advance
Aris-t2
commented
4 years ago Sure: https://www.dropbox.com/s/llspk1m9hcrdpwj/FP69_w_scripts.7z?dl=0
pldavid2
commented
4 years ago Thanks @Aris-t2. I manage to get it working after using your portable version. The problem was having several tabs (+100) to being restored after start up, in that case the alternative searchbar doesn't work not sure why, really weird. If have less than that on restore, the searchbar works.
Aris-t2
commented
4 years ago Sorry, but session managers are know for not working properly with ui customizations. This was the case with Fx 4-28 and with Fx 29-56 + CTR too.
You might want to increase the timeout timings within your scripts, since loading your browser window might take longer than set within the scripts.
Make sure you updated to the most recent version of this projects files "before" reporting problems!
Continued from https://github.com/Aris-t2/CustomCSSforFx/issues/3, https://github.com/Aris-t2/CustomCSSforFx/issues/41, https://github.com/Aris-t2/CustomCSSforFx/issues/88, https://github.com/Aris-t2/CustomCSSforFx/issues/109, https://github.com/Aris-t2/CustomCSSforFx/issues/133, https://github.com/Aris-t2/CustomCSSforFx/issues/163 and https://github.com/Aris-t2/CustomCSSforFx/issues/189.
Instead of opening new "issues" for general talk we can use this area for discussions, feedback and questions. Open new "issues" for real bugs and problems.
Custom JS scripts to restore more classic features https://github.com/Aris-t2/CustomJSforFx
Trying to make CSS code ready for Firefox Quantum (57+)? Remove all
@namespacereferences. They are the reason, if your code refuses to work.Application/hamburger button in tabs toolbar? Look here: #46
Things this project will not target/recreate
Things not possible with CSS