Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Description • 7 years ago

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

	:Harald Kirschner :digitarald
	Comment 1 • 7 years ago

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.

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 2 • 6 years ago

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

	Tim Nguyen :ntim
	Comment 4 • 6 years ago

(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

	Victoria Wang [:victoria]
	Comment 5 • 6 years ago

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.

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 7 • 6 years ago

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

	Victoria Wang [:victoria]
	Comment 8 • 6 years ago

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.

	David Walsh :davidwalsh
	Comment 11 • 6 years ago
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.

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 12 • 6 years ago

(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

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 15 • 6 years ago

(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

	Pulsebot
	Comment 16 • 6 years ago

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

	Andreea Pavel [:apavel]
	Comment 17 • 6 years ago

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

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 19 • 6 years ago

Test failures fixed, trying to land again.

Honza

	Pulsebot
	Comment 20 • 6 years ago

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

	Cosmin Sabou [:CosminS]
	Comment 21 • 6 years ago
bugherder

https://hg.mozilla.org/mozilla-central/rev/d8bb9fa651c6

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 22 • 6 years ago

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

	Ryan VanderMeulen [:RyanVM]
	Comment 23 • 6 years ago

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.

	Chris Mills [:cmills]
	Comment 24 • 6 years ago

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!

	Jan Honza Odvarko [:Honza] (always need-info? me) Assignee
	Comment 25 • 6 years ago

Looks good to me, thanks!

Honza

	phikus
	Comment 26 • 6 years ago

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

	Sebastian Zartner [:sebo]
	Comment 27 • 6 years ago

You should file a new bug, because the changes made here already shipped with Firefox 61.

Sebastian