Drag'n'Drop of bookmarks into sidebar doesn't work anymore

[Centauri39]

I'm running 2 dualboot systems, one of them Win10 Pro 64bit and Linux Mint 18.1 MATE 64bit and the other one with Win10 Pro 64bit and Bodhi Linux 4.5.0 64bit
and a netbook with Bodhi Linux 4.5.0 32bit.

On both of the Win10 64bit there's FF61.0.2 installed whereas on Mint and on the Bodhi's, it's FF 61.0.1.

All of these FF's include the adjustments to use css an js files, which are:
in the installation folder of FF there are
config.js
and the folder userChromeJS

In
/usr/defaults/pref
there's the
config-prefs.js

In the chrome folder of the FF profile there are:
config.js
config-prefs.js
TabWheelScroll.uc.js
userChrome.css
userChrome.js
userChromeJS.js
userContent.css
xx.uc.js (<- the one for the tool bar below the address bar)

So, as you may see, I added the alternative for AutohideSidebar, TabWheelScroll, HidelastTab (hide tab bar when there's only one tab left), Two- or Multirow Bookmarks tool bar and for an addon bar between address bar and bookmarks tool bar.
Some of the according code is in the userChrome.css.

Almost everything is still working, but one feature.

I like to drag'n'drop bookmarks or tabs into the sidebar, which used to appear on hovering the left edge of the screen.

Now, this sidebar doesn't appear anymore, no matter what OS is currently running.

Does anybody know how to fix this, please?

[the-edmeister]

IMO, look to whatever code that you used for AutohideSidebar as being the probable cause. With the "mouse button down" is probably interfering with the "autohide" feature if the sidebar, or visa versa.

Beyond that advice, you have too many customizations for a support person to make heads or tails out, without providing the specific code that you used.

That said, are you using one Profile for both the Windows and Linux builds?

[Centauri39]

Yes, indeed, this profile is present on each system.
The strange thing is, it used to work fine for many months, without changing anything.
Then suddenly, drag'n'drop to the side bar began to fail.

I also have two bookmark folders (including some sub-folders) within the bookmark tool bar.
But for these 2 folders, drag'n'drop is ok (well, as long as there's no extremely huge number of bookmarks inside).

I will add the codes in use as soon as I can...

EDIT:
Btw., most of the time, I'm running the Linux partitions of these systems.
You may have noticed already, when I mentioned the path.

EDIT2:
Sorry for the delay!
I just uploaded a zip archive containing the relevant files of the FF installation folder and the entire chrome folder of my FF profile.
For this archive to download, have a look at here, please.

[the-edmeister]

I took a quick look at the \chrome\ folder in the Zip archive. Too hard to read with the manner you have those files set up, with the userChrome.css file having so many lines of code. Very hard to pick out bits of related code especially without a description of related groupings of the code. I did see where you noted the temporary disablement of some lines of code due to number of questions about different sized context menus.

As far as the userChrome.js and other .js files, I briefly played with userChrome.js over 10 years ago but never did much with it. Way beyond my skill or knowledge level to move beyond the scripts that I found here - "back in the day"; I never got the hang of what I could do with it.

Here's a small example of a userChrome.css file that I was working on months ago as I was testing various modifications. I find it easier to use separate files of @ import url (" for each type of modification so that I can disable each modification by "commenting out" a specific @ import url file when I run into a problem with the code that I picked up here or over @reddit. And at the end I have put a "straggler" line of code that I haven't decided which .css @ import file to place it in.

Code: Select all

/* userChrome.css for Fx 57 */

@import url("search-bar-names-std.css");
@import url("selected-and-not-tabs.css");
@import url("bookmarks-sidebar.css");
@import url("FrankConjin-rounded-tabs.css");

/* ------------------------------ */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 

/* Tab while loading */
.tabbrowser-tab[busy] {
  color: red !important;}
.tabbrowser-tab[unread] {font-style: italic;}

And this is what my @ import url "(search-bar-names-std.css)" file looks like.

Code: Select all

/* search-bar-names-std.css
  HELLO! This script has optional settings that you can try out if you return to its page: https://userstyles.org/styles/122214/firefox-search-bar-show-engine-names-firefox-43
*/
@-moz-document url(chrome://browser/content/browser.xul) {
  /* Make the one-off buttons span the full width */
  #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext] {
    width: 100% !important;
    height: 24px !important;
    background-image: none !important;
    padding-left: 6px !important;
    box-sizing: content-box !important;
    line-height: 1em !important;
  }

  /* Hide the empties */
  #PopupSearchAutoComplete .searchbar-engine-one-off-item:not([tooltiptext]) {
    display: none !important;
  }
  /* Fix up borders */
  #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext], 
  #PopupSearchAutoComplete .addengine-item {
    border-bottom: 1px solid #ccc !important;
  }
  #PopupSearchAutoComplete .search-setting-button.search-panel-header, 
  #PopupSearchAutoComplete .addengine-item,
  #PopupSearchAutoComplete .search-panel-header.search-panel-current-input {
    border-top: none !important;
    max-height: 26px !important;
    min-height: 16px !important;
    padding-top: 1px !important;
  }
  /* Insert descriptive name for search engine plugin */
  #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext]::after {
    content: attr(tooltiptext);
    margin: 5px 6px 0px !important;
    display: block !important;
  }
  /* Fix icon positioning */
  #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext] > .button-box {
    display: inline-flex !important;
    width: 16px !important;
    max-width: 16px !important;
    border: none !important;
    padding: 0 0 !important;
  }
  #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext] > .button-box > .button-icon {
    display: block !important;
    margin-top: 4px !important;
    margin-left: -1px !important;
  }
  /* Lock in space for 5 search suggestions with scroll bar */
  #PopupSearchAutoComplete .autocomplete-tree.plain.search-panel-tree .tree-bodybox,
  #PopupSearchAutoComplete .autocomplete-tree.plain.search-panel-tree .autocomplete-treebody {
    display: flex !important;
    flex: 1 1 auto !important;
  }
  #PopupSearchAutoComplete .autocomplete-tree.plain.search-panel-tree .autocomplete-treebody {
    max-height: calc(5 * 1.5em) !important;
    min-height: calc(5 * 1.5em) !important;
  }
  #PopupSearchAutoComplete .autocomplete-tree.plain.search-panel-tree .tree-scrollbar[collapsed="true"] {
    visibility: visible !important;
  }
  /* User style options */
    /* One column - standard spacing (built-in above) */
    /* Hiding "Search for ..." */
  #PopupSearchAutoComplete .search-panel-header.search-panel-current-input {
    display: none !important;
  }
    /* Not hiding "Add ..." engine */
    /* Not hiding "Change Search Settings" */
    /* Search bar tooltip text only visible on mouseover */
    /* No color scheme */
}

