What would be the right approach to hide scrollbars for one document?

[Paul Rouget]

For the Firefox Developer Tools, we need to be able to hide the scrollbars of
a document (in the "Responsive Design Tool").

I thought that loading an stylesheet that hide the scrollbars via the new `loadSheet` method might help.
https://hg.mozilla.org/mozilla-central/diff/4d529ec2c6ea/dom/interfaces/base/nsIDOMWindowUtils.idl#l1.34

I tried this:

```
let win = gBrowser.contentWindow;
let gIOService = Components.classes["@mozilla.org/network/io-service;1"].getService(Components.interfaces.nsIIOService);
let windowUtils = win.QueryInterface(Components.interfaces.nsIInterfaceRequestor).getInterface(Components.interfaces.nsIDOMWindowUtils);
let uri = gIOService.newURI('data:text/css,@namespace url("http://www.w3.org/1999/xhtml");@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");html xul|scrollbar {display:none}', null, null);
windowUtils.loadSheet(uri, windowUtils.AGENT_SHEET);
```

But it doesn't appear to work.

Any idea?

-- Paul

[Neil]

Paul Rouget wrote:

>For the Firefox Developer Tools, we need to be able to hide the scrollbars of a document (in the "Responsive Design Tool").
>
>

Scrollbars are native anonymous content so most stylesheets just don't
see them (the obvious exception is of course
chrome://global/skin/scrollbars.css which is effectively attached
explicitly to them).

I believe that the easiest way to turn them off is to style the
containing <browser> element with overflow: hidden.

--
Warning: May contain traces of nuts.

[Paul Rouget]

I also want to hide any scrollbars in the document. This will only work for the
surrounding scrollbars.

Dynamically updating ua.css via DOMUtils.parseStyleSheet works, but then all the
documents in Firefox are affected.

As per bug 737003, I thought using loadSheet would do the same thing, but for
only one document.

-- Paul

[Boris Zbarsky]

On 9/25/12 7:54 AM, Paul Rouget wrote:
> let win = gBrowser.contentWindow;
> let gIOService = Components.classes["@mozilla.org/network/io-service;1"].getService(Components.interfaces.nsIIOService);
> let windowUtils = win.QueryInterface(Components.interfaces.nsIInterfaceRequestor).getInterface(Components.interfaces.nsIDOMWindowUtils);
> let uri = gIOService.newURI('data:text/css,@namespace url("http://www.w3.org/1999/xhtml");@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");html xul|scrollbar {display:none}', null, null);
> windowUtils.loadSheet(uri, windowUtils.AGENT_SHEET);
>
> But it doesn't appear to work.
>
> Any idea?

This should work for non-root scrollbars.

The problem with the root scrollbars is that they're outside the root
element's primary frame. When you add a stylesheet, we post a restyle
event on the root element. When this is processed we restyle that
element and all its descendants. But as I said, the scrollbars are
actually _siblings_ of the root element, so don't get restyled.

We could try to change this on the Gecko side, but it might be simpler
(though making the operation slightly slower) for you to just force a
root frame reconstruct. Either remove and reinsert the documentElement
or set the relevant <browser> to display:none, flush, and then set it
back to its normal display value....

-Boris

[Paul Rouget]

Thank you. It works: http://pastebin.mozilla.org/1842209

-- Paul