phase 1 of JS-CSS refactor

.gitignore

@@ -17,6 +17,8 @@ nbproject/*
 .svn
 errors.err
 tags
+node_modules
+package-lock.json
 /.phpunit.result.cache
 /nbproject/
 /composer.lock

.jshintrc

@@ -80,5 +80,6 @@
     "white"         : true,     // true: Check against strict whitespace and indentation rules
 
     // Custom Globals
-    "predef"        : [ ]       // additional predefined global variables
+    "predef"        : [ ],      // additional predefined global variables
+    "esversion"     : 6
 }

package.json

@@ -0,0 +1,29 @@
+{
+    "name": "debug_kit",
+    "version": "1.0.0",
+    "description": "CakePHP Debug Kit",
+    "author": "Kevin Pfeifer",
+    "license": "MIT",
+    "homepage": "https://github.com/cakephp/debug_kit#readme",
+    "bugs": {
+        "url": "https://github.com/cakephp/debug_kit/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/cakephp/debug_kit.git"
+    },
+    "keywords": [
+        "cakephp",
+        "debug",
+        "kit"
+    ],
+    "devDependencies": {
+        "laravel-mix": "^6.0.48",
+        "resolve-url-loader": "^5.0.0",
+        "sass": "^1.52.2",
+        "sass-loader": "^12.6.0"
+    },
+    "scripts": {
+        "start": "npx mix"
+    }
+}

webroot/css/reset.css → source/css/_reset.scss

@@ -1,4 +1,4 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
+/* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
 */
@@ -11,37 +11,37 @@ b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
+article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
-	display: block;
+    display: block;
 }
 body {
-	line-height: 1;
+    line-height: 1;
 }
 ol, ul {
-	list-style: none;
+    list-style: none;
 }
 blockquote, q {
-	quotes: none;
+    quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
-	content: '';
-	content: none;
+    content: '';
+    content: none;
 }
 table {
-	border-collapse: collapse;
-	border-spacing: 0;
+    border-collapse: collapse;
+    border-spacing: 0;
 }

source/css/_utilities.scss

@@ -0,0 +1,7 @@
+.u-text-center {
+    text-align: center;
+}
+
+.u-text-right {
+    text-align: right;
+}

source/css/base/_elements.scss

@@ -0,0 +1,37 @@
+body {
+    padding: 0;
+    margin: 0;
+    font-family: "Helvetica-Neue", Helvetica, Arial, sans-serif;
+    overflow: hidden;
+}
+
+table {
+    width: 100%;
+    border: 0;
+    clear: both;
+    margin: 10px 0;
+    border-spacing: 0;
+}
+
+table td,
+table th {
+    text-align: left;
+    border: 0;
+    padding: 9px;
+    margin: 0;
+}
+
+table td {
+    border-bottom: 1px solid #cccccc;
+}
+
+table th {
+    border-bottom: 3px solid #2a6496;
+    color: #111111;
+    font-weight: bold;
+    line-height: 16px;
+}
+
+pre {
+    font-family: Monaco, Consolas, monospace;
+}

source/css/components/_debug-table.scss

@@ -0,0 +1,28 @@
+.c-debug-table td {
+    font-family: Monaco, Consolas, monospace;
+}
+
+/* X column tables have the 2nd+ cell right aligned */
+.c-debug-table th:nth-child(n+2),
+.c-debug-table td:nth-child(n+2) {
+    text-align: right;
+}
+
+.c-debug-table td:nth-child(n+2) {
+    word-wrap: break-word;
+    word-break: break-all;
+    word-break: break-word; /* Not standard for webkit */
+}
+
+.c-debug-table th.left,
+.c-debug-table td.left {
+    text-align: left;
+}
+
+.c-debug-table .duplicate-route td {
+    background: #ffea96;
+}
+
+.c-debug-table .highlighted td {
+    background: #e7e9fd;
+}

source/css/components/_flash.scss

@@ -0,0 +1,44 @@
+.c-flash {
+    position: relative;
+    padding: 10px 10px 10px 50px;
+    font-size: 14px;
+}
+
+.c-flash:before {
+    padding: 8px;
+    line-height: 12px;
+    font-size: 20px;
+    font-family: "CakeFont";
+    font-weight: bold;
+    height: 12px;
+    width: 12px;
+    border-radius: 15px;
+    background-color: #fff;
+    -moz-border-radius: 15px;
+    -webkit-border-radius: 15px;
+    text-align: center;
+    vertical-align: middle;
+    display: inline-block;
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    transform: translate(0, -50%);
+}
+
+.c-flash--warning {
+    background: #f2dede;
+}
+
+.c-flash--warning:before {
+    color: #f2dede;
+    content: '!';
+}
+
+.c-flash--info {
+    background: #d9edf7;
+}
+
+.c-flash--info:before {
+    color: #d9edf7;
+    content: 'i';
+}

