Clean up simpletest.module.css

CSSlint errors from http://lewisnyman.co.uk/drupalcore-frontend-toolkit/

Here is a patch to clean up css errors

I have tested it on csslint. it is cleaned now. Now no error found. Passed this patch "2483913-2.patch"

1. +++ b/core/modules/simpletest/css/simpletest.module.css
   @@ -1,6 +1,6 @@
    th.simpletest-test-label {
   

   This still includes the th in the selector

2. +++ b/core/modules/simpletest/css/simpletest.module.css
   @@ -22,20 +22,20 @@ th.simpletest-test-label {
   -#simpletest-form-table tr td {
   +.simpletest-test-form tr td {
      background-color: white;
      color: #494949;
    }
   

   I think we can delete this CSS completely, the background-color: white; doesn't override anything, we shouldn't be changing the text color in modules either

3. +++ b/core/modules/simpletest/css/simpletest.module.css
   @@ -22,20 +22,20 @@ th.simpletest-test-label {
   -#simpletest-form-table tr.simpletest-group td {
   +.simpletest-test-form tr.simpletest-group td {
   

   We are still prefixing this class with tr. Do we need that?

4. +++ b/core/modules/simpletest/css/simpletest.module.css
   @@ -22,20 +22,20 @@ th.simpletest-test-label {
   -div.message > div.item-list {
   +.message > .item-list {
      font-weight: normal;
    }
   

   I wonder what this does as it's not a simpletest class, where is the message class used?

Updated Mirakolous's patch as per the above suggestions from LewisNyman.

Thanks @LewisNyman. I just returned realising I forgot to change the status.

Tested: Implemented suggested code changes and no error on css lint.

Passed

I think we need to provide some before/after screenshots to show that we haven't caused any visual regressions in the UI. We've changed the CSS but we haven't changed any markup, so I'm not sure all this CSS is applying correctly.

My patch in #7 gave a different output when I tested and is caused by this

-#simpletest-form-table tr td {
-  background-color: white;
-  color: #494949;
-}

A yellow background for the td inside .selected class is getting applied.

Screenshot attached.

Updating the patch with this change.

Updated patch fixing the above issue and attached before after screenshots.

Before

After

There are loads more improvements we can make to this CSS.

.simpletest-image {
  display: inline-block;
  cursor: pointer;
  width: 1em;
}

Can we update this and the markup so we use CSS background images and SVGs instead?

.simpletest-group-label label {
  display: inline;
  font-weight: bold;
}

It looks like this CSS no longer applies, we can change it to:

.simpletest-group-label {
  font-weight: bold;
}

.simpletest-test-label label {
  margin-left: 1em; /* LTR */
}

Can we put padding on the class instead of on the label element? Like this:

.simpletest-test-label {
  padding-left: 1em; /* LTR */
}

Also there is no RTL styling for this.

#simpletest-form-table tr td {
  background-color: white;
  color: #494949;
}

We can delete this, I disabled it and it had no effect.

#simpletest-form-table .simpletest-group td {
  background-color: #edf5fa;
  color: #494949;
}

I think we can definitely remove the ID here, but maybe we can remove the td as well? That would be nice.

.simpletest-test-form .simpletest-group label {
  display: inline;
}

What does this do? I think we can delete it.

.message > .item-list {
  font-weight: normal;
}

Delete this, modules should be messing with global UI components

.simpletest-pass.odd {
  background-color: #b6ffb6;
}
.simpletest-pass.even {
  background-color: #9bff9b;
}
.simpletest-fail.odd {
  background-color: #ffc9c9;
}
.simpletest-fail.even {
  background-color: #ffacac;
}
.simpletest-exception.odd {
  background-color: #f4ea71;
}
.simpletest-exception.even {
  background-color: #f5e742;
}
.simpletest-debug.odd {
  background-color: #eee;
}
.simpletest-debug.even {
  background-color: #fff;
}

I don't think we should mess with the colors here but we should at least remove the odd/even colors and replace with CSS nth-child

un-assigning this again. I'll try to pick this up tomorrow.

Regarding #17 is almost everything done except changing markup for SVG images.

barbarae: I am doing the screen captures before and after this current patch was applied.
to do this:
1. click on the simplytest.me button
2. clear the patch to be applied (i.e. delete the patch name)
3. after module is installed do the following steps
a. click on
b. find the testing module and turn it on (click the box to the left of the name)
c. save the change (at the bottom of the screen)
d. click on in the tool bar
e. find the test button and click (execute)
f. the resulting screen image is the "before" image to capture. Expand a couple items by clicking on the "<"
4. capture an image of the "before" resulting screen page
5. Do the same thing again, leaving the patch enabled (do not erase it). Do steps a. through f. above again
6. capture an image of the "after" resulting screen page.
7. Be sure the patch did not break anything, and observe the changed image.

Question: Should we have run all the actual tests from simpletest on the BEFORE and then do the same AFTER to show there are the same pass/fail resulting counts?

I had a chat with alexpott about this UI. Instead of using simpletest's own colors and classes we can reuse the color classes in Seven's colors.css.

This is Alex's description of how they map:

error = fail, warning = exception, success = pass and verbose = default

This also means we would need to add the color-success class as a hover override in Seven's tables.css:

/* See colors.css */
tbody tr.color-warning:hover,
tbody tr.color-warning:focus {
  background: #fdf8ed;
}
tbody tr.color-error:hover,
tbody tr.color-error:focus {
  background: #fcf4f2;
}

@Manjit.Singh Great stuff. It looks like we already have the background color set in color.css and it's different. The aim here is to make sure the color doesn't change:

.color-success {
  color: #325e1c;
  background-color: #f3faef;
}

It also means we should be able to delete all the simpletest-pass/fail/debug CSS. Yay!

We have colors already mention in colors.css as you have mention in #25. so can we remove colors from simpletest.module.css.

.simpletest-pass {
  color: #33a333;
}
.simpletest-fail {
  color: #981010;
}

Please confirm.

And some csslint warnings coming on these files colors.css and simpletest.module.css
so we have to remove that also?

tr.simpletest-pass,
.simpletest-pass:nth-child(odd).odd {
background-color: #b6ffb6;
}
.simpletest-pass:nth-child(even).even {
background-color: #9bff9b;
}
tr.simpletest-fail,
.simpletest-fail:nth-child(odd).odd {
background-color: #ffc9c9;
}
.simpletest-fail:nth-child(even).even {
background-color: #ffacac;
}
tr.simpletest-exception,
.simpletest-exception:nth-child(odd).odd {
background-color: #f4ea71;
}
.simpletest-exception:nth-child(even).even {
background-color: #f5e742;
}
tr.simpletest-debug,
.simpletest-debug:nth-child(odd).odd {
background-color: #eee;
}
.simpletest-debug:nth-child(even).even {
background-color: #fff;
}

Please confirm.

#simpletest-form-table .select-all

+++ b/core/modules/simpletest/css/simpletest.module.css
@@ -1,9 +1,9 @@
+.simpletest-test-form .select-all {
   width: 1em;
 }

This style does not make sense, since, in the file /core/themes/seven/css/components/tables.css - the width of this cell is already set to 1px, and as you know, the minimum width of the table cell is equal to the maximum width of a nested objects

Removed the needs screenshot because it seems that all the requests were full filled.

Checked code with csslint, have only one warning.

csslint: There are 1 problems in /var/www/drupal8-contrib/core/themes/seven/css/components/tables.css.

tables.css
1: warning at line 126, col 1
Element (th.select-all) is overqualified, just use .select-all without element name.
th.select-all {

We're currently using a rule-by-rule approach to CSS cleanup for consistency: #2865971: Use stylelint as opposed to csslint in core