Closed Bug 920141 Opened 11 years ago Closed 10 years ago

[markup view] Show ::before and ::after pseudo elements in the tree

Categories

(DevTools :: Inspector, defect)

Product:
DevTools
Component:
Inspector
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(relnote-firefox 35+)

Status:
RESOLVED FIXED
Milestone:
Firefox 35
Tracking Flags:
Tracking Status
relnote-firefox --- 35+

People

(Reporter: fitzgen, Assigned: bgrins)

References

(Blocks 4 open bugs)

Details

(Keywords: dev-doc-complete, Whiteboard: [status:landedon])

User Story

As a developer I would like to see ::before and ::after pseudo elements within the markup view.  I should be able to interact with them just like other elements wherever possible.

* I should be able to hover them in the markup view and see them highlighted on the page
* I should be able to interact with them in the style inspector tabs (rule view, computed view, box model, and font inspector)

Attachments

(2 files, 6 obsolete files)

Screen Shot 2013-09-25 at 1.09.22 PM.png
1.18 MB, image/png
Details
devtools-anon-support.patch
150.45 KB, patch
bgrins
: review+
Details | Diff | Splinter Review
So we show them in the side bar when you select the element they are attached to, but it would be awesome if they were also in the tree view.
How would that look? We'd need someway to split out the pseudo-element's content from the rest of the tagged content. Maybe wrap them in a <:pseudo>content</:pseudo> fake tag? Not sure I like that is it's showing people something that doesn't have actual markup for.
Here is what it looks like in Chrome Canary.
I think we could just show "::before" in a different color, maybe a grey. We could show ::before, ::first-letter, and ::first-line before any children, and ::after after any.
See Also: → 920142
Blocks: 958216
As pointed out in Bug 958216, this is probably the best way of handling Computed Styles / Fonts / Box Model information about pseudo elements. After this, we could probably also move the UI for pseudo elements in the rule view to the bottom of the rules (instead of the top).
Blocks: 950090
Blocks: 961032
OS: Mac OS X → All
Hardware: x86 → All
Summary: Show :before and :after psuedo elements in the tree view → [markup view] Show :before and :after pseudo elements in the tree
I think once a deep tree walker is used from bug 777674 this should be generally supported in the markup view. Not sure how much more work it will be to support the style inspector panels.
Depends on: 777674
I didn't expect the deep tree walker to support pseudo-elements, am I missing something?
(In reply to Dave Camp (:dcamp) from comment #8) > I didn't expect the deep tree walker to support pseudo-elements, am I > missing something? I'm not 100% sure about it, but DOM Inspector shows :before and :after in the tree and I couldn't find anything in its code that deals with them specifically. So I'm assuming the deeptreewalker is listing them: https://hg.mozilla.org/dom-inspector/file/444b590ba011/resources/content/viewers/dom/dom.js#l1397.
bgrins confirmed on irc that the patches in bug 777674 add pseudo-elements to the markup view.
Attached patch pseudo-WIP0.patch (obsolete) — — Splinter Review
Very WIP patch that shows pseudo elements differently in the tree. Needs the following patches from Bug 777674 applied: https://bug777674.bugzilla.mozilla.org/attachment.cgi?id=8392122 https://bug777674.bugzilla.mozilla.org/attachment.cgi?id=8392124 https://bug777674.bugzilla.mozilla.org/attachment.cgi?id=8407759 Things that still need to work: * Box model highlighter when hovering * Style Inspector (CSS Rule view, Computed Styles, Fonts, Box Model) * Deal with styles being removed dynamically and making sure the nodes get removed from markup tree.
Have a test page for working with pseudo elements here: http://fiddle.jshell.net/bgrins/PRQ85/show/
Attached patch pseudo-WIP1.patch (obsolete) — — Splinter Review
Box model highlighter is now working Still todo: * Markup view: need to disable functionality things that doesn't make sense (Delete Node, edit html, etc). * Rule view / computed styles: fixed errors when selecting node, but still need to actually fetch correct styles * Font inspector: Fix "InvalidNodeTypeError: The supplied node is incorrect or has an incorrect ancestor for this operation.:" * Box model tab: actually seems OK from frontend, spewing this in console though: "ASSERTION: we should be in a pseudo-element that is expected to contain elements (:after): 'nsCSSPseudoElements::PseudoElementContainsElements(pseudo)', file fx-team/layout/style/nsComputedDOMStyle.cpp, line 675"
Attachment #8420182 - Attachment is obsolete: true
Attached patch pseudo-WIP2.patch (obsolete) — — Splinter Review
Adds support for rule view
Attachment #8420236 - Attachment is obsolete: true
Attached patch pseudo-WIP3.patch (obsolete) — — Splinter Review
adds support for Computed Styles and Font Inspector. Computed styles properly reports styles, but still does something weird where it doesn't seem to show the source of the pseudo element rule when you expand it. Most likely something in css-logic.js or computedview.js is filtering it out.
Attachment #8420321 - Attachment is obsolete: true
Attached patch pseudo-WIP4.patch (obsolete) — — Splinter Review
Adds basic support for displaying xul anonymous content and shadow dom in markup view
Attachment #8420362 - Attachment is obsolete: true
Assignee: nobody → bgrinstead
Status: NEW → ASSIGNED
Blocks: 1037437
Whiteboard: [status:inflight]
Blocks: 1036324
Blocks: 945450
Blocks: 892935
Blocks: 1053898
Blocks: 1061462
Attached patch devtools-anon-support.patch (obsolete) — — Splinter Review
Rebased and carrying over r+ from pbrosset in Bug 777674 Comment 89. New try push: https://tbpl.mozilla.org/?tree=Try&rev=0a0f5c50064a
Attachment #8496828 - Flags: review+
Attachment #8421421 - Attachment is obsolete: true
Fixed tests for e10s: https://tbpl.mozilla.org/?tree=Try&rev=fc207b79ab86
Attachment #8496828 - Attachment is obsolete: true
Attachment #8496920 - Flags: review+
Keywords: checkin-needed
https://hg.mozilla.org/integration/fx-team/rev/94ff5ef6ef34
Keywords: checkin-needed
Whiteboard: [status:inflight] → [status:inflight][fixed-in-fx-team]
https://hg.mozilla.org/mozilla-central/rev/94ff5ef6ef34
Status: ASSIGNED → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Whiteboard: [status:inflight][fixed-in-fx-team] → [status:inflight]
Target Milestone: --- → Firefox 35
User Story: (updated)
Whiteboard: [status:inflight] → [status:landedon]
Summary: [markup view] Show :before and :after pseudo elements in the tree → [markup view] Show ::before and ::after pseudo elements in the tree
Will, this bug (along with Bug 777674) has added support for ::before/::after, XBL anonymous content, and shadow DOM content. Most relevant to web authors right now is ::before and ::after inspection. You can see it in use with the tools at a page like this: https://bgrins.github.io/devtools-demos/inspector/pseudo.html or https://adobe.github.io/css-pseudo-elements/#demos.
Flags: needinfo?(wbamberg)
Keywords: dev-doc-needed
Thanks bgrins, I'll make sure this is covered in the docs for Firefox 35.
Flags: needinfo?(wbamberg)
Blocks: 1076912
Release Note Request (optional, but appreciated) [Why is this notable]: Very demanded feature in devtools. [Suggested wording]: Developer tools : Support for inspecting pseudo elements and shadow Dom. [Links (documentation, blog post, etc)]: Soon to come
relnote-firefox: --- → ?
(In reply to Tim Nguyen [:ntim] from comment #23) > Release Note Request (optional, but appreciated) > [Why is this notable]: Very demanded feature in devtools. > [Suggested wording]: Developer tools : Support for inspecting pseudo > elements and shadow Dom. > [Links (documentation, blog post, etc)]: Soon to come Small correction in the Suggested wording : Support for inspecting ::before and ::after pseudo elements and shadow DOM.
Blocks: 1077094
Added to the release notes with "Support for inspecting ::before and ::after pseudo elements and shadow DOM" as wording
relnote-firefox: ? → 35+
(In reply to Sylvestre Ledru [:sylvestre] from comment #25) > Added to the release notes with "Support for inspecting ::before and ::after > pseudo elements and shadow DOM" as wording I don't think that we will want to advertise the Shadow DOM inspection yet until Bug 1053898 is finished. Pseudo element inspection is most interesting to web authors, and XBL content inspection is interesting for people working with XUL.
OK. I disabled it. Please resubmit when ready!
relnote-firefox: 35+ → ?
(In reply to Sylvestre Ledru [:sylvestre] from comment #27) > OK. I disabled it. Please resubmit when ready! Thanks. Just to make sure - the ::before/::after is still in the release notes, correct? I'd like to make sure that we include that (and XBL inspection depending on the audience) is still included.
(In reply to Brian Grinstead [:bgrins] from comment #28) > (In reply to Sylvestre Ledru [:sylvestre] from comment #27) > > OK. I disabled it. Please resubmit when ready! > > Thanks. Just to make sure - the ::before/::after is still in the release > notes, correct? I'd like to make sure that we include that (and XBL > inspection depending on the audience) is still included. No, I removed the whole item. "Support for inspecting ::before and ::after pseudo elements" => is that OK?
(In reply to Sylvestre Ledru [:sylvestre] from comment #29) > (In reply to Brian Grinstead [:bgrins] from comment #28) > > (In reply to Sylvestre Ledru [:sylvestre] from comment #27) > > > OK. I disabled it. Please resubmit when ready! > > > > Thanks. Just to make sure - the ::before/::after is still in the release > > notes, correct? I'd like to make sure that we include that (and XBL > > inspection depending on the audience) is still included. > No, I removed the whole item. > "Support for inspecting ::before and ::after pseudo elements" => is that OK? Yes, that is good - thanks
OK. Back in the release notes, thanks for the confirmation!
relnote-firefox: ? → 35+
Blocks: 1077750
Blocks: 920142
I've added a note in the Page Inspector page, along with a really short video: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#.3A.3Abefore_and_.3A.3Aafter.
Is this being worked on? The link above doesn't work any more.
(In reply to tony from comment #33) > Is this being worked on? The link above doesn't work any more. Looks like the documentation for the feature has moved to: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#before_and_after.
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: