From 94f065f4f8533b652f4419968187f5e80bc46953 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Fri, 12 Sep 2014 12:42:38 +0200 Subject: [PATCH] Add background color to the timestamp column in the profiler --- Gruntfile.js | 8 +- app/node_views/results.html | 9 +- app/public/fonts/icons.woff | Bin 2092 -> 2096 bytes app/public/styles/index.css | 48 ++- app/public/styles/launchTest.css | 30 +- app/public/styles/less/icons.less | 12 +- app/public/styles/less/index.less | 35 ++ app/public/styles/less/launchTest.less | 19 ++ app/public/styles/less/results.less | 394 ++++++++++++++++++++++ app/public/styles/results.css | 434 ++++++++++++------------- 10 files changed, 722 insertions(+), 267 deletions(-) create mode 100644 app/public/styles/less/index.less create mode 100644 app/public/styles/less/launchTest.less create mode 100644 app/public/styles/less/results.less diff --git a/Gruntfile.js b/Gruntfile.js index 6a271d1..af3c138 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -21,10 +21,10 @@ module.exports = function(grunt) { less: { icons: { files: { - 'app/public/styles/main.css': [ - //'app/public/styles/less/icons.less', - 'app/public/styles/less/main.less' - ] + 'app/public/styles/main.css': [ 'app/public/styles/less/main.less' ], + 'app/public/styles/index.css': [ 'app/public/styles/less/index.less' ], + 'app/public/styles/launchTest.css': [ 'app/public/styles/less/launchTest.less' ], + 'app/public/styles/results.css': [ 'app/public/styles/less/results.less' ] } } }, diff --git a/app/node_views/results.html b/app/node_views/results.html index cbf964e..6ed9c28 100644 --- a/app/node_views/results.html +++ b/app/node_views/results.html @@ -275,7 +275,14 @@
-
{{node.data.timestamp | number: 0}}
+
{{node.data.timestamp | number: 0}}
diff --git a/app/public/fonts/icons.woff b/app/public/fonts/icons.woff index 229f651b623efb7c31ac34b7c61a025720bdd171..7eba26b4d4b9b6d5f1e0fdecd3804a57b9f7f624 100644 GIT binary patch delta 355 zcmV-p0i6D<5U>ywcTYw}PgGP-000Ou01E&B000f7krX`xuAO9&R80erJ5iCOM-kot z00D+j*7NajZ*z1200<h~lLiMue=%wUF%U)H+G~g45K@Jdf;4G%S&20E0rmhX z+#4g71=|AI2A?EVj*v3P$N_SM93$WBX;N4)=*`!k`2y~Er{H`FZg?;riC>JzJaaNG zrGFYvnDK2qmHsPdQQk_qAEwSc5Ce^ zHzFNJHmt~MV|U!F1nuBE40o0z;t14Ab1YQ<_gyqEN5xzfDu3xO3m!`e#!7dKFgT*y>|GzxjOp?1T#6?004NLV_;^$3jhFp00fRK BlrR7Q delta 351 zcmV-l0igb{5UdascTYw}PgGP-000Oq01E&B000f3krX`xneNn)R80eWjKPtlM-kfq z00Dz`R?PTtZ*z12002S6?d16ULQ7P$#nlLiMue?4x(KoEsLgCRmhQ7S~aN=0MKwrHS^d;ki1 zgjSX%V5Q~fD3Nl6lsQHYkR#+Cd6;P^SZTE1ynQoofoDEQxSoV3UX6R=nQ@;tF24k(8Hi>dHOw)VR+(g>fqV(|EvyZ{wl#Us|>V_Nu@E+HKf}WguAL zX*jcELsaXV^KK)kJKw3hqZ}SbMXof*Qgy%Yrp?J%s4BTib=2W-szYqNtMbAvou!KA x*&?foQl3X2TPreh)cY- div { + display: table-row; +} +.notations > div > div { + display: table-cell; + height: 2.5em; + vertical-align: middle; +} +.notations .notation { + font-weight: bold; + text-align: center; +} +.notations .criteria { + padding-top: 0.9em; + font-weight: normal; +} +.notations .A, .notations .B, .notations .C, .notations .D, .notations .E, .notations .F, .notations .NA { + width: 2.5em; + font-size: 2em; + text-align: center; + border-radius: 0.5em; + font-weight: bold; +} +.notations .A { + /* green */ + background: #00DB61; +} +.notations .B { + /* green */ + background: #CAD63D; +} +.notations .C { + /* yellow */ + background: #FFD119; +} +.notations .D { + /* orange */ + background: #FFA319; +} +.notations .E { + /* red */ + background: #FF6600; +} +.notations .F { + /* red */ + background: #FF1919; +} +.notations .NA { + /* Non applicable */ + background: #CCC; +} + +.timeline { + margin: 2em 0 5em; +} +.timeline .chart { + position: relative; + width: 100%; + border-bottom: 1px solid #000; +} +.timeline .startTime, .timeline .endTime { + position: absolute; + bottom: 0.5em; + font-size: 0.8em; +} +.timeline .startTime { + left: 0em; +} +.timeline .endTime { + right: 0em; +} +.timeline .chartPoints { + display: table; + height: 100px; + width: 99%; + margin: 0 auto; +} +.timeline .interval { + display: table-cell; + position: relative; + height: 100px; + width: 0.5%; +} +.timeline .interval .color { + position: absolute; + bottom: 0; + width: 100%; +} +.timeline div.interval:hover { + background: #9C4274; +} +.timeline .interval:hover .color { + background: #F04DA7; +} +.timeline .domComplete.interval { + background: @domCompleteBg; +} +.timeline .domComplete .color { + background: @domCompleteColor; +} +.timeline .domContentLoadedEnd.interval { + background: @domContentLoadedEndBg; +} +.timeline .domContentLoadedEnd .color { + background: @domContentLoadedEndColor; +} +.timeline .domContentLoaded.interval { + background: @domContentLoadedBg; +} +.timeline .domContentLoaded .color { + background: @domContentLoadedColor; +} +.timeline .domCreation.interval { + background: @domCreationBg; +} +.timeline .domCreation .color { + background: @domCreationColor; +} +.timeline .tooltip.detailsOverlay { + position: absolute; + display: none; + width: auto; + padding: 0.5em 1em; + top: 1em; + right: 1em; +} +.timeline .interval:hover .tooltip { + display: block; +} + +.timeline .legend { + display: table; + width: 100%; + margin-top: 1em; +} +.timeline .legend > div { + display: table-row; +} +.timeline .legend > div > div { + display: table-cell; + margin-top: 1em; +} +.timeline .titles { + font-weight: bold; +} +.timeline .tips { + font-size: 0.7em; +} +.timeline .tips > div { + padding: 1em 1.5em; +} +.timeline .legend .color { + display: inline-block; + position: relative; + top: 0.4em; + height: 1.5em; + width: 1.5em; + border-radius: 0.2em; + margin: 0 0.4em 0 1em; +} + + +.metrics h4 { + padding-left: 2em; +} + +.metrics .module { + padding-left: 4em; + padding-top: 0.5em; +} + +.metrics .legend { + font-style: italic; + color: #aaa; +} + +.metrics .offenders { + padding-left: 0em; + font-size: 0.8em; +} + +.metrics .offenders div { + cursor: pointer; +} + +.metrics .offenders ul { + margin-top: 0.5em; +} + +.filters { + margin: 1em 0; + padding: 0.5em; + border: 1px dotted #aaa; +} + +.slowRequestsLimit { + width: 3em; + font-size: 1em; + text-align: right; + border: 1px solid #aaa; +} + +input.textFilter { + box-shadow: none; + font-size: 1em; + padding: 0 0.2em; + border: 1px solid #aaa; + border-radius: none; + width: 15em; +} + +.table { + display: table; + width: 100%; + border-spacing: 0.25em; +} + +.table > div { + display: table-row; +} + +.table > .headers > div { + font-weight: bold; + padding: 0.5em 1em; +} + +.table > div > div { + padding: 0.1em 1em; + background: #f2f2f2; + display: table-cell; + text-align: left; +} +.table > div.jsError > .type, .table > div.jsError > .value { + color: #e74c3c; + font-weight: bold; +} +.table > div.windowPerformance > div { + background: #EBD8E2; +} +.table > div.showingDetails > div { + background: #f1c40f; +} + +.table > div > .index { + color: #bbb; +} + +.table > div > .type { + white-space:nowrap; +} + +.table > div > .value { + width: 70%; + word-break: break-all; +} + +.table > div > .details { + position: relative; +} +.table .details .icon-question { + color: #f1c40f; + cursor: pointer; +} + +.detailsOverlay { + position: absolute; + right: 3em; + top: -3em; + width: 45em; + min-height: 1em; + padding: 0 1em 1em; + background: #fff; + border: 2px solid #f1c40f; + border-radius: 0.5em; + z-index: 1; +} +@media screen and (max-width: 1024px) { + .detailsOverlay { + width: 25em; + } +} +.detailsOverlay .closeBtn { + position: absolute; + top: 0.5em; + right: 0.5em; + color: #f1c40f; + cursor: pointer; +} +.detailsOverlay .advice { + color: #e74c3c; + font-weight: bold; +} +.detailsOverlay .trace { + word-break: break-all; +} + +.table > div > .duration, .table > div > .startTime { + text-align: center; + white-space:nowrap; +} +.table > div > .startTime.domComplete { + background: @domCompleteBg; +} +.table > div > .startTime.domContentLoadedEnd { + background: @domContentLoadedEndBg; +} +.table > div > .startTime.domContentLoaded { + background: @domContentLoadedBg; +} +.table > div > .startTime.domCreation { + background: @domCreationBg; +} + +.table .icon-warning { + color: #e74c3c; +} \ No newline at end of file diff --git a/app/public/styles/results.css b/app/public/styles/results.css index 4cfbf62..4324ebd 100644 --- a/app/public/styles/results.css +++ b/app/public/styles/results.css @@ -1,369 +1,365 @@ +/* Timeline colors, related to Window Performances */ .resultsMenu { - margin-top: 2em; + margin-top: 2em; } - .resultsMenu .menuItem { - display: inline-block; - margin: 1em; - width: 8em; - height: 7em; - color: #fff; - border: 3px solid #fff; - border-radius: 0.5em; - cursor: pointer; - text-decoration: none; + display: inline-block; + margin: 1em; + width: 8em; + height: 7em; + color: #fff; + border: 3px solid #fff; + border-radius: 0.5em; + cursor: pointer; + text-decoration: none; } .resultsMenu .back { - color: #5e2846; - border-color: #5e2846; + color: #5e2846; + border-color: #5e2846; } .resultsMenu .menuItem div { - padding-top: 0.5em; - font-size: 3em; + padding-top: 0.5em; + font-size: 3em; } -.resultsMenu .active, .resultsMenu .menuItem.active:hover { - color: #ffa319; - border-color: #ffa319; +.resultsMenu .active, +.resultsMenu .menuItem.active:hover { + color: #ffa319; + border-color: #ffa319; } .resultsMenu .menuItem:hover { - color: #ffa319; + color: #ffa319; } - .resultsMenu span { - position: relative; - top: 0.5em; + position: relative; + top: 0.5em; } - .testedUrl { - color: inherit; + color: inherit; } - h4 { - margin-bottom: 0.5em; + margin-bottom: 0.5em; } - -.summary, .metrics, .execution { - margin-top: 2em; - padding: 1em; - background: #fff; - color: #000; - border-radius: 0.5em; - text-align: left; +.summary, +.metrics, +.execution { + margin-top: 2em; + padding: 1em; + background: #fff; + color: #000; + border-radius: 0.5em; + text-align: left; } - .notations { - display: table; - width: 40em; - margin-left: 6em; - border-spacing: 0.5em; + display: table; + width: 40em; + margin-left: 6em; + border-spacing: 0.5em; } @media screen and (max-width: 800px) { - .notations { - width: 30em; - margin-left: 0; - } + .notations { + width: 30em; + margin-left: 0; + } } .notations > div { - display: table-row; + display: table-row; } .notations > div > div { - display: table-cell; - height: 2.5em; - vertical-align: middle; + display: table-cell; + height: 2.5em; + vertical-align: middle; } .notations .notation { - font-weight: bold; - text-align: center; + font-weight: bold; + text-align: center; } .notations .criteria { - padding-top: 0.9em; - font-weight: normal; + padding-top: 0.9em; + font-weight: normal; } -.notations .A, .notations .B, .notations .C, .notations .D, .notations .E, .notations .F, .notations .NA { - width: 2.5em; - font-size: 2em; - text-align: center; - border-radius: 0.5em; - font-weight: bold; +.notations .A, +.notations .B, +.notations .C, +.notations .D, +.notations .E, +.notations .F, +.notations .NA { + width: 2.5em; + font-size: 2em; + text-align: center; + border-radius: 0.5em; + font-weight: bold; } .notations .A { - /* green */ - background: #00DB61; + /* green */ + background: #00DB61; } .notations .B { - /* green */ - background: #CAD63D; + /* green */ + background: #CAD63D; } .notations .C { - /* yellow */ - background: #FFD119; + /* yellow */ + background: #FFD119; } .notations .D { - /* orange */ - background: #FFA319; + /* orange */ + background: #FFA319; } .notations .E { - /* red */ - background: #FF6600; + /* red */ + background: #FF6600; } .notations .F { - /* red */ - background: #FF1919; + /* red */ + background: #FF1919; } .notations .NA { - /* Non applicable */ - background: #CCC; + /* Non applicable */ + background: #CCC; } - .timeline { - margin: 2em 0 5em; + margin: 2em 0 5em; } .timeline .chart { - position: relative; - width: 100%; - border-bottom: 1px solid #000; + position: relative; + width: 100%; + border-bottom: 1px solid #000; } -.timeline .startTime, .timeline .endTime { - position: absolute; - bottom: 0.5em; - font-size: 0.8em; +.timeline .startTime, +.timeline .endTime { + position: absolute; + bottom: 0.5em; + font-size: 0.8em; } .timeline .startTime { - left: 0em; + left: 0em; } .timeline .endTime { - right: 0em; + right: 0em; } .timeline .chartPoints { - display: table; - height: 100px; - width: 99%; - margin: 0 auto; + display: table; + height: 100px; + width: 99%; + margin: 0 auto; } .timeline .interval { - display: table-cell; - position: relative; - height: 100px; - width: 0.5%; + display: table-cell; + position: relative; + height: 100px; + width: 0.5%; } .timeline .interval .color { - position: absolute; - bottom: 0; - width: 100%; + position: absolute; + bottom: 0; + width: 100%; } .timeline div.interval:hover { - background: #9C4274; + background: #9C4274; } .timeline .interval:hover .color { - background: #F04DA7; + background: #F04DA7; } .timeline .domComplete.interval { - background: #EDE3FF; + background: #ede3ff; } .timeline .domComplete .color { - background: #C2A3FF; + background: #c2a3ff; } .timeline .domContentLoadedEnd.interval { - background: #D8F0F0; + background: #d8f0f0; } .timeline .domContentLoadedEnd .color { - background: #7ECCCC; + background: #7ecccc; } .timeline .domContentLoaded.interval { - background: #E0FFD1; + background: #e0ffd1; } .timeline .domContentLoaded .color { - background: #A7E846; + background: #a7e846; } .timeline .domCreation.interval { - background: #FFE0CC; + background: #ffe0cc; } .timeline .domCreation .color { - background: #FF6600; + background: #ff6600; } .timeline .tooltip.detailsOverlay { - position: absolute; - display: none; - width: auto; - padding: 0.5em 1em; - top: 1em; - right: 1em; + position: absolute; + display: none; + width: auto; + padding: 0.5em 1em; + top: 1em; + right: 1em; } .timeline .interval:hover .tooltip { - display: block; + display: block; } - .timeline .legend { - display: table; - width: 100%; - margin-top: 1em; + display: table; + width: 100%; + margin-top: 1em; } .timeline .legend > div { - display: table-row; + display: table-row; } .timeline .legend > div > div { - display: table-cell; - margin-top: 1em; + display: table-cell; + margin-top: 1em; } .timeline .titles { - font-weight: bold; + font-weight: bold; } .timeline .tips { - font-size: 0.7em; + font-size: 0.7em; } .timeline .tips > div { - padding: 1em 1.5em; + padding: 1em 1.5em; } .timeline .legend .color { - display: inline-block; - position: relative; - top: 0.4em; - height: 1.5em; - width: 1.5em; - border-radius: 0.2em; - margin: 0 0.4em 0 1em; + display: inline-block; + position: relative; + top: 0.4em; + height: 1.5em; + width: 1.5em; + border-radius: 0.2em; + margin: 0 0.4em 0 1em; } - - .metrics h4 { - padding-left: 2em; + padding-left: 2em; } - .metrics .module { - padding-left: 4em; - padding-top: 0.5em; + padding-left: 4em; + padding-top: 0.5em; } - .metrics .legend { - font-style: italic; - color: #aaa; + font-style: italic; + color: #aaa; } - .metrics .offenders { - padding-left: 0em; - font-size: 0.8em; + padding-left: 0em; + font-size: 0.8em; } - .metrics .offenders div { - cursor: pointer; + cursor: pointer; } - .metrics .offenders ul { - margin-top: 0.5em; + margin-top: 0.5em; } - .filters { - margin: 1em 0; - padding: 0.5em; - border: 1px dotted #aaa; + margin: 1em 0; + padding: 0.5em; + border: 1px dotted #aaa; } - .slowRequestsLimit { - width: 3em; - font-size: 1em; - text-align: right; - border: 1px solid #aaa; + width: 3em; + font-size: 1em; + text-align: right; + border: 1px solid #aaa; } - input.textFilter { - box-shadow: none; - font-size: 1em; - padding: 0 0.2em; - border: 1px solid #aaa; - border-radius: none; - width: 15em; + box-shadow: none; + font-size: 1em; + padding: 0 0.2em; + border: 1px solid #aaa; + border-radius: none; + width: 15em; } - .table { - display: table; - width: 100%; - border-spacing: 0.25em; + display: table; + width: 100%; + border-spacing: 0.25em; } - .table > div { - display: table-row; + display: table-row; } - .table > .headers > div { - font-weight: bold; - padding: 0.5em 1em; + font-weight: bold; + padding: 0.5em 1em; } - .table > div > div { - padding: 0.1em 1em; - background: #f2f2f2; - display: table-cell; - text-align: left; + padding: 0.1em 1em; + background: #f2f2f2; + display: table-cell; + text-align: left; } -.table > div.jsError > .type, .table > div.jsError > .value { - color: #e74c3c; - font-weight: bold; +.table > div.jsError > .type, +.table > div.jsError > .value { + color: #e74c3c; + font-weight: bold; } -.table > div.windowPerformance > div { - background: #EBD8E2; +.table > div.windowPerformance > div, .table > div.windowPerformance > div.startTime { + background: #EBD8E2; } .table > div.showingDetails > div { - background: #f1c40f; + background: #f1c40f; } - .table > div > .index { - color: #bbb; + color: #bbb; } - .table > div > .type { - white-space:nowrap; + white-space: nowrap; } - .table > div > .value { - width: 70%; - word-break: break-all; + width: 70%; + word-break: break-all; } - .table > div > .details { - position: relative; + position: relative; } .table .details .icon-question { - color: #f1c40f; - cursor: pointer; + color: #f1c40f; + cursor: pointer; } - .detailsOverlay { - position: absolute; - right: 3em; - top: -3em; - width: 45em; - min-height: 1em; - padding: 0 1em 1em; - background: #fff; - border: 2px solid #f1c40f; - border-radius: 0.5em; - z-index: 1; + position: absolute; + right: 3em; + top: -3em; + width: 45em; + min-height: 1em; + padding: 0 1em 1em; + background: #fff; + border: 2px solid #f1c40f; + border-radius: 0.5em; + z-index: 1; } @media screen and (max-width: 1024px) { - .detailsOverlay { - width: 25em; - } + .detailsOverlay { + width: 25em; + } } .detailsOverlay .closeBtn { - position: absolute; - top: 0.5em; - right: 0.5em; - color: #f1c40f; - cursor: pointer; + position: absolute; + top: 0.5em; + right: 0.5em; + color: #f1c40f; + cursor: pointer; } .detailsOverlay .advice { - color: #e74c3c; - font-weight: bold; + color: #e74c3c; + font-weight: bold; } .detailsOverlay .trace { - word-break: break-all; + word-break: break-all; } - -.table > div > .duration, .table > div > .startTime { - text-align: center; - white-space:nowrap; +.table > div > .duration, +.table > div > .startTime { + text-align: center; + white-space: nowrap; +} +.table > div > .startTime.domComplete { + background: #ede3ff; +} +.table > div > .startTime.domContentLoadedEnd { + background: #d8f0f0; +} +.table > div > .startTime.domContentLoaded { + background: #e0ffd1; +} +.table > div > .startTime.domCreation { + background: #ffe0cc; } - .table .icon-warning { - color: #e74c3c; -} \ No newline at end of file + color: #e74c3c; +}