Web Developer > Browser Toolbox window

Discussion of third-party/unofficial Firefox/Thunderbird/SeaMonkey builds.
Locked
Oomingmak
Posts: 203
Joined: July 10th, 2004, 7:46 pm
Location: UK

Web Developer > Browser Toolbox window

Post by Oomingmak »

I have a couple of questions about Web Developer Browser Toolbox:

1. The supposed hotkey to open the Browser Toolbox window is Ctrl+Shift+Alt+i but it has never worked for me.

I am therefore intending to create my own launch hotkey (using an external utility) but I don't know what command to send to Firefox for it to open the Browser Toolbox window. Can anybody tell me what command to send? (bearing in mind that the original hotkey does not work).

If there is no direct launch method, than what is the hotkey to open the Firefox "Hamburger" panel menu, because I can recreate the manual menu clicks instead (if a direct method of opening is not available).

2. I need to find out the CSS ID of the Browser Toolbox window, but none of the tools that I usually use can work on the Browser Toolbox window. What's its ID? (and how did you find it?).
User avatar
malliz
Folder@Home
Posts: 43796
Joined: December 7th, 2002, 4:34 am
Location: Australia

Re: Web Developer > Browser Toolbox window

Post by malliz »

What sort of man would put a known criminal in charge of a major branch of government? Apart from, say, the average voter.
"Terry Pratchett"
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: Web Developer > Browser Toolbox window

Post by morat »

The Ctrl+Alt+Shift+I shortcut works for me.

The following code works for me using the browser console.

Code: Select all

(function () {
  var btl = ChromeUtils.import("resource://devtools/client/framework/browser-toolbox/Launcher.jsm", {}).
    BrowserToolboxLauncher;
  btl.init();
})();
Remember to set the devtools.debugger.prompt-connection pref to false. (Firefox 65+)

Firefox 74.0
Windows 7 SP1 32-bit

I think the code for Firefox 56.0 is...

Code: Select all

(function () {
  var btp = Components.utils.import("resource://devtools/client/framework/ToolboxProcess.jsm", {}).
    BrowserToolboxProcess;
  btp.init();
})();
P.S.

Browser toolbox launches a separate Firefox instance and uses a separate profile.

Browser toolbox styling
http://forums.mozillazine.org/viewtopic ... &t=3058985
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: Web Developer > Browser Toolbox window

Post by jscher2000 »

I don't think you can send keys to the graphical menu, but you can send keys to the classic top menu bar:

Alt+T W E

