profile
viewpoint
Victoria Wang violasong Mozilla Portland twitter.com/violasong UX Designer for Firefox DevTools

neocities/neocities 675

Neocities.org - the web site. The entire thing. Yep, we're completely open source.

violasong/timeconverter 3

A time zone converter.

violasong/MGTwitterEngine 2

Objective-C Twitter integration library for Mac OS X and iPhone. Official repository.

violasong/pwitter 2

Cocoa Twitter Client

violasong/photon 1

Firefox’s Photon Design System.

violasong/gecko-dev 0

Read-only Git mirror of the Mercurial gecko repositories at https://hg.mozilla.org. How to contribute: http://bit.ly/contribute-code

violasong/GSOC2020 0

Mozilla and GSOC 2020

issue commentfirefox-devtools/ux

[Inspector - Rule View] Adding a property to a rule

Awesome, thanks for these! Currently, I'm leaning towards the line only, whether dotted or not - just for the smallest hint of "here." I think the + cursor is more technically correct, and your reasoning is good, but I feel it's a bit too unfamiliar in practice. Going to CC some folks for more opinions :) @martinbalfanz @gabrielluong @tigleym

Note: I'll be out of office next week - will write more when I return.

nchevobbe

comment created time in 9 days

issue openedfirefox-devtools/ux

Improve box model section

This is part of a larger project to improve the entire Layout panel.

I'm hoping to make the box model always-showing and at the top of the Layout panel, with only the most important box model-related properties displayed next to it. Keeping it compact means more room to see flexbox/Grid, and in the future, issues, page info, etc.

First draft tweet — lots of helpful mixed feedback. Several asked not to remove features.

Second draft in progress, more along the lines of this:

image

Figma source file — feel free to make a copy.

created time in 12 days

issue commentfirefox-devtools/ux

[Inspector - Rule View] Adding a property to a rule

When playing with the proto, I had this "unconscious" feeling that something was not right when seeing the add indicator appearing and disappearing when hovering horizontally over a property line: your thought clarify my feeling and, I think, solve the issue Victoria. I'll work on the next iteration. It will take a bit longer than usual, since I need to rebase and fix a patch about the editor line-wrap option.

Sounds good :D

Another suggestion received: Leave out the +, so basically going back to Florens' Mar 2 mockup but with the solid light gray line. Maybe that could be enough! Seems like it could feel a bit lacking when the line is at the top or bottom.

nchevobbe

comment created time in 13 days

issue commentfirefox-devtools/ux

[Inspector - Rule View] Adding a property to a rule

Tweeted

A few folks pointed out the --+ looks like minus next to the plus, which I realize is indeed confusing.

Nice mockup from Paul Rumkin with full-width line similar to previous ideas. I don't think we need the circle on the end but I like the general idea.

image

Here's an iteration from me - full line of lighter color:

image

Someone did mention that the indicator seemed like a tiny button that had to be hit, which is concerning. I'll ask more directly about this for a future feedback round.

Good polish thoughts from @fvsch

  • when hovering the first line after the opening brace -> indicator above first declaration
  • when hovering the last line after the closing brace -> indicator below the last declaration

A thought I had about the hover target - everything inside this blue overlay should not trigger the indicator. The text hover boxes can be a little 'greedy' since there's so much room for the add-property hover box. image

nchevobbe

comment created time in 14 days

issue commentfirefox-devtools/ux

[Inspector - Rule View] Adding a property to a rule

Okay :) if you don't mind, let's try adding border-bottom: 1px solid hsl(210.9, 100%, 86.3%) (or something similar)

Also, would you mind changing the overall font size to .85em; (or whatever matches the default font size in DevTools?)

nchevobbe

comment created time in 15 days

issue commentfirefox-devtools/ux

[Inspector - Rule View] Adding a property to a rule

Thank you Luca, this is great! I see what you mean about keeping the dotted underline - it's not as bad as I thought. I think I slightly prefer the color change because I'm hoping we standardize on it for hovering over things that will highlight something in the page (though the design of it probably needs to be a bit higher contrast than it is currently).

