1. On this page, right click any element and choose "Inspect Element". 2. Select "Style" on the bottom right to get the CSS sidebar. 3. Try scrolling vertically. It doesn't. If the content doesn't take more space than available vertically, try resizing the browser window to make it so, and try to scroll then.

This is bad ... there is no vertical scrollbar in the Rule View. I will take a look.

Should be a very easy review because we have only changed a div to a hbox, set flex to 1 and given it overflow. I have also added 5px padding on the sides of the rules to make the overall view look better.

As far as I remember, this document has a content stylesheet -- overflow:auto belongs there.

Addressed reviewers comment

Comment on attachment 574295 [details] [diff] [review] Flexbox plus margin 2 - this.element = this.doc.createElementNS(HTML_NS, "div"); + this.element = this.doc.createElementNS(XUL_NS, "vbox"); this.element.setAttribute("tabindex", "0"); this.element.classList.add("ruleview"); + this.element.flex = 1; why is this needed?

Because the style view contents are inside a xul:window. Using height: 100% on a div will not work because there is no reference value (xul uses flex). In fact, height: 1% will still be 100% of the body of the document so there would still not be a scrollbar. We could also have kept the element as a div and added: display: -moz-box; -moz-box-orient: vertical; -moz-box-flex: 1; But that requires slightly more markup and seems pointless when there is a xul element designed to do exactly the same job.

Comment on attachment 574295 [details] [diff] [review] Flexbox plus margin 2 would like to get this into aurora as well as it is pretty broken without it.

Comment on attachment 574295 [details] [diff] [review] Flexbox plus margin 2 wfm, Mike!

Comment on attachment 574295 [details] [diff] [review] Flexbox plus margin 2 Please land on m-c before requesting approval. Thanks.

This broke the relative positioning we use for measuring text. Followup moves the relative positioning down to a rule element (we just need something to position against absolutely, the thing we position isn't visible).

Followup landed https://hg.mozilla.org/integration/fx-team/rev/3831a1444526

https://hg.mozilla.org/mozilla-central/rev/e2aca39ef669 https://hg.mozilla.org/mozilla-central/rev/3831a1444526

Comment on attachment 574729 [details] [diff] [review] small followup Small styling change and a followup, landed on fx-team and m-c.

Comment on attachment 574295 [details] [diff] [review] Flexbox plus margin 2 [Triage Comment] This fix is related to a major new upcoming feature, so we'll it. Please land on Aurora as soon as possible.

aurora: https://hg.mozilla.org/releases/mozilla-aurora/rev/b1b8ea656961

The scroll seems to work fine now. The bug is verified fixed on Firefox 10 beta1: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:10.0) Gecko/20100101 Firefox/10.0 Mozilla/5.0 (X11; Linux x86_64; rv:10.0) Gecko/20100101 Firefox/10.0 Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:10.0) Gecko/20100101 Firefox/10.0 But I noticed one thing. Go to www.yahoo.com and click to Inspect Element on the right empty side of the page. A black screen is seen for a very short time. What do you think?