1407723 - Add inspector toolbar button, similar to Firebug

Status: NEW

(DevTools :: Inspector, enhancement, P5)

Description

[Lukas]

Attachment: prozkoumat.jpg

User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:56.0) Gecko/20100101 Firefox/56.0
Build ID: 20171002220106

Steps to reproduce:

Developer Tools in Firefox does not have a Inspector component like old Firebug. Its not possible to pin Inspector button at other buttons of plugins in right top corner.



Expected results:

Option to pin button Inspector.

Comment 1

[Patrick Brosset <:pbro>]

This would make a good extension. Just a simple toolbar button that opens the toolbox. I don't think there's a WebExtensions API for doing this though, and I don't know whether this is planned. Pinging Luca on this.

The other way would be to let people do this natively, without the need for an extension, via the "customize" mode.
We already have a WebIDE button in the customize mode for some reason (I think we added it when the Developer Edition product was created), so adding a more generic DevTools button that just opened the toolbox would certainly be possible. And in fact probably more helpful than the WebIDE button (which we're in the process of removing anyway).

It seems like this can be done from within DevTools code by calling CustomizableUI.createWidget(...)

Comment 2

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

Currently there is no "devtools" APIs available to extension pages that lives outside of the developer toolbox itself.

Nevertheless, we have Bug 1310037 that is about allowing an extension to open a devtool panel using a WebExtensions API,
based on the prototype mentioned in Bug 1310037 Comment 3, defining an API to open an integrated devtools panel is definitely doable without too much complexity (the tricky part of such an API is currently to decide how to allow an extension to open its own panels, because the addon panels do not exist until they have been created by a devtools page, which is going to run only when you open the toolbox)

In this particular case the API should be just slightly different: besides opening the the developer toolbox for the tab and select the inspector panel, the picker tool should be enabled.

Such additional feature could be an interesting feature of the WebExtensions API proposed for Bug 1310037 if we would also allow the extension to select its own sidebar tab in the inspector panel when the picker tool has been enabled.

Besides what described above, I think that the idea of introducing an integrate "DevTools Inspector Picker" button in the "customize" mode (like we did in the past for the WebIDE) is not a bad idea, even if we decide to support such WebExtensions API in the future.