Closed Bug 1696500 Opened 7 months ago Closed 5 months ago

Proton panels should have the correct border colour in default/Light mode

Categories

(Firefox :: Theme, task, P1)

task
Points:
3

Tracking

()

VERIFIED FIXED
90 Branch
Tracking Status
firefox89 --- verified
firefox90 --- verified

People

(Reporter: mconley, Assigned: bigiri)

References

(Blocks 1 open bug)

Details

(Keywords: helpwanted, Whiteboard: [proton-door-hangers] [proton-uplift])

Attachments

(3 files)

Our panels have a --arrowpanel-border-color CSS variable that they use to set the border colour of the panels.

We should update the rules so that the Proton panels have the --arrowpanel-border-color match the value of --arrowpanel-background when in default / Light mode.

Severity: -- → S4
Points: --- → 3
Priority: -- → P3
Priority: P3 → P1

According to mstange, having an invisible border is not possible on macOS. This is because the operating system is drawing the "shadow rim" around the panel, and we don't have any influence over it.

I seem to be able to do this for Windows though. Unsure about Linux.

Let me clarify though: The macOS shadow rim is drawn outside any border we draw, in addition to it. So we should still remove any border from our side. Then the only remaining "border" is the shadow rim, which we don't have control over.

Hey Gijs, speaking to amylee, it sounds like we want to apply a hairline-color border on all panels on the platforms where we're applying borders to modals. Do you know which platforms those are?

Flags: needinfo?(gijskruitbosch+bugs)

(In reply to Mike Conley (:mconley) (:⚙️) (Catching up on needinfos) from comment #3)

Hey Gijs, speaking to amylee, it sounds like we want to apply a hairline-color border on all panels on the platforms where we're applying borders to modals. Do you know which platforms those are?

I'm confused; the modals spec doesn't have any borders, nor does it have platform-dependent ones. It only has box shadows, and radiuses its content.

Flags: needinfo?(gijskruitbosch+bugs) → needinfo?(mconley)

From UX, it sounds like border styling on our panels isn't a blocker.

Flags: needinfo?(mconley)
Priority: P1 → P2
Whiteboard: [proton-door-hangers] → [proton-door-hangers][priority:2a]
Blocks: 1700957
Priority: P2 → P1

Promoted to P1 per conversation in MR1 triage call this morning

Keywords: helpwanted
Whiteboard: [proton-door-hangers][priority:2a] → [proton-door-hangers]
Whiteboard: [proton-door-hangers] → [proton-door-hangers][priority:p2a]
Assignee: nobody → bigiri
Whiteboard: [proton-door-hangers][priority:p2a] → [proton-door-hangers][priority:2a]
Whiteboard: [proton-door-hangers][priority:2a] → [proton-door-hangers]

Set proton panel border colors to match spec for light/dark mode in the .css and manifest.json files.

Attachment #9217149 - Attachment description: WIP: Bug 1696500 - Proton panels should not have a visible border in default/Light mode r=mconley → Bug 1696500 - Proton panels should not have a visible border in default/Light mode r=mconley

Commented in Phabricator.

Flags: needinfo?(mconley)
Attachment #9217149 - Attachment description: Bug 1696500 - Proton panels should not have a visible border in default/Light mode r=mconley → Bug 1696500 - Proton panels should not have a visible border in default/Light mode r=mconley,dao
Summary: Proton panels should not have a visible border in default/Light mode → Proton panels should have the correct border colour in default/Light mode
Attachment #9217149 - Attachment description: Bug 1696500 - Proton panels should not have a visible border in default/Light mode r=mconley,dao → Bug 1696500 - Proton panels should have the correct border colour in light mode. r=mconley
Pushed by bigiri@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/fbb0306fdaa5
Proton panels should have the correct border colour in light mode. r=mconley,desktop-theme-reviewers,dao
Duplicate of this bug: 1703147
Status: NEW → RESOLVED
Closed: 5 months ago
Resolution: --- → FIXED
Target Milestone: --- → 90 Branch
Blocks: 1706154

Just a gentle reminder to request uplift, this is blocking a P2a (bug 1706154)

Flags: needinfo?(bigiri)

Comment on attachment 9217149 [details]
Bug 1696500 - Proton panels should have the correct border colour in light mode. r=mconley

Beta/Release Uplift Approval Request

  • User impact if declined: Required for Proton/MR1
  • Is this code covered by automated tests?: No
  • Has the fix been verified in Nightly?: No
  • Needs manual test from QE?: Yes
  • If yes, steps to reproduce: The light / system mode border for panels should be rgb(240,240,244). The change in this patch does not affect dark / dark-system mode.
  • List of other uplifts needed: none
  • Risk to taking this patch: Low
  • Why is the change risky/not risky? (and alternatives if risky): CSS/web-extension theme only change
  • String changes made/needed: none
Attachment #9217149 - Flags: approval-mozilla-beta?
Flags: qe-verify+
Flags: needinfo?(bigiri)
QA Whiteboard: [qa-triaged]
Whiteboard: [proton-door-hangers] → [proton-door-hangers] [proton-uplift]

Comment on attachment 9217149 [details]
Bug 1696500 - Proton panels should have the correct border colour in light mode. r=mconley

Approved for 89 beta 6, thanks.

Attachment #9217149 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
Duplicate of this bug: 1706154

Hi jared

I checked this on windows10 64bit, Macos 10.14 and Ubuntu 20 64bit. Using firefox beta 89.0b8 and nightly 90.0a1
I had different results. Perhaps its because of the difference in each operating sytem? There was a big difference in ubuntu 20 tho.

What i did was to go to http://permission.site/ and then hit some of those like "microphone" and then check the border right next to the white area.

Here is what i got:

(Deepin picker - ubuntu 20)
C4C4C4 on system theme
F0F0F4 on light theme

( Windows 10 - using Rulerapp )
FFF0F0F4 on system theme
FFF0F0F4 on light theme

(MacOs 10.14 using xScope)
ececf1 on system theme
ececf1 on light theme

please let me know if i need to open another bug or if its fine.

thanks,

Flags: needinfo?(jaws)

Hi Jared, did you have time to look over the above comment?

I did not have time. I'm on PTO this week. Harry, could you take a look?

Flags: needinfo?(jaws) → needinfo?(htwyford)

(In reply to Pablo from comment #18)

There was a big difference in ubuntu 20 tho.

It's expected that the Ubuntu system theme will use different colors than Firefox Light. You got #f0f0f4 when using the Firefox Light theme, so this is working as expected.

(MacOs 10.14 using xScope)
ececf1 on system theme
ececf1 on light theme

Are you sure? I just measured the border color with Xscope on macOS and got #f0f0f4, as expected. If you're getting something else, could you please post a screenshot?

Flags: needinfo?(htwyford) → needinfo?(pablo.muir)
Attached image mac1014.png
Flags: needinfo?(pablo.muir)

I checked again on a mac and the code started to show up correctly, but it was because its a Mac 10.15
when i switched to Mac 10.14.6 then i started to see the ececf1 code again, (attached screenshot)

Fix was ferified in Beta and nightly since comment#18 using Ubuntu 20, Windows 10 and Mac 10.15
new bug was opened to investigate why on mac 10.14 it gives a different color:

https://bugzilla.mozilla.org/show_bug.cgi?id=1712957

Status: RESOLVED → VERIFIED
QA Whiteboard: [qa-triaged]
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.