Implement copy css path in elements panel.

DevTools: [Elements] Implement "Copy css path".

BUG=277286

[apavlov, 2013-10-15 07:55:11]

Perhaps, you will also want to add the "optimized" flag to the new methods, so
you will have two modes.

This patch needs good test coverage.

You will want to add a new test into LayoutTests/inspector/styles.

InspectorTest.findNode("someId", nodeFoundCallback);
will give you a node with id="someId" through the callback (since this may
require asynchronous data load).

https://codereview.chromium.org/27204002/diff/3001/Source/devtools/front_end/...
File Source/devtools/front_end/DOMAgent.js (right):

https://codereview.chromium.org/27204002/diff/3001/Source/devtools/front_end/...
Source/devtools/front_end/DOMAgent.js:416: _cssPathValue: function() {
AFAIU, in general a "CSS path" should be as short as possible [yet unique]
(similar to the XPath "optimized" mode, where we bail out immediately if a node
has an ID).

https://codereview.chromium.org/27204002/diff/3001/Source/devtools/front_end/...
Source/devtools/front_end/DOMAgent.js:416: _cssPathValue: function() {
Please add a JSDoc

https://codereview.chromium.org/27204002/diff/3001/Source/devtools/front_end/...
Source/devtools/front_end/DOMAgent.js:418: return "null";
Blink indents are 4 spaces wide

https://codereview.chromium.org/27204002/diff/3001/Source/devtools/front_end/...
Source/devtools/front_end/DOMAgent.js:418: return "null";
I believe this should be

return null;

https://codereview.chromium.org/27204002/diff/3001/Source/devtools/front_end/...
Source/devtools/front_end/DOMAgent.js:427: if (className) {
This will break for <span class="  ">. You should check

if (className && className.trim())

https://codereview.chromium.org/27204002/diff/3001/Source/devtools/front_end/...
Source/devtools/front_end/DOMAgent.js:449: 
You should check if the node is Node.ELEMENT_NODE up front, and bail out early.

https://codereview.chromium.org/27204002/diff/3001/Source/devtools/front_end/...
Source/devtools/front_end/DOMAgent.js:451: contextNode = this;
DevTools use a "var" per each declaration. But in this case you can move "var
contextNode = this" into the "for" init-clause.

https://codereview.chromium.org/27204002/diff/3001/Source/devtools/front_end/...
Source/devtools/front_end/DOMAgent.js:453: var selector =
contextNode._cssPathValue();
You should check if the selector is valid (i.e. !== null). Also, you can stop
once a pure #id selector is encountered right?

https://codereview.chromium.org/27204002/diff/3001/Source/devtools/front_end/...
Source/devtools/front_end/DOMAgent.js:458: return selectors.length ?
selectors.join(" ") : "";
If you implement the early bailout above, you should not need this additional
check.

https://codereview.chromium.org/27204002/diff/3001/Source/devtools/front_end/...
File Source/devtools/front_end/ElementsTreeOutline.js (right):

https://codereview.chromium.org/27204002/diff/3001/Source/devtools/front_end/...
Source/devtools/front_end/ElementsTreeOutline.js:1375:
contextMenu.appendItem(WebInspector.UIString("Copy CSS Path"),
this._copyCSSPath.bind(this));
This should go into _populateTagContextMenu(). Copying an XPath does make sense
for text nodes, unlike copying a CSS path.

[apavlov, 2013-11-01 13:01:05]

@ericduran: do you intend to finish this patch or should we proceed with it
ourselves?

[ericduran, 2013-11-05 13:59:39]

On 2013/11/01 13:01:05, apavlov wrote:
> @ericduran: do you intend to finish this patch or should we proceed with it
> ourselves?

I thought I reply to the previous review as I have some questions. By the looks
of it I have a "draft" comment.

[ericduran, 2013-11-05 14:00:59]

https://codereview.chromium.org/27204002/diff/3001/Source/devtools/front_end/...
File Source/devtools/front_end/DOMAgent.js (right):

https://codereview.chromium.org/27204002/diff/3001/Source/devtools/front_end/...
Source/devtools/front_end/DOMAgent.js:416: _cssPathValue: function() {
Hmm, Same assumption but that wasn't what I was going for here. I was going for
what Firebug does which is gives you a full path to the css. Do we want bail
once we find an ID? 

On 2013/10/15 07:55:11, apavlov wrote:
> AFAIU, in general a "CSS path" should be as short as possible [yet unique]
> (similar to the XPath "optimized" mode, where we bail out immediately if a
node
> has an ID).

[apavlov, 2013-11-05 14:05:51]

https://codereview.chromium.org/27204002/diff/3001/Source/devtools/front_end/...
File Source/devtools/front_end/DOMAgent.js (right):

https://codereview.chromium.org/27204002/diff/3001/Source/devtools/front_end/...
Source/devtools/front_end/DOMAgent.js:416: _cssPathValue: function() {
On 2013/11/05 14:00:59, ericduran wrote:
> Hmm, Same assumption but that wasn't what I was going for here. I was going
for
> what Firebug does which is gives you a full path to the css. Do we want bail
> once we find an ID? 

Hmm, I'm not sure why Firebug does this, but as I said, you might want to
introduce two modes, "full" and "optimized", the latter bailing out seeing an
#id. Then we could easily switch between the two variations.

[apavlov, 2013-11-24 09:16:30]

http://crbug.com/277286 has been fixed.