Using userChrome.css to hide top three Bookmarks folders without hiding top three search results.
All of my bookmarks are in Other Bookmarks. I wanted to use the bottom most folder because I wanted to hide the top folders and move everything in the Bookmarks Sidebar up and to the left. Also, Other Bookmarks is the default location that bookmarks are stored, so that is convenient. Using margin-left:-72px and margin-right:-33px, I moved everything in the Bookmarks Sidebar up and to the left so that it hides the Bookmarks Toolbar, Bookmarks Menu, and Other Bookmarks moz-tree-rows (folder icons and text). I made some other minor adjustments to positions and colors too. The problem is that the margin-top:-72px also affects the results that I get when I search for bookmarks using the search box in the Bookmarks Sidebar. The margin-top:-72px ends up hiding the first three search results.
Here are four screenshots to show the before, after, and the problem:
Screenshot #1 (This shows how the Bookmarks Sidebar looked before I use my CSS):
https://i.imgur.com/Zk7lkyE.png
Screenshot #2 (This shows how the Bookmarks Sidebar looks after I use my CSS. I am 100% happy with this. It is how I want my Bookmarks Sidebar to look.):
https://i.imgur.com/N2413Xq.png
Screenshot #3 (The problem is that the margin-top:-72px of my CSS ends up hiding the first three search results):
https://i.imgur.com/DiXPQWT.png
Screenshot #4 (If I remove the margin-top:-72px of my CSS, I can see all the search results again, but then my Bookmarks Sidebar goes back to looking like Screenshot #1 again, which I don't want):
https://i.imgur.com/lBEbwMh.png
Here is the CSS in my userChrome.css:
/* I have to open up up the Browser Toolbox (CTRL + SHIFT + ALT + I) and edit the margin-top if I want to see the first three search results. The padding-right makes the bookmark text look better so that there is a little padding on the right like there is on the left side. /*
.sidebar-placesTreechildren {margin-top:-72px; padding-right:4px;}
/* I don't want the huge sidebarheader. I never use it. */
sidebarheader {display:none;}
/* By making the search box position:relative and adding a background-color, it makes it so that it hides those three folders and their text that I don't want to see. If I didn't have this code, you could still see the text behind the search box and that looks really bad. The padding also makes things look better by positioning things better and adding symmetrical padding to all of the sides of the search box. */
#sidebar-search-container {position:relative; padding: 10px 6px 0px 6px !important; background-color:white !important;}
/* I want to move all the bookmarks and folders closer to the left, but doing so makes a gap on the right so I had to use margin-right to make it so that the bookmark text covers up entire sidebar panel, from left to right. */
.sidebar-placesTreechildren::-moz-tree-cell {margin-left:-33px; margin-right:-33px;}
/* I just prefer this font-family and font-size for my bookmarks text. */
#bookmarks-view {font-family:consolas; font-size:11px;}
/* These are just the colors that I wanted for the folder images, the bookmarks text, and the arrows (twisty) color. I also wanted the separators to be flush with left side so I used margin-left for that. */
.bookmark-item[container], treechildren::-moz-tree-image(container) {fill:#222 !important;}
.sidebar-placesTreechildren::-moz-tree-cell-text {color:black !important;}
.sidebar-placesTreechildren::-moz-tree-separator {margin-left:-100px;}
.sidebar-placesTreechildren::-moz-tree-twisty {color:#999 !important;}
/* It's been ages since I touched any of this CSS, but this CSS was probably because I didn't like the highlight color of bookmarks and folders when you selected or hovered over them. */
.sidebar-placesTreechildren::-moz-tree-row(selected) {background-color: rgba(128, 128, 128, 0.08) !important;
border-color:white !important; border-style:solid; border-width:2px !important;}
.sidebar-placesTreechildren::-moz-tree-row(hover) {background-color: rgba(128, 128, 128, 0.08) !important;}
My Request:
So maybe someone can give this a try and see if they can find a solution to my problem or just do things better in general. But try not to be a jerk about it, and chances are whatever you think works for you might not work for me. I'm not really worried about perfect code vs sloppy code as long as I am getting the results that I want. I'm just trying to figure out how to make my Bookmarks Sidebar look how I want (as in Screenshot #2) but still be able to see ALL of my search results (as in Screenshot #4 instead of Screenshot #3) and not have the first three search results hidden.
Other Information:
I had an idea that never went anywhere. Basically one element changes from selectedIndex="0" to selectedIndex="1" whenever search results are displayed. I was hoping to use that as a condition for changing the margin-top or margin-bottom of another element. It's been ages since I looked into this, so my memory is almost nonexistent. But I think that the biggest problem was that you can only do "if this then that" if you are dealing with children elements, and I was trying to work with parent elements.
.
.
.
Modified by gaveitatry
Chosen solution
I'm no longer concerned about this. I removed the Bookmarks Sidebar search box altogether, which frees up even more space. So now the Sidebar Header, Sidebar Search Box, Bookmarks Toolbar folder, Bookmarks Menu folder, and Other Bookmarks folder are all gone. I can only see the contents of Other Bookmarks now (my bookmarks and subfolders). If I need to search History or Bookmarks for a particular website or bookmark, I can just use the separate Library window for that.
Read this answer in context 👍 0All Replies (9)
gaveitatry said
I had an idea that never went anywhere. Basically one element changes from selectedIndex="0" to selectedIndex="1" whenever search results are displayed. I was hoping to use that as a condition for changing the margin-top or margin-bottom of another element. It's been ages since I looked into this, so my memory is almost nonexistent. But I think that the biggest problem was that you can only do "if this then that" if you are dealing with children elements, and I was trying to work with parent elements.
Hmm, I see, yes. It's not working as desired. If you key off of the cursor being in the search box, then even when you aren't searching, you'll see the unwanted items:
#search-box[focused="true"] {
margin-bottom: 72px !important;
}
The little buttons are a better indicator of a search in progress, but this grows the search box so that doesn't help:
#search-box[focused="true"] > [selectedIndex="1"] {
margin-bottom: 72px !important;
}
Thanks for looking into this. I didn't test your code, but if I understand what you wrote correctly ,you didn't have any luck either. That's fine. Maybe nothing can be done. I had to ask anyway, because I knew that there were experts lurking around, you probably being one of the utmost top experts (I am familiar with your many years of contributions and work and was actually eagerly waiting for your reply), and maybe you all could have easily done something that I can't. I'll probably take another long break from this and have another look in six months. I think that there is one possibility to get this work. Jquery or Javascript would probably do the job. userChrome.css doesn't support those two, but maybe there is a way to add custom Javascript to Firefox like how in the past there was a userChrome.js (which I never used). This isn't my ideal fix, so I probably won't look into it. Anyway, thank you. I won't close this in case someone has any ideas. I think that this is something worth looking into because I bet a lot of people would prefer a bookmarks sidebar like the one I want.
Modified by gaveitatry
The problem is that both the bookmarks and the results of the query are in the same treechildren container and the side bar page is opened in an iframe.
You may want to restrict the rules to the bookmarks and not for the history and other possible info shown in the sidebar via a #bookmarksPanel prefix (#bookmarksPanel treechildren).
I found this code yesterday. Well something similar to it, but I lost the original code so this is based on memory.
.sidebar-placesTreechildren::-moz-tree-image(container, queryFolder_menu________),
.sidebar-placesTreechildren::-moz-tree-image(container, queryFolder_toolbar_____),
.sidebar-placesTreechildren::-moz-tree-image(container, queryFolder_unfiled_____)
{list-style-image:none !important;}
.sidebar-placesTreechildren::-moz-tree-cell-text(container, queryFolder_menu________),
.sidebar-placesTreechildren::-moz-tree-cell-text(container, queryFolder_toolbar_____),
.sidebar-placesTreechildren::-moz-tree-cell-text(container, queryFolder_unfiled_____)
{font-size:0px;}
It modifies (sort of hides) the folder icon image and the folder text for the three bookmarks folders that I don't want to see - Bookmarks Toolbar, Bookmarks Menu, and Other Bookmarks. If there was only a way to use this to make those three folders 0px in height or display:none. If I could do that, then I would no longer need margin-top or margin-bottom and it would only hide those three folders without hiding the top three search results. I did try changing -moz-tree-image and -moz-tree-cell-text to -moz-tree-row and one or two other things, and I tried using display:none !important and height/min-height/max-height:0px !important, but I didn't have any luck. What about you guys? Maybe you can get it to work?
Modified by gaveitatry
Hi gaveitatry, yesterday I had tried to figure out whether those container names or the newer ones could be used to select a -moz-tree-row but I didn't have any luck with it.
Thanks for trying, jscher2000. There are newer container names? Could you tell me what they are?
gaveitatry said
Thanks for trying, jscher2000. There are newer container names? Could you tell me what they are?
My mistake, the ones starting with queryFolder_ are the newer ones; the older ones started with OrganizerQuery_.
These are search results on DXR:
Chosen Solution
I'm no longer concerned about this. I removed the Bookmarks Sidebar search box altogether, which frees up even more space. So now the Sidebar Header, Sidebar Search Box, Bookmarks Toolbar folder, Bookmarks Menu folder, and Other Bookmarks folder are all gone. I can only see the contents of Other Bookmarks now (my bookmarks and subfolders). If I need to search History or Bookmarks for a particular website or bookmark, I can just use the separate Library window for that.