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

neocities/neocities 651

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

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 3 hours

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 4 days

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 5 days

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 5 days

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 6 days

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 6 days

issue commentfirefox-devtools/ux

Make toolbox tab spacing a bit tighter

Yes, that would be great!

fvsch

comment created time in 6 days

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 10 days

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 10 days

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 11 days

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 12 days

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

Collecting feedback on the latest mockups

janodvarko

comment created time in 13 days

issue commentfirefox-devtools/ux

Clarify disabled-pausing state

Ah yes! That background would be good

image

digitarald

comment created time in 13 days

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 14 days

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 18 days

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 19 days

issue commentfirefox-devtools/ux

Inline error annotations in Debugger

This looks good! I had been thinking of making the tooltip black on white, but I think using the red text color helps relate it to the error row.

digitarald

comment created time in a month

issue commentfirefox-devtools/debugger

Visually distinguish the skip-all-pausing state better

Sorry for the long delay on this!

Here's a mockup.

image

  1. Change Paused on Breakpoint to have the icon on the left
  2. Yellow "Breakpoints deactivated" banner
  3. Alternate idea: Gray "Breakpoints deactivated" banner - subtler look, but goes with the "deactivation" idea

These banners might make it unnecessary to have a gray color over the entire breakpoints section. It would look nicer to go back to just disabled checkboxes.

cc @digitarald @fvsch

digitarald

comment created time in a month

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

Working on some polish for this: https://www.figma.com/file/IWg7AtlvK6HCEYDfK0vGon/Send-Request-Sidebar-V?node-id=40%3A2

janodvarko

comment created time in a month

issue commentfirefox-devtools/ux

[Toolbox] "Active Footgun" icon in panel tabs

Either way, it would be great to have tooltips on any of the footgun icons.

digitarald

comment created time in a month

issue commentfirefox-devtools/ux

[Toolbox] "Active Footgun" icon in panel tabs

This invision doc has the latest styles

digitarald

comment created time in a month

issue commentfirefox-devtools/ux

[Toolbox] "Active Footgun" icon in panel tabs

I was thinking it would look like this:

image

digitarald

comment created time in a month

issue commentfirefox-devtools/ux

[Toolbox] "Active Footgun" icon in panel tabs

For disabled, what about a yellow warning sign? Same as the Network warning sign for throttling. To me red signals that something is wrong, but since disabling is from user action, it doesn't seem to need as much prominence. (Just checked and Chrome also uses a yellow warning sign for disabled JS.)

digitarald

comment created time in a month

issue commentfirefox-devtools/ux

Inline error annotations in Debugger

Ah, line background seems good to me. Looks like it might be a slightly different color than the Console error background at the moment - would be great to match it.

The tooltip with red styling looks a bit odd when juxtaposed with the other red row. I'd suggest the regular styling for that.

It would be good to give the token a hover background. We can use that same yellow for now, though it should probably be revisited separately (should probably be a blue instead).

digitarald

comment created time in a month

issue commentfirefox-devtools/ux

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

For ease of maintenance, seems like it would be best to try to keep this page stable, and link to other places (release notes, twitter) where new things are announced.

Primary CTA being downloading DevEdition makes sense.

A new feature to add: Compatibility panel!

violasong

comment created time in a month

issue commentfirefox-devtools/ux

Inline error annotations in Debugger

Cool, looking good!

I see the curliness matches VSCode but it seems a bit more dramatic than it needs to be - I can experiment with a more minimal look.

The red background was making me think these were errors that would keep the app from running - if they're not that major then removing it makes sense.

Comparisons:

VSCode image

Xcode image

goog docs image

digitarald

comment created time in a month

issue commentfirefox-devtools/ux

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

Awesome! Re: What's New section: I think we might want to call this Highlights, and list maybe 8-10 different features with icons rather than big screenshots. Or maybe 2 things could get the big screenshot treatment, and the rest could be listed underneath.

