WebTorrent: UI Redesign

[feross]

This issue is for discussing a UI redesign for the WebTorrent extension. @rossmoody did some amazing work on some mockups in this comment: https://github.com/brave/brave-core/pull/3003#issuecomment-515267754 which are a great starting point.

Goals

• Modernize and cleanup the design
• Show better indicators of download progress (including individual file progress)
• Offer "Save All Files..." functionality (https://github.com/brave/brave-browser/issues/1230)
• Indicate which files are viewable/playable immediately in the browser (play icon?)
• Any other goals?

[rossmoody]

Depending how much we want to break this down per issues (and I would defer but I'd like to help where i can) I think if we use the following screens as a baseline then maybe something like:

• [ ] Refine UI structure and style (larger initial restructure with tbd subtasks like new components and sunset Brave UI dependencies)
• [ ] Component states, responsiveness and accessibility refinement
• [ ] Set up theming variables
• [ ] Hook up theming to Brave theme provider
• [ ] Show better indicators of download progress (including individual file progress)
• [ ] Offer "Save All Files..." functionality (#1230)
• [ ] Indicate which files are viewable/playable immediately in the browser (play icon?)
• [ ] Open in new tab button (for media of tbd type)
• [ ] Indicate a disabled version of media buttons until content is ready

[rebron]

I suspect long file names will be the usual and we'll see wrapping more often than not. Maybe wider on the filename? Design looks really nice.

[rossmoody]

that's so true. maybe some type of character limit and then institute truncation? could be a nice accessibility feature to fill the title attr of the truncated text with some type of automation.

[feross]

I implemented the design in HTML + CSS ✨ It looks great!

Click to zoom. 🔎