browser.devtools.panels.elements.createSidebarPane('Gem') return undefined on Chrome

[mantou132]

When I use chrome.devtools.panels.elements.createSidebarPane it works fine

[rpl]

this is likely due to the fact that chrome.devtools.panels.elements.createSidebarPane isn't currently included in the api-metadata.json:

webextension-polyfill/api-metadata.json

Lines 206 to 221 in 8c7be46

	"devtools": {
	"inspectedWindow": {
	"eval": {
	"minArgs": 1,
	"maxArgs": 2,
	"singleCallbackArg": false
	}
	},
	"panels": {
	"create": {
	"minArgs": 3,
	"maxArgs": 3,
	"singleCallbackArg": true
	}
	}
	},

and so it doesn't get wrapped as a promise-based API method.

[rpl]

mentor: @rpl

[akhilpanchal]

Hi:
I am interested in working on this.
This is the first time I am contributing to this project (and open source) and thus will need some guidance.
I will study this issue and let you know if I have any questions. Is that okay?

[rpl]

I will study this issue and let you know if I have any questions. Is that okay?

@akhilpanchal sure it is

I would suggest to start by making sure that you understand the issue and be sure that you are able to reproduce it.

In this particular case, you may want to start by:

• creating a small extension (one that you will run on both Firefox and Chrome)
• then download and include in the test extension a released version of this polyfill as described in the README.md file of this repository
• adding to the test extension a devtools_page (because the devtools pare is the only extension context where this API method is available)
• and finally, in a script included in the devtools_page, you can try to register a devtools sidebar using the API that this issue does mention, and you expect:
  • chrome.devtools.panels.elements.createSidebarPane to be working as expected
  • browser.devtools.panels.elements.createSidebarPane to not be returning a promise just yet (because that will require the changes needed to fix this issue)

Useful doc pages:

• https://extensionworkshop.com/documentation/develop/ (and also the "Build an extension in 5 minutes" intro if this is the first extension that you are writing)
• API doc references:
  • on MDN: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/createSidebarPane
  • on Chrome doc website: https://developer.chrome.com/extensions/devtools_panels
• The mdn/webextensions-examples' devtools_panel example: https://github.com/mdn/webextensions-examples/tree/master/devtools-panels

Once you are sure that you are able to reproduce the issue, you are ready to plan to make the needed changes in this repo and then verify that those changes do fix the issue in your minimal test extension as expected:

• clone this repository
• download the dependencies (npm install), build the polyfill (npm run build) and run the existing tests (npm run tests), these steps help you to verify that your development environment is working correctly
• add the changes needed to the api-metadata.json file in this repo (to include the entry for the missing devtools.panels.elements.createSidebarPane method)
• build the polyfill again after making the changes to api-metadata.json
• copy the newly build polyfill file from the dist/ directory of your webextension-polyfill clone into your test extension and verify that browser.devtools.panels.elements.createSidebarPane` does work as expected (return a promise and create the expected evtools sidebar panel)

Let us know how it goes (and if you have questions, doubts, or if you got stuck on any of these steps).

[akhilpanchal]

@rpl Thank you so much for the detailed response. That helped a lot.
I was able to reproduce the issue by creating a simple extension and also able to resolve it after adding the entry for devtools.panels.elements.createSidebarPane in the api-metadata.json. I have sent a PR. Please let me know if you have any feedback.