1525619 - [remote-dbg-next] UX-implementation: Runtime page header

Status: RESOLVED FIXED

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

Description

[Julian Descottes [:jdescottes]]

Follow up to Bug 1512636. We have finalized mockups for the header of the runtime page and we should implement it.

Note that we have 2 bugs where we are adding buttons for remote runtime pages:

• disconnect button
• profile runtime button

We should probably wait until both those bugs have landed before taking this.

Comment 1

[Julian Descottes [:jdescottes]]

Mockup at https://bugzilla.mozilla.org/attachment.cgi?id=9037195

Comment 3

[Julian Descottes [:jdescottes]]

From Bug 1527240

Follow up to Bug 1495665. We are starting to have more and more actions in the runtime header. Once all actions have been added we should cleanup the UI.

From :ladybenko's review in Bug 1495665:

Not for this bug, but the way we are organising our buttons / controls in the top of the runtime page feels a bit messy.
Maybe we could have a grid to lay out the different elements

Comment 4

[Julian Descottes [:jdescottes]]

Review of the gap between the content of the mockups and our current implementation

• mockups show the Disconnect button, but it is missing (Bug 1505128)
  => will add the button as disabled for now
• mockups only show a Runtime with a Device, but we have runtime pages without devices
  => we have one old screenshot which shows the Runtime name should be centered in this case. we can try to infer the rest of the sizings from this
• mockups do not include the "Profile Runtime" button, which we added recently
  => this button should probably be next to "Disable/Enable Connection Prompt" rather than on the other side of the panel as it is now
• mockups have the addons controls split between the Runtime Header and the Temporary Extension Category, while we kept them grouped together
  => to achieve this I think we'd need to refactor the Runtime Page (along the lines of something :ladybenko suggested this week). I would probably keep the addon actions as a single element in the Runtime Header for now, and spin this in a separate bug

Comment 5

[Julian Descottes [:jdescottes]]

Attachment: Bug 1525619 - Stop passing unused temporaryInstallError prop to TemporaryExtensionInstaller;r=daisuke

Small cleanup, this prop is no longer used by the component

Comment 6

[Julian Descottes [:jdescottes]]

Attachment: Bug 1525619 - Move RuntimeActions to dedicated component;r=daisuke

@daisuke I would like to share this preliminary work with you.
I want to move this to a dedicated component anyway, but most importantly this will reduce merge conflicts between our 2 bugs.
I can land that and leave-open while I continue to work on the actual UX implementation?

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/966ad7948d5f
Stop passing unused temporaryInstallError prop to TemporaryExtensionInstaller;r=daisuke
https://hg.mozilla.org/integration/autoland/rev/1bb0a92ee9e6
Move RuntimeActions to dedicated component;r=daisuke

Comment 8

[Julian Descottes [:jdescottes]]

Attachment: Bug 1525619 - Fix eslint violations

Depends on D20399

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2458de6962a8
Fix eslint violations r=daisuke

Comment 10

[Julian Descottes [:jdescottes]]

Attachment: Bug 1525619 - Separate runtime action buttons from addon debug checkbox

Depends on D20439

I want to separate the addon checkbox and the load temporary addon for 2 reasons:

• we will get remove the checkbox after Bug 1525533
• we may support temporary addons for remote runtimes later

The "load temporary addon" might also move inside the Temporary Extensions category.

Comment 11

[Julian Descottes [:jdescottes]]

Attachment: Bug 1525619 - Update layout for RuntimeInfo to display device name on separate line;r=ladybenko,daisuke

Depends on D20464

For this change I moved all the layout logic for the RuntimeInfo h1 to RuntimeInfo.css
I don't know if we prefer to have layout info in base.css or in specialized components, but the RuntimeInfo header has a very specific structure.
I can't see how this would be worth having in base.css. And it is the only consumer for main-heading, so I removed all layout rules from base.css for main-heading.

Comment 12

[Julian Descottes [:jdescottes]]

Attachment: Bug 1525619 - Add Disconnect button as disabled in the RuntimeInfo layout

Depends on D20471

I can drop this changeset if we prefer, but this is how I imagine the disconnect button would fit in the RuntimeInfo.

Comment 13

[Julian Descottes [:jdescottes]]

Attachment: Bug 1525619 - Update typography for RuntimeInfo

Depends on D20472

Comment 14

[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 15

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/966ad7948d5f
https://hg.mozilla.org/mozilla-central/rev/1bb0a92ee9e6
https://hg.mozilla.org/mozilla-central/rev/2458de6962a8

Comment 16

[Julian Descottes [:jdescottes]]

(first patches landed on central, removing leave-open)

Comment 17

[Phabricator Automation]

Comment on attachment 9045231 [details]
Bug 1525619 - Update horizontal alignments according to mockups for Sidebar, ConnectPage, RuntimePage

Revision D20481 was moved to bug 1505126. Setting attachment 9045231 [details] to obsolete.

Comment 18

[Julian Descottes [:jdescottes]]

try at https://treeherder.mozilla.org/#/jobs?repo=try&revision=0d4a8c2de3a7976d37c269461ae8b7684f1ad3a9

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/37e45833df18
Separate runtime action buttons from addon debug checkbox r=daisuke
https://hg.mozilla.org/integration/autoland/rev/ecf4f66d2547
Update layout for RuntimeInfo to display device name on separate line;r=ladybenko,daisuke
https://hg.mozilla.org/integration/autoland/rev/77903a61daae
Add Disconnect button as disabled in the RuntimeInfo layout r=daisuke,ladybenko
https://hg.mozilla.org/integration/autoland/rev/9eab7d33fb58
Update typography for RuntimeInfo r=ladybenko,daisuke

Comment 20

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/37e45833df18
https://hg.mozilla.org/mozilla-central/rev/ecf4f66d2547
https://hg.mozilla.org/mozilla-central/rev/77903a61daae
https://hg.mozilla.org/mozilla-central/rev/9eab7d33fb58