Better UI/UX for raced cache feature
Categories
(DevTools :: Netmonitor, enhancement, P3)
Tracking
(Not tracked)
People
(Reporter: Honza, Unassigned, NeedInfo)
References
(Blocks 2 open bugs)
Details
Attachments
(1 file)
42.92 KB,
image/png
|
Details |
This is a follow up for: bug 1358038 comment #81
Users seem to be confused by the additional (race)
label displayed in Transferred column.
There is no additional comment and/or explanation and it's unclear what that label actually means.
We might want to introduce a new tooltip explaining what race cache with network means.
We might also introduce a "learn more" icon/link pointing to MDN.
Honza
Reporter | ||
Comment 1•5 years ago
|
||
@Harald, any tips what we could do here?
Honza
Comment 2•5 years ago
|
||
I made the original comment on the other bug. I started seeing (raced) in my network requests but I'm just not sure what's actually happening. Here's an example: https://i.imgur.com/mA6K80Q.png. That example has 6 raced requests, and I think the first two used the network and the last four used the cache, but I'm not sure. The messaging isn't consistent--you can see further down that cached requests are grayed out and they still have a response code. None of the raced requests are grayed out like I would expect for something loaded from the cache, and some of them also don't have response codes even though the requests have completed.
I ran this by a few other devs and none of us were able to fully understand what's happening. The concept of racing is simple enough (once I found the bug that explained it), but I don't know how to interpret the network tab with raced requests.
Reporter | ||
Comment 4•5 years ago
|
||
@Harald: what do you think? Tooltip and MDN icon? Anything better?
Honza
Reporter | ||
Updated•5 years ago
|
Comment 5•5 years ago
|
||
Looks like we should have enough space to show a (?) help icon with a link to MDN, and add a title-tooltip to add additional context to "race", for example "This request was loaded from network as the cache was too slow" or "Loading this request from cache was too slow, so it was loaded from the network".
Given that this is impacting developers with in-deterministic behavior and that race
isn't an easy concept, MDN needs to create a page to describe the why and how of RCWN.
Comment 6•5 years ago
|
||
(In reply to :Harald Kirschner :digitarald from comment #5)
That explanation helped me too much. Because just the label (raced) didn't help me to understand the concept.
But now I know and this information can be very useful.
Thanks.
Comment 7•5 years ago
|
||
I started seeing this some time ago and finally decided to look it up.
I first went to https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_list but under Transferred it only states that:
Transferred: The number of bytes that were actually transferred to load the resource. This will be less than Size if the resource was compressed. From Firefox 47, if the resource was fetched from a service worker cache, then this cell displays "service worker".
Then I found https://bugzilla.mozilla.org/show_bug.cgi?id=1358038 via https://duckduckgo.com/?q=firefox+network+Transferred+"(raced)".
I read the entire thread but actually the first tree posts was enough:
The RCWN feature in Necko adds the ability to race the cache with the network when the cache is slow. So if reading from the disk is slow, we will send a network request, and return the channel from the network, even though we have the entry in the cache. This way we provide the content to consumers faster.
Our concern is that requests that load from the network instead of the cache will confuse users, and they will think there is a problem with their caching headers, or with Firefox's caching. We want to avoid that by showing them why it loaded from the network instead (because we raced).
This information should really be added to MDN and preferably not in a corner like https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_list, but at least it should be mentioned there. Actually, that would probably be the best place to explain the race concept, with a link from devtools to it. Alternatively it could be mentioned at https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_details?utm_source=mozilla&utm_medium=devtools-netmonitor&utm_campaign=default#Timings which there is already a link to in devtools (in the Timings pane after selecting a request in the network pane).
Reporter | ||
Updated•4 years ago
|
Comment 8•4 years ago
|
||
:honza, what do you think about a line in the details panel with a link to MDN?
Reporter | ||
Comment 9•4 years ago
|
||
Perhaps we could put that info in the summary section?
Suggestions:
- The
(raced)
label in the Transferred column should have a tooltip (perhaps the same text as in the Summary section) - The summary section should have short description explaining what Raced is (see the screeenshot)
- The summary section should have "Learn More" icon pointing to MDN (we might need a new page)
Honza
Comment 10•4 years ago
|
||
The new UX had an "info" element that we should use for that, with a 1-liner explaining RCWN and what it did + link to MDN. Wording TBD.
Related, I just found https://support.mozilla.org/en-US/questions/1267945 as an awesome answer. Simon also recently found this feature: https://simonhearne.com/2020/network-faster-than-cache/
Reporter | ||
Comment 11•4 years ago
•
|
||
(In reply to :Harald Kirschner :digitarald from comment #10)
The new UX had an "info" element that we should use for that
What is the "info" element? Do we have a mockup for it?
Honza
Comment 12•4 years ago
|
||
What is the "info" element> Do we have a mockup for it?
Same UI that is being used for tracking protection: https://www.figma.com/file/rTeLZ1cmvHbgfJt91AloNi/DevTools-Network%3A-Details-Pane%2C-table-redesign-(V)?node-id=171%3A93
Reporter | ||
Comment 13•4 years ago
•
|
||
I see, thanks for the clarification Harald.
We could also use table or grid layout for the summary info in the Headers panel to avoid hardcoded paddings/margins, which feels fragile.
E.g. here:
https://searchfox.org/mozilla-central/rev/bc3600def806859c31b2c7ac06e3d69271052a89/devtools/client/netmonitor/src/assets/styles/HeadersPanel.css#189
Edit: this is now reported as: Bug 1641491 - Use CSS Grid for the Summary Section in the Headers panel
Honza
Updated•2 years ago
|
Description
•