Style Inspector's Rule View can't scroll vertically

RESOLVED FIXED in Firefox 10

Status

()

Firefox
Developer Tools
P2
major
RESOLVED FIXED
6 years ago
5 years ago

People

(Reporter: Jose Fandos, Assigned: miker)

Tracking

({verified-beta})

unspecified
Firefox 11
verified-beta
Points:
---

Firefox Tracking Flags

(firefox10+ verified)

Details

(Whiteboard: [styleinspector][ruleview][qa+][qa!:10])

Attachments

(2 attachments, 1 obsolete attachment)

(Reporter)

Description

6 years ago
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.
Assignee: nobody → mratcliffe
Status: NEW → ASSIGNED
OS: Mac OS X → All
Priority: -- → P2
Hardware: x86 → All
Summary: Style Inspector can't scroll vertically → Style Inspector's Rule View can't scroll vertically
Whiteboard: [styleinspector][ruleview]
Created attachment 573140 [details] [diff] [review]
Flexbox plus margin

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.
Attachment #573140 - Flags: review?(dao)
As far as I remember, this document has a content stylesheet -- overflow:auto belongs there.

Updated

6 years ago
Severity: critical → major

Updated

6 years ago
Attachment #573140 - Flags: review?(dao) → review-
Created attachment 574295 [details] [diff] [review]
Flexbox plus margin 2

Addressed reviewers comment
Attachment #573140 - Attachment is obsolete: true
Attachment #574295 - Flags: review?(dao)

Updated

6 years ago
Attachment #574295 - Flags: review?(dao) → review+
Whiteboard: [styleinspector][ruleview] → [styleinspector][ruleview][land-in-fx-team]
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.
Attachment #574295 - Flags: approval-mozilla-aurora?
Comment on attachment 574295 [details] [diff] [review]
Flexbox plus margin 2

wfm, Mike!
Attachment #574295 - Flags: review+
https://hg.mozilla.org/integration/fx-team/rev/e2aca39ef669
Whiteboard: [styleinspector][ruleview][land-in-fx-team] → [styleinspector][ruleview][fixed-in-fx-team]

Comment 10

6 years ago
Comment on attachment 574295 [details] [diff] [review]
Flexbox plus margin 2

Please land on m-c before requesting approval. Thanks.
Attachment #574295 - Flags: approval-mozilla-aurora?

Comment 11

6 years ago
Created attachment 574729 [details] [diff] [review]
small followup

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).
Attachment #574729 - Flags: review?(rcampbell)
Attachment #574729 - Flags: review?(rcampbell) → review+

Comment 12

6 years ago
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
Status: ASSIGNED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
Whiteboard: [styleinspector][ruleview][fixed-in-fx-team] → [styleinspector][ruleview]
Target Milestone: --- → Firefox 11

Updated

6 years ago
Attachment #574295 - Flags: approval-mozilla-aurora?

Comment 14

6 years ago
Comment on attachment 574729 [details] [diff] [review]
small followup

Small styling change and a followup, landed on fx-team and m-c.
Attachment #574729 - Flags: approval-mozilla-aurora?
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.
Attachment #574295 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+

Updated

6 years ago
Attachment #574729 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+

Updated

6 years ago
tracking-firefox10: --- → ?
Depends on: 701212
aurora: https://hg.mozilla.org/releases/mozilla-aurora/rev/b1b8ea656961
status-firefox10: --- → fixed
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?
Keywords: verified-beta
Whiteboard: [styleinspector][ruleview] → [styleinspector][ruleview][qa!:10]
Whiteboard: [styleinspector][ruleview][qa!:10] → [styleinspector][ruleview][qa+][qa!:10]
status-firefox10: fixed → verified

Updated

5 years ago
tracking-firefox10: ? → +
You need to log in before you can comment on or make changes to this bug.