Closed Bug 1535254 Opened 10 months ago Closed 7 months ago

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

Categories

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

enhancement

Tracking

(firefox69 fixed)

RESOLVED FIXED
Firefox 69
Tracking Status
firefox69 --- fixed

People

(Reporter: fvsch, Assigned: fvsch)

Details

Attachments

(5 files)

Severity: normal → enhancement
Priority: -- → P3
Assignee: nobody → yash.johar1992
Status: NEW → ASSIGNED
Attached image rotate-viewport.svg

icon needs to be saved/re-saved using Illustrator

Attached image touch-events.svg

icon needs to be saved/re-saved using Illustrator

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>

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.

Flags: needinfo?(victoria)

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

Flags: needinfo?(victoria)

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.

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.

Flags: needinfo?(yash.johar1992)

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

Flags: needinfo?(yash.johar1992)

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

Flags: needinfo?(yash.johar1992)

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.

Flags: needinfo?(yash.johar1992)

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

Assignee: yash.johar1992 → florens

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?

Attachment #9073354 - Flags: ui-review?(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.

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

Pushed by florens@fvsch.com:
https://hg.mozilla.org/integration/autoland/rev/03e5be6ee800
Update RDM rotate and touch icons to a Photon style. r=gl
Status: ASSIGNED → RESOLVED
Closed: 7 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 69
Comment on attachment 9073354 [details]
Rotate Icons exploration.svg

Clearing review flag
Attachment #9073354 - Flags: ui-review?(victoria) → ui-review+
You need to log in before you can comment on or make changes to this bug.