New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 3 users

Issue metadata

Status: Fixed
Owner:
Last visit > 30 days ago
Closed: Nov 2013
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Feature



Sign in to add a comment

Implement copy css path

Reported by eyhg...@gmail.com, Aug 22 2013

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36

Steps to reproduce the problem:
Select element in inspector and right click. The copy XPath option is there but copy CSS is not present.

What is the expected behavior?

What went wrong?
Most of modern JavaScript libraries are using css path in selectors. The ability to copy CSS time saves a lot of time during development.
Also the information is already present and this feature should be relatively easy to implement.
Currently people using crazy methods to get CSS path in devTools including bookmarklets.  

Did this work before? No 

Chrome version: 28.0.1500.95  Channel: n/a
OS Version: 6.2 (Windows 8)
Flash Version: Shockwave Flash 11.8 r800
 
Cc: ligim...@chromium.org
Labels: -Type-Bug Type-Feature M-31
Marking this as a feature request
Would it be ok if I work on this feature. I've never contributed to Devtools but I'm going to start trying and this is a feature I've wanted for a while.

This seems like a good 1st ticket.

I did some testing before commenting to make sure I could actually complete the task. I already have parts of it working except I'm not looping through the parent nodes so I'm only copying the last part.

I already read most of https://developers.google.com/chrome-developer-tools/docs/contributing is there anything else I should look at.

Thanks.

Comment 3 by loislo@chromium.org, Aug 29 2013

Cc: apavlov@chromium.org
Owner: eustas@chromium.org
Status: Assigned

Comment 4 by eustas@chromium.org, Aug 29 2013

Labels: -Via-Wizard -M-31 Hotlist-GoodFirstBug
Owner: ----
Status: Available

Comment 5 by Deleted ...@, Oct 14 2013

I hope 'copy css path' feature will be in chromium +1
Owner: apavlov@chromium.org
Ha, I have a patch for this change. I forgot to upload it. Hmm, I need to figure out the process for uploading a patch but in the mean time here it is.

Any feedback would be greatly appreciated.
blink-copy-css-path.patch
4.3 KB View Download
O.K. reading up on the  "Contributing Code" guidelines.

Can this patch get submitted to the try-server for testing.

I'm looking into adding unit test for this patch now and following all the other task a new contributor needs to do.

Thanks.

@Eric: The idea of the patch looks fine. Please upload it to the codereview server using "git cl upload" so that we can proceed with the formal review.

Comment 10 Deleted

https://codereview.chromium.org/27204002/

Sorry if I did it wrong. I followed the documentation over at https://developers.google.com/chrome-developer-tools/docs/contributing
which might be missing a step or two.

Looking into DevTools unit test now.

Project Member

Comment 13 by bugdroid1@chromium.org, Nov 22 2013

The following revision refers to this bug:
    http://src.chromium.org/viewvc/blink?view=rev&rev=162535

------------------------------------------------------------------------
r162535 | apavlov@chromium.org | 2013-11-22T11:04:38.213185Z

Changed paths:
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/StylesSidebarPane.js?r1=162535&r2=162534&pathrev=162535
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/http/tests/inspector/layers-test.js?r1=162535&r2=162534&pathrev=162535
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/inspector/elements/move-node.html?r1=162535&r2=162534&pathrev=162535
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/EventListenersSidebarPane.js?r1=162535&r2=162534&pathrev=162535
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/DOMPresentationUtils.js?r1=162535&r2=162534&pathrev=162535
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/ElementsPanel.js?r1=162535&r2=162534&pathrev=162535
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/LayerTree.js?r1=162535&r2=162534&pathrev=162535
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/http/tests/inspector/inspect-element.html?r1=162535&r2=162534&pathrev=162535
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/inspector/layer-compositing-reasons.html?r1=162535&r2=162534&pathrev=162535
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/DOMAgent.js?r1=162535&r2=162534&pathrev=162535

DevTools: Move DOMNode.appropriateSelectorFor() into DOMPresentationUtil.

This is a preliminary refactoring for the DOM node CSS selector construction.

R=aandrey, eustas
BUG= 277286 

Review URL: https://codereview.chromium.org/83123002
------------------------------------------------------------------------
Project Member

Comment 14 by bugdroid1@chromium.org, Nov 22 2013

The following revision refers to this bug:
    http://src.chromium.org/viewvc/blink?view=rev&rev=162552

------------------------------------------------------------------------
r162552 | apavlov@chromium.org | 2013-11-22T18:05:06.715993Z

Changed paths:
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/inspector/elements/elements-css-path-expected.txt?r1=162552&r2=162551&pathrev=162552
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/inspector/elements/inspect-deep-shadow-element.html?r1=162552&r2=162551&pathrev=162552
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/inspector/elements/elements-css-path.html?r1=162552&r2=162551&pathrev=162552
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/inspector/elements/node-xpath.xhtml?r1=162552&r2=162551&pathrev=162552
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/DOMPresentationUtils.js?r1=162552&r2=162551&pathrev=162552
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/ElementsTreeOutline.js?r1=162552&r2=162551&pathrev=162552
   M http://src.chromium.org/viewvc/blink/trunk/LayoutTests/inspector/elements/node-xpath-expected.txt?r1=162552&r2=162551&pathrev=162552
   M http://src.chromium.org/viewvc/blink/trunk/Source/devtools/front_end/DOMAgent.js?r1=162552&r2=162551&pathrev=162552

DevTools: [Elements] Implement "Copy CSS Path" context menu item for elements

R=pfeldman, vsevik, aandrey, eustas
BUG= 277286 

Review URL: https://codereview.chromium.org/75253002
------------------------------------------------------------------------
Status: Fixed

Sign in to add a comment