[WIP] Improvements

assets/dev/scripts/theme-sniffer.js

@@ -8,33 +8,33 @@ import SniffJs from './utils/sniff-js';
 
 export default class ThemeSniffer {
 	constructor( options ) {
-		this.SHOW_CLASS     = 'is-shown';
-		this.ERROR_CLASS    = 'is-error';
-		this.WARNING_CLASS  = 'is-warning';
+		this.SHOW_CLASS = 'is-shown';
+		this.ERROR_CLASS = 'is-error';
+		this.WARNING_CLASS = 'is-warning';
 		this.DISABLED_CLASS = 'is-disabled';
-		this.IS_RAW_CLASS   = 'is-raw';
+		this.IS_RAW_CLASS = 'is-raw';
 
-		this.reportItemHeading  = options.reportItemHeading;
-		this.reportReportTable  = options.reportReportTable;
-		this.reportNoticeType   = options.reportNoticeType;
+		this.reportItemHeading = options.reportItemHeading;
+		this.reportReportTable = options.reportReportTable;
+		this.reportNoticeType = options.reportNoticeType;
 		this.reportNoticeSource = options.reportNoticeSource;
-		this.reportItemLine     = options.reportItemLine;
-		this.reportItemType     = options.reportItemType;
-		this.reportItemMessage  = options.reportItemMessage;
-		this.reportItemBtn      = options.reportItemBtn;
-		this.reportItemSource   = options.reportItemSource;
+		this.reportItemLine = options.reportItemLine;
+		this.reportItemType = options.reportItemType;
+		this.reportItemMessage = options.reportItemMessage;
+		this.reportItemBtn = options.reportItemBtn;
+		this.reportItemSource = options.reportItemSource;
 
 		this.$sniffReport = options.sniffReport;
 		this.$snifferInfo = options.snifferInfo;
 		this.$checkNotice = options.checkNotice;
 		this.$startNotice = options.startNotice;
-		this.$reportItem  = options.reportItem;
-		this.$loader  = options.loader;
+		this.$reportItem = options.reportItem;
+		this.$loader = options.loader;
 
 		this.clipboardInstance = null;
 
-		this.$startButton  = $( options.startButton );
-		this.$stopButton  = $( options.stopButton );
+		this.$startButton = $( options.startButton );
+		this.$stopButton = $( options.stopButton );
 
 		this.nonce     = options.nonce;
 		this.runAction = options.runAction;
@@ -219,6 +219,7 @@ export default class ThemeSniffer {
 					( async() => {
 						if ( file.filePath.substr( file.filePath.length - 3 ) === '.js' ) {
 							let sniffer = new SniffJs( file );
+							// eslint-disable-next-line require-atomic-updates
 							file = await sniffer.process();
 						}
 						this.$sniffReport.append( this.renderJSON( file ) );
@@ -230,8 +231,8 @@ export default class ThemeSniffer {
 				this.hideNotices( themeSnifferLocalization.errorReport, false );
 				this.$snifferInfo.addClass( this.SHOW_CLASS ).addClass( this.ERROR_CLASS ).text( response.data[0].message );
 			}
-		}, ( xhr, textStatus, errorThrown ) => {
-			throw new Error( `Error: ${errorThrown}: ${xhr} ${textStatus}` );
+		}, ( xhr, textStatus ) => {
+			throw new Error( `Error: ${xhr.status}: ${xhr.responseText} ${textStatus}` );
 		}
 		);
 	}

assets/dev/scripts/utils/sniff-js.js

@@ -22,6 +22,7 @@ export class SniffJs {
 	 */
 	constructor( fileObject ) {
 		this.fileObject = fileObject;
+
 		// Seems like syntax errors or empty results cause phpcs to provide a non-number for error count.
 		this.fileObject.errors = isNaN( this.fileObject.errors ) ? 0 : parseInt( this.fileObject.errors, 10 );
 		this.path = this.getPath();

assets/dev/styles/components/_admin-screen.scss

@@ -24,35 +24,58 @@
 			margin-right: 10px;
 			display: inline-block;
 			vertical-align: top;
-			border: 1px solid $graywhite-color;
+			border: 1px solid $darkgray-color;
 			border-radius: 5px;
 
 			&--spaced {
-				margin-right: 5px;
+				margin-right: 10px;
+			}
+
+			&:focus,
+			&:active {
+				border-color: $wordpress-blue-color !important;
+				box-shadow: 0 0 0 1px $wordpress-blue-color !important; // To override the default.
+				outline: 0;
 			}
 		}
 
 		&-input {
 			height: 34px;
 			padding: 10px;
 			margin: 0;
-			border: 1px solid $graywhite-color;
+			border: 1px solid $darkgray-color !important; // To override the default input[type="text"].
 			border-radius: 5px;
 			min-width: 200px;
+
+			&:focus,
+			&:active {
+				border-color: $wordpress-blue-color !important;
+				box-shadow: 0 0 0 1px $wordpress-blue-color !important; // To override the default.
+				outline: 0;
+			}
 		}
 
 		&-checkbox {
 			height: 28px !important;
 			width: 28px !important;
-			border: 1px solid $graywhite-color !important;
+			border: 1px solid $darkgray-color !important;
 			border-radius: 5px;
 			margin-right: 10px !important;
 			margin-bottom: 10px !important;
 			position: relative;
 			top: 4px;
 
 			&::before {
-				font-size: 32px !important;
+				margin: 0 !important;
+				width: 100% !important;
+				height: 100% !important;
+			}
+
+			&:focus,
+			&:active {
+				border-color: $wordpress-blue-color !important;
+				box-shadow: 0 0 0 1px $wordpress-blue-color !important; // To override the default.
+				outline: 0;
 			}
 		}
 
@@ -62,31 +85,36 @@
 			vertical-align: top;
 			text-transform: uppercase;
 			color: $white-color;
+			font-weight: 600;
 			border-radius: 5px;
-			transition: background-color 300ms ease-in-out;
+			transition: background-color 300ms ease-in-out, border-color 300ms ease-in-out;
 			cursor: pointer;
-			margin-right: 5px;
+			margin-right: 10px;
 
 			&--primary {
 				background-color: $green-color;
+				border-color: $green-color;
 
 				&:hover {
 					background-color: darken($green-color, 20%);
+					border-color: darken($green-color, 20%);
 				}
 			}
 
 			&--secondary {
 				background-color: $red-color;
+				border-color: $red-color;
 
 				&:hover {
 					background-color: darken($red-color, 20%);
+					border-color: darken($red-color, 20%);
 				}
 			}
 
 			&:focus,
 			&:active {
-				border-color: $blue-color;
-				box-shadow: 0 0 2px rgba($darkblue-color, 0.8);
+				border-color: $wordpress-blue-color;
+				box-shadow: 0 0 0 1px $wordpress-blue-color;
 				outline: 0;
 			}
 
@@ -231,6 +259,13 @@
 					font-size: 16px;
 					padding-right: 7px;
 				}
+
+				&:focus,
+				&:active {
+					border-color: $wordpress-blue-color;
+					box-shadow: 0 0 0 2px $wordpress-blue-color;
+					outline: 0;
+				}
 			}
 		}
 	}

