Buttons get Brave style

[petemill]

Uplifts should include:

• Fix unreadable text colors #3801

Fix brave/brave-browser#6398

Native buttons - creates brave style
WebUI buttons - perfects existing brave style to be consistent with latest design iteration that native buttons now get

Buttons have 2 types: regular and prominent (native) or action (webui).
Each button has styles for 4 states: regular, hover, focus, active and active states.
Each state controls: text color, background color, ink highlight color, ink color, focus ring color, border color, and shadows.

That native button strategy is to replace the Create functions which are used to create MdTextButtons across the browser Views UI code and have those functions instead return BraveTextButtons. This class inherits from MdTextButton.
Unfortunately the definitions for colors seems to be split between a UI-common function (GetSystemColor) and hard-coded within the button class.

The WebUI strategy is improved by relying on css variables for code simplification: the variables change for different states, but the css properties applying those variables stay the same, and therefore css is only applied once and not overriden multiple times for different states.

Testing

The following should be the same buttons styles for WebUI and Native. The only difference is that WebUI buttons get a slightly better shadow effect when pressed ...because css is better ;-) (but really because AFAIK it would require a lot of new native code to get the shadow like this whilst still using a lot of the existing chromium ink drop and other button features).

• Native buttons can both be seen by visiting an installable web app site like maps.google.com, clicking the (+) icon in the Location Bar. There'll be Install and Cancel buttons on the bubble dialog.
• WebUI buttons can both be seen by visiting the Settings page and clicking 'Import bookmarks and settings' at the top. A dialog with both buttons will be show.

Prominent (light and dark mode)

Hover

Pressed

Regular (light mode)

Hover

Pressed (on Windows gets a ink bubble animation)

Regular (dark mode)

Hover

Pressed (on Windows gets a ink bubble animation)

Focus (same for all styles)

Submitter Checklist:

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Verified that these changes build without errors on
  • Android
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that these changes pass automated tests (unit, browser, security tests) on
  • iOS
  • Linux
  • macOS
  • Windows
• Verified that all lint errors/warnings are resolved (npm run lint)
• Ran git rebase master (if needed).
• Ran git rebase -i to squash commits (if needed).
• Tagged reviewers and labelled the pull request as needed.
• Request a security/privacy review as needed.
• Add appropriate QA labels (QA/Yes or QA/No) to include the closed issue in milestone
• Public documentation has been updated as necessary. 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-Protection-Mode
  • 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-issues-with-tracking-protection
  • https://github.com/brave/brave-browser/wiki/QA-Guide

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.

[bsclifton]

@petemill per the triage meeting, can you create an issue for this? (capturing what areas you're looking at updating)

[petemill]

This is working and ready on macOS, but I'm getting an unknown immediate crash on Windows. Will see how the CI does, and do a Debug build locally in the mean time.

[bsclifton]

Just gave this a go; works great! I used in both light and dark mode, went through all the different pages and situations I could think of (another good UI to try for seeing native components is clicking the lock and going to the cookie manager OR adding a new bookmark folder to toolbar)

Code changes also look good to me!

[simonhong]

Wow!! great idea! 👍

[simonhong]

LGTM

[petemill]

Pushed a rebase on c78

[petemill]

I've pushed a fix for the issue that the Buttons would first paint as square, and then paint as rounded when re-painted (due to hover or focus, etc).

[petemill]

Not sure why CI lint and build failed yet again, even after a rebase. Just trying again...

[petemill]

CI seems to have failed due to a single browser test in unrelated code

15:57:00  ../../brave/components/brave_rewards/browser/rewards_service_browsertest.cc:2572: Failure
15:57:00  Expected equality of these values:
15:57:00    ac_reconcile_status_
15:57:00      Which is: Result::LEDGER_ERROR
15:57:00    ledger::Result::LEDGER_OK
15:57:00      Which is: Result::LEDGER_OK
15:57:00  Stack trace:

[bsclifton]

hmm... I just pulled latest and noticed a few irregularities (macOS):

I did do a sync + then an incremental build. Can you double check this, @petemill?

[petemill]

Thanks @bsclifton. A last minute change of where the radius was applied didn't get adequate testing. The fix was pushed. https://github.com/brave/brave-core/compare/7cee53ecf4ec18662eee5f8b9109f746dfa5adda..54e40cea0457dac3c6d635915442a88bd3745e24

[bsclifton]

Retested after last change- looks good! 😄

[petemill]

Build seems 'unstable', not failed, and seems to have errored at the intermittent rewards test case.

[bsclifton]

@petemill looks like you're good to go- the test that failed is intermittent:
brave/brave-browser#6468

cc: @NejcZdovc
https://staging.ci.brave.com/job/brave-browser-build-pr/job/native-button-styles/15/execution/node/658/log/