[remote-debugging-ng] General layout & global styles
Categories
(DevTools :: about:debugging, defect, P1)
Tracking
(firefox68 fixed)
Tracking | Status | |
---|---|---|
firefox68 | --- | fixed |
People
(Reporter: jdescottes, Assigned: ladybenko)
References
(Blocks 2 open bugs)
Details
Attachments
(8 files, 1 obsolete file)
Reporter | ||
Updated•6 years ago
|
Reporter | ||
Updated•6 years ago
|
Reporter | ||
Comment 2•6 years ago
|
||
Depends on D20473
This changeset is optional, I think it might be better to handle it as part of the global layout UX bug
(https://bugzilla.mozilla.org/show_bug.cgi?id=1505126). But since some dimensions took some time to figure out I prefer to share the patch.
The basis for this patch is https://bug1512636.bmoattachments.org/attachment.cgi?id=9037195, from where we can see:
- sidebar margin/padding top is 100px
- runtime page header margin/padding top is 36px
So first difference with our current implementation is that .sidebar and .page are no horizontally aligned.
Moreover the Connect/Setup page does not use 36px.
I couldn't find a document with the exact measure, but looking at the last mockups I think the value used is 19 * 4px (76px).
The Header UX mockup also contains measurements for the sidebar's vertical margins and paddings but this shouldbe handled in the sidebar bug.
Again I am happy to drop the patch from this queue and move it to Bug 1505126 if you feel like it would be better to tackle this at the end.
Reporter | ||
Comment 3•6 years ago
|
||
See https://phabricator.services.mozilla.com/D20481 initially attached to Bug 1525619 with some discussion around panel horizontal alignments.
See https://phabricator.services.mozilla.com/D21887#601760 about setting the letter-spacing of the body text in the cards to 0.25em
.
We have different shades of gray as backgrounds in the sidebar and might want to iterate here. Also the border-radius is different. The message style (USB enabled
) is 1:1 based on Photon.
Reporter | ||
Comment 6•6 years ago
|
||
The last main UX bug for the project is Bug 1505125, we cannot take this bug until the dependency has been fixed.
Reporter | ||
Comment 7•6 years ago
|
||
Reporter | ||
Comment 8•6 years ago
|
||
Reporter | ||
Comment 9•6 years ago
|
||
Reporter | ||
Comment 10•6 years ago
|
||
Reporter | ||
Comment 11•6 years ago
|
||
Reporter | ||
Comment 12•6 years ago
|
||
Hi Victoria!
We have landed all the UX implementation bugs we had from Matt's mockups. Would you have time to do a review of the current UI for about:debugging? Mostly checking that our font/color/alignments seem correct. I added a few screenshots for convenience, but you can simply open about:debugging-new on the latest Nightly, it should have everything.
Things that were already mentioned:
- (Ola's comment above) We have different shades of gray as backgrounds in the sidebar and might want to iterate here. Also the border-radius is different. The message style (USB enabled) is 1:1 based on Photon.
- title "Setup" of the Setup page is not consistent with about: pages (too small)
- Wording: Runtime to be replaced by "Browser" everywhere
And if you spot bigger UX issues (eg Refresh Devices button not clear enough), please mention it, we can file another bug to look into this in more details.
Reporter | ||
Comment 13•6 years ago
|
||
(oh also we have a bug to define a Favicon for about debugging: https://bugzilla.mozilla.org/show_bug.cgi?id=1500354)
Comment 14•6 years ago
|
||
Hi Julian! Yep, I can look at this pretty soon (as well as your other bug). Could you give me an idea of the due date?
Reporter | ||
Comment 15•6 years ago
|
||
(In reply to Victoria Wang [:victoria] from comment #14)
Hi Julian! Yep, I can look at this pretty soon (as well as your other bug). Could you give me an idea of the due date?
Next week would be great, would that work?
Comment 16•6 years ago
|
||
Yes, that should work! I put it on my trello for next week.
Comment 17•6 years ago
|
||
Hi all!
This is looking really, really good — I can't believe how much has changed since the last time I looked at this! You've all done a great job of using Photon patterns. I really only have a few minor tweaks.
I wrote some notes overlaid on the screenshots here: https://mozilla.invisionapp.com/share/39IG53NDEW7#/356373917_about_Debugging_Setup
Please excuse the brevity of the comments, and feel free to challenge anything I said :).
I think the single most important usability improvement we can make is making the left sidebar wide enough to see the entire name of most devices, including network hosts.
Assignee | ||
Updated•6 years ago
|
Updated•6 years ago
|
Assignee | ||
Comment 18•6 years ago
|
||
Assignee | ||
Comment 19•6 years ago
|
||
Comment 20•6 years ago
|
||
Comment 21•6 years ago
|
||
Backed out 2 changesets (Bug 1505126) for browser_parsable_css.js failures
Backout link: https://hg.mozilla.org/integration/autoland/rev/42631db09906b2a0dfe173a13873468bb34e506c
Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=242598541&repo=autoland&lineNumber=1746
[task 2019-04-25T14:22:32.018Z] 14:22:32 INFO - Console message: [JavaScript Warning: "Unknown property ‘user-select’. Declaration dropped." {file: "resource://devtools/client/debugger/src/components/WelcomeBox.css?always-parse-css-0.8385937064088286" line: 16}]
[task 2019-04-25T14:22:32.018Z] 14:22:32 INFO - Console message: [JavaScript Warning: "Error in parsing value for ‘display’. Declaration dropped." {file: "resource://devtools/client/debugger/src/components/Editor/Preview/Popup.css?always-parse-css-0.8385937064088286" line: 105}]
[task 2019-04-25T14:22:32.022Z] 14:22:32 INFO - Console message: [JavaScript Warning: "Unknown property ‘user-select’. Declaration dropped." {file: "resource://devtools/client/shared/components/reps/reps.css" line: 23}]
[task 2019-04-25T14:22:32.022Z] 14:22:32 INFO - Console message: [JavaScript Warning: "Unknown property ‘user-select’. Declaration dropped." {file: "resource://devtools/client/debugger/dist/vendors.css?always-parse-css-0.8385937064088286" line: 23}]
[task 2019-04-25T14:22:32.022Z] 14:22:32 INFO - Console message: [JavaScript Warning: "Unknown property ‘user-select’. Declaration dropped." {file: "resource://devtools/client/debugger/dist/vendors.css?always-parse-css-0.8385937064088286" line: 132}]
[task 2019-04-25T14:22:32.024Z] 14:22:32 INFO - Console message: [JavaScript Warning: "Error in parsing value for ‘display’. Declaration dropped." {file: "resource://devtools/client/debugger/src/components/Editor/Preview.css?always-parse-css-0.8385937064088286" line: 90}]
[task 2019-04-25T14:22:32.028Z] 14:22:32 INFO - Console message: [JavaScript Warning: "Unknown property ‘user-select’. Declaration dropped." {file: "resource://devtools/client/debugger/src/components/Editor/SearchBar.css?always-parse-css-0.8385937064088286" line: 39}]
[task 2019-04-25T14:22:32.028Z] 14:22:32 INFO - Console message: [JavaScript Warning: "Unknown property ‘user-select’. Declaration dropped." {file: "resource://devtools/client/debugger/src/components/SecondaryPanes/Frames/Frames.css?always-parse-css-0.8385937064088286" line: 26}]
[task 2019-04-25T14:22:32.029Z] 14:22:32 INFO - Console message: [JavaScript Warning: "Unknown property ‘user-select’. Declaration dropped." {file: "resource://devtools/client/debugger/src/components/PrimaryPanes/OutlineFilter.css?always-parse-css-0.8385937064088286" line: 13}]
[task 2019-04-25T14:22:32.029Z] 14:22:32 INFO - Buffered messages finished
[task 2019-04-25T14:22:32.033Z] 14:22:32 INFO - TEST-UNEXPECTED-FAIL | browser/base/content/test/static/browser_parsable_css.js | custom property --red-80
is not referenced -
[task 2019-04-25T14:22:32.033Z] 14:22:32 INFO - Stack trace:
[task 2019-04-25T14:22:32.033Z] 14:22:32 INFO - chrome://mochikit/content/browser-test.js:test_ok:1314
[task 2019-04-25T14:22:32.034Z] 14:22:32 INFO - chrome://mochitests/content/browser/browser/base/content/test/static/browser_parsable_css.js:checkAllTheCSS:453
[task 2019-04-25T14:22:32.034Z] 14:22:32 INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1116
[task 2019-04-25T14:22:32.034Z] 14:22:32 INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1144
[task 2019-04-25T14:22:32.034Z] 14:22:32 INFO - chrome://mochikit/content/browser-test.js:nextTest/<:1005
[task 2019-04-25T14:22:32.034Z] 14:22:32 INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:803
[task 2019-04-25T14:22:32.034Z] 14:22:32 INFO - Not taking screenshot here: see the one that was previously logged
[task 2019-04-25T14:22:32.044Z] 14:22:32 INFO - TEST-UNEXPECTED-FAIL | browser/base/content/test/static/browser_parsable_css.js | custom property --display-20-font-size
is not referenced -
[task 2019-04-25T14:22:32.044Z] 14:22:32 INFO - Stack trace:
[task 2019-04-25T14:22:32.044Z] 14:22:32 INFO - chrome://mochikit/content/browser-test.js:test_ok:1314
[task 2019-04-25T14:22:32.044Z] 14:22:32 INFO - chrome://mochitests/content/browser/browser/base/content/test/static/browser_parsable_css.js:checkAllTheCSS:453
[task 2019-04-25T14:22:32.044Z] 14:22:32 INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1116
[task 2019-04-25T14:22:32.044Z] 14:22:32 INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1144
[task 2019-04-25T14:22:32.044Z] 14:22:32 INFO - chrome://mochikit/content/browser-test.js:nextTest/<:1005
[task 2019-04-25T14:22:32.044Z] 14:22:32 INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:803
[task 2019-04-25T14:22:32.044Z] 14:22:32 INFO - Not taking screenshot here: see the one that was previously logged
[task 2019-04-25T14:22:32.044Z] 14:22:32 INFO - TEST-UNEXPECTED-FAIL | browser/base/content/test/static/browser_parsable_css.js | custom property --display-20-font-weight
is not referenced -
[task 2019-04-25T14:22:32.044Z] 14:22:32 INFO - Stack trace:
[task 2019-04-25T14:22:32.045Z] 14:22:32 INFO - chrome://mochikit/content/browser-test.js:test_ok:1314
[task 2019-04-25T14:22:32.045Z] 14:22:32 INFO - chrome://mochitests/content/browser/browser/base/content/test/static/browser_parsable_css.js:checkAllTheCSS:453
[task 2019-04-25T14:22:32.045Z] 14:22:32 INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1116
[task 2019-04-25T14:22:32.045Z] 14:22:32 INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1144
Comment 22•6 years ago
|
||
Comment 23•6 years ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/def772263e58
https://hg.mozilla.org/mozilla-central/rev/155b510b215d
Assignee | ||
Updated•6 years ago
|
Updated•6 years ago
|
Description
•