devtools.panels.create parameter pagePath



a year ago
11 months ago


(Reporter: hellosct1, Assigned: rpl)


58 Branch

Firefox Tracking Flags

(Not tracked)



(1 attachment)

129.65 KB, application/zip


a year ago
Posted file
User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0
Build ID: 20180124220129

Steps to reproduce:

I want Add a new panel to the devtools in the webExtension

I am following documentation (which I participated)

and I use the following example

I test on : 
- Windows 7 (64 bit)
- Ubuntu 16
- Linux Mint 17
- Linux Mint 18

For each OS, I tested with all these versions : 
- Firefox 57.0.4
- Firefox 58
- Firefox 59 (beta)
- Firefox 60 (Nightly)

Actual results:

In Firefox 57.0.4 (file Firefox57.0.4.png), I have the extension that works

In Firefox 58 and above, I have the extension that does not work anymore (see screenshot: file Firefox58.png)

Expected results:

When creating a page with the devtools.panels.create function
the pagePath parameter is problematic

I reproduce the same problem with the following modules : 

However, the following modules that use this function work :

The problem comes from the fact that we call the page and more precisely the location of the file. If the file is at the root of the module, it works. If we put the file in a subfolder, the module does not work anymore


a year ago
Assignee: nobody → lgreco
Component: Untriaged → WebExtensions: Developer Tools
Product: Firefox → Toolkit

Comment 1

a year ago
Hello :hellosct1

The issues is related to the relative paths used in the extensions that are not loading correctly:

- on Firefox < 58 the icon and panel paths was resolved as relative to the root baseURI of the extension
- on Firefox >= 58 the icon and panel paths are resolved as relative to the URI of the page that is calling the
  devtools.panels.create API method (it is not the main reason for the change, but it is also consistent to 
  the behavior of some of the other WebExtensions APIs)

e.g. the devtools-panel example from the mdn/webextensions-examples repo needs the following changes to work correctly:

- the icon is in a other top-level subdirectory, and so it could be changed to "/icons/star.png"
- the panel is in a sub-directory of the top-level "devtools/" directory that contains the devtools_page, and so it could be changed to "/devtools/panel/panel.html" (or "panel/panel.html")

    diff --git a/devtools-panels/devtools/devtools.js b/devtools-panels/devtools/devtools.js
    index ae6bf47..9f958d6 100644
    --- a/devtools-panels/devtools/devtools.js
    +++ b/devtools-panels/devtools/devtools.js
    @@ -16,8 +16,8 @@ Create a panel, and add listeners for panel show/hide events.
      "My Panel",
    -  "icons/star.png",
    -  "devtools/panel/panel.html"
    +  "/icons/star.png",
    +  "/devtools/panel/panel.html"
     ).then((newPanel) => {

Using an explicit extension url relative to the extension root baseURI (like "/icons/star.png" for the icon and "/devtools/panel/panel.html") is probably the safest choice, because it would allow the extension to work unmodified on both Firefox < 58 and >= 58. 

The MDN docs should be updated to mention explicitly the expected behaviors of these urls (and also notify the addon developers of the webextensions about this change, so that they can update their devtools_page if needed, e.g. 'devtools-highlighter' seems to have been already updated).

I've also opened the following pull request to apply the fix described above to the example from the github repo:

Keywords: dev-doc-needed

Comment 2

a year ago

thank you for this information, I will look at the documentation MDN to make the necessary corrections and alert William to validate the resulting.

The other problem I'm talking about is the extensions that are available on the site, because you have to make the corrections

I'll talk to :caitmuenster to see
- The update of these extensions
- how to prevent the authors of this evolution
I updated wordpress-query-monitor :-)
Thanks for the info!


a year ago
Last Resolved: a year ago
Resolution: --- → FIXED
Removing dev-doc-needed, since (AIUI) :hellosct1 has taken care of the updates for this. Thanks! But please let me know if we do need anything else.
Keywords: dev-doc-needed


11 months ago
Product: Toolkit → WebExtensions
You need to log in before you can comment on or make changes to this bug.