Same code behaves differently in primary panel and inspector sidebar pane

Add-ons Development
#1

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?