How to add a vertcal scroll bar to the Bookmarks menu

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

How to add a vertcal scroll bar to the Bookmarks menu

Post by LesF »

Version 70.0.

How can I add a vertical scroll bar to the Bookmarks drop down menu?
User avatar
malliz
Folder@Home
Posts: 43796
Joined: December 7th, 2002, 4:34 am
Location: Australia

Re: How to add a vertcal scroll bar to the Bookmarks menu

Post by malliz »

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"
User avatar
mightyglydd
Posts: 9813
Joined: November 4th, 2006, 7:07 pm
Location: Hollywood Ca.

Re: How to add a vertcal scroll bar to the Bookmarks menu

Post by mightyglydd »

#KeepFightingMichael and Alex.
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: How to add a vertcal scroll bar to the Bookmarks menu

Post by morat »

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: 42
Joined: December 20th, 2012, 5:34 pm

Re: How to add a vertcal scroll bar to the Bookmarks menu

Post by LesF »

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: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: How to add a vertcal scroll bar to the Bookmarks menu

Post by morat »

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: 42
Joined: December 20th, 2012, 5:34 pm

Re: How to add a vertcal scroll bar to the Bookmarks menu

Post by LesF »

That worked, Morat.
Thank you.
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: How to add a vertcal scroll bar to the Bookmarks menu

Post by morat »

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 ... &t=3034448
LesF
Posts: 42
Joined: December 20th, 2012, 5:34 pm

Re: How to add a vertcal scroll bar to the Bookmarks menu

Post by LesF »

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: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: How to add a vertcal scroll bar to the Bookmarks menu

Post by morat »

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.
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Re: How to add a vertcal scroll bar to the Bookmarks menu

Post by dickvl »

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: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: How to add a vertcal scroll bar to the Bookmarks menu

Post by morat »

I'm not good styling shadow root elements.

Selecting shadow root elements in userchrome.css?
http://www.reddit.com/r/FirefoxCSS/comments/cq5i1z

Using custom elements
http://developer.mozilla.org/docs/Web/W ... m_elements
http://developer.mozilla.org/docs/Web/CSS/::part

Implement shadow parts
http://bugzilla.mozilla.org/show_bug.cgi?id=1505489#c17

Shadow parts should work in user origin stylesheets
http://bugzilla.mozilla.org/show_bug.cgi?id=1575507#c2
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Re: How to add a vertcal scroll bar to the Bookmarks menu

Post by dickvl »

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: 42
Joined: December 20th, 2012, 5:34 pm

Re: How to add a vertcal scroll bar to the Bookmarks menu

Post by LesF »

morat, the code you posted works fine for my issue (bookmark menu scroll bar). Thanks again
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: How to add a vertcal scroll bar to the Bookmarks menu

Post by morat »

@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.
Post Reply