DevTools right-toolbar icons: RDM and Frames

[violasong]

(Assigned to @yashjohar)

Yash submitted some great work for the RDM icon:

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:

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.

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

[yashjohar]

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

[yashjohar]

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

[violasong]

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]

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]

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).

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]

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.

[violasong]

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

the same image but horizontalized

[violasong]

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

[martinbalfanz]

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

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

[fvsch]

• Twitter post here.
• Sketch source there.

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]

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]

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

[violasong]

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

[fvsch]

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]

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:

Iframe selected:

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?

[fvsch]

/cc @violasong for a UI review :)

[martinbalfanz]

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]

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.)

[fvsch]

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