search

Aris-t2 / CustomCSSforFx

Custom CSS tweaks for Firefox
GNU General Public License v3.0
1.84k stars 180 forks source link

General discussions, feedback, questions belong here (v5) #133

Closed Aris-t2 closed 5 years ago

Aris-t2 commented 6 years ago

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 and https://github.com/Aris-t2/CustomCSSforFx/issues/109.

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 @namespace references. 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

Achille-Grs commented 6 years ago

@Aris-t2 Hello! Can I ask if it is possible to place RSS feed in top of the menu bar? 51 ? (see pic)

Aris-t2 commented 6 years ago

Move the "Subscribe" button into menubar when in customizing mode.

1

Speravir commented 6 years ago

I am not sure, but it seems there has been something changed for the overflow bar. I use overflow_menu_horizontal_remove_text.css, but have issues for some addons I’ve put there.

To follow: Put less than 14 addon symbols including the problematic ones into the overflow bar (with 14 it’s still visible, but less obvious). Install Containerise and ContextSearch. First check how it works with the symbols when they are set in default position in addonbar. Then move into overflow menu and check again.

And note also that with overflow_menu_remove_text.css no addon is usable anymore!

Aris-t2 commented 6 years ago

@Speravir I think these two "options" did not work properly since the beginning, at least not for buttons with a sub view/menu. 1.9.8 fixes this problem: https://github.com/Aris-t2/CustomCSSforFx/releases

nollinvoyd commented 6 years ago

Hi Aris,

You put this together for me

`/ NUMBERED TABS /

tabbrowser-tabs{

counter-reset: n_tabs 0; } .tabbrowser-tab .tab-content { -moz-padding-start: 0px; } .tabbrowser-tab .tab-content::before { display: -moz-box; -moz-padding-end: 8px; counter-increment: n_tabs; content: counter(n_tabs); font-weight: bold !important; font-size: 16px !important; margin-top: -2px !important; }`

In pre57, the numbered tabs addon extended to display in the All Tabs Helpe dropdown menu well as the default List All Tabs menu, which IMO was a great benefit. Neither occurs in quantum,.

Is there a possibility for this in quantum. Also, how about a scroll bar for the List All Tabs menu, or perhaps you suggest an addon that is better suited for the tasks I'm looking for.

nollinvoyd commented 6 years ago

I've got these really handy buttons created with the custom buttons addon I was hoping you could fix.

Create Shortcut is a 2 way button that will either send a shortcut to the desktop without confrmation, or launches a popup for create a custom shortcut name CREATE SHORTCUT.txt

Firefox toolbars zoom enlarges/shrinks the toolbars, text and icons proportionately Firefox Toolbars Zoom.txt

thanks

blackcrack commented 6 years ago

it's maybe slowly possible for create a Gui to select and deselect maybe such as plugin "ClassicCustomationFFx" maybe can all these css-files compress with a 7z.dll into a 7zip-compressed file, therewith it's also possible to have the double amount of files into a single 7zip/library of the files as enable and disable via gui and this as plugin for ff .. to have the possible for copy/overwrite the css-files by selecting/deselecting of an option (checkbox) just only a idea/suggestion ..

Aris-t2 commented 6 years ago

@nollinvoyd

Edit: added code for Fx60-61.

The tab counter can be extended to alltabs popup:

/* Tab numbers */ 
#tabbrowser-tabs{ 
  counter-reset: n_tabs 0; 
}
.tabbrowser-tab .tab-content {
  -moz-padding-start: 0px; 
} 
.tabbrowser-tab .tab-content::before {
  display: -moz-box; 
  -moz-padding-end: 8px; 
  counter-increment: n_tabs; 
  content: counter(n_tabs); 
  font-weight: bold !important; 
  font-size: 16px !important; 
  margin-top: -2px !important; 
}