source/css/components/_graph-bar.scss

@@ -0,0 +1,16 @@
+.c-graph-bar,
+.c-graph-bar__value {
+    margin: 0;
+    padding: 0;
+    border: none;
+    overflow: hidden;
+    height: 14px;
+}
+
+.c-graph-bar {
+    background: #ddd;
+}
+
+.c-graph-bar__value {
+    background: #428bca;
+}

source/css/components/_history.scss

@@ -0,0 +1,58 @@
+.c-history-panel__list li {
+    padding-left: 10px;
+    border-bottom: 1px solid #ccc;
+    position: relative;
+}
+
+.c-history-panel__list .is-active:before {
+    content: "\2022";
+    font-size: 40px;
+    color: #42bd41;
+    line-height: 12px;
+    position: absolute;
+    top: 38%;
+    left: 0;
+    vertical-align: middle;
+}
+
+.c-history-panel__list li:last-child {
+    border-bottom: 0;
+}
+
+.c-history-panel__list li:hover {
+    background-color: #e7e9fd;
+}
+
+.c-history-panel__link {
+    color: #222;
+    display: block;
+    text-decoration: none;
+    padding: 6px;
+}
+
+.c-history-panel__bubble {
+    font-size: 12px;
+    line-height: 14px;
+    display: inline-block;
+    background: #eee;
+    padding: 2px;
+    border-radius: 4px;
+}
+
+.c-history-panel__xhr {
+    background:#7CFF46
+}
+
+.c-history-panel__time {
+    font-size: 12px;
+    display: block;
+}
+
+.c-history-panel__url {
+    font-size: 14px;
+    font-family: Monaco, Consolas, monospace;
+}
+
+//.history-mode .panel-title {
+//    background: #ab47bc;
+//}

source/css/components/_packages.scss

@@ -0,0 +1,54 @@
+.c-packages-panel__version {
+    background: #D33C44;
+    border-radius: 4px;
+    line-height: 20px;
+    display: inline-block;
+    white-space: nowrap;
+}
+
+.c-packages-panel__link {
+    color: #000000;
+    text-decoration: none;
+}
+
+.c-packages-panel__terminal {
+    margin: 20px 0;
+    padding: 20px;
+    background-color: #1a1a1a;
+    color: #ffffff;
+    line-height: 1.4;
+    display: none;
+}
+
+.c-packages-panel__section-header {
+    color: #428bca;
+}
+
+.c-packages-panel__section-header:nth-of-type(1) {
+    margin-top: 0;
+}
+
+.c-packages-panel__terminal highlight {
+    color: #D33C44;
+}
+
+.c-packages-panel__terminal .loading {
+    margin: 0;
+}
+
+.c-packages-panel__terminal .indicator {
+    vertical-align: middle;
+    width: 30px;
+    height: 30px;
+    -webkit-animation: spin 4s linear infinite;
+    -moz-animation: spin 4s linear infinite;
+    animation: spin 4s linear infinite;
+}
+
+.c-packages-panel__warning-message {
+    color: #ffcc00;
+}
+
+.c-packages-panel__success-message {
+    color: #42bd41;
+}

source/css/components/_panel-content-container.scss

@@ -0,0 +1,38 @@
+.c-panel-content-container {
+    background: #fff;
+    position: absolute;
+    top: 100%;
+    bottom: 40px;
+    left: 0;
+    right: 0;
+    overflow-y: auto;
+    transition: top 0.25s ease-out;
+}
+
+.c-panel-content-container.is-active {
+    top: 0;
+    transition: top 0.25s ease-in-out;
+}
+
+.c-panel-content-container__close {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    background: rgba(0, 0, 0, 0.3);
+    color: #fff;
+    display: inline-block;
+    padding: 8px;
+    line-height: 12px;
+    font-size: 20px;
+    height: 12px;
+    width: 12px;
+    border-radius: 15px;
+    -moz-border-radius: 15px;
+    -webkit-border-radius: 15px;
+    vertical-align: middle;
+    cursor: pointer;
+
+    &:hover {
+        background: rgba(0, 0, 0, 0.5);
+    }
+}