profile
viewpoint

janodvarko/harviewer 824

HAR Viewer is a web application that allows visualizing HTTP Archive logs (HARs)

janodvarko/ccdump 21

Display the graph created by cycle collector.

firefox-devtools/docs 15

Documentation for Firefox Developer Tools

firefox-devtools/original-console-fork 6

The console.html team's fork of Firefox

janodvarko/firebug 6

The Firefox Firebug you have known and loved

fflorent/firebug 1

Web Development Evolved - The Firebug you have known and loved

janodvarko/debugger.html 1

An experimental debugger interface.

janodvarko/dryice 1

CommonJS/RequireJS build tool

janodvarko/FireFlow 1

plugin for js reverse engineering

fflorent/node-chromelogger-test 0

Just a test for the chromelogger Node.js module

issue commentfirefox-devtools/ux

[Debugger] Onboarding for Map Scopes

@violasong, thanks for the mockup, I like that

If I understand correctly, we'd display similar notification message explaining what "Map Scopes" does and perhaps link to MDN - directly within the "Scopes" panel at the top?

I am also attaching a screenshot of what we do for the multi-line Console editor

image

Honza

digitarald

comment created time in 6 days

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

Looks great, thanks Victoria.

Proposing + as its toolbar button

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

Honza

janodvarko

comment created time in a month

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

I really like how it looks like on the last mockups, thanks @violasong !

assuming we also have god support for pasting in a bunch of headers.

I'd do it inline with what we have for the Blocking panel

  1. The user focuses the empty name:value row (the one for creating a new header)
  2. The user pastes list of new-line separated list of headers (name:value pairs)

e.g.

Accept-Ranges: bytes
Cache-Control: max-age=30
Connection: Keep-Alive
janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Network table design refresh

@violasong @digitarald When the (request list) table width goes under certain threshold (e.g. both side panels opened, browser window not too wide) we could switch into a compact "email-like" view where every request is represented by a thick row with condensed info and no columns. Suggested by Harald at some point and I like the idea

Honza

violasong

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

Thanks for the mockups Victoria, it looks great!

image

Some comments:

  1. The (top) input field for URL is short and I think that it'll be hard to edit (even slightly) longer URLs and query string arguments.

We have nice URL expandable preview component (implemented for the Headers panel) So, what if we make it editable and reuse that in this case? The user could either edit the raw URL string or expand and edit its parts separately: method, protocol, domain, file path, query string arguments.

  1. What about reducing the amount of lines/borders/rectangles by using an editable table? Or perhaps could we reuse the design we have:
  • for listing Watch Expressions in the Debugger panel (with checkboxes like we have for list of BPs).
  • for listing request/response headers in the Headers panel (the input boxes are created when selecting an entry)

But, I understand that the responsive layout might be important UX part since side bars tends to be rather thinner than wider.

Honza

janodvarko

comment created time in 2 months

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

I guess in this case we won't even have to call the server, as the list does not depend on the content page, but on a set of known items right?

Correct, the list of headers will be hardcoded. We already have list of headers supported by MDN here: https://searchfox.org/mozilla-central/rev/55a4faa52f72918efa51150d127aebdc057dc6cf/devtools/client/netmonitor/src/utils/mdn-utils.js#15

Honza

janodvarko

comment created time in 3 months

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

We should provide autocompletion for headers as well, as we have a well-defined list and datalist on the input can provide a quick way to autocomplete.

Yes, I like the idea. @nchevobbe can we somehow share the auto-completion logic that you are building for classes in the Rules panel? We could ideally just provide different datalist ....

Note the Hide auto-generated headers switch. Those headers are hidden by default. Not sure if we have any auto-generated headers though.

Which ones would that be, @janodvarko? I would have assumed Content-Length, but its in the list – so I guess its values from other panels like Authorization.

All the headers with gray background (on the screenshot) are auto-added. Postman allows to define presets - groups of headers that should be auto-added. Not sure whether we want this.

But, authorization is one of the examples where headers are auto-added.

See the next screenshot of the Authorization tab and the comment under API Key image

Note the Bulk Edit button that switched the mode into raw so, the user can just type headers in multi-line text area (allows nice copy-paste)

Copy/pasting is an important use case, so devs are not forced into the split input format. This could also be another place for a Raw toggle.

And we have SourceEditor that @bomsy implemented that can be used with + HTTP headers syntax color highlighting.

