Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get cursor position in a Chrome DevTools source editor from extension?

I develop Open in Editor extension for Google Chrome DevTools that allows to open source file in external editor using context menu.

It works perfectly in most of cases (Network panel, Performance panel, Style inspector, and so on) when file location in UI contains a line number (like jquery.js:2191).
The only exception is Sources panel. A chrome.devtools.panels.setOpenResourceHandler callback function doesn't receive a line number.

Does DevTools has some API to get a position of cursor in source editor from setOpenResourceHandler() callback?

enter image description here

like image 484
Evgeniy Generalov Avatar asked Jul 17 '17 11:07

Evgeniy Generalov


1 Answers

This has been explained as per reported Chrome Issue 747888:

So first of all, setOpenResourceHandle() is for the cases when users click a link (e.g. a linkified location in console) that normally results in opening a source tab in DevTools, it's not meant to be fired when a file is explicitly opened in the source panel. For changes of the file/position within the sources tab, we've got chrome.devtools.panels.sources.onSelectionChanged (see a layout test for example usage) that was recently brought back by @jacobr).

Here is the mentioned code example:

function extension_testElementsOnSelectionChanged(nextTest) {     function onSelectionChanged()     {         webInspector.panels.elements.onSelectionChanged.removeListener(onSelectionChanged);         output("onSelectionChanged fired");         nextTest();     }     webInspector.panels.elements.onSelectionChanged.addListener(onSelectionChanged);     webInspector.inspectedWindow.eval("inspect(document.body.children[0]), 0"); }  function extension_testSourcesOnSelectionChangedShowFile(nextTest) {     function onSelectionChanged(selectionInfo)     {         webInspector.panels.sources.onSelectionChanged.removeListener(onSelectionChanged);         output("sources onSelectionChanged fired, selectionInfo:");         dumpObject(selectionInfo, {url: "url"});         nextTest();     }     webInspector.panels.sources.onSelectionChanged.addListener(onSelectionChanged);     evaluateOnFrontend("InspectorTest.showScriptSource(\"test-script.js\")"); }  function extension_testSourcesOnSelectionChangedShowFileAndLine(nextTest) {     webInspector.inspectedWindow.eval("location.href", function(inspectedPageURL) {         function onSelectionChanged(selectionInfo)         {             webInspector.panels.sources.onSelectionChanged.removeListener(onSelectionChanged);             output("sources onSelectionChanged fired, selectionInfo:");             dumpObject(selectionInfo, {url: "url"});             nextTest();         }         webInspector.panels.sources.onSelectionChanged.addListener(onSelectionChanged);          var basePath = inspectedPageURL.replace(/\/[^/]*$/, "/");         webInspector.panels.openResource(basePath + "resources/test-script.js", 2);     }); } 
like image 173
kenorb Avatar answered Oct 29 '22 19:10

kenorb