/* Tabs numbers in 'all tabs' popup */
#alltabs-popup, /*Fx60-61 */
#allTabsMenu-allTabsViewTabs { /*Fx62+ */
  counter-reset: nn_tabs 0; 
}

.alltabs-item::before, /*Fx60-61 */
.all-tabs-button::before { /*Fx62+ */
  display: -moz-box; 
  -moz-padding-end: 8px; 
  counter-increment: nn_tabs; 
  content: counter(nn_tabs); 
  font-weight: bold !important; 
  font-size: 16px !important; 
  margin-top: -2px !important; 
}

This shorter version should work too:

/* 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: 16px !important; 
  margin-top: -2px !important; 
}

For the other request please read the first post of this discussion: -> Things not possible with CSS

@blackcrack I have no plans to create a program/software to manage this projects features. All files are offered as ".zip" inside "releases" area: https://github.com/Aris-t2/CustomCSSforFx/releases I use "zip" for better cross platform/OS compatibility. Not everyone has 7Zip or Winrar or similar installed by default, but every OS can extract zip files by default.

Speravir commented 6 years ago

@blackcrack Please, read my comment in issue #64.

nollinvoyd commented 6 years ago

Still no numbers on All Tabs Helper

krystian3w commented 6 years ago

https://addons.mozilla.org/en-US/firefox/addon/tabcounter-1/

Aris-t2 commented 6 years ago

@nollinvoyd I never said numbers would appear for that sidebar add-on. The extended code was for the default all tabs popup.

nollinvoyd commented 6 years ago

No numbers on "List all tabs" either.

Aris-t2 commented 6 years ago

You are right, I previously tested on Fx63 and posted the code based on Fx63 without noticing Mozillas changes between Fx61 and Fx62. Now its fixed, use the updated code (above).

nollinvoyd commented 6 years ago

That works. Thank you.

I assume it's not possible to do that for All Tabs Helper or something like it? I ask because the List All Tabs scroll is so painfully slow. Or maybe there's a way to speed it up?

Are we gonna have to revisit extra tweaks things like this for Fx 62?

Aris-t2 commented 6 years ago

I can't offer support for "All Tabs Helper" add-on. Maybe its possible, maybe not. Try to contact the corresponding add-on dev.

Are we gonna have to revisit extra tweaks things like this for Fx 62?

It always was and will be like this. Mozilla changes something and add-on code or custom code has to be adjusted sooner or later. There is no guarantee everything will work forever.

nollinvoyd commented 6 years ago

Decided to check out 62.0b8. I don't know if you want to bother with this because it's beta, but something in this code breaks the List All Tabs drop down menu. Works fine in Fx 61.0.1.

I tried, piece by piece, to isolate what was causing it, but the only thing that works is removing the whole thing.

/* From [TABS BELOW NAVIGATION AND BOOKMARKS TOOLBARS] conflicts with menu bar - 
https://github.com/Aris-t2/CustomCSSforFx/issues/132 */

/* 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;
}

/* HIDE MIN/MAX/CLOSE BUTTONS - breaks tab bar narrowness*/

#titlebar-max,
#titlebar-close,
#titlebar-min,
#titlebar-buttonbox {
  min-width: 1px !important;
  width: 1px !important;
  max-width: 1px !important;
  opacity: 0 !important;
}

/* TAB BAR DECREASE HEIGHT AND CENTER TAB TEXT - ARIS */
/* CLOSE BUTTON ON THE LEFT - RED CLOSE BUTTON - NUMBERED TABS - ARIS */
/* tab height */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: 19px !important;
  /*height: 19px !important;*/ /* this might be required for some OS themes */
}

#TabsToolbar #tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] {
  min-height: 18px !important;
  max-height: 18px !important;
}

#TabsToolbar .tabbrowser-tab {
  height: 19px !important;
  min-height: 19px !important;
  max-height: 19px !important;
}

