Firefox Developer 70

About: Bookmarks Menu in Multiple Columns (Firefox 32-69)

Unfortunately your code doesn't work on Firefox Developer 70


  • Hi, what problem are you having in Developer Edition?

    For me, the 3 column menu is too tall and I have to use the 4 column version (link below). But otherwise, the fixes added for Firefox 66 are still working.
  • edited August 2019 [?]

    Oh, now with today's update, it stopped working. Must investigate. Thanks.

    Edit: I'm having a lot of problems with the Browser Toolbox this morning. Maybe tonight.

  • edited August 2019 [?]

    Bookmark and history lists are now built using a Shadow DOM element. I've never worked with Shadow DOM before and it's probably going to take me a while to figure out how best to deal with it.

    There is no (obvious) way to determine the context of the rules (for example, the bookmarks menu) -- unfortunately, the formal solution for that isn't supported in Firefox yet: :host-context(). As a result, the style rules I'm currently testing have side effects in other areas of the UI, such as a multi-column history menu.

    Hopefully I or someone else will come up with something. I have too many bookmarks to go back to single column.

  • I also have too many bookmarks to go back to single column. I hope this issue will be solved soon
  • edited October 2019 [?]

    Well, this is very frustrating. The best I can do is to have large empty areas on the menus. The height can be corrected by specifying the number of columns, but since there isn't a convenient way to set the number of columns differently for folders, some items get cut off.

    /* Multi-Column Bookmarks for Firefox 70-71 -- menu heights broken */
    :root {
      --bmkcolumncount: 4;
      --bmkcolumnwidth: 320px;
      --foldercolumncount: 2;
    /* Bookmarks menu/toolbar -- also modifies History menu */
    hbox[part="innerbox"] > .popup-internal-box > .arrowscrollbox-scrollbox, 
    /* optional Bookmarks Menu toolbar button */
    .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .arrowscrollbox-scrollbox,
    /* Firefox 71 */
    .scrollbutton-up.menupopup-scrollbutton + scrollbox, 
    .scrollbutton-up.menupopup-scrollbutton + spacer + scrollbox {
      display: block !important;
    /*  column-count: var(--bmkcolumncount); */
      column-width: var(--bmkcolumnwidth);
      column-rule: 1px solid #ccc;
      padding-top: 4px;
      padding-bottom: 4px;
    /* Overall minimum width: accommodate full column count */
    #bookmarksMenu menupopup, 
    .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .arrowscrollbox-scrollbox {
      min-width: calc(var(--bmkcolumncount) * (var(--bmkcolumnwidth) + 13px)) !important;
    /* Subfolder minimum width: accommodate folder column count */
    #bookmarksMenuPopup .bookmark-item[container="true"] menupopup[placespopup="true"], 
    #BMB_bookmarksPopup menupopup[placespopup="true"],
    #PlacesToolbarItems .bookmark-item[container="true"] menupopup[placespopup="true"] {
      min-width: calc(var(--foldercolumncount) * (var(--bmkcolumnwidth) + 13px)) !important;
    /*  column-count: var(--foldercolumncount); */
    /* Force item widths so each has its own line */
    #bookmarksMenuPopup menu, #bookmarksMenuPopup menuitem, #bookmarksMenuPopup menuseparator, 
    #PlacesToolbarItems .bookmark-item > menupopup[placespopup="true"] menu, 
    #PlacesToolbarItems .bookmark-item > menupopup[placespopup="true"] menuitem, 
    #PlacesToolbarItems .bookmark-item > menupopup[placespopup="true"] menuseparator,
    #PlacesChevronPopup .bookmark-item,
    #PlacesChevronPopup .bookmark-item > menupopup[placespopup="true"] menu, 
    #PlacesChevronPopup .bookmark-item > menupopup[placespopup="true"] menuitem, 
    #PlacesToolbarItems .bookmark-item > menupopup[placespopup="true"] menuseparator,
    #BMB_bookmarksPopup menu, #BMB_bookmarksPopup menuitem, #BMB_bookmarksPopup menuseparator {
      width: var(--bmkcolumnwidth) !important;
    /* Clean up item and separator spacing */
    #BMB_bookmarksPopup menu, #BMB_bookmarksPopup menuitem, #BMB_bookmarksPopup menuseparator {
      padding: 0 4px 0 12px !important;
      margin: 0 !important;
    #PlacesToolbarItems .bookmark-item > menupopup[placespopup="true"] menuseparator {
      margin: 0 !important;
      padding: 0 !important;
    .subviewbutton.panel-subview-footer {
      min-height: 22px !important;
      border-top: none !important;
    /* Pack more in vertically */
    #BMB_bookmarksPopup menu, #BMB_bookmarksPopup menuitem {
      min-height: 1.5em !important;
    /* Remove scrolling triangles from classic menu */
    #bookmarksMenuPopup .autorepeatbutton-up, #bookmarksMenuPopup .arrowscrollbox-overflow-start-indicator, 
    #bookmarksMenuPopup .arrowscrollbox-overflow-end-indicator, #bookmarksMenuPopup .autorepeatbutton-down {
      display: none !important;
  • Thanks,
    now it is much better: I have the columns
  • Note: I had to add a line now that Firefox 70 is final. Still lots of blank space on the menus.
  • doesn't work in firefox 71
  • edited October 2019 [?]
    doesn't work in firefox 71

    I pasted this into the earlier code for Firefox 70:

    /* Firefox 71 */
    .scrollbutton-up.menupopup-scrollbutton + scrollbox, 
    .scrollbutton-up.menupopup-scrollbutton + spacer + scrollbox 

    Then it is on par with how bad Firefox 70 looks. ;-)

  • Jefferson said:

    I pasted this into the earlier code for Firefox 70:

    It's not pretty but it works

  • thanks for the update its not pretty but it's better than going back to default they really need to implement this as an option by default in the browser I can't live without it!
  • edited October 2019 [?]
    I did some experimenting and got rid of all the excess blank space. But it doesn't exclusively add all new bookmarks to the right-most column and push the older bookmarks to the leftwards column instead it alternates between both working its way down. Also it seems to have added more columns to the subfolders. Better than nothing waiting on the proper solution from you!

    /* display: block !important; changed this from block to table */ display: table !important;

  • It stopped working in 76
  • Sorry, I'm not working on this at the moment. I think the last code was over here on Reddit:
Sign In or Register to comment.