I have two panels created in my Add-on, one is created as a primary panel:
chrome.devtools.panels.create("ppane", "", "devtoolsPanel.html",
function(_sidebar) {
}
);
the second one is created as page inspector’s sidebar pane:
chrome.devtools.panels.elements.createSidebarPane("sidepane",
function(sidebar) {
sidebar.setPage("devtoolsPanel.html");
}
);
both panels are created without issue.
In these two panels, I use the same code to handle a click event which intend to highlight the corresponding node in the Inspector:
rowClick(rowId: any) {
let clicked = this.state.report[rowId];
var script =
`var nodes = document.evaluate("${clicked.path.dom}", document, null, XPathResult.ANY_TYPE, null);
var node = nodes.iterateNext();
if (node) {
inspect(node);
true;
}`
chrome.devtools.inspectedWindow.eval(script, function(result, isException) {
if (isException) {
console.error( isException);
}
if (!result) {
console.log('Could not select element, it may have moved');
}
});
This code behaves differently in the primary panel and sidebar panel. When I do a clicking in the primary panel, the correct node is selected in the inspector, but if I do a clicking in the inspector’s sidebar pane, instead of selecting a node in the inspector, a console is opened at the bottom of the devtool, the node element is printed out, but the node in the inspector is not selected.
My question: why does the same code behave differently in primary panel and in Inspector’s sidebar panel?