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

RESOLVED FIXED in Firefox 68

Status

defect
P1
normal
RESOLVED FIXED
9 months ago
2 months ago

People

(Reporter: jdescottes, Assigned: ladybenko)

Tracking

(Blocks 2 bugs)

unspecified
Firefox 68
Dependency tree / graph

Firefox Tracking Flags

(firefox68 fixed)

Details

Attachments

(8 attachments, 1 obsolete attachment)

Margins, measures, etc. of the main layout elements. Also global font-size, colors, etc.
Summary: UX-implementation: general layout & global styles → [remote-debugging-ng] UX: General layout & global styles
Duplicate of this bug: 1501637
Summary: [remote-debugging-ng] UX: General layout & global styles → [remote-debugging-ng] General layout & global styles

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.

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.

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

Depends on: 1505125
Posted image setup_page.png

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.

Flags: needinfo?(victoria)

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

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?

(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?

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

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.

Flags: needinfo?(victoria)
Assignee: nobody → balbeza
Status: NEW → ASSIGNED
Priority: P2 → P1
Pushed by balbeza@mozilla.com:
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

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

Flags: needinfo?(balbeza)
Pushed by balbeza@mozilla.com:
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
Status: ASSIGNED → RESOLVED
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68
Flags: needinfo?(balbeza)
Attachment #9046831 - Attachment is obsolete: true
You need to log in before you can comment on or make changes to this bug.