Open Bug 1561532 Opened 5 years ago Updated 2 years ago

Better UI/UX for raced cache feature

Categories

(DevTools :: Netmonitor, enhancement, P3)

enhancement

Tracking

(Not tracked)

People

(Reporter: Honza, Unassigned, NeedInfo)

References

(Blocks 2 open bugs)

Details

Attachments

(1 file)

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

@Harald, any tips what we could do here?
Honza

Flags: needinfo?(hkirschner)

Bugbug thinks this bug is a task, but please change it back in case of error.

Type: defect → task

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.

@Harald: what do you think? Tooltip and MDN icon? Anything better?
Honza

Type: task → enhancement
Priority: -- → P3

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.

Blocks: RCWN
Flags: needinfo?(hkirschner)

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

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

:honza, what do you think about a line in the details panel with a link to MDN?

Flags: needinfo?(odvarko)
Attached image image.png

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

Flags: needinfo?(victoria)
Flags: needinfo?(odvarko)
Flags: needinfo?(hkirschner)

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/

Flags: needinfo?(hkirschner)

(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

Flags: needinfo?(hkirschner)

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

Flags: needinfo?(hkirschner)

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

Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: