1433055 - devtools.panels.create parameter pagePath

Status: RESOLVED FIXED

(WebExtensions :: Developer Tools, defect)

Description

[:hellosct1]

Attachment: bug-devtools.zip

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)
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/devtools.panels/create

and I use the following example
https://github.com/mdn/webextensions-examples/tree/master/devtools-panels

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 : 
- https://addons.mozilla.org/fr/firefox/addon/wordpress-query-monitor/
- https://addons.mozilla.org/fr/firefox/addon/hackbartool/
- https://addons.mozilla.org/fr/firefox/addon/devtools-highlighter/

However, the following modules that use this function work :
- https://addons.mozilla.org/fr/firefox/addon/remotedev/
- https://addons.mozilla.org/fr/firefox/addon/devtools-media-panel/


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

Comment 1

[Luca Greco [:rpl] [:luca] [:lgreco]]

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.
     */
     browser.devtools.panels.create(
      "My Panel",
    -  "icons/star.png",
    -  "devtools/panel/panel.html"
    +  "/icons/star.png",
    +  "/devtools/panel/panel.html"
     ).then((newPanel) => {
     newPanel.onShown.addListener(handleShown);
     newPanel.onHidden.addListener(handleHidden);

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:

- https://github.com/mdn/webextensions-examples/pull/336

Comment 2

[:hellosct1]

hi,

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 addons.mozilla.org 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

Comment 3

[Daniele "Mte90" Scasciafratte]

I updated wordpress-query-monitor :-)
Thanks for the info!

Comment 4

[Will Bamberg [:wbamberg]]

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.