text field on start page is black on black when using a dark theme

VERIFIED FIXED in Firefox 60

Status

()

defect
P2
normal
VERIFIED FIXED
2 years ago
a year ago

People

(Reporter: prof7bit, Assigned: Mardak)

Tracking

(Blocks 1 bug, {regression, uiwanted})

57 Branch
Firefox 60
Unspecified
Linux
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox-esr52 unaffected, firefox57 wontfix, firefox58 wontfix, firefox59 wontfix, firefox60 verified)

Details

(Whiteboard: [AS60MVP])

Attachments

(3 attachments)

Reporter

Description

2 years ago
Posted image Auswahl_154.png
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171115095126

Steps to reproduce:

using a dark desktop theme (Kubuntu with "Breeze-Dark")


Actual results:

search text box on firefox start page is black on black. Other text boxes are ok.
See attached screen shot.


Expected results:

should be black on white (because the entire start page has a white theme)
Component: Untriaged → Widget: Gtk
OS: Unspecified → Linux
Product: Firefox → Core
color is set to inherit
https://searchfox.org/mozilla-central/rev/9bab9dc5a9472e3c163ab279847d2249322c206e/browser/extensions/activity-stream/css/activity-stream-linux.css#663,667

but background-color is not set, and so is still the default -moz-Field for
input.

Suspect regression from
https://hg.mozilla.org/mozilla-central/rev/e6aa4869c635#l5.396
Blocks: 1394706
Component: Widget: Gtk → Activity Streams: Newtab
Keywords: regression
Product: Core → Firefox
Assignee

Comment 2

2 years ago
(In reply to Karl Tomlinson (:karlt) from comment #1)
> color is set to inherit
> https://searchfox.org/mozilla-central/rev/
> 9bab9dc5a9472e3c163ab279847d2249322c206e/browser/extensions/activity-stream/
> css/activity-stream-linux.css#663,667
> but background-color is not set, and so is still the default -moz-Field for
> input.
Probably should just set an explicit `background-color: #FFF;`?
Duplicate of this bug: 1418231
(In reply to Ed Lee :Mardak from comment #2)
> Probably should just set an explicit `background-color: #FFF;`?

I don't know.  What is the inherit rule designed to inherit?
Assignee

Comment 5

2 years ago
Oh are you maybe suggesting just remove the inherit? It looks like it was added to match the color of the other text on the page: #0C0C0D;
I didn't mean to suggest anything beyond that background-color should be overridden if color is overridden.

I guess removing the inherit would leave both native colors in the search box, which is probably an acceptable solution.
Different people will have different opinions about whether they like a dark background in the search box or not.

Setting an explicit background color would also be acceptable, I assume, if the inherited color is explicit.  That approach would allow the color to designed to complement the background set elsewhere. 

The border of the input is not natively styled, and so I would probable lean away from using native colors inside the border.
Assignee

Updated

2 years ago
Priority: -- → P3

Comment 7

2 years ago
this is affecting not just the search box on start page. 
attaching an example of a web page where the input, select boxes take the gtk theme color i am using.

sample url i used is https://pgi.billdesk.com/pgidsk/pgijsp/citicard/citibank_card.jsp checked on other browser this does not happen.

(I guess this happens only when an explicit color is not mentioned on the web page.)

here is a sample i used to check 
<html>
        <input type="text"></input> <!-- color changes based on the theme used by the system -->
</html>
Comment hidden (advocacy)

Comment 9

a year ago
For the reference, setting the textbox background to #fff looks great, and I assume this is the expected look (with #fff being the default background color for text fields on light themes). "transparent" and "inherit" works too, but looks a little less beautiful IMO, because the box then inherits the (really) light grey background and loses its emphasis.

@Prakash, the issue you mentioned is separate from this one (it's bug 1283086).

Comment 10

a year ago
As for form elements in general, system colors should under no circumstance affect elements of webpages. It would be best if Firefox used the conventional colors for fallback if no color is specified - eg. white BG and black text.

As for Firefox's own pages, I think the best approach would be if they followed Firefox's GUI theme entirely as they are part of FF rather than an independent webpage. The blazing white new tab page on a system with dark theme literally hurts my eyes when it pops up.
Assignee

Comment 11

a year ago
uiwanted: currently activity stream sets the search text color to be Grey-90 without an explicit background color. Should the background be explicitly set to white to prevent dark theme styling? Or don't set a color to allow dark theme to set both color and background? Note: our search box also has custom border colors, etc.
Keywords: uiwanted
Assignee

Updated

a year ago
Iteration: --- → 60.3 - Feb 26
Priority: P3 → P2
Assignee

Updated

a year ago
Whiteboard: [AS60MVP]
Assignee

Updated

a year ago
Blocks: 1437659
Assignee

Updated

a year ago
Assignee: nobody → edilee

Comment 13

a year ago
Commit pushed to master at https://github.com/mozilla/activity-stream

https://github.com/mozilla/activity-stream/commit/5e9f8ac3e67b81d30f0bd4ee3ab381503c42848e
fix(styles): Inherit both text and background colors for inputs to avoid dark theme conflicts (#3982)

Fix Bug 1418090 - text field on start page is black on black when using a dark theme

Updated

a year ago
Status: UNCONFIRMED → RESOLVED
Last Resolved: a year ago
Resolution: --- → FIXED
Assignee

Updated

a year ago
Blocks: 1438821
User Agent  Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0
OS  Linux 4.14.15-1-ARCH

I have verified that the issue is no longer reproducible on the latest Nightly build on Arch Linux with adwaita-dark and breeze-dark themes, and on Linux Mint with Mint-Y-dark theme.
Status: RESOLVED → VERIFIED
Assignee

Updated

a year ago
Blocks: 1447752
You need to log in before you can comment on or make changes to this bug.