Introduce UI for Options drop down menu in Network panel
Categories
(DevTools :: Netmonitor, enhancement, P2)
Tracking
(firefox77 verified)
Tracking | Status | |
---|---|---|
firefox77 | --- | verified |
People
(Reporter: Honza, Assigned: davidwalsh, Mentored)
References
(Blocks 1 open bug)
Details
(Keywords: dev-doc-complete, good-first-bug)
Attachments
(3 files)
Reporter | ||
Comment 1•7 years ago
|
||
Comment 2•7 years ago
|
||
Comment 3•7 years ago
|
||
Updated•6 years ago
|
Reporter | ||
Comment 4•6 years ago
|
||
Comment 6•5 years ago
|
||
We could move these into a dropdown menu:
- Persist Logs
- Import HAR…
- Save All as HAR
- Copy All as HAR
I would keep visible at all times:
- Disable Cache
- Throttling
Since they affect the testing and debugging experience so much, so we should make it hard to miss non-default values.
Reporter | ||
Updated•5 years ago
|
Reporter | ||
Comment 7•5 years ago
•
|
||
Harald, I guess the Network panel options menu should work just like the Console panel options menu, correct?
(could be good first/second bug)
Do we agree on the content as stated in comment #6?
Honza
Comment 8•5 years ago
|
||
Yes, we should build on the prior art and align as much as possible. Comment 6 summarizes it well!
I would, as a follow up, move the import/export options into its own dropdown as all others are settings (also with consistency in mind across panels, including profiler).
Comment 9•5 years ago
|
||
Good intermedia bug, building on the prior work in bug 1523868.
Comment 10•5 years ago
|
||
I will try to implement this feature. Also this is my second bug so I don't know if you would let me or keep this for the new contributors.
If yes, I would appreciate knowing the files that affect Network panel options and how the console settings (cog icon) is rendered so I can recreate the same for Network panel which in my opinion would clean up the UI a lot and be consistent with the design. I'll try to make it according to the feedback from everyone here.
@Honza: Can you guide me? Thanks
Comment 11•5 years ago
|
||
KC, this should be a good second bug. This is the patch that adds the menu for Console, it should provide answers to most of your questions: https://phabricator.services.mozilla.com/D47979
Reporter | ||
Comment 12•5 years ago
|
||
(In reply to KC from comment #10)
@Honza: Can you guide me? Thanks
The patch mentioned by Harald should help a lot.
A few more links:
- The place where the button should be rendered
https://searchfox.org/mozilla-central/rev/2fd8ffcf087bc59a8e5c962965bbb7bf230bcd28/devtools/client/netmonitor/src/components/Toolbar.js#578
Just after the HAR button, you can introduce renderSettingsButton
Note there there are two modes in which the toolbar is rendered (depends on width of the browser/Toolbox window) look for the other occurence of this.renderHarButton()
- Existing context menu impl, as an example
https://searchfox.org/mozilla-central/rev/2fd8ffcf087bc59a8e5c962965bbb7bf230bcd28/devtools/client/netmonitor/src/widgets/RequestListContextMenu.js#43
Look in the same directory for other context menu examples
- Drop down button
render and show Har button show how to impl a drop down button
But, now I am seeing that Console is using a nice drop down with a little pointer to the button. It's rendered here:
https://searchfox.org/mozilla-central/rev/2fd8ffcf087bc59a8e5c962965bbb7bf230bcd28/devtools/client/webconsole/components/FilterBar/FilterBar.js#332
We should do it the same way.
Honza
Reporter | ||
Comment 13•5 years ago
|
||
Here is how the Console panel is doing it (drop down with a little pointer back to the button). It looks great.
Honza
Reporter | ||
Updated•5 years ago
|
Comment 14•5 years ago
|
||
Yes I had the same design in mind from console to follow along here for consistency, maybe move Disable Cache and HAR options under the cog drop down? It'll help cleanup the toolbar on smaller widths too.
I'll go through all the resources soon and get started on this.
The commit Harald linked to has helped clear some of my questions. Thanks.
Comment 15•5 years ago
|
||
"Disable cache" has a strong impact on the Netmonitor's behavior, which can be not obvious if hidden away, so I'd keep it in the toolbar.
As a first step for this bug I would create a settings menu with only "Persist Logs" in it.
Then we can do follow-up bugs for:
- Moving the HAR options to that new menu (likely)
- Considering moving "Disable cache" or other actions that new menu (less likely because usage and impact are higher than for HAR)
Reporter | ||
Comment 16•5 years ago
|
||
Agree with Florens
Honza
Comment 17•5 years ago
|
||
I'll get started with rendering persist logs in menu.
Comment 18•5 years ago
|
||
As a general rule, potential "footguns" (options that severely change browser behavior) need to be in the top-level UI.
Reporter | ||
Comment 19•5 years ago
|
||
KC, are you still interested in fixing this bug or should I unassign it so, somebody else have a chance to finish it?
Honza
Comment 20•5 years ago
|
||
I am still interested in fixing this bug. Sorry for the delay, I had an emergency to attend to due to the outbreak which took my last two weeks. I'll begin my work on this from 1st April after being completely free from researching on my GSoC proposal. Sorry and I will provide a patch as soon as possible.
Reporter | ||
Comment 21•5 years ago
|
||
I see, thanks for quick update.
Thanks for the help and take care in these tough times!
Honza
Reporter | ||
Comment 22•5 years ago
|
||
Reassigning this bug to David (per offline chat with :KC)
Honza
Assignee | ||
Comment 23•5 years ago
|
||
Notes:
- It looks like the button the console uses is shared:
const MenuButton = createFactory(
require("devtools/client/shared/components/menu/MenuButton")
);
- The tooltip should come for free with that component.
Assignee | ||
Comment 24•5 years ago
|
||
Comment 25•5 years ago
|
||
Comment 26•5 years ago
|
||
bugherder |
Comment 27•5 years ago
•
|
||
On macOS the dropdown menu used in Console has a border, but not the new one in Network. Needs a follow-up bug?
The separator between "Persist Logs" and "Import HAR File" is a menu item which can receive keyboard focus.
Assignee | ||
Comment 28•5 years ago
|
||
:nchovebbe: How is the Netmonitor's usage of Menu different than webconsole's? I thought I had used the same methodology with this patch but your implemention has a border and appears to live inside a tooltip-xul-wrapper
; I can't select any of the menu's UI elements with the browser toolbox. Could you provide any insight?
The MenuButton
component takes a toolboxDoc
prop that is used to put the menu in the right document.
For the Netmonitor, you pass document
(devtools/client/netmonitor/src/components/Toolbar.js#471), which is the netmonitor document, not the toolbox one, which I guess could explain some of the issues.
Also, as Florens said, separator should be implemented with an other element than a MenuItem (usually a hr
is what we want)
Reporter | ||
Updated•5 years ago
|
Comment 30•5 years ago
|
||
Updated the screenshot and description in the Network toolbar article. I called the 'gear' menu an "Action" menu, since the items are all verbs. Only "Persist Logs" is an option.
Reporter | ||
Comment 31•5 years ago
|
||
Looks great to me, thanks Janet!
Honza
Updated•5 years ago
|
Comment 32•4 years ago
|
||
Verified with 77.0 on Windows 10, macOS 10.15.3, Ubuntu 20.
Description
•