/* tab label  */
.tab-label {
  -moz-box-flex: 1 !important;
  text-align: center !important;
  font-weight: bold !important;
  font-size: 16px !important;
  margin-top: -5px !important;
  -moz-margin-start: 0px !important;
  -moz-margin-end: 0px !important;
  -moz-padding-start: 0px !important;
  -moz-padding-end: 0px !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: 16px !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; }

/* Firefox userChrome.css - FOR EXITFIREFOXBUTTON_MOVABLE.UC.JS */

toolbarbutton#alltabs-button {
  -moz-binding: url("userChrome.xml#js");
}

#go-quit-application-button {
  list-style-image: url("exit.png") !important;
  -moz-image-region: rect(0px, 16px, 16px, 0px) !important;
}

/* Firefox userChrome.css - FOR OPEN PROFILE DIRECTORY BUTTON */

toolbarbutton#alltabs-button {
  -moz-binding: url("userChrome.xml#js");
}

#launch-profile-directory {
  list-style-image: url("launch.png") !important;
  -moz-image-region: rect(0px, 16px, 16px, 0px) !important;
}

/* 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;
}

/* REMOVE LASTPASS FROM PAGE CONTEXT MENU */

menuitem[label="LastPass"] {
  display: none !important;
}
Aris-t2 commented 6 years ago

If "all tabs button" does not work properly, its obvious some code related to all tabs button causes the problem. In your case it is this code (and its present twice): 

toolbarbutton#alltabs-button {
  -moz-binding: url("userChrome.xml#js");
}

Remove it and all tabs button/popup will work fine again.

Replace the above code with a button id you do not use, for example "character encoding" button, and place the button on a toolbar or this code will not work:

toolbarbutton#characterencoding-button {
  -moz-binding: url("userChrome.xml#js");
}
#main-window:not([customizing="true"]) toolbarbutton#characterencoding-button {
  visibility: collapse;
}
nollinvoyd commented 6 years ago

ok, so I know you don't want to deal with buttons.

But by way of explanation, Morat has been so very kind to create a bunch of custom buttons for me. The one's referred to were the first two.

The code was was at least partially created because those buttons had separate images not included in the button code, exit.png & launch.png.

The 2 buttons in question have since been redone to include base64 for the images, but it did not dawn on me until I received your suggestions that the the references to exit.png & launch.png are no longer necessary. I removed those portions.

But I have limited understanding of what your suggestions have instructed me to do.

I know that originally

toolbarbutton#alltabs-button {
  -moz-binding: url("userChrome.xml#js");
}

Is needed to display the buttons. If I remove the code, the List All Tabs arrow menu works in Fx 62 beta, but all the buttons disappear, and no matter how I manipulate the replacement code you suggested, it doesn't seem to have a noticeable effect in either Firefox version, but, then again, I really don't know what I am doing.

Aris-t2 commented 6 years ago

Look this project mainly deals with CSS and not with creating custom buttons. The code you got or shared appears to be from "Custom Buttons". There are multiple repositories dealing with creating buttons and I would appreciate you would ask there or the person created those buttons for you.

Please reread my previous post regarding all tabs button: https://github.com/Aris-t2/CustomCSSforFx/issues/133#issuecomment-405537436 I would not have suggested an alternative way to bind userChrome.xml to another button, if I had not tested and verified myself, that it is working on Fx 62 beta. Make sure you remove BOTH bindings of #alltabs-button from your code as it appears to by twice in there by mistake. The code I modified for you back then only contained one binding, no idea why you have added it a second time.

You can also try "method 2" from Scrollbars repository to add custom Javascripts to Firefox Quantum. It does not require rebinding any toolbar buttons for custom Javascripts to work.

Pizzapops commented 6 years ago

Compact Sidebar Menu Using a clean profile in Nightly & the latest CCSS4Fx I have been trying to get as more compact SideBar header menu. Default theme, add-on bar on bottom & a few sidebar extensions added. 180720_sidemenu my goal is a horizontal icon menu. (unfinished) goal_sidemenu It would be nice to switch from the pop-up menu to a static menu. desired_sidemenu