It would be cool to focus on things that only Firefox has, so basically:

  • Inactive CSS
  • Changes
  • Grid/Flex
  • Fonts
  • Accessibility
  • 1-2 Console features
  • 1-2 Debugger feature
  • 1 Network features

cc: @digitarald for ideas of what to feature

violasong

comment created time in a month

Pull request review commentfirefox-devtools/firefox-devtools.github.io

Improve design for community site

 Help us maintain an inclusive environment by following our [code of conduct](COD  # About DevTools +## Highlights++* [Inactive CSS](https://hacks.mozilla.org/2019/10/firefox-70-a-bountiful-release-for-all/#developertools):+Firefox DevTools now grays out CSS declarations that don’t have an effect on the page. When you hover over the info icon, you’ll see a useful message about why the CSS is not being applied, including a hint about how to fix the problem.+![Inactive_CSS](https://www.mozilla.org/media/img/firefox/developer/hero-inactive-css.40a2e0b8ddb1.png) ++* [Master Gird](https://mozilladevelopers.github.io/playground/css-grid/):

Ah, noticed a typo: this should say Grid not Gird

YoonSuhyeok

comment created time in a month

Pull request review commentfirefox-devtools/firefox-devtools.github.io

Improve design for community site

 Help us maintain an inclusive environment by following our [code of conduct](COD  # About DevTools +## Highlights++* [Inactive CSS](https://hacks.mozilla.org/2019/10/firefox-70-a-bountiful-release-for-all/#developertools):+Firefox DevTools now grays out CSS declarations that don’t have an effect on the page. When you hover over the info icon, you’ll see a useful message about why the CSS is not being applied, including a hint about how to fix the problem.+![Inactive_CSS](https://www.mozilla.org/media/img/firefox/developer/hero-inactive-css.40a2e0b8ddb1.png) ++* [Master Gird](https://mozilladevelopers.github.io/playground/css-grid/):+Grid Firefox is the only browser with tools built specifically for building and designing with CSS Grid. These tools allow you to visualize the grid, display associated area names, preview transformations on the grid and much more.

Should remove extra "Grid" text at the beginning of this sentence

YoonSuhyeok

comment created time in a month

Pull request review commentfirefox-devtools/firefox-devtools.github.io

Improve design for community site

 Help us maintain an inclusive environment by following our [code of conduct](COD  # About DevTools +## Highlights++* [Inactive CSS](https://hacks.mozilla.org/2019/10/firefox-70-a-bountiful-release-for-all/#developertools):+Firefox DevTools now grays out CSS declarations that don’t have an effect on the page. When you hover over the info icon, you’ll see a useful message about why the CSS is not being applied, including a hint about how to fix the problem.+![Inactive_CSS](https://www.mozilla.org/media/img/firefox/developer/hero-inactive-css.40a2e0b8ddb1.png) 

Let's remove all the images for now, until we know what the design will be with the other work that's happening.

YoonSuhyeok

comment created time in a month

issue commentfirefox-devtools/ux

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

@afnizarnur: This wireframe is looking great! A couple thoughts I had -

  • Header: This could be a bit smaller, since DevTools tends to have a more pragmatic feel than the usual product site.
  • What's new: I think we may want to have a greater number of smaller sections in here to highlight what's special in each of the main panels. A link to download Firefox should also be here somewhere.
  • How to Contribute: Looks great!
  • Stay Updated: Nice, I like this! Maybe it should be higher up on the page. If users aren't here to contribute, the next best step for them is to follow us on one of these channels.
  • The Team/Footer: These look great!
violasong

comment created time in a month

issue closedfirefox-devtools/ux

Combined Initiator/Cause column

Follow up from https://github.com/firefox-devtools/ux/issues/87#issuecomment-517502725 and bug 1592535#c2.

cc @bomsy @Transfusion @janodvarko @fvsch

Assumptions:

  • Chrome doesn't have Cause but has Type and Initiator
  • Cause is often redundant with Type (which also has more detail)

Example requests:

image

Github (Interesting to note here is that the images should also have stacks, but CSS stacks are not supported atm)

image

Airtable XHR requests

Proposed information hierarchy would be 1st Initiator stack and 2nd Cause, which leads to the following formatting:

  • Without stack: cause
  • With stack: location.js:line:column (cause)

This already expects that (cause) and longer locations will overflow on small spaces; which should be OK as the initial filename + tooltip should still be enough to orient yourself.

Decision

Accepted the proposed cause/location.js:line:column (cause) format.

closed time in a month

digitarald

issue commentfirefox-devtools/ux

Combined Initiator/Cause column

Closing as completed

digitarald

comment created time in a month

issue commentfirefox-devtools/ux

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

Also, thanks @kartik918 - yes, we're sticking with Jekyll for now and I think your design ideas sound great.

violasong

comment created time in a month

issue commentfirefox-devtools/ux

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

Hi @afnizarnur, thanks for this great wireframe! I've been busy but will respond soon, hopefully later this week. @YoonSuhyeok, I'll soon respond to your pull requests as well.

violasong

comment created time in a month

issue openedfirefox-devtools/ux

Network table design refresh

Mockup in progress

Screen Shot 2020-04-21 at 3 45 46 PM

created time in a month

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

+1, I actually had that in my wireframes as wider option. I just didn't think about making the first input smaller, which is a good idea.

Yep, that looked good - I think we could also make the association between key/value fields a bit stronger, perhaps like one of these:

image

Also, seems like (with the current min-width on this sidebar) we have enough room to always do it side-by-side.

janodvarko

comment created time in a month

Pull request review commentfirefox-devtools/firefox-devtools.github.io

add image link, edit readme file(Highlites)

 Help us maintain an inclusive environment by following our [code of conduct](COD  # About DevTools +## Highlights++* [Inactive CSS](https://hacks.mozilla.org/2019/10/firefox-70-a-bountiful-release-for-all/#developertools):+ Firefox DevTools now grays out CSS declarations that don’t have an effect on the page. When you hover over the info icon, you’ll see a useful message about why the CSS is not being applied, including a hint about how to fix the problem.+ ![Inactive_CSS](https://www.mozilla.org/media/img/firefox/developer/hero-inactive-css.40a2e0b8ddb1.png) ++* [Master CSS](https://mozilladevelopers.github.io/playground/css-grid/):+ Grid Firefox is the only browser with tools built specifically for building and designing with CSS Grid. These tools allow you to visualize the grid, display associated area names, preview transformations on the grid and much more.

The word "Grid" should be inside the link :)

YoonSuhyeok

comment created time in 2 months

Pull request review commentfirefox-devtools/firefox-devtools.github.io

add image link, edit readme file(Highlites)

 Help us maintain an inclusive environment by following our [code of conduct](COD  # About DevTools +## Highlights++* [Inactive CSS](https://hacks.mozilla.org/2019/10/firefox-70-a-bountiful-release-for-all/#developertools):+ Firefox DevTools now grays out CSS declarations that don’t have an effect on the page. When you hover over the info icon, you’ll see a useful message about why the CSS is not being applied, including a hint about how to fix the problem.+ ![Inactive_CSS](https://www.mozilla.org/media/img/firefox/developer/hero-inactive-css.40a2e0b8ddb1.png) 

Thanks for trying out these images! I think some more graphic design work needs to happen for them to work with this page, however. Let's leave them out of this patch for now.

YoonSuhyeok

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

Is the idea behind the checkboxes that we would now save your inputs between sessions, and allow you to disable the ones you're not currently using?

And sounds like we'll be moving the form to the left sidebar? Is this because it's helpful to be able to see the right sidebar at the same time?

It would be nice to have a bit more of a visual connection between the param and value fields, like what's in the prior art screens. It would be nice to show the columns on one line always, though if we're putting this in the left sidebar, that might be more likely to get too limited in space. But something like this could be nice:

[________] : [_________________]

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

Hm, right after posting this I realized it's probably too much fanciness as it obscures basic copy paste, like if someone just wanted to grab the times part of that timestamp.

So the other option is there's just an area on the right side saved for the icons, and the text would wrap before getting there.

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

I like that idea, out of curiosity how would it look for headers that have the warning icons (set-Cookie in this example)?

Good point. I realized I also didn't work out how the hovering would work on a long row.

One quick idea: buttons float on top on hover, like in Copy Rules:

image

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

Might also work if we expand it to a full URL when the user expands this section. If we do a proper line-break (not like now), 1000+ character URLs will take up a lot of space.

I see what you mean, there needs to be some level of truncation at some point :D

This could work, though the expanded query string part could end up being pretty massive

image

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

One thing I am not sure about is the shortened labels ("Blocking" is less descriptive than "Content Blocking") and other languages will vary in length as well. What's the strategy to make this responsive and overflow in sensible ways?

Ah, I see. I'll look at this some more. Here's one thing we can do with the alignment, though we don't do this anywhere else.

image

Should this URL be limited in lines, using line-clamp?

I thought we were saying that the full URL is important here, as this is the only place to see the whole thing (besides the query string, but that's an extra step and kind of different).

janodvarko

comment created time in 2 months

Pull request review commentfirefox-devtools/firefox-devtools.github.io

Add Firefox advantages to site

 Help us maintain an inclusive environment by following our [code of conduct](COD  # About DevTools +## Firefox Advantages++The browser made for developers+All the latest developer tools in beta, plus experimental features like the Multi-line Console Editor and WebSocket Inspector.

I think we can leave out this line because it's more about DevEdition rather than the tools

YoonSuhyeok

comment created time in 2 months

Pull request review commentfirefox-devtools/firefox-devtools.github.io

Add Firefox advantages to site

 Help us maintain an inclusive environment by following our [code of conduct](COD  # About DevTools +## Firefox Advantages++The browser made for developers+All the latest developer tools in beta, plus experimental features like the Multi-line Console Editor and WebSocket Inspector.++* [Inactive CSS](https://hacks.mozilla.org/2019/10/firefox-70-a-bountiful-release-for-all/#developertools)+Firefox DevTools now grays out CSS declarations that don’t have an effect on the page. When you hover over the info icon, you’ll see a useful message about why the CSS is not being applied, including a hint about how to fix the problem.+* [Firefox DevTools](https://mozilladevelopers.github.io/playground/debugger/)+The new Firefox DevTools are powerful, flexible, and best of all, hackable. This includes a best-in-class JavaScript debugger, which can target multiple browsers and is built in React and Redux

I think we can remove this point since it doesn't really talk about an actual feature. I'll have to think about what we can do to highlight specialties of our Debugger.

YoonSuhyeok

comment created time in 2 months

Pull request review commentfirefox-devtools/firefox-devtools.github.io

Add Firefox advantages to site

 Help us maintain an inclusive environment by following our [code of conduct](COD  # About DevTools +## Firefox Advantages++The browser made for developers+All the latest developer tools in beta, plus experimental features like the Multi-line Console Editor and WebSocket Inspector.++* [Inactive CSS](https://hacks.mozilla.org/2019/10/firefox-70-a-bountiful-release-for-all/#developertools)

These bullet points could use a colon : after each of the feature names

YoonSuhyeok

comment created time in 2 months

Pull request review commentfirefox-devtools/firefox-devtools.github.io

Add Firefox advantages to site

 Help us maintain an inclusive environment by following our [code of conduct](COD  # About DevTools +## Firefox Advantages

I think we can rename this to just Highlights so it sounds more neutral.

YoonSuhyeok

comment created time in 2 months

pull request commentfirefox-devtools/firefox-devtools.github.io

Add Firefox advantages to site

Hi YoonSuhyeok! Thanks for this pull request! This looks like a great start. I was imagining something more graphical that would require design work, but for now, I think this text from the DevEdition site is a good idea!

I'll do a review and add some comments.

YoonSuhyeok

comment created time in 2 months

issue closedfirefox-devtools/ux

Better onboarding for new contributors

Update (December 31): Join me on Slack to follow along and help with the UX process!

Checklist: firefox-dev.tools

Checklist: Contributor Documentation

  • [x] Refresh docs intro text
  • [x] Refresh Getting Started text
  • [x] Refresh Build page
  • [x] Review other Firefox Contributor docs
  • [x] Review docs feedback
  • [ ] Expand UI Review docs

Original description:

We need an initial lightweight solution for better onboarding docs/tutorials. (I'm thinking of this like an MVP - something that we can get done this month.)

What would this look like? Just changes to the introductory text on our docs or website? Or do we need to add an FAQs and troubleshooting page? Feedback needed from both those who mentor new contributors and contributors of any experience level :).

closed time in 2 months

violasong

issue commentfirefox-devtools/ux

Better onboarding for new contributors

Thanks Honza and Sylvestre :)

Since most of the work is done, I'm going to close this issue. I created a new one for this remaining task: Improve design for community site (firefox-dev.tools)

violasong

comment created time in 2 months

issue openedfirefox-devtools/ux

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

(Following up from contributor onboarding work.)

  • Something simple that matches other Mozilla sites (see: https://www.mozilla.org/en-US/firefox/developer/, https://extensionworkshop.com/)
  • There could be a landing page-like section on the homepage that shows a images of new features. We don't currently have organized info on why one should use Firefox DevTools

created time in 2 months

issue closedfirefox-devtools/ux

[Console] Eager Evaluation UI

PRD - Meta bug

Initial UI is landing in https://phabricator.services.mozilla.com/D58842 . Lets review it to polish the rough edges while it rides the 74 train, and file follow up polish for later.

cc @jasonLaster @nchevobbe @janodvarko @bhackett1024

closed time in 2 months

digitarald

issue commentfirefox-devtools/ux

[Console] Eager Evaluation UI

Closing this issue, as I think any remaining tweaks are all in bugzilla. Congrats all on the release!

digitarald

comment created time in 2 months

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

Victoria Wang

commit sha 722d4b1fdff5b827dda2d235985c5ccc66292820

Updated other docs link

view details

push time in 2 months

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

Victoria Wang

commit sha aa394038312c0513cf2515d259a83662131b06ec

Updated contributor docs link

view details

push time in 2 months

issue commentfirefox-devtools/ux

Better onboarding for new contributors

Landed new beginners guide! https://firefox-source-docs.mozilla.org/devtools/getting-started/README.html

Remaining tasks: Clean up doc index https://bugzilla.mozilla.org/show_bug.cgi?id=1628516 Update links to docs https://bugzilla.mozilla.org/show_bug.cgi?id=1628599

violasong

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

Mockup with:

  • Harald's last suggestion for error message. This de-emphasizes the error and makes it more a part of the summary rather than an extra section. Sounds like that's what we want?
  • A more typically-sized URL with no params, shown in the style of the query param examples
  • Smaller toggle for switching to raw

image

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

RFC: unifying syntax colors between CodeMirror and Reps

Re: keys/values, on Discourse, I mentioned

I’ve been moving to a pattern of blue key and black/white value, and it would be great to have that here.

Here's an example in the Network sidebar.

The blue/pink pattern was borrowed from the Inspector CSS syntax coloring, which was inspired by the HTML coloring. I think it works fine in the HTML/CSS schemes, but in the case of long lists of key/values as seen in Network/Console, especially when the value strings are lengthy like in Network, the magenta gets tough to read because of how bright it is. Moving to blue/(black|white) would keep it more neutral-looking, while still providing high contrast between the keys/values.

fvsch

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

Expandable URL - to show URL params. We can also play with showing individual URL parts (domain, path, etc.)

So something like this?

image

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

Updated color syntax for collapsed URL:

image

Changed magenta to gray which I think works better, and added in the filter bar.

@violasong I like the idea. It does make it a bit more readable. I am not sure which parts we should highlight; as use cases vary on what's important to users. Have you seen an example of that anywhere else?

I don't think I've seen this elsewhere, though the grayed out https:// is like Firefox's URL bar. The idea I had is that the blue parts correlate to the blue keys when expanded.

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

Same as above, except with gray labels.

image

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

Idea: All the above, with Response headers in blue sans-serif 12px labels + black monospace 11px values.

image

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

Idea: In header sections, show info (MDN link) and copy button on hover

image

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

Idea:

More separation for warning/error messages in Header Summary

image Or should we just put it at the top?

image

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

Ideas:

Expand arrow on the URL opens to show query string params

Some syntax coloring on the URL (this doesn't look great, but maybe something similar could work

image

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

I like the option as well. Maybe they could appear on hover to reduce UI density?

That seems good, although maybe we want something there to encourage users to use the more contextual UI instead of looking through the tabs?

Regarding the labels, in the application panel design, we had more muted labels. Maybe we can try those out for comparison.

That subtler look could work if we keep the labels short to allow for more spacing, like this:

image

It wouldn't match the request/response headers though.

(Figma for all mockups so far)

  • Blocked Cookies? → Link to Cookies Should we also have a link to Cookies when it isn't a blocked request? Not sure where I would put this, so no.

What should show up in the summary for Blocked Cookies?

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

Content for the summarized section

* Single-line summaries for
  * Request: Method + Host + Path → Link to _Request_ tab
  * Response: HTTP Code → Link to _Request_ tab
  * HTTP/TLS Version → Link to _Security_
  * Size / Transferred Size + Time to Load → Link to _Timing_
  * Blocked Cookies? → Link to _Cookies_
  * Referrer Policy

Some questions about this:

  • What do you mean by "Link to Request tab"? (Different from the Request Headers section?)
  • Should we also have a link to Cookies when it isn't a blocked request?
  • Do we still want to show Address?

At first I was thinking of a menu-like UI like this

image

But the sections that these would link to don't seem obviously connected to me. It might be better to name them, e.g.

image

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

With the current table there is some redundance, but only "some" as the columns are often squished so small that the information can't really be seen. When we get around to minimize the table's sidebar-open mode to a single column this should not be an issue though, right?

True, especially if only show the filename. But I wonder if we might want to keep the status/method in the table.

Pending requests will only have request parts (headers, payload, cookies, etc), but no response. Same for blocked requests btw. Streamed responses have some response parts and others are still coming in in chunks. There are also streamed requests, for multipart uploads; which have chunk request data in multiple parts.

I see - so, assuming we can differentiate whether some data is either missing or waiting, we could indicate that.

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

Ah, I looked at the Safari screenshot more closely and realized it just has more redundant info that's separated out. I like the visual styling though.

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

I noticed Safari does this nice color coding. Does categorizing the headers this way make sense?

image

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/profiler

Collapsible Resources on single tab

Here are the latest mockups for the alternate idea of expandable frames https://www.figma.com/file/AAUpexQEfAwEZdaLVeGOTx/Profiler-single-tab?node-id=266%3A0

canova

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

Another thought I had - in the sidebar, Request URL, Method, and Status Code are a tad redundant with what would hopefully be showing in the table view. (Especially if we try something like hiding more of the other columns when the sidebar is open.)

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Make toolbox tab spacing a bit tighter

I've been looking at this and feeling unsure, but I could probably get used to it :D. Responsive would be good, and either way, it would be great to do this for vertical mode.

I realized there's another place where I'd love to see this treatment - the sidebar tabs. They actually look a little too wide to me at the moment. Would be a nice complement to #114.

fvsch

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Headers Side Panel

I'm working on a mockup but here are some initial thoughts:

Could we hide the Cookies/Params/etc tabs if they're empty, or could this be confusing?

Paw is a great find! Nice example of Mac native patterns.

For copying, there are a couple things we could try:

  • When selecting a row, Cmd/Ctrl-C should copy both name/value
  • Double-clicking a name or value should select that whole string (currently the selection stops at any hypens, so for an example like this, it's hard to grab the whole name or value) image
  • Copy button that shows up on hover at the end of each row - maybe a bit much. Could be batched up with the info button which should be on the right side.
  • Raw header sections could have an always visible copy button

Some little consistency issues that could be fixed:

  • Accordion header text can currently be selected. Also, it has a blue background on hover. image

States for pending request, streamed request/response

Curious about this, but need to learn more. What does this look like in other places?

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Implement horizontal scroll to move through Devtool tabs

I like the similarity to the main Firefox tabs, although I see that as more related to the Debugger file tabs than all the static "sectional" tabs.

Do we have an example of where this behavior exists in programs with static tabs as opposed to openable tabs? In any case, experimenting with this sounds good to me.

kartik918

comment created time in 2 months

issue commentfirefox-devtools/ux

WebCompat Diagnosis Sidebar

This is now available in Nightly by flipping devtools.inspector.compatibility.enabled!

Shows info for current element as well as all elements.

Will work on more testing and polish. Also, need to try coloring the icons.

image

violasong

comment created time in 2 months

issue commentfirefox-devtools/profiler

Have a UI to be able to switch back to non-web-dev/advanced mode

Ah, I was originally thinking the web dev mode wouldn't have this metadata button anymore, but it could be simplified into an info icon instead.

image

canova

comment created time in 3 months

issue commentfirefox-devtools/profiler

Implement a list of all uploaded profiles stored in this firefox profile

I know the tooltip style might be on the small side. What's your guess for the typical number of profiles a person would have for a current project (e.g. profiles that might need to be compared with each other)?

CC: @digitarald

julienw

comment created time in 3 months

issue commentfirefox-devtools/profiler

Implement a list of all uploaded profiles stored in this firefox profile

How do we access the list? Show in a menu from the "profile viewer" page? Like an "open another profile" item? or is it just from the landing page?

Seems like it would be nice to be able to access it from both. For reference, here's what we worked on for a 2017 mockup

image

We could make the profile name a dropdown

image

julienw

comment created time in 3 months

issue commentfirefox-devtools/profiler

Implement a list of all uploaded profiles stored in this firefox profile

This is probably for a future milestone, but: would we be able to show a screenshot and snippet of the graph in the profile listing, as Chrome does?

image

julienw

comment created time in 3 months

issue closedfirefox-devtools/ux

Watch expressions improvements (and a bug)

Background

After reading PR 7467 I played with the "Watch expressions" component:

<img src="https://user-images.githubusercontent.com/2797254/71777654-28dd7c00-2fa3-11ea-9c55-bac25fc9ba71.png" width="300" />

I took note of small details that maybe can be improved. They are all about interaction design.

Inconsistencies

A quick definition to better understand what follows: an inconsistent UI response happens when 2 similar user actions produce different results.

Inconsistency 1: click anywhere while updating an expression versus click anywhere while creating an expression

Action "click anywhere while updating an expression" reproduction steps:

  1. click on the top right + button or on the placeholder "Add watch expression"
  2. type a valid expression and press Enter
  3. double click on the just created valid expression
  4. change the text to another valid expression
  5. click anywhere outside the active input element

Result: the changes are discarded.

Action "click anywhere while creating an expression" reproduction steps:

  1. click on the top right + button or on the placeholder "Add watch expression"
  2. type a valid expression
  3. click anywhere outside the active input element

Result: the changes are kept. Same result for invalid expression.

We get the same results in both cases if the new expression is not valid. According to me the two similar actions ("updating" is a kind of "creating") should produce similar results, meaning the results should in both cases be discarded or kept.

Visual explanation:

https://www.dropbox.com/s/so6ij8ycw5rb782/2020-01-04_watch-expressions_inconsistencies_1.mov?dl=0

Inconsistency 2: while creating an expression click anywhere versus click the "Watch expressions" dropdown box title

Action "click anywhere while creating an expression" reproduction steps:

  1. click on the top right + button or on the placeholder "Add watch expression"
  2. type a valid expression
  3. click anywhere (except for the dropdown title bar) outside the active input element

Result: the changes are kept.

Action "click title bar while creating an expression" reproduction steps:

  1. click on the top right + button or on the placeholder "Add watch expression"
  2. type a valid expression
  3. click on the dropdown title bar

Result: the changes are discarded.

I would expect both actions result in either keep the changes or discard them. I think the right behaviour should be to keep them (while pressing Esc should discard them in both use cases, which is what happens now).

Visual explanation:

<img src="https://user-images.githubusercontent.com/2797254/71777759-bcfc1300-2fa4-11ea-85a6-19177b08e83a.gif" width="360" />

Bug

Short description: new expression input in focus without blinking text cursor.

Reproduction steps:

  1. click on the top right + button or on the placeholder "Add watch expression"
  2. type a valid expression and press Enter
  3. double click on the just created valid expression
  4. click anywhere outside the active input element
  5. click on the top right + button

Result:

  1. the "new expression input" element looks active (blue border) but the blinking text cursor inside the input is missing
  2. if we click anywhere outside the active input element the "new expression input" element doesn't hide
  3. if we double click on the valid expression we get 2 active input and I can't type in more than 1 character

Expected:

  1. the "new expression input" element looks active (blue border) with a blinking text cursor inside
  2. If we click anywhere outside the active input element the "new expression input" element hides itself
  3. if we double click on the valid expression it gets focus, while the "new expression input" hides itself

Visual explanation:

https://www.dropbox.com/s/bee079xchod9vgt/2020-01-04_watch-expressions_bugs_3.mov?dl=0

Placeholder copy

The new expression input placeholder copy is "Add watch expression". I think the following possibilities might pair better with the dropdown box title "Watch expressions":

  • "Add expression"
  • "Add expression to watch"

because the first time I read the title "Watch expressions" I didn't think of it as a "compound noun", like for example "Long expressions", but as a verb and a noun. If that's the case, then I wouldn't think of adding a "watch expression", but just an expression (to watch).

Let's question the reasons to hide the new expression input element

The above points can be addressed one by one with specific solutions. However let me also propose a different approach, where I question the interaction design of this component. I suspect that the problems I described above have their root in hiding the new expression input. By hiding the input we gain vertical space and we have less clutter when we are not submitting a new expression. But we have also costs.

A subtle cost is that we give the user two options to create new expressions in the initial state, the "click on the + button top right" and the "click on the input placeholder". The double option is a good thing, until we take away one. After submitting the first expression only the plus button is available. If the user choses to click on the placeholder the first time she decides to enter an expression, she has to think about how to add another expression the second time, since this time the input with the placeholder is hidden: there's a bit of friction in the process.

<img src="https://user-images.githubusercontent.com/2797254/71782021-8f7b8d80-2fd5-11ea-806a-3613dc459492.png" width="300" />

Also, if a valid expression is already there, and the user starts to type in another one, but then click outside the input to accomplish some other task, then forgot about it, then after some time she deletes the valid expression, the reappearing of the forgotten input with old text inside might be surprising:

<img src="https://user-images.githubusercontent.com/2797254/71777810-a904e100-2fa5-11ea-8f04-b7171103556f.gif" width="360" />

A clear benefit of always showing the input is that the use case of "adding more than one expression at the time" would be much quicker, because we could keep the focus on the input after entering a new expression, thus allowing for multiple submission by just using the keyboard, with no need to click on the plus button (that we can delete altogether) between one submission and the other. Quick sketch of the idea:

<img src="https://user-images.githubusercontent.com/2797254/71777822-ce91ea80-2fa5-11ea-9d2f-7b45b46f4fee.png" width="300" />

If we always show the input in "Watch expressions", we should consider to do the same elsewhere in the UI (e.g. "XHR Breakpoints") to be consistent.

Next steps

I look forward to hearing your opinions about the problems I described (did I frame them correctly?). I'll be glad to take action submitting the bug in Bugzilla if I got it right and that's the decision, or building a prototype for the "always show input" solution, or just simply discuss more the points described.

closed time in 3 months

luc4leone

issue commentfirefox-devtools/ux

Watch expressions improvements (and a bug)

Thanks so much Luca! Will close the issue on this end.

luc4leone

comment created time in 3 months

more