1617237 - See/change remote URL from about:devtools-toolbox

Status: RESOLVED FIXED

(DevTools :: about:debugging, enhancement, P3)

Description

[:Harald Kirschner :digitarald]

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

Comment 1

[Micah [:mtigley] (she/her)]

Attachment: Bug 1617237 - Part 2: Render URL input in DebugTargetInfo for USB debugging.

Comment 2

[Micah [:mtigley] (she/her)]

Attachment: Bug 1617237 - Part 1: Ensure that ToolboxController updates its children when target navigates

Comment 3

[Micah [:mtigley] (she/her)]

Attachment: url_input

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.

Comment 4

[Micah [:mtigley] (she/her)]

Attachment: url_input_with_border

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.

Comment 5

[Victoria Wang [:victoria]]

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.

Comment 6

[Victoria Wang [:victoria]]

Attachment: 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.

Comment 7

[Daisuke Akatsuka (:daisuke)]

(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 :)

Comment 8

[Victoria Wang [:victoria]]

Sounds good :)

Comment 9

[Micah [:mtigley] (she/her)]

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

Comment 10

[Victoria Wang [:victoria]]

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)

Comment 11

[Micah [:mtigley] (she/her)]

Attachment: Bug 1617237 - Expose a method on BrowsingContextTargetActor for loading browser UI

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

Comment 12

[Micah [:mtigley] (she/her)]

Attachment: Bug 1617237 - Part 3: Add the keypress listener for just DevTools' tab bar

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

Comment 13

[Micah [:mtigley] (she/her)]

Attachment: Bug 1617237 - Part 4: Select all text when URL input is focused

Comment 14

[Micah [:mtigley] (she/her)]

Attachment: Bug 1617237 - Part 5: Add test for changing the URL from the remote debugging UI

Comment 15

[Micah [:mtigley] (she/her)]

Attachment: Screen Shot 2020-05-04 at 2.14.18 PM.png

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!

Comment 16

[Victoria Wang [:victoria]]

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)

Comment 17

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3e340cc988c8
Part 1: Ensure that ToolboxController updates its children when target navigates r=jdescottes,daisuke
https://hg.mozilla.org/integration/autoland/rev/2e647ae9ec48
Part 2: Render URL input in DebugTargetInfo for USB debugging. r=jdescottes,daisuke
https://hg.mozilla.org/integration/autoland/rev/358ce0a1518f
Part 3: Add the keypress listener for just DevTools' tab bar r=yzen,daisuke
https://hg.mozilla.org/integration/autoland/rev/dfdf021a542c
Part 4: Select all text when URL input is focused r=daisuke
https://hg.mozilla.org/integration/autoland/rev/3acc06a17b26
Part 5: Add test for changing the URL from the remote debugging UI r=daisuke

Comment 18

[Razvan Maries]

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

Comment 19

[Micah [:mtigley] (she/her)]

Attachment: Bug 1617237 - Update snapshots for DebugTargetInfo component

Comment 20

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d10d4d3cb10e
Part 1: Ensure that ToolboxController updates its children when target navigates r=jdescottes,daisuke
https://hg.mozilla.org/integration/autoland/rev/fc644e1959d5
Part 2: Render URL input in DebugTargetInfo for USB debugging. r=jdescottes,daisuke
https://hg.mozilla.org/integration/autoland/rev/ebf2a8fae0c6
Part 3: Add the keypress listener for just DevTools' tab bar r=yzen,daisuke
https://hg.mozilla.org/integration/autoland/rev/b2bbb1651dc5
Part 4: Select all text when URL input is focused r=daisuke
https://hg.mozilla.org/integration/autoland/rev/e887e49819d5
Part 5: Add test for changing the URL from the remote debugging UI r=daisuke
https://hg.mozilla.org/integration/autoland/rev/df53d4de5ed0
Update snapshots for DebugTargetInfo component r=jdescottes,daisuke

Comment 21

[Alexandru Michis [:malexandru]]

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

Comment 22

[Janet Swisher]

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