/* compact sidebar menu */

/* Hide sepatators */
#widget-overflow-mainView > .panel-subview-body > toolbarseparator, 
.PanelUI-subView menuseparator, 
.PanelUI-subView toolbarseparator, 
.cui-widget-panelview menuseparator, 
.cui-widget-panel toolbarseparator {
    -moz-appearance: none;
    min-height: 0;
    border-top: 0px solid var(--panel-separator-color)!important;
    border-bottom: none;
    margin: 0px 0!important;
    padding: 0;
}

#sidebar {
    background-color: var(--sideBar-backgrnd-col) !important;
    min-width: 280px !important;
    max-width: none !important;
}
#sidebar-header { /* pretending to be a personal bar icon */
    margin-left: 0px !important;
    padding: 0px !important;
    border: none !important;
}

/* Hide search from bookmarks sidebar - optional*/
/* #sidebar-search-container { display: none !important; } */ 

#sidebar-switcher-target { /* recolour TST icon -not working?*/
    --webextension-menuitem-image: var(--tst-icon-loc-16) !important;
    --webextension-menuitem-image-2x: var(--tst-icon-loc-24) !important;
}

#sidebar-switcher-target :not(#sidebar-icon) { display: none; } /* hide sidebar switcher things except icon & keep close X*/
#sidebar-switcher-target
{
    margin-top: 2px !important;
    margin-bottom: -2px >!important;
    margin-left: 6px !important;
    padding: 2px !important;
    border-radius: 2px !important;
}
#sidebar-switcher-target:hover { background-color: var(--button-hover) !important; border-color: var(--button-hover) !important; }
#sidebar-switcher-target.active { background-color: var(--button-active) !important; border-color: var(--button-active) !important; }

/* popup menus */
/* sidebar menu */

#sidebarMenu-popup .panel-arrow { display: none !important; }
#sidebarMenu-popup toolbarbutton[checked] { display: none !important; }
/* #sidebarMenu-popup .toolbarbutton-text {  display: none !important; } */
#sidebarMenu-popup .subviewbutton[label="Close Sidebar"] {display: none !important; }
#sidebar-reverse-position{ display:none !important; }   /* Hide Move Sidebar to Right/Left */

#sidebarMenu-popup .panel-arrowcontent {
  margin-top: 1px !important;
  margin-left: 6px !important;
  background-color: #FFFFFF !important;
  border-color: var(--button-active) !important; }

/* display: grid;  NOT WORKING!*/
/*   grid-template-rows: 20px;/* one row */
/*   grid-template-columns: 33px 33px 33px 33px 33px 33px 33px 33px [col-end]; */
}
krystian3w commented 6 years ago

Please use Markdown code field with select CSS:

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code

```css

```

Becasue your code is broken - one line is italic, many single characters also, and nobody who cute github as normal formatting text.

Aris-t2 commented 6 years ago

@Pizzapops The menu looks like the one the old sidebar add-ons did provide. ;-)

CSS can not open/close popups, but a (Java)script, that catches the close command, could work.

rayman89 commented 6 years ago

is there anything "big" planned for v2? @Aris-t2

Aris-t2 commented 6 years ago

I have no special plans for 2.0 of this project. The counter will just increase.

rayman89 commented 6 years ago

Aww. Sad to hear that but still you do so much so thank you anyways.

BTW is there a way to add to the right click page menu under "this frame" the option to copy the frame url?

Aris-t2 commented 6 years ago

Maybe, if "Someone™" would write an overlay (Java)script for the menu entry, a script to get the url and another script to copy url to clipboard, but why not simply use "Right-click > This Frame > View Frame Info" and copy the url from there?

yurikhan commented 6 years ago

Alternatively, Someone™ could write an extension that registers a context menu command, and when that command is clicked, copies the frame URL to the clipboard. I think all the necessary APIs are there.

krystian3w commented 6 years ago

