See/change remote URL from about:devtools-toolbox
Categories
(DevTools :: about:debugging, enhancement, P3)
Tracking
(firefox78 fixed)
Tracking | Status | |
---|---|---|
firefox78 | --- | fixed |
People
(Reporter: Harald, Assigned: mtigley)
References
(Blocks 3 open bugs)
Details
(Keywords: dev-doc-complete)
User Story
When debugging my site on a phone, I want to be able to quickly change the URL from the remote debugging UI, so that I don't have to type URLs on my device.
Attachments
(10 files, 1 obsolete file)
47 bytes,
text/x-phabricator-request
|
Details | Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
12.73 KB,
image/png
|
Details | |
13.62 KB,
image/png
|
Details | |
208.21 KB,
image/png
|
Details | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
109.98 KB,
image/png
|
Details | |
47 bytes,
text/x-phabricator-request
|
Details | Review |
Should probably replace the title/url part of about:debugging-toolbox. See Chrome for prior art.
Assignee | ||
Updated•3 years ago
|
Assignee | ||
Comment 1•3 years ago
|
||
Assignee | ||
Comment 2•3 years ago
|
||
Assignee | ||
Comment 3•3 years ago
|
||
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.
Assignee | ||
Comment 4•3 years ago
|
||
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•3 years ago
|
||
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•3 years ago
|
||
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•3 years ago
|
||
(In reply to Victoria Wang [:victoria] from comment #6)
Created attachment 9140285 [details]
image.pngBtw, 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•3 years ago
|
||
Sounds good :)
Assignee | ||
Comment 9•3 years ago
|
||
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•3 years ago
|
||
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)
Assignee | ||
Comment 11•3 years ago
|
||
This revision exposes a method that allows for loading about: pages on BrowsingContextTargetActor
Updated•3 years ago
|
Assignee | ||
Comment 12•3 years ago
|
||
_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).
Updated•3 years ago
|
Assignee | ||
Comment 13•3 years ago
|
||
Assignee | ||
Comment 14•3 years ago
|
||
Updated•3 years ago
|
Assignee | ||
Comment 15•3 years ago
|
||
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•3 years ago
|
||
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•3 years ago
|
||
Pushed by mtigley@mozilla.com: 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•3 years ago
|
||
Backed out for perma failures.
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
Assignee | ||
Comment 19•3 years ago
|
||
Comment 20•3 years ago
|
||
Pushed by mtigley@mozilla.com: 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
Assignee | ||
Updated•3 years ago
|
Comment 21•3 years ago
|
||
bugherder |
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•3 years ago
|
Comment 22•3 years ago
|
||
Updated the screenshot and description at the end of the Connecting to a remote device section, to show the editable URL bar.
Description
•