Export as HAR toolbar button

RESOLVED FIXED in Firefox 61

Status

enhancement
P3
normal
RESOLVED FIXED
2 years ago
Last year

People

(Reporter: Honza, Assigned: Honza)

Tracking

(Blocks 1 bug, {dev-doc-complete})

unspecified
Firefox 61
Dependency tree / graph

Firefox Tracking Flags

(relnote-firefox -, firefox61 fixed)

Details

Attachments

(3 attachments)

The HAR export feature is a bit hidden since it's only available in Net pane's context menu.

There are currently two actions:
1) Copy All as HAR (to the clipboard)
2) Save All as HAR (to a file)

The new toolbar button should duplicate the #2 'Save All as HAR' action. Using label 'Export' and tooltip 'Save All as HAR'?

There should be a drop down menu associated with the button - offering an option:
* Export with content
(off by default)

Here is how the UI looked in Firebug:
http://www.softwareishard.com/blog/netexport/

Honza
I like it, the dropdown button nicely hides the complexity. 

Do we have prior art for such a button existing in devtools? The other idea would be that export triggers a second bar, like the filter option in Console.

Since we have the pref, maybe we could also expose `Auto Export` in the dropdown. `Copy to Clipboard` could also be in those prefs.
Severity: normal → enhancement
Priority: -- → P3
Assignee: nobody → odvarko
Status: NEW → ASSIGNED
Victoria, the mockup for HAR toolbar button shows a 'double arrow' icon (within the button). Do we have that icon?
https://mozilla.invisionapp.com/share/TAGK6KIMFR3#/screens

Honza
Flags: needinfo?(victoria)
(In reply to Jan Honza Odvarko [:Honza] from comment #2)
> Victoria, the mockup for HAR toolbar button shows a 'double arrow' icon
> (within the button). Do we have that icon?
> https://mozilla.invisionapp.com/share/TAGK6KIMFR3#/screens
> 
> Honza

They're used in the responsive design mode: https://dxr.mozilla.org/mozilla-central/source/devtools/client/responsive.html/images/select-arrow.svg
Ah yes, thanks :ntim - for my mockups I made a larger/more spaced out version of the icon; however, I just compared the two icons and realized that the existing icon looks fine once resized to 5px wide/9px tall and colored darker (Gray 90), so we can just continue using that icon.
Flags: needinfo?(victoria)
Comment hidden (mozreview-request)
Posted image har-button.png
reply to Victoria Wang [:victoria] from comment #5)
> Ah yes, thanks :ntim - for my mockups I made a larger/more spaced out
> version of the icon; however, I just compared the two icons and realized
> that the existing icon looks fine once resized to 5px wide/9px tall and
> colored darker (Gray 90), so we can just continue using that icon.

@victoria, ntim: Thanks!

Two questions: 

1) The HAR button is a drop-down button (it shows a menu when clicked, see the screenshot). In case of RDM throttle it's a select button. Is the icon correct? Just checking.

2) What do you mean by Gray 90 ? What should be the CSS value?

Honza
Flags: needinfo?(victoria)
1: Yes, it's fine for now - we're using it for the "refresh" dropdown in RDM as well. I see what you mean though, it's a good point - I'll file this as a UX polish task to think about later.

2: Gray 90 refers to one of the Firefox Photon tokens which can be found at the bottom of https://searchfox.org/mozilla-central/source/devtools/client/themes/variables.css
From the looks of your screenshot I realized Gray 90 will probably be a bit too dark, so instead I would suggest --grey-90-alpha-80. Gray-40 can be used in dark mode.
Flags: needinfo?(victoria)
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)

Comment 11

Last year
mozreview-review
Comment on attachment 8969641 [details]
Bug 1403530 - HAR export toolbar button;

https://reviewboard.mozilla.org/r/238442/#review245036

Works as intended.  The only suggestion I have is adjusting the toolbar button text position, as it's slightly above the text to its left, but not a blocker.
Attachment #8969641 - Flags: review?(dwalsh) → review+
(In reply to David Walsh :davidwalsh from comment #11)
> Comment on attachment 8969641 [details]
> Bug 1403530 - HAR export toolbar button;
> 
> https://reviewboard.mozilla.org/r/238442/#review245036
> 
Thanks for the review David!

> Works as intended.  The only suggestion I have is adjusting the toolbar
> button text position, as it's slightly above the text to its left, but not a
> blocker.
Can you please attach a screenshot? I don't see this on my win machine.

Honza
Flags: needinfo?(dwalsh)
Comment hidden (mozreview-request)
Posted image har-button-mac.png
Flags: needinfo?(dwalsh)
(In reply to David Walsh :davidwalsh from comment #11)
> The only suggestion I have is adjusting the toolbar
> button text position, as it's slightly above the text to its left, but not a
> blocker.
Thanks for testing David, fixed!

Honza

Comment 16

Last year
Pushed by jodvarko@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/b5a1430d99b5
HAR export toolbar button; r=davidwalsh
Backed out for failing clipboard at  devtools/client/netmonitor/src/har/test/browser_net_har_copy_all_as_har.js - note that this does not fail on Linux debug

Push that started the failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=b5a1430d99b50108bf7f1f44ec9c29f0a544fd7c

Failure log: https://treeherder.mozilla.org/logviewer.html#?job_id=175674762&repo=autoland&lineNumber=3625

Backout: https://hg.mozilla.org/integration/autoland/rev/56084ee1029acf0a608eb8122d5451354ddee7fd
Flags: needinfo?(odvarko)
Comment hidden (mozreview-request)
Test failures fixed, trying to land again.

Honza
Flags: needinfo?(odvarko)

Comment 20

Last year
Pushed by jodvarko@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/d8bb9fa651c6
HAR export toolbar button; r=davidwalsh

Comment 21

Last year
bugherder
https://hg.mozilla.org/mozilla-central/rev/d8bb9fa651c6
Status: ASSIGNED → RESOLVED
Closed: Last year
Resolution: --- → FIXED
Target Milestone: --- → Firefox 61
Release Note Request (optional, but appreciated)
[Why is this notable]: New UI for the Network panel in DevTools toolbox.
[Affects Firefox for Android]: no
[Suggested wording]: DevTools Network panel introduces a new toolbar drop-down menu button that allows export as well as import of HAR files. These actions where a bit hidden behind a context menu and drag-and-drop, so this should increase discoverability.
[Links (documentation, blog post, etc)]: There is a follow up bug 1456129 that adds "Import" action into this menu

Honza
relnote-firefox: --- → ?
The more I think about this, the more I think this is better suited for the developer notes on MDN and not the overall Fx61 release notes. Sorry for the confusion.

Updated

Last year
Product: Firefox → DevTools
I've documented this, first by covering it in the following section:
https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#CopySave_All_As_HAR

And second by adding a note to the Fx61 rel notes:
https://developer.mozilla.org/en-US/Firefox/Releases/61#Developer_tools

Let me know if you think that looks OK. Thanks!
Flags: needinfo?(odvarko)
Looks good to me, thanks!

Honza
Flags: needinfo?(odvarko)

Comment 26

Last year
Current implementation is not good enough/flexible enough.
Actually I don't even understand real use case for this implementation.
Imagine, I need to save only a few records(usually some API calls) out of 1000(which will include not needed css/js/jps/etc) for further analysis.
There should be possibility to save/export only selected records
You should file a new bug, because the changes made here already shipped with Firefox 61.

Sebastian
You need to log in before you can comment on or make changes to this bug.