Update NoScript interface

[cezaraugusto]

address brave/brave-browser#2996
fix brave/brave-browser#4228
fix brave/brave-browser#4572
fix brave/brave-browser#4570
fix brave/brave-browser#4567

Design overview

Related to brave/brave-browser#2996, the following have been addressed:

• Make script blocking shortcuts to "Allow once" as easy to access as Muon (legacy). Previously it took 2 clicks in Muon
• Enable scrolling on the detailed view
• Fix focus indicators
• All interactive UI elements in the scripts detail view should have keyboard support and the appropriate focus treatment.
• The interface should accommodate long strings when translated.
• Theme update
  • All design changes (space, color, size)
  • Script detail view (not the click-to-expand option)

The following have not being addressed:

• Fix functionality in scripts detail view so that users can allow/block all sources of Javascript or select individual sources to allow/block
• When looking at the scripts detail view, we should enable horizontal scrolling so that someone can see the full FQDN.
• If it's longer than the content area, the additional text to the left of the registered domain (ETLD+1) is initially truncated as an ellipses
• Theme update
  • Option to expand script row
  • Device recognition detail view
  • Connections upgraded to HTTPS view
  • Cross-site trackers detail view

Test Plan:

1. All new code is covered by automated tests npm run test-unit
2. Except for changes explicitly not addressed, visual changes should match spec defined in brave/brave-browser#2996
3. Each issue tagged as fix has a manual test plan that should be covered

Reviewer Checklist:

• New files have MPL-2.0 license header.
• Request a security/privacy review as needed.
• Adequate test coverage exists to prevent regressions
• Verify test plan is specified in PR before merging to source

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on.
• All relevant documentation has been updated.

[karenkliu]

This looks good based on what I reviewed last time in Cezar's prototype.

[bsclifton]

Rebased this and gave it a go! Works great- I confirmed all issues marked as fixed have been fixed (went through steps)

Something I did notice: if you have shields open and use keyboard to navigate... once the tab focus gets to the end, it would close the shields menu (returning focus back to URL bar... then if you press tab again it would start sending tab to the page being viewed). Is this intentional?

Will check out the code changes here too 😄

[bsclifton]

Unusual thing which I couldn't find an issue for:

When script blocking is enabled, you can also see the default Chrome behavior which I think we'd like to hide. That is outside the scope of this work, but would be great to make sure an issue is captured:

[bsclifton]

here we go, found it! brave/brave-browser#199

[cezaraugusto]

@bsclifton re #2485 (review) this is due to the blur handler I added for updating blocked/allowed lists on close, which is, in fact, a temp fix.

other events such as unload or beforeunload would be better, but chrome extensions don't handle them properly. they do have a bug report, unfortunately, closed as stale (see https://bugs.chromium.org/p/chromium/issues/detail?id=31262).

there are other better workarounds such as using the messaging APIs to set up a port between the popup and background page (which can catch popup close), but since I didn't fall into your test case before, this would require another round of changes which will bulk even more this PR.

if we all agree this is minor, I can create a tracking issue and work on that in a follow-up.

[bsclifton]

SGTM 👍

[bsclifton]

++