From 46fb4188f0171d532773851c237e43712b56c01b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Sat, 20 Sep 2014 00:02:19 +0200 Subject: [PATCH] Show offenders buttons on the summary page --- .gitignore | 4 +- app/node_views/results.html | 122 ++++++++++++++++++---------- app/public/fonts/icons.woff | Bin 1964 -> 2312 bytes app/public/fonts/svg-icons/eye.svg | 1 + app/public/scripts/app.js | 4 +- app/public/scripts/filters.js | 0 app/public/scripts/showOffenders.js | 17 ++++ app/public/styles/less/icons.less | 27 +++--- app/public/styles/less/main.less | 3 + app/public/styles/less/results.less | 69 +++++++++++++++- app/public/styles/main.css | 17 +++- app/public/styles/results.css | 64 +++++++++++++++ bower.json | 3 +- 13 files changed, 271 insertions(+), 60 deletions(-) create mode 100755 app/public/fonts/svg-icons/eye.svg delete mode 100644 app/public/scripts/filters.js create mode 100644 app/public/scripts/showOffenders.js diff --git a/.gitignore b/.gitignore index 8d078e8..37db380 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,6 @@ node_modules bower_components .vagrant results/* -coverage \ No newline at end of file +coverage + +har.json \ No newline at end of file diff --git a/app/node_views/results.html b/app/node_views/results.html index de5816e..9386d79 100644 --- a/app/node_views/results.html +++ b/app/node_views/results.html @@ -6,9 +6,10 @@ + - +

Yellow Lab Tools

@@ -45,16 +46,18 @@
@@ -64,9 +67,16 @@
DOM read and write
@@ -76,7 +86,8 @@
@@ -87,7 +98,8 @@
@@ -98,19 +110,22 @@
@@ -121,10 +136,10 @@
@@ -136,10 +151,11 @@
  • - Rules count: {{phantomasResults.metrics.cssRules}} + Rules count: {{phantomasResults.metrics.cssRules}}
  • - Complex selectors: {{phantomasResults.metrics.cssComplexSelectors}} + Complex selectors: {{phantomasResults.metrics.cssComplexSelectors}} +
@@ -150,28 +166,36 @@
  • - Duplicated selectors: {{phantomasResults.metrics.cssDuplicatedSelectors}} + Duplicated selectors: {{phantomasResults.metrics.cssDuplicatedSelectors}} +
  • - Empty rules: {{phantomasResults.metrics.cssEmptyRules}} + Empty rules: {{phantomasResults.metrics.cssEmptyRules}} +
  • - CSS expressions: {{phantomasResults.metrics.cssExpressions}} + CSS expressions: {{phantomasResults.metrics.cssExpressions}} +
  • - Uses of !important: {{phantomasResults.metrics.cssImportants}} + Uses of !important: {{phantomasResults.metrics.cssImportants}} +
  • - Old IE fixes: {{phantomasResults.metrics.cssOldIEFixes}} + Old IE fixes: {{phantomasResults.metrics.cssOldIEFixes}} +
  • - Old prefixes: {{phantomasResults.metrics.cssOldPropertyPrefixes}} + Old prefixes: {{phantomasResults.metrics.cssOldPropertyPrefixes}} +
  • - Universal * selectors: {{phantomasResults.metrics.cssUniversalSelectors}} + Universal selectors: {{phantomasResults.metrics.cssUniversalSelectors}} +
  • - Redundant body selectors: {{phantomasResults.metrics.cssRedundantBodySelectors}} + Redundant body selectors: {{phantomasResults.metrics.cssRedundantBodySelectors}} +
@@ -182,31 +206,39 @@
  • - Total requests: {{phantomasResults.metrics.requests}} + Total requests: {{phantomasResults.metrics.requests}}
  • - Documents: {{phantomasResults.metrics.htmlCount}} + Documents: {{phantomasResults.metrics.htmlCount}} +
  • - Scripts: {{phantomasResults.metrics.jsCount}} + Scripts: {{phantomasResults.metrics.jsCount}} +
  • - Stylesheets: {{phantomasResults.metrics.cssCount}} + Stylesheets: {{phantomasResults.metrics.cssCount}} +
  • - Images: {{phantomasResults.metrics.imageCount}} + Images: {{phantomasResults.metrics.imageCount}} +
  • - Fonts: {{phantomasResults.metrics.webfontCount}} + Fonts: {{phantomasResults.metrics.webfontCount}} +
  • - Videos: {{phantomasResults.metrics.videoCount}} + Videos: {{phantomasResults.metrics.videoCount}} +
  • - JSON: {{phantomasResults.metrics.jsonCount}} + JSON: {{phantomasResults.metrics.jsonCount}} +
  • - Other: {{phantomasResults.metrics.otherCount}} + Other: {{phantomasResults.metrics.otherCount}} +
@@ -217,22 +249,28 @@
  • - 404 not found: {{phantomasResults.metrics.notFound}} + 404 not found: {{phantomasResults.metrics.notFound}} +
  • - Connections closed: {{phantomasResults.metrics.closedConnections}} + Connections closed: {{phantomasResults.metrics.closedConnections}} +
  • - Caching disabled: {{phantomasResults.metrics.cachingDisabled}} + Caching disabled: {{phantomasResults.metrics.cachingDisabled}} +
  • - Caching not specified: {{phantomasResults.metrics.cachingNotSpecified}} + Caching not specified: {{phantomasResults.metrics.cachingNotSpecified}} +
  • - Caching too short: {{phantomasResults.metrics.cachingTooShort}} + Caching too short: {{phantomasResults.metrics.cachingTooShort}} +
  • - Different domains: {{phantomasResults.metrics.domains}} + Different domains: {{phantomasResults.metrics.domains}} +
diff --git a/app/public/fonts/icons.woff b/app/public/fonts/icons.woff index 31de2c75486bd15bfea6f9eac5c12d2a5def8bab..51197d55953a75a0738db290f0a3d7040f5d52e8 100644 GIT binary patch delta 2164 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 aPrAnXyC=?xMCmX8I3-#K__v4xp#KA3hRH|( delta 1787 zcmVNLxlmR80T? z1&jay02%-Q032+#Oio8cMMeMs1*iZ30384T03ZN100d7{FERiC1;_vZ080P>0AMfN z+(2V(VQ>Hd1{44Q06hQz0aD-?^37;vVPpUR22=n504@Lk05$=a>N{v?WnlmS27~|r z03HAU03-x|5dY+8ZFG1500yK0000vJ000;S5dZ{jVR&!=00y`K000I6000I62~YrT zVQpmq00zJS007?r00D+j-1G5pZ*z1200*D|000aC001BW0{{ScoOM-iOj}hHKd-#@ zJ-em@)@Kl*WeS?u4`ZVU3SkVhxzTMOge)5yIwxO$Saq;jmqm1%38BsV3JAu>k_bBJy`+*6f~jG2Z*IvI#`MS|8W_;_U&Kx!6@ zre%SDBg;0N4t8EchLvzPWJ4}^VI4dIXQ` zY6YQx|1ico_w-}D_n~HH)qw~Fa9*=BT_Q$*Ix`Wq@D;?{+4C}D-r-h^Z$0>-74f$X zD&kbhF9^=ELd2iX?nSuoff**FaIyDU8+Xn#9vno-s0s6gO$gZ|8G4y96h7+MVdcd~ zi8SRf76hqr+Gs!y#9Y*5+6OTT?+_D0cTEg$lZA8Knls&HFf-TPr|}KWRSi&}zcL|z z$n|u2KVe<7G=#Jy3{K9XnA@oZHJ9R7RY}!?O0?Rq`2setp9NGlOW);_ygyL)MV*;6 z0$<5F#F^TBga@}2BYrH8k?E#%W#tWY7uSZIJ#WzSilSvSvvNGf*n` zok5}{icG86pi?Vn8E@-eSy!0`U+++V=j+rZmLA|8@*F0ACg#|kbd*-x)qvvHCR8aF ziu#m0x=s{s=D88JeYu^ckz4!(;#b}DQ{R#o5WhW5WBK&0x0xKBuo)JQ{E4u(u7fqhn8z@M}(y8bDgW)E|k4-@VozC%VbYcp82=e%NLP!)yV%I#H&t~F(KAten zQ+)}cyGhK`gxIxlFLhGfas#n)Fsz{9TsT2Zz1i{(-Hs!vwEpw0zxx?MZAVhAw7W0X zzZ3~77=O8Wl)#%$+b}*wyM(;U2N9#4dl1~V^9V?oP*zyZ3?Jd@1XV`&|D6m?^eg&*hNzPGYa8NU-s6b>6m`%R&dt!x`o?`2@yXqFR*r7v zXfNWz>$wRg?UTkmZ_@`z9WNaJ5y3XmWYhq8*G|30C4~2SYV;cI9NooNt2CH=u1wZO z{7PTc6_A{&=#PZxm#?Nf;#Fs*KGM-3-4viXkIz?SRGx> z_8dU$o&dqrjdqmZgBY8v;MP92D0>i6JVTs0WYEF!N+}nQQrPv_DqeAf z`z18Bfp81L7T&?dp-U`(@hIr;fgyDF{|^PVy=}v0mPjRGHCHL+t5jS!S1Da;&0b!^ zlG|(^k)4r{iz%lacKYjC1r|Z5qNn4~nMNATzEcUIyIg=7fJI>j7BMsfJk7Hr>eA>V zt@sxR0jtsgc${NkU|?hbf-|;@&V%R+HX-|AGyq9`2D$(Mc${MzU}Rum-~(a_1`uFk zU<5)AAZ7vc7ytyK06UW*2W|mulaL1)HPAc=v;Y7Ac${NkWME(bVh_bn1@ZhgUm3WW z7(n2HO~`%({r>?I1LFfAmxBQ;4FDm73WSs12P}WczyhKG0P_GE0000`000R90C=2r zjzMYyK@dgX=x7KD!BxnzA)9Pwm>%Ln4=@MF!o5f{45$sQLQdk!BV?Il2pH0|w+0k{AF diff --git a/app/public/fonts/svg-icons/eye.svg b/app/public/fonts/svg-icons/eye.svg new file mode 100755 index 0000000..59ff3c2 --- /dev/null +++ b/app/public/fonts/svg-icons/eye.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/public/scripts/app.js b/app/public/scripts/app.js index 7742ca8..f8b9dd7 100644 --- a/app/public/scripts/app.js +++ b/app/public/scripts/app.js @@ -1,3 +1,5 @@ angular.module('YellowLabTools', [ - 'Results' + 'Results', + 'ngModal', + 'ShowOffendersDirective' ]); \ No newline at end of file diff --git a/app/public/scripts/filters.js b/app/public/scripts/filters.js deleted file mode 100644 index e69de29..0000000 diff --git a/app/public/scripts/showOffenders.js b/app/public/scripts/showOffenders.js new file mode 100644 index 0000000..900d62f --- /dev/null +++ b/app/public/scripts/showOffenders.js @@ -0,0 +1,17 @@ +var app = angular.module("ShowOffendersDirective", []); + +app.directive('showOffenders', function() { + return { + restrict: 'E', + transclude: true, + scope: { + modalTitle: "@", + metricName: "@", + phantomasResults: "=" + }, + controller: function($scope, $element, $attrs, $location) { + $scope.dialogShown = false; + }, + template: ' 
  • {{offender}}
' + }; +}); \ No newline at end of file diff --git a/app/public/styles/less/icons.less b/app/public/styles/less/icons.less index d1f20b7..3bc4d60 100644 --- a/app/public/styles/less/icons.less +++ b/app/public/styles/less/icons.less @@ -1,24 +1,27 @@ +@arrow-left3-font-family: "fontsmith-icons"; +@arrow-left3-value: "\e007"; +@arrow-left3: '"fontsmith-icons"' '"\\e007"'; @list-font-family: "fontsmith-icons"; @list-value: "\e002"; @list: '"fontsmith-icons"' '"\\e002"'; -@arrow-left3-font-family: "fontsmith-icons"; -@arrow-left3-value: "\e006"; -@arrow-left3: '"fontsmith-icons"' '"\\e006"'; -@question-font-family: "fontsmith-icons"; -@question-value: "\e001"; -@question: '"fontsmith-icons"' '"\\e001"'; @warning-font-family: "fontsmith-icons"; @warning-value: "\e000"; @warning: '"fontsmith-icons"' '"\\e000"'; -@bars-font-family: "fontsmith-icons"; -@bars-value: "\e005"; -@bars: '"fontsmith-icons"' '"\\e005"'; -@drawer3-font-family: "fontsmith-icons"; -@drawer3-value: "\e004"; -@drawer3: '"fontsmith-icons"' '"\\e004"'; +@eye-font-family: "fontsmith-icons"; +@eye-value: "\e004"; +@eye: '"fontsmith-icons"' '"\\e004"'; +@question-font-family: "fontsmith-icons"; +@question-value: "\e001"; +@question: '"fontsmith-icons"' '"\\e001"'; @lab-font-family: "fontsmith-icons"; @lab-value: "\e003"; @lab: '"fontsmith-icons"' '"\\e003"'; +@bars-font-family: "fontsmith-icons"; +@bars-value: "\e006"; +@bars: '"fontsmith-icons"' '"\\e006"'; +@drawer3-font-family: "fontsmith-icons"; +@drawer3-value: "\e005"; +@drawer3: '"fontsmith-icons"' '"\\e005"'; .icon-font-family(@char) { font-family: ~`@{char}[0]`; diff --git a/app/public/styles/less/main.less b/app/public/styles/less/main.less index 4d8d27b..571064a 100644 --- a/app/public/styles/less/main.less +++ b/app/public/styles/less/main.less @@ -67,4 +67,7 @@ h1 span { } .icon-metrics { .icon(@drawer3); +} +.icon-eye { + .icon(@eye); } \ No newline at end of file diff --git a/app/public/styles/less/results.less b/app/public/styles/less/results.less index 490a3bc..3f61da4 100644 --- a/app/public/styles/less/results.less +++ b/app/public/styles/less/results.less @@ -128,6 +128,11 @@ h4 { /* Non applicable */ background: #CCC; } +.notations .icon-eye { + color: #9c4274; + cursor: pointer; +} + .timeline { margin: 2em 0 5em; @@ -404,4 +409,66 @@ input.textFilter { .table .icon-warning { color: #e74c3c; -} \ No newline at end of file +} + + +/**** NgModal popin (have a look inside bower_components) ****/ +.ng-modal { + position: fixed; + z-index: 9999; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.ng-modal-overlay { + position: absolute; + z-index: 9999; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #000; + opacity: 0.5; +} +.ng-modal-dialog { + z-index: 10000; + position: absolute; + top: 50%; + left: 50%; + width: 50%; + transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + background-color: #fff; + padding: 10px; + border: 3px solid #f1c40f; + border-radius: 0.5em; +} +.ng-modal-dialog-content { + overflow-x: hidden; + overflow-y: scroll; + word-wrap: break-word; + /*height: calc(~"100% - 47px");*/ + max-height: 20em; +} +.ng-modal-close { + position: absolute; + top: 3px; + right: 5px; + cursor: pointer; + font-size: 120%; + padding: 5px; + display: inline-block; +} +.ng-modal-close-x { + font-weight: bold; + font-family: Arial, sans-serif; +} +.ng-modal-title { + font-weight: bold; + font-size: 1.5em; + display: block; + margin-bottom: 10px; + padding-bottom: 7px; + border-bottom: solid 1px #999; +} diff --git a/app/public/styles/main.css b/app/public/styles/main.css index 143b63d..e92c2e7 100644 --- a/app/public/styles/main.css +++ b/app/public/styles/main.css @@ -95,7 +95,7 @@ h1 span { -webkit-font-smoothing: antialiased; } .icon-back:before { - content: "\e006"; + content: "\e007"; } .icon-summary { font-family: "fontsmith-icons"; @@ -121,7 +121,7 @@ h1 span { -webkit-font-smoothing: antialiased; } .icon-spaghetti:before { - content: "\e005"; + content: "\e006"; } .icon-metrics { font-family: "fontsmith-icons"; @@ -134,5 +134,18 @@ h1 span { -webkit-font-smoothing: antialiased; } .icon-metrics:before { + content: "\e005"; +} +.icon-eye { + font-family: "fontsmith-icons"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; +} +.icon-eye:before { content: "\e004"; } diff --git a/app/public/styles/results.css b/app/public/styles/results.css index bdcbb47..83425d1 100644 --- a/app/public/styles/results.css +++ b/app/public/styles/results.css @@ -118,6 +118,10 @@ h4 { /* Non applicable */ background: #CCC; } +.notations .icon-eye { + color: #9c4274; + cursor: pointer; +} .timeline { margin: 2em 0 5em; } @@ -376,3 +380,63 @@ input.textFilter { .table .icon-warning { color: #e74c3c; } +/**** NgModal popin (have a look inside bower_components) ****/ +.ng-modal { + position: fixed; + z-index: 9999; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.ng-modal-overlay { + position: absolute; + z-index: 9999; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #000; + opacity: 0.5; +} +.ng-modal-dialog { + z-index: 10000; + position: absolute; + top: 50%; + left: 50%; + width: 50%; + transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + background-color: #fff; + padding: 10px; + border: 3px solid #f1c40f; + border-radius: 0.5em; +} +.ng-modal-dialog-content { + overflow-x: hidden; + overflow-y: scroll; + word-wrap: break-word; + /*height: calc(~"100% - 47px");*/ + max-height: 20em; +} +.ng-modal-close { + position: absolute; + top: 3px; + right: 5px; + cursor: pointer; + font-size: 120%; + padding: 5px; + display: inline-block; +} +.ng-modal-close-x { + font-weight: bold; + font-family: Arial, sans-serif; +} +.ng-modal-title { + font-weight: bold; + font-size: 1.5em; + display: block; + margin-bottom: 10px; + padding-bottom: 7px; + border-bottom: solid 1px #999; +} diff --git a/bower.json b/bower.json index ff498ef..4ef373c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,7 @@ { "name": "yellowlabtools", "dependencies": { - "angular": "^1.3.0" + "angular": "^1.3.0", + "ngModal": "1.2.2" } }