MozillaZine

How to add a vertcal scroll bar to the Bookmarks menu

User Help for Mozilla Firefox
LesF
 
Posts: 38
Joined: December 20th, 2012, 5:34 pm

Post Posted October 29th, 2019, 3:44 pm

Version 70.0.

How can I add a vertical scroll bar to the Bookmarks drop down menu?

malliz
Folder@Home

User avatar
 
Posts: 43965
Joined: December 7th, 2002, 4:34 am
Location: Australia

Post Posted October 29th, 2019, 3:49 pm

This a Firefox question?
What sort of man would put a known criminal in charge of a major branch of government? Apart from, say, the average voter.
"Terry Pratchett"

mightyglydd

User avatar
 
Posts: 9736
Joined: November 4th, 2006, 7:07 pm
Location: Hollywood Ca.

Post Posted October 29th, 2019, 4:27 pm

#KeepFightingMichael

morat
 
Posts: 3690
Joined: February 3rd, 2009, 6:29 pm

Post Posted October 29th, 2019, 4:43 pm

Firefox uses an arrowscrollbox element in the Bookmarks drop down menu.

You can imported the following bookmarks.html file as a test.

Code: Select all
<!DOCTYPE NETSCAPE-Bookmark-file-1>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<TITLE>Bookmarks</TITLE>
<H1>Bookmarks Menu</H1>
<DL><p>
  <DT><H3>Alpha</H3>
  <DL><p>
    <DT><H3>Beta</H3>
    <DL><p>
      <DT><A HREF="http://en.wikipedia.org/">Wikipedia</A>
    </DL><p>
    <DT><A HREF="http://en.wikipedia.org/wiki/1">1</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/2">2</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/3">3</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/4">4</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/5">5</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/6">6</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/7">7</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/8">8</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/9">9</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/10">10</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/11">11</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/12">12</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/13">13</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/14">14</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/15">15</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/16">16</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/17">17</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/18">18</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/19">19</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/20">20</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/21">21</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/22">22</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/23">23</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/24">24</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/25">25</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/26">26</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/27">27</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/28">28</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/29">29</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/30">30</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/31">31</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/32">32</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/33">33</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/34">34</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/35">35</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/36">36</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/37">37</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/38">38</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/39">39</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/40">40</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/41">41</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/42">42</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/43">43</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/44">44</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/45">45</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/46">46</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/47">47</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/48">48</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/49">49</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/50">50</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/51">51</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/52">52</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/53">53</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/54">54</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/55">55</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/56">56</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/57">57</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/58">58</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/59">59</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/60">60</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/61">61</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/62">62</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/63">63</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/64">64</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/65">65</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/66">66</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/67">67</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/68">68</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/69">69</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/70">70</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/71">71</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/72">72</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/73">73</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/74">74</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/75">75</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/76">76</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/77">77</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/78">78</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/79">79</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/80">80</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/81">81</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/82">82</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/83">83</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/84">84</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/85">85</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/86">86</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/87">87</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/88">88</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/89">89</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/90">90</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/91">91</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/92">92</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/93">93</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/94">94</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/95">95</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/96">96</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/97">97</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/98">98</A>
    <DT><A HREF="http://en.wikipedia.org/wiki/99">99</A>
  </DL><p>
</DL>

I doubt you can change the scroll type with a css tweak.

LesF
 
Posts: 38
Joined: December 20th, 2012, 5:34 pm

Post Posted October 30th, 2019, 12:32 pm

The arrowscrollbox is very slow for long drop down menus. What is needed is a slider bar.

As I recall, I was able to do this in Pale Moon by adding some code to the userChrome.css file, but I don't know how to do this in Firefox.

morat
 
Posts: 3690
Joined: February 3rd, 2009, 6:29 pm

Post Posted October 30th, 2019, 1:16 pm

Try this:

Code: Select all
/* Firefox userChrome.css */

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

arrowscrollbox > toolbarbutton {
  display: none !important;
}
arrowscrollbox > scrollbox {
  overflow: auto !important;
}

http://kb.mozillazine.org/UserChrome.css

LesF
 
Posts: 38
Joined: December 20th, 2012, 5:34 pm

Post Posted October 30th, 2019, 9:55 pm

That worked, Morat.
Thank you.

morat
 
Posts: 3690
Joined: February 3rd, 2009, 6:29 pm

Post Posted November 3rd, 2019, 7:48 am

The style breaks the "Open in new tab" button.

Fix:

Code: Select all
arrowscrollbox.popup-internal-box > toolbarbutton {
  display: none !important;
}
arrowscrollbox.popup-internal-box > scrollbox {
  overflow: auto !important;
}

or

Code: Select all
hbox > arrowscrollbox > toolbarbutton {
  display: none !important;
}
hbox > arrowscrollbox > scrollbox {
  overflow: auto !important;
}

How do we get DOM info for userChrome in 57+
http://forums.mozillazine.org/viewtopic.php?f=23&t=3034448

LesF
 
Posts: 38
Joined: December 20th, 2012, 5:34 pm

Post Posted December 6th, 2019, 12:17 pm

morat, I have some additional info:

I just installed the latest version of Firefox 32-bit for Windows 7 (version 71.0) and the bookmark menu scroll bar no longer appears. The userChrome.css code that worked in the previous version (per your post dated October 30) remains unchanged, but does not work in this new version.

Any ideas why this happened?

Thanks.

morat
 
Posts: 3690
Joined: February 3rd, 2009, 6:29 pm

Post Posted December 6th, 2019, 1:34 pm

Try this:

Code: Select all
/* Firefox userChrome.css */

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

toolbarbutton[part="scrollbutton-up"],
toolbarbutton[part="scrollbutton-down"] {
  display: none !important;
}
scrollbox[part="scrollbox"] {
  overflow: auto !important;
}

I couldn't get any selectors working with the arrowscrollbox element.

dickvl

User avatar
 
Posts: 53052
Joined: July 18th, 2005, 3:25 am

Post Posted December 6th, 2019, 1:55 pm

Note that that code will probably also affect the Tab bar, so you may want to test this and make the selector more precise.

morat
 
Posts: 3690
Joined: February 3rd, 2009, 6:29 pm

Post Posted December 6th, 2019, 2:52 pm


dickvl

User avatar
 
Posts: 53052
Joined: July 18th, 2005, 3:25 am

Post Posted December 6th, 2019, 6:03 pm

This appears to be about Shadow DOM that doesn't allow selectors that cross a Shadow DOM boundary.

Best is to only use this one rule and not to hide the scroll buttons as there is no way to make this not work for the Tab bar scroll buttons.
https://developer.mozilla.org/en-US/doc ... shadow_DOM

I think that overflow-y is sufficient.

Code: Select all
/* SCROLLBOX - scroll bar */
scrollbox[part="scrollbox"] { overflow-y: auto !important; }

LesF
 
Posts: 38
Joined: December 20th, 2012, 5:34 pm

Post Posted December 6th, 2019, 8:31 pm

morat, the code you posted works fine for my issue (bookmark menu scroll bar). Thanks again

morat
 
Posts: 3690
Joined: February 3rd, 2009, 6:29 pm

Post Posted December 6th, 2019, 9:24 pm

@LesF

As a test, try opening many many tabs so the tab bar is overflowing.

My code hides the tab bar scroll arrow buttons and creates a horizontal scrollbar over the tabs.

I think dickvl's code is a better solution.

Return to Firefox Support


Who is online

Users browsing this forum: Bing [Bot] and 5 guests