1297392 - [GSOC 2016] Missing CSS file for the HTML UI for events/tasks

Status: RESOLVED FIXED

(Calendar :: Dialogs, defect)

Description

[Paul Morris [:pmorris]]

The CSS file for the HTML implementation was accidentally left out while revising the patch for bug 1294534.

Comment 1

[Paul Morris [:pmorris]]

Attachment: html-ui-css-fix-aug23.patch

This patch adds the CSS file back in, and makes a few basic improvements to the CSS including adding "chrome://global/skin/global.css"

Comment 2

[Paul Morris [:pmorris]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=e85e6804371d

Comment 3

[[:MakeMyDay]]

When adding the link to global.css to the html file on a build with a previous version of the html patch applied, this seems to have no effect. There's still a tranaparent background and odd fonts in tab mode with html UI enabled. So, this part of the patch needs more investigation.

Maybe this is related to the changes from bug 1195173.

Comment 4

[Richard Marti (:Paenglab)]

It's a problem of namespaces. You can add in global.css before the xul namespace: @namespace html "http://www.w3.org/1999/xhtml"; and then in the rules before window,... html|html, html|body, and it works.

The problem is, we can't easily add this changes to global.css because FX doesn't use this. So this rules needs to be added in a Lightning own file.

Comment 5

[Paul Morris [:pmorris]]

Attachment: html-ui-css-fix-aug24.patch

This patch copies some styles from global.css to html-item-editing.css for now.  From my testing (on linux) I believe this should fix the transparent background on windows and perhaps the font styles as well.  I think that's sufficient for this early stage.  I added comments about the namespace issue so we can figure that out as we work on this css for a later stage of the html UI.

Comment 6

[Richard Marti (:Paenglab)]

You are hard coding some colors. On normal light themes this colors work well, but on dark themes or High contrast themes they could be almost invisible or looking wrong. I propose you try to use system colors which use theme specific colors. On https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#System_Colors and below there are the description of them. On this page, https://ssl.webpack.de/mozilla.paenglab.ch/test/SystemColors.html , you can see the colors on your system.

Comment 7

[Paul Morris [:pmorris]]

Attachment: html-ui-css-fix-aug24-second.patch

(In reply to Richard Marti (:Paenglab) from comment #6)
> You are hard coding some colors. 

Thanks for the pointers on how to avoid hard coding the colors.  I did my best to pick sensible values, but I can't see what they look like on mac or windows.  

The CSS will need to be revisited once the HTML implementation reaches a point where it actually can be used.  (Ideally using CSS grid layout, if it is available in time, see bug 616605)  Right now it's still a work in progress in early stages so it would be good to go ahead and land a first version that can then be taken further.

Comment 8

[[:MakeMyDay]]

Comment on attachment 8784566 [details] [diff] [review]
html-ui-css-fix-aug24-second.patch

Review of attachment 8784566 [details] [diff] [review]:
-----------------------------------------------------------------

Thanks. This looks good, let's take it.

Comment 9

[[:MakeMyDay]]

https://hg.mozilla.org/comm-central/rev/b05a1a42ab82