Should probably replace the title/url part of about:debugging-toolbox. See Chrome for prior art.

Victoria, we'd like your opinion on how we can better inform users whether or not the URL is editable.

As Daisuke has suggested in https://phabricator.services.mozilla.com/D70279 , we can show the Back/Forward/Reload buttons beside the input field to remind users you can change the URL similar to how you would expect to change it in a regular browser.

Another idea is to add a border color to the URL input field, similar to how RDM's device form does it for unfocused input fields.

URL input with border to help indicate the field is editable. Uses border: 1px solid var(--theme-toolbarbutton-active-background) on the .devtools-textinput class for styling.

I like the border idea! If it also turns blue when focused, that would be great.

If Back/Forward/Reload buttons seem helpful, we should add them, but I think the border is enough if we just need to indicate editability.

Btw, found this in my old mockups from 2018 :) - I guess we planned on doing the buttons back then. There's the Chrome-parity argument, but I'm not sure how much dev work it would be.

(In reply to Victoria Wang [:victoria] from comment #6)

Created attachment 9140285 [details]
image.png

Btw, found this in my old mockups from 2018 :) - I guess we planned on doing the buttons back then. There's the Chrome-parity argument, but I'm not sure how much dev work it would be.

Oh, the mockup is really cool!!
As we already plan to add Reload button in bug 1617240, and I don't think this takes a long time, we may be better implement all buttons in the bug.
At least, I will borrow the Reload button design :)

Sounds good :)

Thanks, Victoria for providing that mockup! Would you by chance be able to provide what color you used for the URL input's border? It looks slightly darker than what I have in Comment 4

Oh, I actually like the color you're using in Comment 4! (Sorry for the confusion, the mockup I posted was a pretty low-fi one)

This revision exposes a method that allows for loading about: pages on BrowsingContextTargetActor

_onToolbarArrowKeypress is only concerned with moving focus between tabs in the toolbar when the right/left arrow keys a pressed. This patch ensures the listener is only added to the container of the tab elements (.devtools-tabbar).

Victoria, I did some UI polish and wanted to get your opinion on how this looks so far. I adjusted the font-size and size of the URL input to be slightly bigger. Let me know what you think of it!

Hi Micah, this is looking great!

This might be a separate bug, but there could be less space around the separator line (it should probably match the spacing of the separator between the Picker and Inspector tab)

Backed out for perma failures.

Push with failure: https://treeherder.mozilla.org/#/jobs?repo=autoland&selectedTaskRun=AyDell9FSiy68irf_V09xQ-0&resultStatus=pending%2Crunning%2Csuccess%2Ctestfailed%2Cbusted%2Cexception&searchStr=linux%2C18.04%2Cx64%2Copt%2Cnode%2Ctests%2Csource-test-node-devtools-tests%2Cnode%28devtools%29&revision=3acc06a17b265ec77c854f8d06e9fbe3ea7703a8

Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=301252698&repo=autoland&lineNumber=1237

Backout: https://hg.mozilla.org/integration/autoland/rev/7a1c4923a43de6e5be4aa139f4c4100afa25cae2

https://hg.mozilla.org/mozilla-central/rev/d10d4d3cb10e
https://hg.mozilla.org/mozilla-central/rev/fc644e1959d5
https://hg.mozilla.org/mozilla-central/rev/ebf2a8fae0c6
https://hg.mozilla.org/mozilla-central/rev/b2bbb1651dc5
https://hg.mozilla.org/mozilla-central/rev/e887e49819d5
https://hg.mozilla.org/mozilla-central/rev/df53d4de5ed0

Updated the screenshot and description at the end of the Connecting to a remote device section, to show the editable URL bar.