assets/dev/styles/utils/_colors.scss

@@ -2,9 +2,10 @@ $white-color: #fff;
 $dirtywhite-color: #f3f3f3;
 $graywhite-color: #ddd;
 $gray-color: #ccc;
-$darkgray-color: #737373;
+$darkgray-color: #505a63;
 $dark-color: #444;
-$red-color: #ef5d5d;
-$green-color: #58bf66;
+$red-color: #c51414;
+$green-color: #080;
 $blue-color: #5b9dd9;
 $darkblue-color: #1e8cbe;
+$wordpress-blue-color: #007cba;

composer.json

@@ -20,16 +20,21 @@
     "jakub-onderka/php-parallel-lint": "^1.0",
     "php-di/php-di": "^6.0",
 		"squizlabs/php_codesniffer": "^3.3.0",
-		"wptrt/wpthemereview": "^0.2.0"
+		"wptrt/wpthemereview": "^0.2.1"
 	},
 	"require-dev": {
 		"roave/security-advisories" : "dev-master"
 	},
 	"autoload": {
 		"classmap": [
 			"src/",
-			"views/"
-		]
+			"views/",
+      "vendor/squizlabs/php_codesniffer/"
+		],
+    "exclude-from-classmap": [
+      "vendor/squizlabs/php_codesniffer/tests",
+      "vendor/squizlabs/php_codesniffer/src/Standards/*/Tests/"
+    ]
 	},
 	"scripts": {
 		"checkcs": "@php ./vendor/squizlabs/php_codesniffer/bin/phpcs",