is there anything "big" planned for v2?

I have no special plans for 2.0 of this project. The counter will just increase.

Version 1.10.x could be released.

John0877 commented 6 years ago

Ive been kinda thinking about something and I figured I would ask how difficult it would be to maybe create a Classic Theme Restorer external app? Like not a Firefox addon but a completely separate app that would have the same UI as the extension but then you choose the options with the radio buttons or checkboxes and then save your userchrome.css file to then drop into your Firefox profile folder.

I dunno if you or anyone else has ever had this approach to this but I think it would be something to consider as it would then be much easier for more people than tediously going through the userchrome.css file manually editing it.

AdamPS commented 6 years ago

Great project thanks. Do you have CSS to "Hide the tab bar and new tab button if just one tab"?

I found the answer here https://gist.github.com/BenoitAverty/af633ee20e27f48f9ba7178451432206 - could be worth adding to the project?

However once I've done that I no longer can see .tab-throbber. Do you have any CSS here that would help with that or any ideas? Maybe something to move the throbber onto the toolbar, like back in the old days? Thanks!

motfis commented 6 years ago

Is it possible to increase the spacing on the menu (right click), to make it easier to use in touch screen devices?

krystian3w commented 6 years ago 
menupopup :-moz-any(menu, menuitem, menucaption) {
  height: 35px !important;
}

maybe you can do a little better.

motfis commented 6 years ago

it works. Thanks!

Aris-t2 commented 6 years ago

@John0877 It is difficult to estimate the amount of work to create such a tool, it really depends on skills, time and the amount of effort "Someone™" wants to invest in a project, that can go sideways with any of Mozillas updates. Keep in mind users would want this tool to run properly on every major OSs (Windows, Linux, macOS) and for all user levels (normal, admins, probably guests...). In the past I answered similar questions with "I'm not going to start such a project", nothing changed since, sorry.

@AdamPS There is no CSS that can handle that case properly. At least hiding/moving "new tab" tab/button is not an option in my opinion. The code also breaks the tab toolbars position for me and hides window caption buttons. Feel free to use it, but it won't be part of this project. In CTR back than I used far more complex Javascript code to achieve "hide tabs toolbar with on visible tab", but this project is about CSS only.

To get a proper solution, the code has to work with/without menubar, with/without tabs below navigation bar mode, in normal/maximized/fullscreen modes, for different tab heights, with/without "new tab" tab/button, with different OS themes etc.... There is no way to achieve all that in CSS. Mozilla even has added a code glitch that permits CSS to use a check like #tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] ~ .tabs-newtab-button to hide "new tab" tab/button properly.

John0877 commented 6 years ago

@Aris-t2 Alright, I understand. I just think that would be a massive convenience if something like that were to exist.

AdamPS commented 6 years ago

There is no CSS that can handle "hide tabs toolbar with one visible tab"

@Aris-t2 OK I see what you mean, thanks for explaining. What I did instead is

  1. Hide the title bar
  2. Grow the visible tab so that I can see the full title there instead:
/* Grow the active tab. */
.tabbrowser-tab[visuallyselected="true"]:not([pinned]) {
  max-width: none !important;
}
Pizzapops commented 6 years ago

2018-08-07_121623 I now have a horizontal icon menu for my sidebar. Header & menu button are visible when mouse is in the top 5px. Minimum 1 row, max 8 icons per row. 

/* compact sidebar horizontal menu */ 
/* u/ohpapizza@reddit,inspired by poisencity's overflow menu 
with crutial help from poorman3333 */

#sidebar-box { margin-top: 1px; }

#sidebar {
    background-color: var(--sideBar-backgrnd-col) !important;
    min-width: 280px !important;
    max-width: none !important;
    position: absolute;
}

#sidebar-header { /* pretending to be a personal icon bar */
    margin-left: 0px !important;
    padding: 0px !important;
    border: none !important;
    font-size: 1.21em !important;
}

