[Sidebars dark appearance] Improve code and fix bookmark items border/outline glitch

[stonecrusher]

Due to a Firefox bug, when hovering over the sidebar items, parts of the hovering border will remain. To prevent this, add

.sidebar-placesTreechildren::-moz-tree-row {
    outline: none !important;
    border: none !important;
}

I was testing a long time (this bug was driving me crazy and I put a more pleasant hovering color) and this is the final result aka my suggestion for the new sidebar_appearance_dark.css:

/*AGENT_SHEET*/

/* Firefox 57+ userChrome.css tweaks ****************************************************/
/* code mostly taken from 'Classic Theme Restorer' & 'Classic Toolbar Buttons' add-ons **/
/* by Aris (aris-addons@gmx.net)*********************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/

@-moz-document
  url("chrome://browser/content/browser.xul"),
  url("chrome://browser/content/bookmarks/bookmarksPanel.xul"),
  url("chrome://browser/content/history/history-panel.xul") {

    /* #D1D1D1 = light grey */
    /* #474749 = dark grey */
    /* #323234 = very dark grey */

    #sidebar,
    #sidebar-header,
    #bookmarksPanel,
    #bookmarks-view,
    #history-panel,
    #historyTree {
      background: #323234 !important;
      color: #D1D1D1 !important;
    }

    .sidebar-placesTreechildren::-moz-tree-cell(hover),
    .sidebar-placesTreechildren::-moz-tree-row(selected),
    .sidebar-placesTreechildren::-moz-tree-cell-text(hover),
    .sidebar-placesTreechildren::-moz-tree-cell-text(selected) {
      background: #474749 !important;
      color: #D1D1D1 !important;
    }

    /* Fix for remaining hovering borders */
    .sidebar-placesTreechildren::-moz-tree-row {
      outline: none !important;
    }

    /* Remove ugly light blue hovering borders */
    .sidebar-placesTreechildren::-moz-tree-row {
          border: none !important;
    }

    /* ******** OPTIONAL ********  */
    /* Hide white splitter bar (also appears on top right of scrollbar) */
/*    #sidebar-splitter {
      opacity: 0 !important;
    }

    /* Hide scrollbar (but you can still scroll) */
/*    scrollbar,
    scrollbar * {
      -moz-appearance: none !important;
      background: none !important;
      margin-left: -9px !important;
    }

    /* Add custom splitter bar between sidebar and content */
/*    #sidebar,
    #sidebar-header {
      border-right: 3px solid #474749 !important;
    }
    /* ****** END OPTIONAL ******  */
}

I personally have enabled all those "options" but I don't think it's a good idea to make them default. If it's against the project rules (and for the sake of having options centralized) a sidebar_appearance_dark_wo_scrollbar.css would also be a possibility.

I would be happy to contribute this as a thanks for your project. I wouldn't be so happy with the new Firefox if there was no CustomCSSforFx.

/edit I've seen you don't use @-moz-document rules. I don't know what is better or why everyone uses them in userChrome.css if it's not necessary. Anyway, I didn't make a pull request to make sure you sanitize that code properly ;-)

[Aris-t2]

Thanks, I will your color adjustment, border/outline fix and two of the optional settings on next update. Scrollbar tweaking is not suggested, because every OS uses different scrollbar width values and using fixed margins on a scrollbar will cause glitches.

I completely ignore the @-moz-document stuff for two reasons.

1. Code in userChrome.css does not affect web content (the main reason almost all styles on userstyles.org used it for years).
2. There are no multiple items with the same names/id within the ui this code could affect.

I only use @-moz-document code restrictions for styles imported by userChontent.css. They also affect web pages, if not restricted.

[Aris-t2]

Code added to 1.3.7 release. https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/generalui/sidebar_appearance_dark.css

[stonecrusher]

Thanks, looks great! Your explanation for @-moz-documents makes sense. I think I'll switch to not using them in userChrome.css, too. Less cluttered.