[!] GENERAL discussion, feedback, questions belong here! (v11) #308
Comments
|
Hi Aris.
Lol, nope, check the very first time I asked you that question, #bookmarksShowAll {
-moz-appearance: menuitem-iconic !important;
list-style-image: url("chrome://browser/skin/library.svg") !important;
-moz-image-region: auto !important; }When I look at the DOM afterwards, the Moz-Appearance property is there, but it's striked; it says invalid property value. There is a Moz-Appearance property already in the browser applied to that menu entry, it's set to "menuitem" rather than "menuitem-iconic" and it ALSO is striked as invalid. In the meantime, I was able to modify the Restart Menu script (thank you for that) and add the menuitem-iconic CLASS to the menu entry it creates, and I can then style it from inside the JS or from userChrome. I guess we can continue this in the general on CustomJSforFx? I can read JS (like I can read English) but I have no clue how to modify elements. Ideally we'd have a script that iterates over all the menus and entries and adds the iconic class, but that would be tricky. I'll settle for an example that adds the iconic class to #bookmarksShowAll and I'll do the rest. Is no one else missing the icons in our menus? lol. Thank you. |
|
Mozilla seems to have done everything possible to permit iconizing default menuitem or menu appearances (uaing CSS), but there are still other CSS hacks to achieve menu icons. You still have to "correct" menuitems hover color to match the one used by your OS theme. Add code to userChrome.css or my_userChrome.css . #bookmarksShowAll {
-moz-appearance: none !important;
background-image: url("./image/bookmarksMenu.png") !important;
background-repeat: no-repeat !important;
background-position: 6px !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
}
#bookmarksShowAll:hover {
background-color: Highlight !important;
color: HighlightText !important;
} |
|
Good day Aris. I'm not sure why we cannot apply moz-appearance to the menus, and why the appearance that's built-in is also not allowed (i.e. "menuitem" striked out in DOM inspector). The browser is clearly applying an appearance, because your code above does not work if we do not set appearance to NONE. Everyone's got a big screen nowadays, saving 16 vertical pixels by hiding the menu (and making it ugly) is not worth it (unless you are a fan of the Firefox button.) But hey, Chrome does it so we gotta do it too! Funny how they got rid of Eye Candy (a masterpiece if you ask me) and now Google is adding Tab Groups to Chrome! Aping Chrome is not always a sure thing... Lol, you are cheating with that CSS, using a background image! And it works too! ;-) And we can go further and make everything use the same highlight so it looks natural (with some padding bugs to be worked out later): menu, menuitem {
-moz-appearance: none !important;
padding-top: 2px !important;
padding-bottom: 2px !important; }
menu:hover, menuitem:hover {
background-color: Highlight !important;
color: HighlightText !important; }Alright, I can make a JS version and a CSS version. Thanks for your help! Maybe you'll like the icons and use them in your own menus ;-) This will take some time, I gotta work on setting-up other things in the browser first, like Containers and other webextensions. Once I've got it all ready I'll email the Menu Icons Plus guy and see if we can use his icons (it's a single image) for the missing stuff. Best Regards Aris! |
|
If you are interested in more CSS cheats, this might be somthing for you too: #bookmarksShowAll::before {
display: block !important;
content: "" !important;
width: 16px !important;
height: 16px !important;
background-image: url("./image/bookmarksMenu.png") !important;
margin-inline-start: 6px !important;
}
#bookmarksShowAll .menu-text {
margin-inline-start: -22px !important; /* -(item width+margin) */
}In this version you do not have to handle item/text hover colors. |
|
Neat, this works even better ;-) I have no idea how it works, but it does. You seem to be inserting an element, tap tap tap over to w3schools.com -> Indeed you are! Wow, I did not know we could do this! And even if I did, it would not have occurred to me to use it. We can even do it this way: #bookmarksShowAll::before {
display: block !important;
content: url("./image/bookmarksMenu.png") !important;
width: 16px !important;
height: 16px !important;
margin-inline-start: 6px !important; }Wow, this is great! I'm wondering if I should do a JS version at all with this. It looks pretty solid, but lets see what issues I come-up against lol, I'm sure I'll find some menu element that's somehow different than the others, or that I cannot figure out how to address because it has no ID or something... Well, thanks a bunch! |
|
Hi Aris-t2. Is there any CSS to remove expand search engine choice and search settings from about:home searchbar??? |
|
Add this to your @-moz-document url(about:newtab), url(about:home) {
#searchSuggestionTable {
display: none !important;
}
} |
|
I'm sorry if my next question violates your rules and doesn't mean to be discussed here. When Firefox works with pref privacy.resistFingerprinting:true it opens the browser in the window 1000x891. Because of this, youtube displays the video player as in theatrical mode (but this is not): Screenshot
Is there any way to do so it would be displayed as in old youtube layout? Screenshot
|
|
Sorry, you have to ask Mozilla developers that question. |
|
@TerekMoL Strange, my window size is "landscape" too and YouTube does not hide the right-hand side. You can tell Firefox to open in the size you want with the following lines in user.js (and you can also try letterboxing) -> user_pref("privacy.window.maxInnerWidth", 1600); // 4502: Initial window size [FF55+] Width rounds down to 200s and height to 100s https://bugzilla.mozilla.org/1330882
user_pref("privacy.window.maxInnerHeight", 800); // 4502: Initial window size [FF55+] Width rounds down to 200s and height to 100s https://bugzilla.mozilla.org/1330882
user_pref("privacy.resistFingerprinting.letterboxing", true); // 4504: Enable RFP letterboxing [FF67+] https://bugzilla.mozilla.org/1407366 [HIDDEN PREF] |
|
@Aris-t2 Good day. This ::Before/::After trick is absolutely Brilliant! I am trying-out Temporary Containers. The addon adds a menu entry to bookmarks context menus, the label is "Open Bookmark in new temporary container tab." Could it be any longer?! No problem, let's use @Aris-t2's trick to re-Label that: #_c607c8df-14a7-4f28-894f-29e8722976af_-menuitem-_open-bookmark-in-new-temporary-container-tab.menuitem-iconic label.menu-iconic-text { display: none !important; }
#_c607c8df-14a7-4f28-894f-29e8722976af_-menuitem-_open-bookmark-in-new-temporary-container-tab.menuitem-iconic::After {
display: block !important;
content: "Open in Tmp Container" !important;
margin-inline-start: -23px !important;
padding-inline-end: 2px;
}This trick is just brilliant! I tried it with BEFORE but it would not let me select the label, the following didn't work for some reason, but no matter, I got it working with AFTER instead... #_c607c8df-14a7-4f28-894f-29e8722976af_-menuitem-_open-bookmark-in-new-temporary-container-tab.menuitem-iconic label.menu-iconic-text::Before { blabla; }Thanks again! I used to use a Menu-Editor AddOn to re-label stuff, and of course it no longer works, but I can now do it with CSS ;-) I hope I'm not going to run into issues adding icons to the menus like this where ::Before refuses to work unless I target an element with it's ID - I'm bound to find a menu entry that has no ID. I used Copy-Path (above) in DOM Inspector, so the path I tried with BEFORE should've worked. I'm still no CSS expert lol. |
|
To All, There was talk of placing items (icons) in the MenuBar recently I think? Anyway, I usually place the Weather icon at the end of the MenuBar - At the right edge of the Firefox window, with a Flex space before it. This was no longer working, the icon would only move to the middle of the window. That's because there is an invisible flexible "spacer" sitting after the Menu in the MenuBar. Get rid of it and you can place items as you like again: #menubar-items+spacer { display: none !important; }Best Regards, |
|
@Aris-t2 The tab scroll buttons are missing in my profile. Any idea why could this happen and how to restore them? I tried enabling and disabling /* Tab scroll buttons position - [only use one at a time] but still did not make any changes |
|
Post a screenshot. |
|
What i mean is that the < and > buttons are missing Mine Blank profile And yes I have more than enough tabs open for the < and > buttons to appear |
|
Funny how I only pop in around FF releases, coincidence? Anyways, with FF 78.0 they added a new context menu and placed all those "undo multiple tab" options in a sub-menu, anyway to undo this change? I find having to now do two clicks instead of the previous one a rather dumb change by Mozilla, but you know Mozilla. |
|
@rayman89 @ImSpecial |
|
Hi @Aris-t2 ! |
|
Hi there, This does not work: Thank you! |
|
Unfortunately I have no idea why the code for this does not work anymore. The correct CSS is: #placesToolbox,
#placesToolbar {
-moz-appearance: none !important;
background: red !important;
}IDs/classes can be found inside places.xhtml or organizer.css. @Csimbi #BMB_bookmarksPopup :-moz-any(menu, menuitem) {
-moz-appearance: none !important;
padding: 0 0px !important;
margin-top: 2px !important;
margin-bottom: -2px !important;
min-height: unset !important;
height: 12px !important;
color: black !important;
background-color: rgb(235,235,235) !important;
}
#BMB_bookmarksPopup :-moz-any(menu, menuitem):-moz-any(:hover, :active) {
color: HighlightText !important;
background-color: Highlight !important;
} |
|
@Aris-t2 |
|
@Aris-t2 I checked and the file that is causing the missing <> buttons is related with popup_menupopup_with_scrollbars.css and something else. If I disable that code the buttons appear again but I also tested on a vanilla profile and If only enable that file on top of the vanilla config and not change anything else the buttons are there as well. |
|
The code unfortunately doesn't work. Also thank you @Aris-t2 for your response! |
|
Good day Aris. Good news is, I upgraded from v77 to v78 and nothing broke :-) So now I want to do the menu icons, but I ran into a little issue. Menu Icon Plus only has extra icons; it covers tons of stuff, but it does not have the built-in icons. No problem I thought, I'll just rip them from Omni.ja in my old FF52 folder. But they do not appear to /be/ in Omni.ja. I looked at all the png/svg files in there and I've got basically nothing. I cannot even find something like menubar.css or similar, and while browser.xul appears to create all the menus, there's not a trace of an image reference inside. I have no idea where the graphics are. Do you know? Are they in a DLL? I looked at Xul.dll with Resource Hacker but it does not find much. I might have to run FF52 side-by-side and rip the graphics one by one :-( Best Regards, |
|
Because of the idiotic way Mozilla developers share CSS code between different Firefox areas, there is no way to target specific parts of the ui without affecting other parts. .panel-arrowcontent { /* this might also affect other popups */
-moz-appearance: none !important;
background-color: rgb(235,235,235) !important;
}
#BMB_bookmarksPopup :-moz-any(menu, menuitem) {
-moz-appearance: none !important;
padding: 0 0px !important;
margin-top: 2px !important;
margin-bottom: -2px !important;
min-height: unset !important;
height: 12px !important;
color: black !important;
background-color: rgb(235,235,235) !important;
}
#BMB_bookmarksPopup :-moz-any(menu, menuitem):-moz-any(:hover, :active) {
color: HighlightText !important;
background-color: Highlight !important;
}Hiding scroll buttons used inside the popup will also hide the ones used by tabs toolbar, when many tabs are open. #scrollbutton-up,
#scrollbutton-down {
display: none !important;
}
@B00ze64 |
|
@Aris-t2 |
|
I just updated Firefox to v89.0 and disabled all the Proton settings per this post, and that fixes most new issues. The only problem left is the downloads button, which appears to be borked for all custom icon sets. When FF first opens the button appears, but when something is downloaded the button goes invisible (though it can still be clicked), and stays invisible for as long as the window stays open. Before: |
I'm seeing this too since updating to Firefox 89 on Windows 10 and with the Proton settings disabled. It's also the same on the new v3.2.1 of CustomCCS. On the same theme, my initial download icon has changed to that shown by 'jmcken1'. It used to look like this:
And the shield and padlock icons have changed from this:
To this:
Although that's not much of an issue compared to the disappearing download button. |
|
Regarding the replacement of new icons inside about:addons. Right-click the item you want to inspect and look for its id.
e.g. .category[name="extension"] {
background-image: url("file.svg") !important;
}or .category[name="extension"] {
background-image: url("file:///c:/path/to/file/file.svg") !important;
}@Underx01 A new version of NoiaButtons went online today. #urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background {
border-color: transparent !important;
}
#searchbar:focus-within {
box-shadow: unset !important;
border-color: transparent !important;
}@hopalongrock
There are text color options inside this projects files. Maybe using a different color will solve your issue. @Speravir You are of course right, starting a new thread for Fx89 would have been better. ;-) .PanelUI-subView .panel-header + toolbarseparator {
display: none !important;
}@lihatt @derrod / @ zackultimate @jmcken1 / @Old-Knobby |
OK, many thanks for the quick update! Is there currently any way to change the 'shield' icon in the location bar? I can't see anything jumping out at me in 'userChrome.css', but I'm not sure what it's actually called, it's the one that details tracking protection. At FF89 it went from |
|
Hello, Can you tell me what are the lines that I have to modify to get back my old text/tabdimension please? Old one New one I don't know if the screenshot are good enough, so the problem is the text is too far apart because of the highlighting, the height of the tab is not high enough and the buttons take too much height. |
|
Just updated to the latest NoiaButtons as you suggested and the "Download-icon" is visible again, thank you. Can this problem be caused by a setting or something inside about:config that refreshes the navigation bar after like 3-4min that is like a feature that comes with version 89? I also tried resetting my profile, disabling all other options inside "my_userChrome.css", didn't help unfortunately. Here are my update .css contents as .txt files (updated with CustomCSSforFx 3.2.1 & NoiaButtons 2.0.0): Hope you can help with this. Thanks again in advance for your time and your reply. |
|
Or anyone else who might offer a suggestion: For FF89, wondering is there's a css to move just the tabs bar below the bookmarks bar. I'm still using a quite early release meant for FF57, in my 78esr, which, astonishingly, with everything moved over from that profile to the new 89, is working quite well, except for this particular issue. Since I don't want to re-invent the wheel by having to do an entirely new configuration, I've tried using a number of the css from the 3.2.1pre3, as standalone css, added to the userChrome.css. But nothing I've tried works properly. Attaching screenshot of the current 78esr with tabs below bookmarks bar - how I'd like to see the new 89 - and the 89 as it is currently with tabs above navigation bar. macos High Sierra 13.6 Many thanks Note: tried to drop or paste in images, but as usual it won't work for me. Please see screenshots below at postimages.org https://i.postimg.cc/XNDDBxD7/FF78-tabs-below-bookmarks-bar.jpg |
|
Aris, full ack!!!111
Because Chrome browser has these (I guess).
Exactly what I observe now, and the one person in the linked reddit thread. I think I have to keep the extracted omna,ja files of v.88 and search for the pre 89 icons – or have even to research which version has been the last with PNG icons. Strange enough: In the adjustment area where you can change and rearrange buttons and adjust the density (don’t know the English name for this area) there is also an adjusting opportunity for changing the theme. Install a custom theme and take a look into this, and you will see a filled puzzle tile icon, but not one of the internal icons, instead it is downloaded from https://addons.cdn.mozilla.net/static/img/addon-icons/default-64.png?v=20210601. I fear it is just overlooked. Does it work without the version/date string: puzzle tile icon “default-64.png”? Oh, yes. But, oops, there is also a 32px, and a 128px version, as well! |
No, at least, not deliberately, unless options in this custom CSS package are having side effects on the context menu that I wasn't aware of - hence my remark that I assumed they were left behind when Mozilla removed things. I was able to find their names with the Browser Toolbox and do as @glennpc suggested to hide the extra ones. |
|
Unfortunately forgot to post this earlier: Something’s wrong with the bfrsb icons in v.89 with active Fx88: Fx89: |
Solution for me: Found this code elsewhere, adjusted --bookmarkbar-height: -14px; to negative value, which positions tabs correctly in tab bar, just like the 78esr. |
|
This project does not offer a change for the tracking protection icon. #urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box > #tracking-protection-icon {
list-style-image: url(file:///C:/path/to/file/file.svg);
}
#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box[hasException] > #tracking-protection-icon {
list-style-image: url(file:///C:/path/to/file/file.svg);
}
#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon {
list-style-image: url(file:///C:/path/to/file/file.svg);
}
:root[lwt-toolbar-field-brighttext] #urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box:not([hasException])[active] > #tracking-protection-icon {
list-style-image: url(file:///C:/path/to/file/file.svg);
}@Shekyl @Underx01 Setup a Portable Firefox 89 and test again there. @9jkh tabs_below_navigation_toolbar.css @Speravir Not sure, if the corresponding setting was enabled, but for the code work on Fx89+ both settings |
|
Thanks Aris, that would have been my next step, but not that I understand much of it, already found solution which I posted just above.
|
|
If I disable proton on v88, should I expect any issues of things changing/breaking anyway? |
|
Well, I risked it. Pre-emptively disabled all proton settings via user.js. The most notable breakage for me is the toolbars becoming mozilla-ugly grey. I'm using "general_toolbar_colors_aeroglass_windows10_glass8.css", so does this mean |
|
@Aris-t2 commented on 2021. jún. 6. 15:01 CEST:
I see. Well, I didn't update anything (and I think 3.1.9 was the last I downloaded), so that worked out well.
Thanks for the heads-up.
|
|
deleted |
1 similar comment
|
deleted |
|
The addon version numbers are not displayed in Addon Manager.
All aboutaddons/addonlists settings are disabled, except With v3.3.2.1 this works fine. |
|
OK, I see many files are missing from ...\chrome\css\aboutaddons folder, for example:
|
|
Version numbers appear, if I copy from v3.3.5.1 |
|
Please use #368, possible lock "308" without mark as "resolved" / "too heated" / "spam" to collaborators only wirte access. |
|
@hopalongrock @krystian3w |
and others
Make sure you have updated your configuration to the most recent version of this projects files and are using the latest version of the "options" required by your Firefox version >before< reporting problems!
Continued from #3, #41, #88, #109, #133, #163, #189, #211, #241 and #273.
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
Things this project will not target/recreate
Things not possible with CSS
The text was updated successfully, but these errors were encountered: