1535254 - Update RDM rotate and touch icons to a Photon style (ux#28)

Status: RESOLVED FIXED

(DevTools :: Responsive Design Mode, enhancement, P3)

Description

[Florens Verschelde :fvsch]

Design discussed in https://github.com/firefox-devtools/ux/issues/28

Comment 1

[Yash Johar]

Attachment: rotate-viewport.svg

icon needs to be saved/re-saved using Illustrator

Comment 2

[Yash Johar]

Attachment: touch-events.svg

icon needs to be saved/re-saved using Illustrator

Comment 3

[Florens Verschelde :fvsch]

I ran the icons through SVGOMG and prepared the code with the license headers, context-fill, etc.

For the rotate viewport icon, do we want to have an alternative where the "portrait" shape is hollow and the "landscape" shape is full?

Rotate viewport, filled shape = portrait

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <path fill="context-fill" d="M2.28 1h5.44c.44 0 .6.05.77.13.16.1.29.22.38.38.08.16.13.33.13.77v11.44c0 .44-.05.6-.13.77a.9.9 0 0 1-.38.38c-.16.08-.33.13-.77.13H2.28c-.44 0-.6-.05-.77-.13a.9.9 0 0 1-.38-.38c-.08-.16-.13-.33-.13-.77V2.28c0-.44.05-.6.13-.77a.9.9 0 0 1 .38-.38c.16-.08.33-.13.77-.13zM2 3v10h6V3H2zM13 15h1a1 1 0 0 0 1-1v-1h-1v1h-1v1zm-1 0v-1h-2v1h2zm1-8v1h1v1h1V8a1 1 0 0 0-1-1h-1zm-1 0h-2v1h2V7zm3 5v-2h-1v2h1zM9 8v6-6z"/>
</svg>

Rotate viewport, filled shape = landscape

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <path fill="context-fill" d="M15 13.72V8.28c0-.44-.05-.6-.13-.77a.9.9 0 0 0-.38-.38c-.16-.08-.33-.13-.77-.13H2.28c-.44 0-.6.05-.77.13a.9.9 0 0 0-.38.38c-.08.16-.13.33-.13.77v5.44c0 .44.05.6.13.77.1.16.22.29.38.38.16.08.33.13.77.13h11.44c.44 0 .6-.05.77-.13a.9.9 0 0 0 .38-.38c.08-.16.13-.33.13-.77zM13 14H3V8h10v6zM1 3V2a1 1 0 0 1 1-1h1v1H2v1H1zm0 1h1v2H1V4zm8-1H8V2H7V1h1a1 1 0 0 1 1 1v1zm0 1v2H8V4h1zM4 1h2v1H4V1zm4 6H2h6z"/>
</svg>

Touch events

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <path fill="context-fill" d="M3.174 6.222A3.99 3.99 0 0 1 2.5 4a4 4 0 1 1 7.326 2.222l-.83-.556A2.99 2.99 0 0 0 9.5 4a3 3 0 1 0-5.495 1.666l-.831.556zM5 9.4V3.5a1.5 1.5 0 1 1 3 0v3.085a1.499 1.499 0 0 1 1.764.607 1.499 1.499 0 0 1 2 .5A1.5 1.5 0 0 1 14 9h-.004c0 .155-.023.313-.074.468l-1.791 5.494A1.5 1.5 0 0 1 10.739 16V16H6.695a2.5 2.5 0 0 1-2.202-1.315L1.975 10.01a1.5 1.5 0 0 1 .443-1.927l.04-.029c.04-.029.04-.029.083-.056a1.36 1.36 0 0 1 1.87.446L5 9.4zm6.18 5.253L12.97 9.16a.5.5 0 0 0-.847-.488A.498.498 0 0 0 12 9a.5.5 0 1 1-1 0v-.5a.5.5 0 1 0-1 0 .5.5 0 1 1-1 0V8a.5.5 0 1 0-1 0 .5.5 0 0 1-1 0V3.5a.5.5 0 0 0-1 0v7.667c0 .504-.662.691-.926.262L3.56 8.967a.36.36 0 0 0-.494-.118l-.007.004-.008.006-.007.005-.04.028a.5.5 0 0 0-.147.643l2.518 4.676a1.5 1.5 0 0 0 1.32.789h4.013v-.001a.5.5 0 0 0 .473-.346z"/>
</svg>

Comment 4

[Florens Verschelde :fvsch]

Attachment: RDM rotate icon orientation.png

Victoria, I think we discussed on Slack (and you mentioned in https://github.com/firefox-devtools/ux/issues/28#issuecomment-418858554) that we may want two states for the Rotate icon, to represent the current orientation.

Is this (attached) what you had in mind?

The "filled" shape represents the current state, and the dashed shape represents the orientation you would get after clicking the icon.

Comment 5

[Victoria Wang [:victoria]]

Thank you Florens - this is exactly what I was imagining :D

Comment 6

[Martin Balfanz [:mbalfanz]]

Thanks :fvsch, I really like the suggestion of having the icon reflect the current state.

Though, our current icon is stateless. We will need to make sure that it will get updated when the user resizes the viewport or selects a device from the list.

Comment 7

[Patrick Brosset <:pbro>]

Hi Yash, this bug is assigned to you right now, did you plan on making the code changes required to get these new icons in RDM?
If not, let me know so this bug can be made available for others to claim.

Comment 8

[Yash Johar]

Attachment: Bug 1535254 - Update RDM rotate and touch icons to a Photon style. r=gl

Comment 9

[Yash Johar]

Hi Patrick, sorry for the delay. A patch has been submitted for review: https://phabricator.services.mozilla.com/D32790

Comment 10

[Florens Verschelde :fvsch]

Hi Yash, do you need help with the changes that Gabriel suggested on Phabricator?

Comment 11

[Yash Johar]

Hi Florens, I’m having trouble getting an artifact build up on my machine; I’ve submitted a bug for it. It’s better if someone else takes charge of implementing this one.

Comment 12

[Florens Verschelde :fvsch]

Thanks for your feedback. I'll try to pick it up, probably using your patch as a starting point.

Comment 13

[Florens Verschelde :fvsch]

Attachment: Rotate Icons exploration.svg

After trying it out locally, I wasn't 100% on board with the dotted icon for Rotate. Also showed it to a couple people, and one didn't recognize the icon as meaning "rotate" or suggesting movement.

We can stick to our initial design, but I tried a few other options with arrows for this icon.
Victoria, does any of these options look interesting to you?

Comment 14

[Victoria Wang [:victoria]]

Ah, I think I see what you mean. I appreciated how cleanly the dotted icon represents a binary change in state, but now I realize it feels like it's more about the previous rotation rather than the next rotation that will happen by clicking the button. And as you mention, the movement of arrows are better associated with the action of rotating. My favorite of your image is the 2nd of the 4. Will try to grab some more feedback from folks.

Comment 15

[Victoria Wang [:victoria]]

I've been thinking about this more and I think it would be fine to move forward with #2 of 4. Thanks Florens!

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/03e5be6ee800
Update RDM rotate and touch icons to a Photon style. r=gl

Comment 17

[Razvan Maries]

https://hg.mozilla.org/mozilla-central/rev/03e5be6ee800

Comment 18

[Victoria Wang [:victoria]]

Comment on attachment 9073354 [details]
Rotate Icons exploration.svg

Clearing review flag