MozillaZine

Web Developer > Browser Toolbox window

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

Post Posted March 20th, 2020, 2:07 pm

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?).

malliz
Folder@Home

User avatar
 
Posts: 44181
Joined: December 7th, 2002, 4:34 am
Location: Australia

Post Posted March 20th, 2020, 3:10 pm

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: 4100
Joined: February 3rd, 2009, 6:29 pm

Post Posted March 20th, 2020, 3:32 pm

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.php?f=38&t=3058985

jscher2000

User avatar
 
Posts: 11094
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted March 20th, 2020, 3:43 pm

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)

dickvl

User avatar
 
Posts: 53221
Joined: July 18th, 2005, 3:25 am

Post Posted March 20th, 2020, 6:41 pm

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: 198
Joined: July 10th, 2004, 7:46 pm
Location: UK

Post Posted March 21st, 2020, 12:50 am

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).

Daifne
Moderator

User avatar
 
Posts: 123085
Joined: July 31st, 2005, 9:17 pm
Location: Where the Waters Meet, Wisconsin

Post Posted March 21st, 2020, 6:52 am

Moving to 3rd Party Builds.

jscher2000

User avatar
 
Posts: 11094
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted March 21st, 2020, 7:14 am

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: 4100
Joined: February 3rd, 2009, 6:29 pm

Post Posted March 21st, 2020, 9:43 am

@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.php?f=38&t=3058985

Oomingmak
 
Posts: 198
Joined: July 10th, 2004, 7:46 pm
Location: UK

Post Posted March 21st, 2020, 9:46 am

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: 198
Joined: July 10th, 2004, 7:46 pm
Location: UK

Post Posted March 21st, 2020, 10:05 am

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: 4100
Joined: February 3rd, 2009, 6:29 pm

Post Posted March 21st, 2020, 10:33 am

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/source/devtools/client/framework/browser-toolbox/Launcher.jsm
http://searchfox.org/mozilla-release/source/devtools/client/framework/browser-toolbox/window.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/source/devtools/client/framework/ToolboxProcess.jsm
http://dxr.mozilla.org/mozilla-esr52/source/devtools/client/framework/toolbox-process-window.xul

dickvl

User avatar
 
Posts: 53221
Joined: July 18th, 2005, 3:25 am

Post Posted March 21st, 2020, 6:38 pm

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: 198
Joined: July 10th, 2004, 7:46 pm
Location: UK

Post Posted March 23rd, 2020, 12:39 am

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

Return to Third Party/Unofficial Builds


Who is online

Users browsing this forum: No registered users and 3 guests