1505126 - [remote-debugging-ng] General layout & global styles

Status: RESOLVED FIXED

(DevTools :: about:debugging, defect, P1)

Description

[Julian Descottes [:jdescottes]]

Margins, measures, etc. of the main layout elements. Also global font-size, colors, etc.

Comment 2

[Julian Descottes [:jdescottes]]

Attachment: Bug 1525619 - Update horizontal alignments according to mockups for Sidebar, ConnectPage, RuntimePage

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.

Comment 3

[Julian Descottes [:jdescottes]]

See https://phabricator.services.mozilla.com/D20481 initially attached to Bug 1525619 with some discussion around panel horizontal alignments.

Comment 4

[Ola Gasidlo [:ogasidlo] [:ola] OOO - please ping :ladybenko:]

See https://phabricator.services.mozilla.com/D21887#601760 about setting the letter-spacing of the body text in the cards to 0.25em.

Comment 5

[Ola Gasidlo [:ogasidlo] [:ola] OOO - please ping :ladybenko:]

Attachment: Different backgrounds in runtime / sidebar of about:debugging-new

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.

Comment 6

[Julian Descottes [:jdescottes]]

The last main UX bug for the project is Bug 1505125, we cannot take this bug until the dependency has been fixed.

Comment 7

[Julian Descottes [:jdescottes]]

Attachment: setup_page.png

Comment 8

[Julian Descottes [:jdescottes]]

Attachment: this_nightly_page.png

Comment 9

[Julian Descottes [:jdescottes]]

Attachment: remote_runtime_page.png

Comment 10

[Julian Descottes [:jdescottes]]

Attachment: remote_runtime_profiling.png

Comment 11

[Julian Descottes [:jdescottes]]

Attachment: about_devtools_toolbox.png

Comment 12

[Julian Descottes [:jdescottes]]

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.

Comment 13

[Julian Descottes [:jdescottes]]

(oh also we have a bug to define a Favicon for about debugging: https://bugzilla.mozilla.org/show_bug.cgi?id=1500354)

Comment 14

[Victoria Wang [:victoria]]

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?

Comment 15

[Julian Descottes [:jdescottes]]

(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

[Victoria Wang [:victoria]]

Yes, that should work! I put it on my trello for next week.

Comment 17

[Victoria Wang [:victoria]]

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.

Comment 18

[Belén [:ladybenko]]

Attachment: Bug 1505126 - Part 1: UX fixes. r=jdescottes, daisuke, ola

Comment 19

[Belén [:ladybenko]]

Attachment: Bug 1505126: Part 2 - Render the ADB status into a new component, with an icon

Comment 20

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0ff53dd72b6b
Part 1: UX fixes. r=jdescottes,daisuke,Ola
https://hg.mozilla.org/integration/autoland/rev/cfca5a733e48
Part 2 - Render the ADB status into a new component, with an icon r=jdescottes,daisuke,Ola

Comment 21

[Bogdan Tara[:bogdan_tara | bogdant]]

Backed out 2 changesets (Bug 1505126) for browser_parsable_css.js failures

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&fromchange=f0905966b59554c33154560667bf39891e79ed61&tochange=988b90e06a7ad93c32eed60b0f765997d88caffb&searchStr=linux%2Cx64%2Cshippable%2Copt%2Cmochitests%2Ctest-linux64-shippable%2Fopt-mochitest-devtools-chrome-e10s-4%2Cm%28dt4%29&selectedJob=242598541

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

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/def772263e58
Part 1: UX fixes. r=jdescottes,daisuke,Ola
https://hg.mozilla.org/integration/autoland/rev/155b510b215d
Part 2 - Render the ADB status into a new component, with an icon r=jdescottes,daisuke,Ola

Comment 23

[Oana Pop-Rus]

https://hg.mozilla.org/mozilla-central/rev/def772263e58
https://hg.mozilla.org/mozilla-central/rev/155b510b215d