[WebEx] Omnibar looking for an onFocus type event

Add-ons Development
#1

Along with the release of Firefox 57 comes the photon-ui. This new version moves the refresh button back out of the URL bar, like it was back in… Firefox 3.6? Hmm, seems like a ~7 year cycle… We going to get it back in the URL bar in 7 years? … Anyway…

So, I decided to make a small WebExtension utilizing the ‘PageActions’ in order to replicate the functionality. I’ve got everything working (btw, I also wish there was a ‘stop all stuff loading in this tab’ API call, but there isn’t…), except for a small visual nitpick.

When I select the URL bar I would like to be able to hide the PageAction button that I created, much like how the builtin PageActions disappear when entering the URL bar. However, there is no event in which I can attach a listener too. All the URL bar events require that I attach some kind of ‘keyword’ that needs to be typed before they get called.

Is there any existing APIs in which I can use to hide/unhide the PageAction button on URL focus/unfocus?

#2

Is there any existing APIs in which I can use to hide/unhide the PageAction button on URL focus/unfocus?

It might be possible to notice stuff being typed in the URL-bar with the webRequest AIP, if the user has search suggestions enabled.

And here is a totally different approach: Place the reload button left of the URL-bar and put this in the chrome/userChrome.css in your profile:

@-moz-document
	url(chrome://browser/content/browser.xul)
{
	#urlbar-container {
		margin-right: -30px;
	}
	#urlbar .urlbar-textbox-container {
		margin-right: 30px;
	}
	#stop-reload-button {
		transform: translateX(-8px);
	}
}

Result (along with some themeing):
image

#3

Wow, thanks. I don’t know why I didn’t think of that. Considering I did much of the same to transform the hamburger menu button into the orange button (located in the top left) from Firefox 4-28.

This doesn’t quite solve the above visual nitpick but it does make for an overall better button and it’s way less janky on page reload. Since pageActions are disabled by default I’d have to run the .show() for every navigation causing flickering.

#4

You really don’t like changes to the way Firefox looks, do you? :smiley:

This hides the reload button while the urlbar is focused:

@-moz-document
	url(chrome://browser/content/browser.xul)
{
	#urlbar-container {
		margin-right: -30px;
	}
	#urlbar-container .urlbar-textbox-container {
		margin-right: 30px; transition: margin .16s;
	}
	#urlbar-container:focus-within .urlbar-textbox-container {
		margin-right: 0px;
	}
	#stop-reload-button {
		transform: translateX(-8px) scale(1); transition: transform .16s;
	}
	#urlbar-container:focus-within ~ #stop-reload-button {
		transform: translateX(-8px) scale(0);
	}
}

This still isn’t quite the same as the other buttons in there, but pretty close. I’d experiment further, but for some reason, Firefox refuses to open the Browser Toolbox now -.-

#5

I didn’t know about the ‘focus-within’ selector, nice! That actually helps with some other projects I’ve been working on.

I had this issue too. Turns out it’s something to do with your profile (perhaps a lock file?). When it occurred I’d create a new profile. However, in order to mitigate it, actually I haven’t seen the issue since I started this, make sure you close the browser toolbox manually, wait a few seconds, then quit the main browser.

As a quick file check. Here’s some results (on Windows, should be similar on other platforms).

# Before opening Browser Toolbox
$ find ./9ys7zol7.nightly > /tmp/before_toolbox
# Open the Browser Toolbox
$ find ./9ys7zol7.nightly > /tmp/during_toolbox
# Closed the Browser Toolbox
$ find ./9ys7zol7.nightly > /tmp/after_toolbox

$ diff /tmp/before_toolbox /tmp/during_toolbox
1c1
< ./9ys7zol7.nightly
---
> ./9ys7zol7.nightly/
395a396,397
> ./9ys7zol7.nightly/chrome_debugger_profile/favicons.sqlite-shm
> ./9ys7zol7.nightly/chrome_debugger_profile/favicons.sqlite-wal
416a419,420
> ./9ys7zol7.nightly/chrome_debugger_profile/places.sqlite-shm
> ./9ys7zol7.nightly/chrome_debugger_profile/places.sqlite-wal
492,493d495
< ./9ys7zol7.nightly/chrome_debugger_profile/ShutdownDuration.json
< ./9ys7zol7.nightly/chrome_debugger_profile/ShutdownDuration.json.tmp