(that's for Firefox 74, your hotkeys may vary)
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Re: Web Developer > Browser Toolbox window

Post by dickvl »

You should see the Browser Toolbox with its shortcut listed in the Web Developer menu if this toolbox is enabled.

Do you have the Browser Toolbox enabled ?
https://developer.mozilla.org/en-US/Too ... er_Toolbox

To enable the Browser Toolbox:
select "Enable remote debugging" in the developer tools settings
https://developer.mozilla.org/en-US/Tools/Settings
Oomingmak
Posts: 203
Joined: July 10th, 2004, 7:46 pm
Location: UK

Re: Web Developer > Browser Toolbox window

Post by Oomingmak »

morat wrote: The following code works for me using the browser console ...

I think the code for Firefox 56.0 is ...
Thank you, morat. Both of these work for me (in Firefox v74 and Waterfox, respectively).
morat wrote: Browser toolbox launches a separate Firefox instance and uses a separate profile.
Yes, I was already aware of that. However, what I was not aware of was the fact that the connection prompt could be turned off. This had been irritating me so much that I wrote a little macro to dispense with it (which is now no longer needed thanks to your informative tip). By the way, it can be switched off on Waterfox too, despite it being < v65.
jscher2000 wrote:I don't think you can send keys to the graphical menu, but you can send keys to the classic top menu bar:
Thanks for the heads up about not being able to send keys to the graphical menu.

Do you happen to know the answer to my second question? (about the css ID of the Browser Toolbox window) as it seems to have been overlooked. I want to change the window icon by putting an appropriately named icon into the ...\App\Waterfox\browser\chrome\icons\default folder (as I've already done for main, places, devtools-webconsole, and commonDialog). But I couldn't find a method to determine the id of the Browser Toolbox window. If anyone would know how to do this, you would (given your expertise in this area).
User avatar
Daifne
Moderator
Posts: 123071
Joined: July 31st, 2005, 9:17 pm
Location: Where the Waters Meet, Wisconsin

Re: Web Developer > Browser Toolbox window

Post by Daifne »

Moving to 3rd Party Builds.
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: Web Developer > Browser Toolbox window

Post by jscher2000 »

Oomingmak wrote:Do you happen to know the answer to my second question? (about the css ID of the Browser Toolbox window) as it seems to have been overlooked. I want to change the window icon by putting an appropriately named icon into the ...\App\Waterfox\browser\chrome\icons\default folder (as I've already done for main, places, devtools-webconsole, and commonDialog). But I couldn't find a method to determine the id of the Browser Toolbox window. If anyone would know how to do this, you would (given your expertise in this area).
There was another thread recently about styling the Browser Toolbox. It doesn't observe the userChrome.css file of the running Firefox, but instead has its own settings somewhere.
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: Web Developer > Browser Toolbox window

Post by morat »

@Oomingmak

I don't know what you mean by css id of the browser toolbox window.

It's not possible to get the window object of the browser toolbox window using code run in the main browser window.

Code: Select all

Services.wm.getMostRecentWindow("navigator:browser"); // main browser window

Code: Select all

Services.wm.getMostRecentWindow("Browser:page-info"); // page info window
I can get the window object of the page info window, but not the browser toolbox window.

@jscher2000

Browser toolbox styling
http://forums.mozillazine.org/viewtopic ... &t=3058985
Oomingmak
Posts: 203
Joined: July 10th, 2004, 7:46 pm
Location: UK

Re: Web Developer > Browser Toolbox window

Post by Oomingmak »

jscher2000 wrote:There was another thread recently about styling the Browser Toolbox. It doesn't observe the userChrome.css file of the running Firefox, but instead has its own settings somewhere.
I'm not talking about using CSS to style it.

As I said in my post, I just need the #ID of that window so that I can appropriately name an icon, put the icon in the folder path that I specified, and then let the browser take care of it (as I have already done with all the examples I listed).

No css whatsoever is involved, but the icon must be named to the #id of the window in order for it to work.

So, I just need the # ID name of the Browser Toolbox window (which I am unable to determine because the tools that I normally use don't work on that particular window - but they did for windows such as #devtools-webconsole which is how I was able to find out that particular name).
Oomingmak
Posts: 203
Joined: July 10th, 2004, 7:46 pm
Location: UK

Re: Web Developer > Browser Toolbox window

Post by Oomingmak »

morat wrote:@Oomingmak
I don't know what you mean by css id of the browser toolbox window.
I'm not sure what the exact correct terminology is, but for example, if you open the 'Library' window it has a window id of #places. If you do the same for the Web Console window, it has an ID of #devtools-webconsole etc. See screenshots below:

Image


Image
morat wrote:It's not possible to get the window object of the browser toolbox window using code run in the main browser window.
Yes, I know.

That's exactly why I'm asking more experienced people if they have another method of determining the ID (or maybe they just know it from memory by having seen it written in code somewhere).
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: Web Developer > Browser Toolbox window

Post by morat »

No idea if the changing taskbar icon main-window.ico trick works with the browser toolbox window.

Firefox 74...

window id="main-window" for view-source:chrome://browser/content/browser.xhtml

window id="places" for view-source:chrome://browser/content/places/places.xhtml

html id="devtools-toolbox-window" for view-source:chrome://devtools/content/framework/browser-toolbox/window.html

Reference (see BROWSER_TOOLBOX_WINDOW_URL)
http://searchfox.org/mozilla-release/so ... uncher.jsm
http://searchfox.org/mozilla-release/so ... indow.html

Firefox 52...

window id="main-window" for view-source:chrome://browser/content/browser.xul

window id="places" for view-source:chrome://browser/content/places/places.xul

window id="devtools-toolbox-window" for view-source:chrome://devtools/content/framework/toolbox-process-window.xul

Reference (see DBG_XUL)
http://dxr.mozilla.org/mozilla-esr52/so ... rocess.jsm
http://dxr.mozilla.org/mozilla-esr52/so ... window.xul
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Re: Web Developer > Browser Toolbox window

Post by dickvl »

The Browser Toolbox uses its own profile folder and runs as a separate remote process.
For styling you need the chrome folder within its profile folder.

On Linux I see this process as a firefox-bin sub process in the system monitor loading a chrome window:
firefox-bin -no-remote -foreground -profile <current profile>/chrome_debugger_profile
-chrome chrome://devtools/content/framework/browser-toolbox/window.html

view-source:resource:///chrome/devtools/content/framework/browser-toolbox/window.html
https://dxr.mozilla.org/mozilla-release ... indow.html

Code: Select all

<html id="devtools-toolbox-window"
      windowtype="devtools:toolbox"
      width="900" height="350"
      persist="screenX screenY width height sizemode">
Oomingmak
Posts: 203
Joined: July 10th, 2004, 7:46 pm
Location: UK

Re: Web Developer > Browser Toolbox window

Post by Oomingmak »

morat wrote:No idea if the changing taskbar icon main-window.ico trick works with the browser toolbox window
FYI, it does (see below). I've also been using it for extension windows.
morat wrote: id="devtools-toolbox-window"
Thank you very much, morat. This is exactly what I was looking for. It works like a charm.


Image
Locked