about:devtools - white dots on RDM icon when on Dark mode
Categories
(DevTools :: General, defect, P5)
Tracking
(firefox-esr78 wontfix, firefox87 wontfix, firefox88 wontfix, firefox89 verified, firefox90 verified)
People
(Reporter: cfogel, Assigned: b19208)
References
Details
(Keywords: good-first-bug)
Attachments
(3 files, 1 obsolete file)
9.45 KB,
image/png
|
Details | |
25.73 KB,
image/png
|
Details | |
48 bytes,
text/x-phabricator-request
|
pascalc
:
approval-mozilla-beta+
|
Details | Review |
Affected versions
- 78.9.0esr, 87.0, 88.0b7, 89.0a1(2021-04-03)
Affected platforms
- Windows 10, Ubuntu 20;
Steps to reproduce
- OS and Firefox set on dark theme;
- Access about:devtools
- Scroll down and observe the icons;
Expected result
- icons are properly displayed;
Actual result
- white dots at the bottom of the Responsive Design mode;
Regression range
- not a regression;
Additional notes
- attached screenshot with the issue;
- remains to confirm on macOS.
Reporter | ||
Updated•3 years ago
|
Comment 1•3 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'DevTools::Responsive Design Mode' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.
Updated•3 years ago
|
Comment 2•3 years ago
|
||
Cristian, how do you set OS dark theme on Win 10?
Reporter | ||
Comment 3•3 years ago
|
||
- Right Click on Desktop;
- Personalize;
- In the Settings window choose Colors;
- In the Choose your color dropdown pick Dark.
Comment 4•3 years ago
•
|
||
Thank you!
I can reproduce this issue on my machine.
This is because the background color of the mobile-device-image (in the SVG) is set to white to cover the window-image behind it.
It looks like the window-image should not render the part that's hidden behind the mobile-device-image and the mobile-device-image should be transparent just like the window-image.
The image is located here:
https://searchfox.org/mozilla-central/source/devtools/startup/aboutdevtools/images/feature-responsive.svg
And rendered in this file:
https://searchfox.org/mozilla-central/rev/21110f35dbb95d3c41c8c5bd363ec689900af30f/devtools/startup/aboutdevtools/aboutdevtools.js#102
I am marking this as first-good-bug for someone who's good with editing SVG images.
We could also use CSS styles within SVG reflecting the current theme (OS, Firefox) , see some comments in bug 1703451
Honza
Updated•3 years ago
|
Hello. I am an outreachy applicant. Can I take up this bug? Would like to contribute with some guidance from your side.
Comment 6•3 years ago
|
||
Thank you for helping with this, assigned to you.
You might want to read the docs first
https://firefox-source-docs.mozilla.org/devtools/
Honza
Hello Honza!
I am new to svg and actually got to know about it due to this bug. So, I couldn't figure out how we can not render the window part behind the mobile-device-image and make the white background transparent, as you said. However, from the fill color, I could find out the correct path tag. I noticed that the end part of that path forms that rectangular background and I just reduced its height.
So, the background appearing like dots has vanished. Have also attached the screenshot. So, it's serving the purpose. Does this work?
Thanks
Comment 9•3 years ago
|
||
Thanks Vaidehi, this sounds like it could be good enough solution.
Can you please post a patch using Phabricator?
I can do review/testing.
You might read about Phabricator here
https://firefox-source-docs.mozilla.org/mobile/android/geckoview/contributor/geckoview-quick-start.html
Thank you.
Comment 10•3 years ago
|
||
Comment on attachment 9218063 [details]
White dots vanished due to reduced height of the background
Please don't use this flag, review should be done using Phabricator.
Assignee | ||
Comment 11•3 years ago
|
||
(In reply to Jan Honza Odvarko [:Honza] (always need-info? me) from comment #9)
Thanks Vaidehi, this sounds like it could be good enough solution.
Can you please post a patch using Phabricator?
I can do review/testing.You might read about Phabricator here
https://firefox-source-docs.mozilla.org/mobile/android/geckoview/contributor/geckoview-quick-start.htmlThank you.
Sure. I will post a patch.
Assignee | ||
Comment 12•3 years ago
|
||
Depends on D113386
Assignee | ||
Comment 13•3 years ago
|
||
Assignee | ||
Comment 14•3 years ago
|
||
(In reply to Vaidehi from comment #12)
Created attachment 9218418 [details]
Bug 1703154 - [devtools] Reduced the rectangular white backgroud of mobile-device-image. r=HonzaDepends on D113386
Please ignore this patch.
Updated•3 years ago
|
Comment 15•3 years ago
•
|
||
(In reply to Vaidehi from comment #14)
Depends on D113386
Please ignore this patch.
Done (I marked it as obsolete)
When making changes to the patch use: hg commit --amend
to work on existing one instead of introducing a new one.
Updated•3 years ago
|
Comment 17•3 years ago
|
||
Pushed by jodvarko@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/56ba7d91ec33 Reduce the height of rectangular white background of mobile-device-image. r=Honza
Comment 18•3 years ago
|
||
bugherder |
Assignee | ||
Comment 19•3 years ago
|
||
Okay.
So, I think, I don't need to push the changes as it has been done automatically.
Thank you Honza for assisting me in my first ever contribution!
Comment 20•3 years ago
|
||
The patch landed in nightly and beta is affected.
:b19208, is this bug important enough to require an uplift?
If not please set status_beta
to wontfix
.
For more information, please visit auto_nag documentation.
Updated•3 years ago
|
Assignee | ||
Comment 21•3 years ago
|
||
Comment on attachment 9218496 [details]
Bug 1703154 - Reduce the height of rectangular white background of mobile-device-image. r=Honza
Beta/Release Uplift Approval Request
- User impact if declined: In dark mode, white dots would appear below the "Responsive design mode" svg image
- Is this code covered by automated tests?: No
- Has the fix been verified in Nightly?: No
- Needs manual test from QE?: No
- If yes, steps to reproduce:
- List of other uplifts needed: None
- Risk to taking this patch: Low
- Why is the change risky/not risky? (and alternatives if risky): Small svg fix to just reduce height of white rectangular background
- String changes made/needed: no
Comment 22•3 years ago
|
||
Tested in Nightly and works for me.
@Vaidehi, thank you for working on this.
Honza
Comment 23•3 years ago
|
||
Comment on attachment 9218496 [details]
Bug 1703154 - Reduce the height of rectangular white background of mobile-device-image. r=Honza
Polish, micropatch to an svg image, we are still in early betas, approved for 89 beta 10, thanks.
Comment 24•3 years ago
|
||
bugherder uplift |
Comment 25•3 years ago
|
||
The issue is verified fixed using Fx89.0b10 and the latest Fx90.0a1 on Windows 10 and Ubuntu 18.04.
Updated•3 years ago
|
Description
•