1857428 - Refactor about:webrtc sections making them more dynamic

Status: RESOLVED FIXED

(Core :: WebRTC, enhancement, P2)

Description

[Nico Grunbaum [:ng, @chew:mozilla.org]]

• Right now the sections of about:webrtc are all created and updated in an adhoc manner. We can create a reusable PrimarySection element.
  • MediaCtx PrimarySection
  • ConnectionLog PrimarySection
  • UserConfig PrimarySection
• The several places preferences are displayed can share the same code.
  • MediaCtx
  • UserConfig
• Minimize redundant state in preference code
• Move per-section refresh logic out of the code that does page setup to greatly increase code clarity
• The preference display code should allow for value only updates without causing unnecessary DOM churn.
• Preference paths should be reliably copy-able in a uniform manner.
  • Ensure better DOM stability for preference display so that buttons are clickable
  • Add copy button logic to PreferenceList entries
• Some of these elements can move into modules to prevent detail leakage.
  • Extract PrefList to module
  • Extract CopyButton to module
  • Extract Disclosure to module
• What Auto refresh covers is not uniform amongst sections. Auto-refreshing each section should be independently controlled. These control values should be remembered between visits to about:webrtc.
  • implement refresh logic for MediaCtx
  • implement refresh logic for ConnectionLog
  • implement refresh logic for UserConfig
• Refreshes should only update what needs to be updated, where currently some sections are recreated from whole cloth.
• Rename User Set Preferences to User Modified Configuration
• Rename Sessions section to RTCPeerConnections
• Accessory elements, like buttons or graphs, should be attached to the section headings in a consistent manner.
• The current FoldEffect wastes quite a bit of space at the top level. A Disclosure element can be introduced to allow for independent placement of the disclosure control element, the control label (if any), and the body (collapsible container element).
  • Adapt FoldEffect logic but do not automatically attach objects to a "parent" object
  • Use disclosure triangle by default instead of a text label
  • Use the text for the label as a .title for accessibility and force localization
  • Replace FoldEffect in PrimarySection with Disclosure
  • Add a vertical bar to the left side of the Disclosure body container
• PeerConnection PrimarySection
  • Move PeerConnection subsection update code out of the global scope
• Localization strings need to be made consistent
• Some name refactoring would go a long way to improving the clarity of the code

In Process:

• The CSS should be modernized for clarity and maintainability.
• Make vertical bar clickable for disclosure collapse.
• Subsection class, which paves the way for header level graphs

To Do:

• Add graph aggregate data in headers
• A vertical line should be added for clarity to indicate the boundary of the disclosure body.
• Allow disclosures to be closed from any vertical scroll position within the body by clicking the vertical bar.
• Defer updates to sections whose bodies are collapsed until disclosure is expanded

Comment 1

[Nico Grunbaum [:ng, @chew:mozilla.org]]

Attachment: Bug 1857428 - about:webrtc refactor;r?jib

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/fc13accbfb24
about:webrtc refactor;r=jib,fluent-reviewers,desktop-theme-reviewers,flod,Itiel

Comment 3

[Iulian Moraru]

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