Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DevTools right-toolbar icons: RDM and Frames #18

Closed
violasong opened this Issue Aug 23, 2018 · 20 comments

Comments

Projects
None yet
4 participants
@violasong
Copy link
Member

commented Aug 23, 2018

(Assigned to @yashjohar)

Yash submitted some great work for the RDM icon:
image

However, as @gabrielluong and I were looking at it some more, we realized that a bit more Photon-ness would be helpful to blend in better with the ••• and x icons. I worked on this quick-and-dirty variant that gives the tablet part a thicker line weight, with some negative space where the tablet meets the phone to provide a bit more separation:
image

Task 1: Would you mind making a new version of this icon with more polished negative spacing :D?
My version of this is pretty rough: rdm2.svg.zip

This icon looks good in context, except the frame button (which is visible by default on any page that has frames) now looks pretty awful next to it.

image

Task 2: Could you come up with ideas for a frame button that looks better?

@violasong violasong added the icon label Aug 23, 2018

@yashjohar

This comment has been minimized.

Copy link

commented Aug 24, 2018

The icon with negative spacing:
command-responsivemode-screenshot1
Some others I've been experimenting with:
1)
command-responsivemode-screenshot2
2)
command-responsivemode-screenshot3
Let me know what you think :)
Sorry about the delay. I'll start working on the frame button soon.

@yashjohar

This comment has been minimized.

Copy link

commented Aug 24, 2018

The original with negative spacing and phone overlapping completely:
command-responsivemode-screenshot4
(Slightly leaning towards this one: goes well with the existing devtools icons)

@violasong

This comment has been minimized.

Copy link
Member Author

commented Aug 28, 2018

Hi Yash, thanks so much for these new icon concepts! After looking at the various options, Martin and I are still liking the "icon with negative spacing" at the top of your first comment best because it looks most clearly like two devices, which seems to be the most straightforward concept (compared to the growing design, or complete overlap which is sort of in between growing and 2-devices.)

Are you making these in Sketch or Illustrator? If Sketch, I can resave the SVG in Illustrator for the cleaner code generation. After that we can go back to this bug for the implementation. There should still be time to get this into the next release, Firefox 63 :)

@yashjohar

This comment has been minimized.

Copy link

commented Aug 29, 2018

Hi Victoria. I've attached the 'negative spacing' icon (top most from my first comment) that I made in Sketch to the bug. Thanks!

@fvsch

This comment has been minimized.

Copy link
Member

commented Aug 30, 2018

For the frame-picker icon, I tried a few visual concepts. One thing I tried to do was make it a two-state icon, so that it can reflect if the feature is “inactive” (we’re inspecting the main document) or “active” (we’re inspecting a subdocument). I did alternative representations of state with partial black fills and with the blue highlight color (same as the RDM icon active state).

4 frame-picker icon design concepts

I tried to shy away from using the 3-part “frameset” metaphor, because as pointed out by Victoria it might be too outdated (frames and framesets were dropped in HTML5, only iframes remain), but looking at those options it might still be the better one. It’s also a less radical change for current users of this feature.

@violasong

This comment has been minimized.

Copy link
Member Author

commented Aug 30, 2018

Awesome concepts, and I love the idea of a two-state icon! I see what you mean about the frameset vs non-frameset ideas. I haven't used a iframe in so long, and when I see items in the frames dropdown they're usually a bunch of ads/trackers, so it's hard for me to know how most people think of this. I think this is a good time to ask for more feedback. I'll post it in Slack, and if you wanted to tweet a Twitter-native poll for this, we can retweet it from @FirefoxDevTools. To keep it simple, this is the set of icons I'll use to ask for feedback.

image

@violasong

This comment has been minimized.

Copy link
Member Author

commented Aug 30, 2018

(Re: twitter — I just remembered that native polls can't be in the same tweet as an image :P - I generally prefer embedded image, non-native poll, but the other way is fine too)

@violasong

This comment has been minimized.

Copy link
Member Author

commented Aug 30, 2018

the same image but horizontalized
image

@violasong

This comment has been minimized.

Copy link
Member Author

commented Aug 30, 2018

(conversation sort of moved back to slack for now :))

