brave-core icon indicating copy to clipboard operation
brave-core copied to clipboard

Added speedreader panel WebUI components

Open nullhook opened this issue 2 years ago • 12 comments

Resolves https://github.com/brave/brave-browser/issues/24528

image

This PR introduces the new WebUI bubble for Speedreader page controls and it's hidden behind a flag --enable-features=SpeedreaderPanelV2 — Not all UI controls are implemented as it needs backend APIs to be implemented first in SpeedreaderTabHelper interface and this requires the speedreader panel mojom interface to exist.

The following will be done as follow ups:

  1. Add string translations
  2. Add proper bubble anchor, currently the anchor is location bar
  3. Implement following APIs: font style, content style, speedreader enabled/disabled

We do not remove any previous interfaces, however if we're consolidating the Chromium's reader logic to the new WebUI we should look into the following:

  1. SpeedreaderTabHelper has ::ProcessIconClick which checks the type of panel should render
  2. SpeedreaderIconView subclasses PageActionIconView which is not useful for the new WebUI bubble interface. We should potentially remove this or replace this with a subclass LabelButton
  3. SpeedreaderIconView::GetBubble gets triggered when user's mouse enters the icon area. I'm assuming the panel gets eagerly loaded? If we subclass LabelButton, we won't need to override this

Submitter Checklist:

  • [x] I confirm that no security/privacy review is needed, or that I have requested one
  • [x] There is a ticket for my issue
  • [x] Used Github auto-closing keywords in the PR description above
  • [x] Wrote a good PR/commit description
  • [x] Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
  • [x] Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
  • [x] Checked the PR locally: npm run test -- brave_browser_tests, npm run test -- brave_unit_tests, npm run lint, npm run gn_check, npm run tslint
  • [x] Ran git rebase master (if needed)

Reviewer Checklist:

  • [ ] A security review is not needed, or a link to one is included in the PR description
  • [ ] New files have MPL-2.0 license header
  • [ ] Adequate test coverage exists to prevent regressions
  • [ ] Major classes, functions and non-trivial code blocks are well-commented
  • [ ] Changes in component dependencies are properly reflected in gn
  • [ ] Code follows the style guide
  • [ ] Test plan is specified in PR before merging

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, for instance:
    • [ ] https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
    • [ ] https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
    • [ ] https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
    • [ ] https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
    • [ ] https://github.com/brave/brave-browser/wiki/Custom-Headers
    • [ ] https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
    • [ ] https://github.com/brave/brave-browser/wiki/QA-Guide
    • [ ] https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

nullhook avatar Jul 12 '22 23:07 nullhook

A Storybook has been deployed to preview UI for the latest push

brave-builds avatar Jul 12 '22 23:07 brave-builds

A Storybook has been deployed to preview UI for the latest push

brave-builds avatar Jul 14 '22 17:07 brave-builds

A Storybook has been deployed to preview UI for the latest push

brave-builds avatar Jul 14 '22 20:07 brave-builds

A Storybook has been deployed to preview UI for the latest push

brave-builds avatar Jul 20 '22 04:07 brave-builds

A Storybook has been deployed to preview UI for the latest push

brave-builds avatar Jul 25 '22 17:07 brave-builds

A Storybook has been deployed to preview UI for the latest push

brave-builds avatar Jul 25 '22 19:07 brave-builds

A Storybook has been deployed to preview UI for the latest push

brave-builds avatar Jul 27 '22 21:07 brave-builds

@nullhook jfyi you may want to create "draft" PRs that would not generate notifications until they are ready

iefremov avatar Aug 02 '22 08:08 iefremov

Please add some smoke browser tests.

boocmp avatar Aug 04 '22 04:08 boocmp

A Storybook has been deployed to preview UI for the latest push

brave-builds avatar Aug 09 '22 19:08 brave-builds

A Storybook has been deployed to preview UI for the latest push

brave-builds avatar Aug 10 '22 21:08 brave-builds

A Storybook has been deployed to preview UI for the latest push

brave-builds avatar Aug 11 '22 01:08 brave-builds

@petemill mind taking a look?

iefremov avatar Aug 17 '22 22:08 iefremov

By the way I received the following warning on the console when running from this branch. It seems related:

[56106:28419:0905/213223.186036:WARNING:zip.cc(184)] ZIP extraction directory is not empty: /Users/petemill/Library/Application Support/BraveSoftware/sprwebui-201/oofiananboodjbbmdelgdommihjbkfag/1.0.110/6.0

petemill avatar Sep 06 '22 04:09 petemill

A Storybook has been deployed to preview UI for the latest push

brave-builds avatar Sep 06 '22 05:09 brave-builds

A Storybook has been deployed to preview UI for the latest push

brave-builds avatar Sep 08 '22 06:09 brave-builds

A Storybook has been deployed to preview UI for the latest push

brave-builds avatar Sep 13 '22 16:09 brave-builds