Victoria, playing with the proto, I realized that once an input is visible, on mouse over the + indicator shows. I think it should not, since a click would just hide the input. Do you agree? Will work on an iteration to show you what I mean.

Agreed, I had this thought as well.

Mind if I tweet your next prototype on @FirefoxDevTools and include your twitter handle? It would say something like:

Feedback wanted: We want to allow adding CSS properties anywhere in a rule, and show a subtle indicator for it on hover. Here's a prototype by @luc4leone. How does the indicator feel? (link)

nchevobbe

comment created time in 16 days

push eventfirefox-devtools/firefox-devtools.github.io

Victoria Wang

commit sha badc3f1d12ee3f30dffa194c25fbc589ffc482eb

Replace slack links with Element links

view details

push time in 19 days

issue commentfirefox-devtools/ux

Application Panel + SW Panel UX Review

That sounds good to me!

Mockup: image

digitarald

comment created time in 21 days

issue commentfirefox-devtools/ux

[Inspector - Rule View] Adding a property to a rule

Thanks Luca! Enjoy your vacation :D!

nchevobbe

comment created time in 21 days

issue commentfirefox-devtools/ux

[Inspector - Rule View] Adding a property to a rule

Thanks Luca for the new prototype and your thoughts on this!

Some folks mentioned that the indicator at the end of the line seemed a bit confusing, but I'm going to spread it around and see what others think.

We might want to preserve the existing behavior where clicking anywhere outside the input hides the input.

I saw you removed the indicator on checkbox hover - it would be great to remove it on text hover as well.

If you have extra time, I'd love to see a prototype of "+ between lines with shorter dotted line," with new hover decoration for the text of just a background color of #EEF9FF (so that it doesn't clash with the indicator)

nchevobbe

comment created time in 21 days

issue commentfirefox-devtools/ux

Application Panel + SW Panel UX Review

That or the outline version. Comparing the two below, I prefer the outline since it better matches the weight of other icons. The other one is a bit heavy.

image

digitarald

comment created time in 25 days

issue commentfirefox-devtools/ux

[Inspector - Rule View] Adding a property to a rule

Couple more ideas for putting the indicator between lines

  • + with shorter dotted line so it doesn't get mistaken with the hover underline
  • + with short gradient line
  • + with arrow head

image

nchevobbe

comment created time in 25 days

issue commentfirefox-devtools/ux

[Inspector - Rule View] Adding a property to a rule

This prototype is awesome - thank you @luc4leone! I love how it invites interaction.

I see that this prototype requires clicking on the + to add. I had actually been thinking you could still click anywhere. I.e. the + would just be a visual indicator/placeholder, not a button. I think if we lighten it up a bit to #b1b1b3 that would help with this.

It seems best to keep the old click behavior as I feel people will be used to that flexibility.

One other thought was that the + wouldn't show up if you hover over the text/checkbox.

nchevobbe

comment created time in a month

issue commentfirefox-devtools/ux

[Inspector - Rule View] Adding a property to a rule

Yep, will be great to see it in action!

This good-first-bug is just for the indicator, and not for adding anywhere in the rule. So we would start with just an indicator in the last row. For the first pass, I'd err on the side of something subtle as to not distract those who are used to all the non-indicating UIs.

This would be consistent with my previous proposal. It's little awkward when stuck to just the last row, but would be safe enough.

image

I kind of expect to see the plus sign here, but it would be too weird to be outside of the brace.

image

Braceless: Not sure about this — since it looks less like CSS it would be a bit less newcomer-friendly. Would require more investigation.

image

nchevobbe

comment created time in a month

issue commentfirefox-devtools/ux

Review icon used for node reps

Idea:

  1. Hover over element, property, font-name, etc (no icon needed): highlight in page and use light blue background-hover color. Current example: Markup, Fonts Panel. Future example: selector names, properties

  2. In cases outside of Rules, hover to highlight, click to jump to first matching element in Inspector markup (not sure if we need the persist highlight feature in Rules.)

nchevobbe

comment created time in a month

issue openedfirefox-devtools/profiler

Profiler toolbar button should have a brighter blue state in dark theme

It's a bit hard to see right now

image