/* hover at top to show header - start */
  #sidebar-header:not(:hover) {
    max-height: 5px !important;
    min-height: 5px !important;
    padding: 0 !important;
    background-color: var(--sideBar-backgrnd-col) !important;
    opacity: 0.95 !important;
}
  #sidebar-header:not(:hover) #sidebar-switcher-target {
    /* Dont do this: display: none !important; */
    opacity: 0 !important;
}
/* hover to show header - end */

/* Hide search from bookmarks sidebar - optional */
/* #sidebar-search-container { display: none !important; } */ 
#sidebar-search-container { padding: 6px !important; }

#sidebar-switcher-tabs { display:none !important; } /* Hide Synced Tabs */
#sidebar-switcher-target { /* recolour TST icon -not working?*/
    --webextension-menuitem-image: var(--tst-icon-loc-16) !important;
    --webextension-menuitem-image-2x: var(--tst-icon-loc-24) !important;
}
/* hide sidebar switcher things except icon & keep close X*/
#sidebar-switcher-target :not(#sidebar-icon) { display: none; } 
#sidebar-switcher-target {
    margin-top: 2px !important;
    margin-bottom: 4px >!important;
    margin-left: 6px !important; /* change here to move icon horizontally */
    padding: 4px !important;
    background-color: transparent !important;
    /* buttonize icon next 4 lines - optional*/
    border-radius: 4px !important; 
    background: rgba(151,152,153,.05) linear-gradient(rgba(251,252,253,.95), 
                rgba(246,247,248,.47) 49%, 
                rgba(231,232,233,.45) 51%, rgba(225,226,229,.3)) !important;
    border-color: rgba(0,0,0,.12) rgba(0,0,0,.19) rgba(0,0,0,.38) !important; */
}
#sidebar-switcher-target:hover,
#sidebar-switcher-target.active { border-color: var(--button-active) !important; }

/* popup menus */
/* sidebar menu */

#sidebarMenu-popup .panel-arrow,
#sidebarMenu-popup toolbarbutton[checked],    /* remove checkmark */
#sidebarMenu-popup .toolbarbutton-text,
#sidebarMenu-popup .subviewbutton[shortcut]::after,  /* hide key shortcuts */    
#sidebarMenu-popup .subviewbutton[label="Close Sidebar"],
#sidebar-reverse-position {        /* Hide Move Sidebar to Right/Left */
display:none !important;} 

#sidebarMenu-popup .toolbarbutton-icon{
 margin-right: 0px !important;
 margin-left:  0px !important;
}
#sidebarMenu-popup toolbarbutton{
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: 35px !important;
}

#sidebarMenu-popup .panel-arrowcontent {
 min-height: 32px !important;
 max-height: 64px !important;
 max-width: 284px !important;
 display: inline-block !important;
 margin-top: 5px !important;
 margin-left: 4px !important;
 padding-bottom: 4px !important;
 border-color: var(--button-active) !important;
 display: grid; 
 grid-template-rows: 32px 32px [row-end] !important; /* one/two rows */
 grid-template-columns: 34px 34px 34px 34px 34px 34px 34px 34px [col-end] !important;
} 

/* compact lines in bookmarks & history */
.sidebar-placesTree treechildren::-moz-tree-row {
    min-height: unset !important;
    height: 1.3em !important;
    border-width: 1px !important;
}
.sidebar-placesTree treechildren::-moz-tree-indentation {
    width: 0 !important;
}
.sidebar-placesTree treechildren::-moz-tree-twisty {
    padding-inline-start: 0 !important;
    padding-inline-end: 2px !important;
}
Acid-Crash commented 6 years ago

Hi @Aris-t2 I remember that some time ago there was a discussion regarding searchbar_popup_engines_show_labels (some scrollbar and width issues) Recently I have found a decent example of one-click search menu that works pretty good (no scrollbars and adaptive width) https://www.reddit.com/r/FirefoxCSS/comments/95k7ch/i_fixed_the_oneclick_search_menu/ Maybe you find it interesting...