Sorry that I couldn't help you directly with your problem, but hopefully I helped you a little bit.

[Centauri39]

That*s the problem.
I forgot to separate one section from the other ones.
This isn't my code anyway, I found it step by step in another forum some time around March or April.
Unfortunately, I cannot find it anymore, now.

Maybe we can try something different?
In my question, I mentioned the wanted features.
Could you help me to find the according codeblocks here in this forum, please?

[the-edmeister]

Unless you have set your browsing history to a low level or have deleted your history you should still have browsing history going back to March this year.

I have picked up a little userChrome.css code in this fora and some userChrome.css code at the official Mozilla Firefox forum - SUMO.

Overall IMO, the best place to look for Quantum CSS code. But I have found a lot of code there that just didn't work for me.
https://www.reddit.com/r/FirefoxCSS/

For features that were part of the Legacy versions of Firefox starting with Firefox 29, see this page from the former developer of the Classic Theme Restorer extension.
https://github.com/Aris-t2/CustomCSSforFx

[Centauri39]

By removing some sections of the long userChrome.css, I was able to identify some of these sections.
What you can see in the codeblock is everything below line 1006.

Everything above that seems to be the management of what the sidebar is supposed to look like, background, flexible displaying of menues, etc...

But there must be some section in there, which hides the tab bar, when there's only one tab left.
I wasn't able to find that one, so far.

Code: Select all

/* userChrome.css **********************************************/

/* Sidebar autohide */

/***************************************************************/

#sidebar-box {
position:fixed!important;
top:109px;
bottom:-36px;
width: 0px !important;
overflow-x: hidden !important;
-moz-appearance: none !important;
border: 1px solid transparent !important;
border-left: 0 !important;
opacity: 0 !important;
-moz-transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;}


#sidebar-box:hover {
width: 330px !important;
opacity: 1 !important;
-moz-transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;}

#sidebar-header {
width:100%;
border: 0 !important;}

#sidebar {
width:100%!important;
height:95%;}
}




/* userChrome.css **********************************************/