$ diff /tmp/during_toolbox /tmp/after_toolbox
389a390,394
> ./9ys7zol7.nightly/chrome_debugger_profile/datareporting/archived/2017-09/1505668956733.20d9b657-0768-4632-98ca-a0ae680d9d08.health.jsonlz4
> ./9ys7zol7.nightly/chrome_debugger_profile/datareporting/archived/2017-09/1505668956793.a04cf951-89a2-4b68-9734-041e32987ad7.health.jsonlz4
> ./9ys7zol7.nightly/chrome_debugger_profile/datareporting/archived/2017-09/1505668956841.6b5e5581-bcd3-4f4f-9a97-e4843558d3a8.main.jsonlz4
> ./9ys7zol7.nightly/chrome_debugger_profile/datareporting/archived/2017-09/1505668956845.102d311c-445b-4fa2-ba11-30ef75b6f060.first-shutdown.jsonlz4
> ./9ys7zol7.nightly/chrome_debugger_profile/datareporting/archived/2017-09/1505668956855.5a2e1dc2-d39c-4531-81da-63256e5d3b51.saved-session.jsonlz4
396,397d400
< ./9ys7zol7.nightly/chrome_debugger_profile/favicons.sqlite-shm
< ./9ys7zol7.nightly/chrome_debugger_profile/favicons.sqlite-wal
419,420d421
< ./9ys7zol7.nightly/chrome_debugger_profile/places.sqlite-shm
< ./9ys7zol7.nightly/chrome_debugger_profile/places.sqlite-wal
470a472
> ./9ys7zol7.nightly/chrome_debugger_profile/saved-telemetry-pings/102d311c-445b-4fa2-ba11-30ef75b6f060
472a475
> ./9ys7zol7.nightly/chrome_debugger_profile/saved-telemetry-pings/20d9b657-0768-4632-98ca-a0ae680d9d08
478a482
> ./9ys7zol7.nightly/chrome_debugger_profile/saved-telemetry-pings/5a2e1dc2-d39c-4531-81da-63256e5d3b51
479a484
> ./9ys7zol7.nightly/chrome_debugger_profile/saved-telemetry-pings/6b5e5581-bcd3-4f4f-9a97-e4843558d3a8
481a487
> ./9ys7zol7.nightly/chrome_debugger_profile/saved-telemetry-pings/a04cf951-89a2-4b68-9734-041e32987ad7
495a502,503
> ./9ys7zol7.nightly/chrome_debugger_profile/ShutdownDuration.json
> ./9ys7zol7.nightly/chrome_debugger_profile/ShutdownDuration.json.tmp

The important bits, looks like the following files are created when the toolbox opens and removed when the toolbox closes.

./9ys7zol7.nightly/chrome_debugger_profile/favicons.sqlite-shm
./9ys7zol7.nightly/chrome_debugger_profile/favicons.sqlite-wal
./9ys7zol7.nightly/chrome_debugger_profile/places.sqlite-shm
./9ys7zol7.nightly/chrome_debugger_profile/places.sqlite-wal

Conversely, the following files are removed when the toolbox opens and created when it closes.

./9ys7zol7.nightly/chrome_debugger_profile/ShutdownDuration.json
./9ys7zol7.nightly/chrome_debugger_profile/ShutdownDuration.json.tmp

–

$ echo -e '\n' | cat ./9ys7zol7.nightly/chrome_debugger_profile/ShutdownDuration.json - ./9ys7zol7.nightly/chrome_debugger_profile/ShutdownDuration.json.tmp
{"profile-change-teardown": 0}

{"profile-change-teardown": 0, "profile-before-change": 0}