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.

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

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

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

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.

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.

(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

(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

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

Test failures fixed, trying to land again. Honza

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

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

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.

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!

Looks good to me, thanks! Honza

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