/* Hide last tab */

/***************************************************************/

#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox {
	min-height: 0 !important;
}

#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] {
	visibility: collapse;
}

/* I don't use tabs so I just hide the new tab button. You should be able to use a similar trick as the rule above with
css siblings selectors if you want to keep it when the tab bar is visible. */
#tabbrowser-tabs .tabs-newtab-button { 
	visibility: collapse !important;
}

#tabbrowser-tabs tab {
	min-height: var(--tab-min-height)
}




/* userChrome.css **********************************************/

/* Multirow Bookmark Toolbar*/

/***************************************************************/

@-moz-document url-prefix(chrome://browser/content/browser.xul) {


/* CSS-Commands to be added below this Comment. */
#TabsToolbar
            {
            margin-top:-2px !important
            }

            .bookmark-item
            {
            margin-top:2px !important
            }

            #personal-bookmarks
            {
              display:block;
            }

            #PersonalToolbar            {
              display:block;
              min-height: 0px!important;     
              max-height: 300px!important ;

            }

            #personal-bookmarks #PlacesToolbar > hbox
            {
              display: -moz-stack !important;
              left:0px;
              right:0px;
              width: 100%;
            }

            #personal-bookmarks #PlacesToolbar #PlacesToolbarItems
            {
              
              overflow-x:visible;
              overflow-y:visible;
            }

            #personal-bookmarks #PlacesToolbar #PlacesToolbarItems > box
            {
              display:block;
            }



            #personal-bookmarks #PlacesToolbar > .bookmark-item
            {
              visibility: visible !important;
            }

            #personal-bookmarks #PlacesToolbar .chevron
            {
            display:none;
            }

            #personal-bookmarks #PlacesToolbar > hbox > hbox
            {
              overflow-x:hidden;
              overflow-y:hidden;
            }

            #personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="true"]
            {
              display:none;
            }

            #personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator
            {
              display:none;
            }


            #personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item
            {
              padding-top: 2px;
              padding-bottom: 2px;
              padding-left: 3px;
              padding-right: 3px;
            }
            #personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="true"]),
            #personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="true"] {
              padding-top: 2px !important;
              padding-bottom: 2px !important;
              -moz-padding-start: 4px;
              -moz-padding-end: 2px;
            }
            #personal-bookmarks #PlacesToolbar toolbarseparator
            {
              -moz-appearance: none !important;
              visibility: visible !important;
              display:inline;
              text-shadow: none !important;

              border-left: 3px solid ThreeDShadow !important;
              border-right: 3px solid ThreeDHighlight !important;
              vertical-align: middle;

            }
            #personal-bookmarks toolbarbutton.bookmark-item[dragover][open]
            {
              -moz-appearance: toolbarbutton;}
            }

EDIT:
When I remove the huge part from line 1 to 1006, the tab bar is still visible even with only one tab left.
Since everything seems to work fine, I wonder what this part was meant for anyway.

Looks like when I replace the autohide sidebar section with the below mentioned code this issue is fixed.
And the menues are looking better, because the space for each row are higher.
The huge part of the file, i.e. line 1 to 1006 is currently removed. So far, no further issues.

But the drag'n'drop issue is still present.

Code: Select all

/* userChrome.css **********************************************/

/* Sidebar autohide */

/***************************************************************/

@namespace url(http: //www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* To right-align the sidebar, replace all occurrences of "left" with "right", and "margin-right" with "margin-left" */

:root {
    --hover-width:    10px;
    --visible-width: 400px;
}

#sidebar-box {
    position:                            relative !important;
    overflow-x:                            hidden !important;
    opacity:                                    0 !important;
    margin-right:   calc(var(--hover-width) * -1) !important;
    left:                      var(--hover-width) !important;
    min-width:                 var(--hover-width) !important;
    max-width:                 var(--hover-width) !important;
}

#sidebar-box:hover {
    margin-right: calc(var(--visible-width) * -1) !important;
    opacity:                                    1 !important;
    left:                    var(--visible-width) !important;
    min-width:               var(--visible-width) !important;
    max-width:               var(--visible-width) !important;
}

#sidebar {
    opacity: 0 !important;
}

#sidebar:hover {
    opacity: 1 !important;
}

/* #sidebar-header is hidden by default, change "none" to "inherit" to restore it. */

#sidebar-header {
    display: none !important;
}

/* #sidebar-splitter styles the divider between the sidebar and the rest of the browser. */

#sidebar-splitter {
}