Sub-issue of #1190252: [573] Use csslint as a weapon to beat the crappy CSS out of Drupal core
Inline with the CSS cleanup efforts of the HTML5 initiative, using CSSLint at http://csslint.net provides a quick way to code-sniff our css and tweak styles.

  1. Copy and paste the the stylesheet(s) below into the css lint tool at http://csslint.net and test.
  2. Fix any warnings or errors the tool finds.
  3. Patch Drupal 8 locally and make sure the css changes have not broken anything visually.
  4. Create patch and upload for the testbot.

Files: modules/file/file.css

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mjonesdinero’s picture

test in http://csslint.net found two warnings attach is the patch i have created and tested locally, nothing was broken.

mjonesdinero’s picture

Status: Active » Needs review
mjonesdinero’s picture

Assigned: Unassigned » mjonesdinero
droplet’s picture

Status: Needs review » Needs work
+++ b/core/modules/file/file.admin.cssundefined
@@ -21,6 +21,6 @@
+.form-managed-file div.ajax-progress-bar .bar {

div.ajax-progress-bar

mjonesdinero’s picture

Status: Needs work » Needs review
FileSize
659 bytes

hi droplet add a new patch but question why on csslint it has only two warnings? and what you have said on comment no.4 is not a warning or error on css lint?

Status: Needs review » Needs work

The last submitted patch, file-css-clean-up-1662990-5.patch, failed testing.

droplet’s picture

Status: Needs work » Needs review

I scanned with my eyes. and I just tested following code and shows me 2 warnings.

form-managed-file div.ajax-progress-bar div.bar {
margin: 0;
}

when there is 2 styles, csslint thinks this is indeed needed

.form-managed-file div.ajax-progress-bar {
   display: none;
   margin-top: 4px;
   padding: 0;
   width: 28em;
 }
.form-managed-file div.ajax-progress-bar .bar {
   margin: 0;
 }

Hehe, #1190252 haven't talking it deeply before this mission.

(even it leaves, HTML5 Clean up will remove it i think.)

mjonesdinero’s picture

#5: file-css-clean-up-1662990-5.patch queued for re-testing.

swentel’s picture

Component: field_ui.module » file.module

Wrong component

barraponto’s picture

Status: Needs review » Reviewed & tested by the community

Everything OK, applies cleanly.

xjm’s picture

CSS changes need manual testing in all browsers and all affected core themes:

  1. Test pages where the relevant classes are used without the patch applied.
  2. Apply the patch, clear the site and browser caches, and test again. Confirm that there are no changes or regressions.

Post before-and-after screenshots for one browser/theme.

xjm’s picture

Assigned: mjonesdinero » Unassigned
Status: Reviewed & tested by the community » Needs work
joedougherty’s picture

It's unclear to me where these classes are being applied. Could someone with better knowledge of the File module point out exactly what a tester should be looking for in this case?

ckrina’s picture

#5 applies well in Firefox, Chrome & IE8.
Will be needed to check the .ajax-progress-bar.

YesCT’s picture

chrischinchilla’s picture

@joedougherty They're added on the file upload boxes in content add/edit screens

chrischinchilla’s picture

Status: Needs work » Reviewed & tested by the community

Also tested against latest build of Drupal 8, patch in #5 applies fine. Looks great in all Mac browsers and Lint returns 0 errors :)

daniel92’s picture

Status: Reviewed & tested by the community » Needs work
Issue tags: +Drupalconsydney
FileSize
81.4 KB
554 bytes

Removed 2 overqualified elements in file.admin.css as recommended by csslint

Also worked in Safari for Windows, didn't attach screenshot.
CSS-file-module-clean.jpg

YesCT’s picture

@daniel92

Removed 2 overqualified elements in file.admin.css as recommended by csslint

does that mean you made a change to the code and then took the screenshots? (great screenshots!!!!)

daniel92’s picture

The left screenshot for each browser is before I changed the code, and the right screenshot for each browser is after I changed the code to prove that it didn't break anything.

Thankyou!!

YesCT’s picture

Status: Needs work » Needs review

OH, I see, one of the files attached was a patch! sorry, I guess I thought there were two jpgs or something.

changing status to needs review so the testbot has a look at your patch.

how is this different than the previous patch in #5? maybe an interdiff would help... but also maybe just #5 does not apply anymore.

Status: Needs review » Needs work

The last submitted patch, file-css-clean-up-1662990.patch, failed testing.

adammalone’s picture

Issue tags: +Needs reroll
brenda003’s picture

Status: Needs work » Needs review
FileSize
555 bytes

Rerolled patch.

RaulMuroc’s picture

Status: Needs review » Reviewed & tested by the community

Tested and it gives the same results as #18 <-- Logically, because the changed code is exactly the same!!
The diffence between #18 patch and #24 patch is all about tabs and standard coding hence did not pass the test.

Without doubt, it can be set as reviewed.

catch’s picture

Status: Reviewed & tested by the community » Fixed

Committed/pushed to 8.x, thanks!

RaulMuroc’s picture

Status: Fixed » Closed (fixed)