1099234 - Link to element which a style is inherited from

Status: NEW

(DevTools :: Inspector: Rules, enhancement, P3)

Description

[Farshid Beheshti]

User Agent: Mozilla/5.0 (Windows NT 6.3; rv:36.0) Gecko/20100101 Firefox/36.0
Build ID: 20141030030218

Steps to reproduce:

Firebug needs linking to the element from which the style is inherited, in the Rule side panel.

Currently, it renders as a text node (like "Inherited From div#foo" e.g), so no way to link the div#foo when clicked.

Farshid

Comment 1

[Tim Nguyen :ntim]

Patrick, is this something you could mentor ?

Comment 2

[Tim Nguyen :ntim]

Relevant parts of the source :
- http://mxr.mozilla.org/mozilla-central/source/browser/devtools/styleinspector/rule-view.js#464
- http://mxr.mozilla.org/mozilla-central/source/browser/devtools/styleinspector/rule-view.js#2170

Comment 3

[Patrick Brosset <:pbro>]

(In reply to Tim Nguyen [:ntim] from comment #1)
> Patrick, is this something you could mentor ?
Yes definitely, it shouldn't too hard and the idea is very nice.

Comment 4

[Tyler Steiman]

Hi Patrick I assigned this bug to myself, would love to work on it. Can I get some more info on how to take care of this? This may be a little simplistic but does the solution call for creating a hyperlink to the inherited element? Just want to make sure I'm understanding clearly here, thanks!

Comment 5

[Tyler Steiman]

Also, at certain points under the "rules" tab it shows multiple links under the same "inherited from" block, with links to the corresponding line numbers in the CSS. If "inherited from" became a hyperlink, how would this work out in terms of what it will be linked to?

Comment 6

[Patrick Brosset <:pbro>]

Thanks for your interest!

The idea is that in the rule-view, everywhere there's a section like "Inherited from div#something" (and there can be several), we want the "div#something" part to be something the user can interact with.
Right now, this part is just text, and we want to make it something that looks and behaves like other similar node previews in the rest of the devtools.

There are several examples of this in devtools:

- in the Console panel, if you type 'document.body' for instance, the output will show a nicely formatted preview of the element followed by an inspector icon that allows to select the element in the inspector. Also, hovering the preview will highlight the element in the page.
- in the Inspector panel, if you switch to the "Animations" sidebar panel and if you have animations running in the page, then you'll see similar node previews there. Again, hovering over them will highlight the elements in the page, and the inspector icon is there too.

So we want to do exactly the same thing here: instead of displaying a text-only preview of the node a given rule was inherited from, we want a preview users can hover and click.

Because we do this in other places of the code already, I'd like this bug to be about making the existing code reusable here, instead of just re-creating the node preview in rule-view.js

So, I think the starting point will be this:
- File browser/devtools/animationinspector/components.js
- Class: AnimationTargetNode
This class is a UI widget that knows how to display DOM nodes nicely (and handles highlight on hover and click to select).

The things to solve with this widget are:
- it's inside browser/devtools/animationinspector/component.js which, in itself, isn't great because it sort of tells people that it's an animationinspector-only widget where, really, it should be usable from anywhere. So, we should extract this class only from its current file, and put it in a more general place.
I think we could create a file here: browser/devtools/inspector/utils.js
- it expects a special object type in its render function: PlayerFront. This is an internal type that the animationinspector uses. If we want to make this widget usable from anywhere in devtools, we need to get rid of this. The right object type the render function should accept is NodeFront. This is something we use all over the place. In fact, you'll see that the render function only uses the playerFront to retrieve a nodeFront, so we should just remove that part completely, and make the function only accept a nodeFront.

Once done, we'll need to fix the current consumers of this widget. There is code in the animationinspector that expects this widget to be where it is now, and assumes that it accepts in PlayerFront argument. Since this won't be true anymore, this code will need fixing.

Once done, the last part will be to use this widget in rule-view.js. This file is responsible for displaying the "Inherited from" sections.
In particular, if you look in the Rule class, in the inheritedSource getter function, you'll see this is where the text-only preview is generated.
In this method, this.inherited is a NodeFront already, so it should be easy enough to use the new widget with it.

I hope that helps. Sorry I know it's a lot of internal stuff to take in, but hopefully, you can take this step by step, don't hesitate to come back to me here or on IRC (#devtools) for further clarifications.

Comment 7

[Tyler Steiman]

I probably won't be able to work on a bug that involved at the moment due to the holiday.

Comment 8

[Tim Nguyen :ntim]

Chrome Canary now has this.

Comment 9

[Matteo Ferretti [:zer0] [:matteo]]

Filter on CLIMBING SHOES

Comment 10

[Sebastian Zartner [:sebo]]

Gabriel, are you still working on this?

Sebastian

Comment 11

[Gabriel Luong [:gl] (ΦωΦ)]

:sebo, did you want to take over this?

Comment 12

[Sebastian Zartner [:sebo]]

I didn't. (Too busy with other things at the moment.) I just stumbled over this again and saw that the bug is assigned for several months without progress. So I thought, if you're not actively working on it, it would be better to unassign yourself to give others a chance.

Sebastian

Comment 13

[Patrick Brosset <:pbro>]

We have a new component for displaying DOM nodes in DevTools. It is already being used in several places like the console, the debugger, the new layout panel. We would like this component to be the only DOM node preview component we use throughout the tools. It uses React, just like the majority of our tools now.

Here's an example usage: http://searchfox.org/mozilla-central/rev/72fe012899a1b27d34838ab463ad1ae5b116d76b/devtools/client/inspector/grids/components/GridItem.js#133-142

The rule-view is *not* React however, so rendering this component would be done a little differently, but can still be done.

Comment 14

[Jonathan Watt [:jwatt]]

Mass bug change to replace various 'parity' whiteboard flags with the new canonical keywords. (See bug 1443764 comment 13.)