Aris-t2 commented 6 years ago

@Pizzapops Good job.

@Acid-Crash This code also works good, but I can not test it for many search engines, because I only have the default ones installed. ;-)

Can you point out the issues occurred with searchbar_popup_engines_show_labels.css?

Previously the scrollbars code was required for such amounts of search engines, where the popup went out of screen.

Acid-Crash commented 6 years ago

@Aris-t2 Here is the screenshot. Left side shows option searchbar_popup_engines_show_labels.css Right side - the other version mentioned in the earlier.

Basically, I was a bit sad because of scrollbars in autocomplete section. It looks like they are always there disregarding the number of autocomplete items. Also on the bottom left screen, I caught a bug where the height of autocomplete section is too small when compared to the top left example.

On the right side of the screenshot autocomplete section height adapts to the number of items (without any scrollbars) that are currently there. From an esthetical point of view, this looks more fluent with overall styling. search

P.S. Height of individual SearchEngines list entry is a bit tall though

Aris-t2 commented 6 years ago

I will try to get rid of top areas scrollbar on next update. The option should only add a scrollbar to search engines area anyway.

Achille-Grs commented 6 years ago

@Aris-t2 Can I ask if the "ac_popup_classic_with_two_lines" stopped working or just somewhere is my mistake?

Aris-t2 commented 6 years ago

@Achille-Grs The code requires an update for Firefox 63+ to work again.

Next update will include the new option ac_popup_classic_with_two_lines_fx63.css, because recent changes are not backwards compatible to Firefox 60-62.

Pizzapops commented 6 years ago

Since addon icons do not show up on the icon button, I did a minor mod to my Sidebar Horizontal Menu. The button was turned into a 5px bar that extents across most of the header. When the icon menu is activated, the bar is hidden. 2018-08-09_1112402018-08-09_111500 Only the lines for #sidebar-switcher-target lines need to be changed.

#sidebar-switcher-target {
    max-height: 5px !important;
    min-width: 260px !important;
    margin-top: 0px !important;
    margin-bottom: 8px >!important;
    margin-left: 4px !important;
    padding: 4px 226px 4px 0px!important;
    background-color: transparent !important;
    /* buttonize icon next 4 lines - optional*/
    border-radius: 3px !important; 
    background: rgba(151,152,153,.05) linear-gradient(rgba(251,252,253,.95), 
                rgba(246,247,248,.47) 49%, 
                rgba(231,232,233,.45) 51%, rgba(225,226,229,.3)) !important;
    border-color: rgba(0,0,0,.12) rgba(0,0,0,.19) rgba(0,0,0,.38) !important; */
}
Aris-t2 commented 6 years ago

Works fine here too:

sb

rayman89 commented 6 years ago

@Aris-t2 I just updated to the latest version and when opening a session with 600+ tabs (normal firefox opening/restarting) I notice a considerable slowdown when compared with version 1.8.5.1

It looks like it starts normally then active tab starts to show the icon for loading and after the icon moves 2 times it stops, the icon disappears and the browser gets really slow for like 2 seconds then it continues loading the tab normally.

Aris-t2 commented 6 years ago

Any chance you can find the version between 1.8.5.1 and 2.0.1 causing this for you? Not sure how CSS styles can cause slowdowns, I can not test such huge sessions. Never had that amount of tabs open at the same time.

krystian3w commented 6 years ago

In 62/63 possible hide pop-up "you added bookmark"? What add bookmark, I have this animation and would have it once to enough for me.

rayman89 commented 6 years ago

I tested a bit and noticed that some modifications I made to chrome.css were redundant after the changes you made so I got rid of those redundancies and now the load times are very similar there is still a bit of difference that started after v 1.9.9 (maybe the larger icons have something to do?) either way if my problem is too niche the difference in load time now it's not that big to worry about .