Link to element which a style is inherited from



5 years ago
5 months ago


(Reporter: Farshid.Beheshti, Unassigned, Mentored)


(Blocks 2 bugs, {parity-chrome})

Firefox Tracking Flags

(Not tracked)


(Whiteboard: [btpp-backlog])

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.

Blocks: firebug-gaps
Severity: normal → enhancement
Component: Untriaged → Developer Tools: Inspector
Ever confirmed: true
OS: Windows 8.1 → All
Hardware: x86 → All
Version: 36 Branch → unspecified
Patrick, is this something you could mentor ?
Flags: needinfo?(pbrosset)
(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.
Mentor: pbrosset
Flags: needinfo?(pbrosset)
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!
Assignee: nobody → ma.steiman
Flags: needinfo?(pbrosset)
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?
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.
Flags: needinfo?(pbrosset)
I probably won't be able to work on a bug that involved at the moment due to the holiday.
Assignee: ma.steiman → nobody
Chrome Canary now has this.
Whiteboard: [parity-chrome]
Assignee: nobody → gabriel.luong
Priority: -- → P3
Whiteboard: [parity-chrome] → [parity-chrome][btpp-backlog]
Gabriel, are you still working on this?

Component: Developer Tools: Inspector → Developer Tools: CSS Rules Inspector
Flags: needinfo?(gl)
Summary: Link to the element which the style is inherited from. → Link to element which a style is inherited from
:sebo, did you want to take over this?
Flags: needinfo?(gl) → needinfo?(sebastianzartner)
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.

Flags: needinfo?(sebastianzartner)
Assignee: gl → nobody
See Also: → 1327767
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:

The rule-view is *not* React however, so rendering this component would be done a little differently, but can still be done.
Mass bug change to replace various 'parity' whiteboard flags with the new canonical keywords. (See bug 1443764 comment 13.)
Keywords: parity-chrome
Whiteboard: [parity-chrome][btpp-backlog] → [btpp-backlog]
Product: Firefox → DevTools
Blocks: dt-rules-wow
Duplicate of this bug: 1525827
You need to log in before you can comment on or make changes to this bug.