Some related comments are here https://bugzilla.mozilla.org/show_bug.cgi?id=1632030#c2

Honza

janodvarko

comment created time in 3 months

issue commentfirefox-devtools/ux

Network table design refresh

@violasong This looks awesome!

Note that we also have left side bar (search + resource blocking and later Edit & Resend)

violasong

comment created time in 3 months

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

To simplify scope, we might skip that. This way "Edit & Resend" just becomes "Pre-populate the create request form with this request's details". If we move the form to the sidebar, the original request would still be selected until the user submits, I assume?

This concept would work for me.

I am also attaching a screenshot from Postman for some more inspiration (https://www.postman.com/). A tool used to Test REST API (so, basically send custom requests)

image

Some notes:

  • See the method field, it's a drop down allowing the user to pick different HTTP method (POST, GET, etc.)
  • Note the Hid auto-generated headers switch. Those headers are hidden by default. Not sure if we have any auto-generated headers though.
  • See the little (i) icon it shows a tooltip that explains purpose of the header and why it should be set.
  • Btw. list of headers UI looks exactly the same as list of query string. List of query strings is edited in the Params tab
  • When an invalid value for header name is inserted there is red cross button.
  • The hamburger menu in front of the Content-Length allows changing the order by drag-and-drop
  • The request response body is displayed at the bottom of the form as soon as the request is sent (and the body received). This is really handy and we can achieve the same UX by auto-selecting the sent request and if the Response panel (on the right side is visible) it would show the response right away.
  • Note the Bulk Edit button that switched the mode into raw so, the user can just type headers in multi-line text area (allows nice copy-paste)
janodvarko

comment created time in 3 months

issue commentfirefox-devtools/ux

Polish Edit & Resend Panel

Just to clarify, this would be follow-up. Left sidebar allows to keep the form open while repeatedly firing requests. Right now sending a new request closes the form to focus the response.

Note that this is part of our 20% project and @juliandescottes is ready to work on this soon: Bug 1618069 - Move Network's "New Request" page into left sidebar

It might be quite independent work from the polish and could be done in parallel. The move itself is relatively straightforward. The more complex part is the Form relation to the selected (and fake) request.

The current logic is creating a temporary request (when the Edit & Resend form is opened) that is used to store data from the form. We should break that connection (form <-> selected request) since it's buggy and the implementation is hacky.

Try e.g.

  1. Open the form on a request
  2. select the original request again
  3. Open the form again
  4. Now there are multiple fake requests in the list with the same IDs so, both are selected at the same time (and there are React warnings about dup keys)
  5. Cancel the form, now there is forgotten temp request.
  6. Continue doing this and the list turns into a mess.

We should:

  1. Break the connection with the current selection. We might have another UI indication to point to the original request used to resent (as suggested by Julian)
  2. Store state of the form properly in a reducer. So, we can save the inputs between sessions (as suggested by Harald)
  3. Stop creating temporary requests with fake IDs and remove all hacks around this from the code base (this would be great cleanup)

I think that Julian can start analysis on this as part of the 20% project and perhaps even provide a patch if there is enough time.

Honza

janodvarko

comment created time in 3 months

issue openedfirefox-devtools/ux

Polish Edit & Resend Panel

Context

The Edit & Resend panel is used to modify an existing HTTP Request and resend it back to the server. Here is a screenshot of the current UI:

image

The current UI allows the user to modify:

  • HTTP method
  • URL
  • Request headers
  • Query string/arguments
  • Request body (aka POST data)

Existing issues are collected under this meta: Bug 1475161 - [meta] Edit and Resend

One of the things we'd like to fix first is related to URL encoding/decoding issues. Especially, the UI isn't user friendly when it comes to editing (encoded) query arguments.

Bug 987975 - edit and resend doesn't properly encode query string values

There is mockup for better UI here

There are also some Chrome extensions introducing UI for editing query strings.

The attached screenshots are using this example URL:

http://example.com/index.html?someval=5oMEnMSQqJ8%3D&another==value%3D

Prior Art

Easy URL Params

https://chrome.google.com/webstore/detail/easy-url-params/jhhjlajfdkofbnhbcjcddngfehfihfln

image

Easy URL Editor

https://chrome.google.com/webstore/detail/easy-url-editor/kojpdadnbbicdfgfadonheclfpcjpiah?hl=en

image

@digitarald @violasong @bomsy

Honza

created time in 3 months

more