Resolve field angle overlap render problem

[nhzandi]

The basics

• I branched from develop
• My pull request is against develop
• My code follows the style guide

The details

Resolves

Adding a border to angle picker field, to fix rendering problem when two blocks with the same color overlap issue #2379

Proposed Changes

Instead of using the same color for background and border, lighten the background color and use it for border color.

Reason for Changes

Some render problems when two blocks with the same color overlap. issue #2379

Test Coverage

Tested on:

• Desktop Chrome
• Desktop Firefox

Additional Information

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here (e.g. I signed it!) and we'll verify it.

---

What to do if you already signed the CLA

Individual signers

• It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

• Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
• The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
• The email used to register you as an authorized contributor must also be attached to your GitHub account.

ℹ️ Googlers: Go here for more info.

[nhzandi]

I signed it!

[BeksOmega]

Note to maintainers: I added some colour calculation functions in #2413 that may affect this.

[RoboErikG]

Hi Navid,

Thanks for the contribution, but we only accept pull requests against the develop branch. You may be able to rebase your branch locally (git rebase develop) or create a new branch based on develop and cherry-pick your change onto it.

[googlebot]

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for all the commit author(s) or Co-authors. If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.
In order to pass this check, please resolve this problem and have the pull request author add another comment and the bot will run again. If the bot doesn't comment, it means it doesn't think anything has changed.

ℹ️ Googlers: Go here for more info.

[nhzandi]

@RoboErikG My mistake. It is now against the develop branch

[googlebot]

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

[RoboErikG]

Bonus, BeksOmega just added an API for this. You can now use block.getColourBorder().

The one caveat is you need to check which border colour to use since the old style is slightly different. We might tweak the API with this use case in mind, but for now this can be:

var border = this.sourceBlock_.getColourBorder();
border = border.colourBorder == null ? border.colourLight : border.colourBorder;

Blockly.DropDownDiv.setColour(this.sourceBlock_.getColour(), border);

[RoboErikG]

@BeksOmega no action necessary, but as a point of reference here's another use case for the colourBorder API. =)

[RoboErikG]

Thanks for the PR!