@martinbalfanz

This comment has been minimized.

Copy link

commented Aug 31, 2018

iFrames are still very relevant outside of ads/trackers, for example code playgrounds like codepen heavily rely on them (and often any kind of embedded content does, too).

That said, I don't feel concept 4 is outdated. Though, I have to admit I'm somewhat drawn to concept 3 as well.

For the active version, I think the coloring works best in concept 2 and 4 (highlighting a different part of the page). So I quickly tried this for concept 3 here

concept3-invert

Would need some refinement of course, but I think it could work as well.

@fvsch

This comment has been minimized.

Copy link
Member

commented Aug 31, 2018

twitter-poll

Feedback so far:

  1. There is a "A or C" camp, but also mentions that these might get confused with the RDM icon or the “Min Vid” icon (a previous Test Pilot experiment).
  2. There is "B or D" camp, with more love for B.
@fvsch

This comment has been minimized.

Copy link
Member

commented Aug 31, 2018

We landed the new RDM icon, but regressed the blue coloring when active. Or was that on purpose?
Edit: can be fixed by using fill: currentColor to inherit the blue color.

@martinbalfanz

This comment has been minimized.

Copy link

commented Aug 31, 2018

@fvsch definitely not purpose. Feel free to submit a patch or comment on Bugzilla 🙂

@violasong

This comment has been minimized.

Copy link
Member Author

commented Aug 31, 2018

@fvsch Gabe will be fixing the blue highlight issue. Thanks for making the new mockup!

@fvsch

This comment has been minimized.

Copy link
Member

commented Aug 31, 2018

Looking at the feedback we got on Twitter:

  • 40-50% are okay with the “frameset” option (B)
  • Some like one of the other concepts: frame in the corner, centered frame, or the mini-target concept

Every concept had some valid criticism.
A) may look like “enlarge / minimize the window”, or look like a RDM icon
B) may look like a “layout” tool
C) same as A, and may too busy or hard to read
D) too centered, maybe unclear

It’s not a perfect solution but we should probably go with the frameset option (B), because it will be a less radical change and has at least some users understanding the frameset metaphor. (The Codepen/JSFiddle analogy is a nice bonus too.) If we come up with a more elegant concept in the future, it can still be revisited (maybe if we put this tool inside different panels instead of in the toolbox).

@fvsch

This comment has been minimized.

Copy link
Member

commented Sep 1, 2018

I started implementation work using option B (the “frameset” one), in bug 1488012.
We can still replace the SVG if we decide on a different design.

This is what it looks like:

No iframe selected:
screen shot

Iframe selected:
screen shot

There’s a bit of visual mismatch when we have other icons enabled. This may not be a problem if we plan to update more icons progressively. If it is a problem, maybe we should stick to non-Photon 1px strokes?

screen shot 2018-09-01 at 18 42 05

screen shot 2018-09-01 at 18 42 33

@fvsch

This comment has been minimized.

Copy link
Member

commented Sep 1, 2018

/cc @violasong for a UI review :)

@martinbalfanz

This comment has been minimized.

Copy link

commented Sep 3, 2018

B is the right choice, let's stick to it.

And yes, next to other icons it doesn't look ideal, but photonizing all the icons is definitely what we're trying to do right now. Maybe we manage a bigger batch for the next release :)

@violasong

This comment has been minimized.

Copy link
Member Author

commented Sep 4, 2018

Thank you @fvsch, I agree about sticking with B!

And yes, we can fix the other icons later, especially since some of them need a little rethinking or might need to be removed.

(Just for fun, since I started working on it last week, I'm sharing an idea I had for C - but of course it has the same issues as C with being a little too complex and it would also compete with the Inspector icon.)
image

@fvsch

This comment has been minimized.

Copy link
Member

commented Dec 11, 2018

The new RDM and frame picker icons shipped in nightly in the last 2 cycles, so we can close this issue.

@fvsch fvsch closed this Dec 11, 2018

@fvsch fvsch referenced this issue Jan 10, 2019

Open

Photonize DevTools icons #47

4 of 9 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.