We should match this blue, which is Photon Blue 40

Screen Shot 2020-07-08 at 5 29 02 PM

created time in a month

issue openedfirefox-devtools/profiler

Profiler popup is too tall when accessed from a large toolbar overflow menu

I have 11 items in my overflow menu. When I navigate to Profiler from it, it looks like this:

image

created time in a month

issue openedfirefox-devtools/profiler

DevTools Performance tab - spacing polish

We should have less top spacing when DevTools is short. For the Accessibility welcome panel (in stable only) the semi-responsive way we did this was padding-top: 15vh;. For the Performance tab I might suggest

.perf-devtools .perf-button-container {
    margin-top: 10vh;
}

When DevTools is docked to side, we should have padding of 10vh on each side. Also, we can have the 'Settings' label be on its own line. This is how this could look:

image

created time in a month

issue commentfirefox-devtools/ux

[Inspector - Rule View] Adding a property to a rule

image

Example with + between the lines. The horizontal alignment is a little trickier here when lines widths don't match

nchevobbe

comment created time in a month

issue commentfirefox-devtools/ux

[Inspector - Rule View] Adding a property to a rule

Sorry to get to this thread so late. I really like where these ideas are going!

And I'm glad Sebastian mentioned the idea of adding a property anywhere within a rule. As a parity issue, it might be more important than the original issue :).

With the current design, the dotted line might clash a bit with the dotted underline on hovering properties/values (however we might want to change the latter).

Maybe we could just do the subtle + sign, not as a button but an indicator.

image

nchevobbe

comment created time in a month

issue commentfirefox-devtools/ux

[Debugger] Onboarding for Map Scopes

(Unused) example of onboarding styling we could use

image

digitarald

comment created time in a month

issue closedfirefox-devtools/ux

Inline error annotations in Debugger

https://phabricator.services.mozilla.com/D71337 is adding inline error annotations.

If an error is thrown the line gets annotated with an error icon that shows the error message + stack on hover.

The same mechanism could eventually also map console error and warnings to console locations to show them in context when loading a source and stepping through the code.

The idea would be to unblock landing the work soon and to file follow up bugs for UI polish.

@jasonLaster brought up a point, that the expression could be red underlined without an icon. Maybe the styling could be similar to matched strings, but in red?

image

closed time in a month

digitarald

issue commentfirefox-devtools/ux

Inline error annotations in Debugger

Looks like the associated bug is fixed? Closing unless we need a new polish bug.

digitarald

comment created time in a month

issue closedfirefox-devtools/ux

Clarify disabled-pausing state

We did some work, like fading out the breakpoint panels, to ensure disabled pausing is clearly communicated.

Seeing reports like https://twitter.com/__jakub_g/status/1260912327702073347 there is more work to do it seems.

Thoughts:

  • Is it just an expectation to look for icons users might be more used to, like Chrome's; then we should just get closer to that icon shape/color
  • As part of "footgun indicator" discussion, we shared mockups of "Pausing is disabled" warning bar similar to the "Debugger is paused"

cc @violasong @darkwing @fvsch @janodvarko

closed time in a month

digitarald

issue commentfirefox-devtools/ux

Clarify disabled-pausing state

Closing since this graduated to bugzilla :)

digitarald

comment created time in a month

issue commentfirefox-devtools/ux

Network table design refresh

(Cross-posted from chat)

Took a first try at the 'big row' layout for side-dock https://www.figma.com/file/rTeLZ1cmvHbgfJt91AloNi/DevTools-Network-Details-Pane-table-redesign-V?node-id=755%3A0

It gives us extra room if we want to show domain/path or size, but other than that, I don't think it buys us much. For the condensed table MVP, I'd suggest we just stay with 3 column, as it looks fine at this narrow width.

violasong

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

I don't see anything related on the mockups. Where should I look?

I haven't made a full mockup of this but here's what I'm thinking: image

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/profiler

Balance color contrast for categories

Re: flame graph blue border, multiple sections next to each other could be combined into a single box

image

canova

comment created time in 2 months

issue commentfirefox-devtools/profiler

Balance color contrast for categories

I think it would be good to fix this for both the flame chart and this graph, which can look very muted especially with the current selected highlight:

image

For the selected row highlight, we can try a left-border instead of light blue background effect.

For the categories, I think we should try full opacity color for the inactive state with a stronger effect for active.

I like the general idea of Chrome's blue highlight:

image

Here are some variants -

  1. current
  2. darker fill
  3. blue glow
  4. darker fill + arrow indicator
  5. darker fill + bounding box

image

Simiarly, with the flame graph, we could do a darker color:

image

Or something with a blue border: image

If we're using darker fills for a highlight, we'd want to adjust all the non-yellow colors to be a bit lighter in order to create distinctively darker versions.

canova

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

Mockup with new revisions:

  • Removed "URL/Method" header
  • Added Clear button
  • Proposing + as its toolbar button
janodvarko

comment created time in 3 months

issue commentfirefox-devtools/ux

Network table design refresh

Cool, I'd be happy to explore the thick row idea. It would be great for dock-to-side mode. Also it could potentially fit more info than this simplified table 🤔

violasong

comment created time in 3 months

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

Sounds great! Nice to see the blocking behavior already recognizes line breaks so nicely.

janodvarko

comment created time in 3 months

issue commentfirefox-devtools/ux

Make toolbox tab spacing a bit tighter

Yes, that would be great!

fvsch

comment created time in 3 months

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

Made some small changes based on the latest feedback. Also grabbed more feedback from twitter as a safety check.

  • Added "payload" placeholder text
  • Made the Send button a little larger
  • Autocomplete suggestion for known header names would be great
  • Moving the Send button at top was suggested, but I think bottom is a bit better for the user flow.
  • Someone asked if we really need plus buttons if new fields appear automatically. Probably not, assuming we also have god support for pasting in a bunch of headers. I've hidden them for now.

I think this mockup is feeling pretty solid :) - let me know if there's anything else I should do!

janodvarko

comment created time in 3 months

issue commentfirefox-devtools/ux

Network table design refresh

@janodvarko

Does the left side bar impacts the column list when opened too?

Good question! I'm not sure. The left sidebar can be smaller, so there's more room for the full table. However, our condensed table is useful enough that maybe we can err on the side of showing it here too. @digitarald - do you have any insights on this?

violasong

comment created time in 3 months

issue commentfirefox-devtools/ux

Improve design for community site (firefox-dev.tools)

I love the three columns idea! The scroll tabs example is neat but I think in this case, it would be nice to be able to see all the content at once.

I was actually talking about this bar rather than the section (but great that you improved it :D)

image

Maybe it could mention the 3 ways of contributing.

violasong

comment created time in 3 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

One aspect to think about is long header names and how to align the values:

Ah, this screenshot is unfortunate; makes me think we should full-length wrap the values.

For super long URLs, an idea I just talked about with @nchevobbe regarding the Send Request Figma was limiting it to a certain number of rows (5?), and adding scroll overflow once it goes over.

janodvarko

comment created time in 3 months

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

Collecting feedback on the latest mockups

janodvarko

comment created time in 3 months

issue commentfirefox-devtools/ux

Clarify disabled-pausing state

Ah yes! That background would be good

image

digitarald

comment created time in 3 months

issue commentfirefox-devtools/ux

Clarify disabled-pausing state

Some quick sketches image image image image

I think I actually like the blue one on top best because it's a simple on-off of this button. The red introduces an extra layer of confusion because it begins to illustrate the double negative of 'stopping the stops.'

digitarald

comment created time in 3 months

issue commentfirefox-devtools/ux

Clarify disabled-pausing state

Here's the mockup of the warning bar: https://github.com/firefox-devtools/debugger/issues/6673#issuecomment-623780401

digitarald

comment created time in 3 months

issue commentfirefox-devtools/ux

Improve design for community site (firefox-dev.tools)

This is looking great! Love the look of the What's New with feature highlights. Those icons are great too!

Contribute bar: Maybe this could be a bit more inviting and highlight the options of Code, Design, Give Feedback?

CCing @fvsch in case they have thoughts :)

violasong

comment created time in 3 months

more