mirror of
https://gitlab.crans.org/bde/nk20
synced 2025-11-04 01:12:08 +01:00
💥 Improve performances
This commit is contained in:
Yohann D'ANELLO
3
static/debug_toolbar/css/print.css
Normal file
3
static/debug_toolbar/css/print.css
Normal file
@@ -0,0 +1,3 @@
|
||||
#djDebug {
|
||||
display: none !important;
|
||||
}
|
||||
646
static/debug_toolbar/css/toolbar.css
Normal file
646
static/debug_toolbar/css/toolbar.css
Normal file
@@ -0,0 +1,646 @@
|
||||
/* http://www.positioniseverything.net/easyclearing.html */
|
||||
#djDebug .djdt-clearfix:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
#djDebug .djdt-clearfix {display: inline-block;}
|
||||
/* Hides from IE-mac \*/
|
||||
#djDebug .djdt-clearfix {display: block;}
|
||||
* html #djDebug .djdt-clearfix {height: 1%;}
|
||||
/* end hide from IE-mac */
|
||||
|
||||
/* Debug Toolbar CSS Reset, adapted from Eric Meyer's CSS Reset */
|
||||
#djDebug {color:#000;background:#FFF;}
|
||||
#djDebug, #djDebug div, #djDebug span, #djDebug applet, #djDebug object, #djDebug iframe,
|
||||
#djDebug h1, #djDebug h2, #djDebug h3, #djDebug h4, #djDebug h5, #djDebug h6, #djDebug p, #djDebug blockquote, #djDebug pre,
|
||||
#djDebug a, #djDebug abbr, #djDebug acronym, #djDebug address, #djDebug big, #djDebug cite, #djDebug code,
|
||||
#djDebug del, #djDebug dfn, #djDebug em, #djDebug font, #djDebug img, #djDebug ins, #djDebug kbd, #djDebug q, #djDebug s, #djDebug samp,
|
||||
#djDebug small, #djDebug strike, #djDebug strong, #djDebug sub, #djDebug sup, #djDebug tt, #djDebug var,
|
||||
#djDebug b, #djDebug u, #djDebug i, #djDebug center,
|
||||
#djDebug dl, #djDebug dt, #djDebug dd, #djDebug ol, #djDebug ul, #djDebug li,
|
||||
#djDebug fieldset, #djDebug form, #djDebug label, #djDebug legend,
|
||||
#djDebug table, #djDebug caption, #djDebug tbody, #djDebug tfoot, #djDebug thead, #djDebug tr, #djDebug th, #djDebug td,
|
||||
#djDebug button {
|
||||
margin:0;
|
||||
padding:0;
|
||||
min-width:0;
|
||||
width:auto;
|
||||
border:0;
|
||||
outline:0;
|
||||
font-size:12px;
|
||||
line-height:1.5em;
|
||||
color:#000;
|
||||
vertical-align:baseline;
|
||||
background-color:transparent;
|
||||
font-family:sans-serif;
|
||||
text-align:left;
|
||||
text-shadow: none;
|
||||
white-space: normal;
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
#djDebug button, #djDebug a.button {
|
||||
background-color: #eee;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eee), color-stop(100%, #cccccc));
|
||||
background-image: -webkit-linear-gradient(top, #eee, #cccccc);
|
||||
background-image: -moz-linear-gradient(top, #eee, #cccccc);
|
||||
background-image: -ms-linear-gradient(top, #eee, #cccccc);
|
||||
background-image: -o-linear-gradient(top, #eee, #cccccc);
|
||||
background-image: linear-gradient(top, #eee, #cccccc);
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: 1px solid #bbb;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
color: #333;
|
||||
line-height: 1;
|
||||
padding: 0 8px;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 #eee;
|
||||
}
|
||||
|
||||
#djDebug button:hover, #djDebug a.button:hover {
|
||||
background-color: #ddd;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ddd), color-stop(100%, #bbb));
|
||||
background-image: -webkit-linear-gradient(top, #ddd, #bbb);
|
||||
background-image: -moz-linear-gradient(top, #ddd, #bbb);
|
||||
background-image: -ms-linear-gradient(top, #ddd, #bbb);
|
||||
background-image: -o-linear-gradient(top, #ddd, #bbb);
|
||||
background-image: linear-gradient(top, #ddd, #bbb);
|
||||
border-color: #bbb;
|
||||
border-bottom-color: #999;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 1px 0 #ddd;
|
||||
}
|
||||
|
||||
#djDebug button:active, #djDebug a.button:active {
|
||||
border: 1px solid #aaa;
|
||||
border-bottom: 1px solid #888;
|
||||
-webkit-box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
|
||||
-moz-box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
|
||||
box-shadow: inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee;
|
||||
}
|
||||
|
||||
#djDebug #djDebugToolbar {
|
||||
background-color:#111;
|
||||
width:200px;
|
||||
z-index:100000000;
|
||||
position:fixed;
|
||||
top:0;
|
||||
bottom:0;
|
||||
right:0;
|
||||
opacity:0.9;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#djDebug #djDebugToolbar small {
|
||||
color:#999;
|
||||
}
|
||||
|
||||
#djDebug #djDebugToolbar ul {
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
#djDebug #djDebugToolbar li {
|
||||
border-bottom:1px solid #222;
|
||||
color:#fff;
|
||||
display:block;
|
||||
font-weight:bold;
|
||||
float:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
position:relative;
|
||||
width:auto;
|
||||
}
|
||||
|
||||
#djDebug #djDebugToolbar input[type=checkbox] {
|
||||
float: right;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#djDebug #djDebugToolbar li>a,
|
||||
#djDebug #djDebugToolbar li>div.djdt-contentless {
|
||||
font-weight:normal;
|
||||
font-style:normal;
|
||||
text-decoration:none;
|
||||
display:block;
|
||||
font-size:16px;
|
||||
padding:10px 10px 5px 25px;
|
||||
color:#fff;
|
||||
}
|
||||
#djDebug #djDebugToolbar li>div.djdt-disabled {
|
||||
font-style: italic;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#djDebug #djDebugToolbar li a:hover {
|
||||
color:#111;
|
||||
background-color:#ffc;
|
||||
}
|
||||
|
||||
#djDebug #djDebugToolbar li.djdt-active {
|
||||
background: #333 no-repeat left center;
|
||||
background-image: url(../img/indicator.png);
|
||||
padding-left:10px;
|
||||
}
|
||||
|
||||
#djDebug #djDebugToolbar li.djdt-active a:hover {
|
||||
color:#b36a60;
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
#djDebug #djDebugToolbar li small {
|
||||
font-size:12px;
|
||||
color:#999;
|
||||
font-style:normal;
|
||||
text-decoration:none;
|
||||
font-variant:small-caps;
|
||||
}
|
||||
|
||||
#djDebug #djDebugToolbarHandle {
|
||||
position:fixed;
|
||||
background-color:#fff;
|
||||
border:1px solid #111;
|
||||
top:30px;
|
||||
right:0;
|
||||
z-index:100000000;
|
||||
opacity:0.75;
|
||||
}
|
||||
|
||||
#djDebug #djShowToolBarButton {
|
||||
display:block;
|
||||
height:75px;
|
||||
width:30px;
|
||||
border-right:none;
|
||||
border-bottom:4px solid #fff;
|
||||
border-top:4px solid #fff;
|
||||
border-left:4px solid #fff;
|
||||
color:#fff;
|
||||
font-size:10px;
|
||||
font-weight:bold;
|
||||
text-decoration:none;
|
||||
text-align:center;
|
||||
text-indent:-999999px;
|
||||
background: #000 no-repeat left center;
|
||||
background-image: url(../img/djdt_vertical.png);
|
||||
opacity:0.5;
|
||||
}
|
||||
|
||||
#djDebug #djShowToolBarButton:hover {
|
||||
background-color:#111;
|
||||
border-top-color:#FFE761;
|
||||
border-left-color:#FFE761;
|
||||
border-bottom-color:#FFE761;
|
||||
cursor:move;
|
||||
opacity:1.0;
|
||||
}
|
||||
|
||||
#djDebug code {
|
||||
display:block;
|
||||
font-family:Consolas, Monaco, "Bitstream Vera Sans Mono", "Lucida Console", monospace;
|
||||
font-size: 12px;
|
||||
white-space:pre;
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
#djDebug .djDebugOdd {
|
||||
background-color:#f5f5f5;
|
||||
}
|
||||
|
||||
#djDebug .djdt-panelContent {
|
||||
display:none;
|
||||
position:fixed;
|
||||
margin:0;
|
||||
top:0;
|
||||
right:200px;
|
||||
bottom:0;
|
||||
left:0px;
|
||||
background-color:#eee;
|
||||
color:#666;
|
||||
z-index:100000000;
|
||||
}
|
||||
|
||||
#djDebug .djdt-panelContent > div {
|
||||
border-bottom:1px solid #ddd;
|
||||
}
|
||||
|
||||
#djDebug .djDebugPanelTitle {
|
||||
position:absolute;
|
||||
background-color:#ffc;
|
||||
color:#666;
|
||||
padding-left:20px;
|
||||
top:0;
|
||||
right:0;
|
||||
left:0;
|
||||
height:50px;
|
||||
}
|
||||
|
||||
#djDebug .djDebugPanelTitle code {
|
||||
display:inline;
|
||||
font-size:inherit;
|
||||
}
|
||||
|
||||
#djDebug .djDebugPanelContent {
|
||||
position:absolute;
|
||||
top:50px;
|
||||
right:0;
|
||||
bottom:0;
|
||||
left:0;
|
||||
height:auto;
|
||||
padding:5px 0 0 20px;
|
||||
}
|
||||
|
||||
#djDebug .djDebugPanelContent .djdt-loader {
|
||||
display:block;
|
||||
margin:80px auto;
|
||||
}
|
||||
|
||||
#djDebug .djDebugPanelContent .djdt-scroll {
|
||||
height:100%;
|
||||
overflow:auto;
|
||||
display:block;
|
||||
padding:0 10px 0 0;
|
||||
}
|
||||
|
||||
#djDebug h3 {
|
||||
font-size:24px;
|
||||
font-weight:normal;
|
||||
line-height:50px;
|
||||
}
|
||||
|
||||
#djDebug h4 {
|
||||
font-size:20px;
|
||||
font-weight:bold;
|
||||
margin-top:0.8em;
|
||||
}
|
||||
|
||||
#djDebug .djdt-panelContent table {
|
||||
border:1px solid #ccc;
|
||||
border-collapse:collapse;
|
||||
width:100%;
|
||||
background-color:#fff;
|
||||
display:table;
|
||||
margin-top:0.8em;
|
||||
overflow: auto;
|
||||
}
|
||||
#djDebug .djdt-panelContent tbody td,
|
||||
#djDebug .djdt-panelContent tbody th {
|
||||
vertical-align:top;
|
||||
padding:2px 3px;
|
||||
}
|
||||
#djDebug .djdt-panelContent tbody td.djdt-time {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#djDebug .djdt-panelContent thead th {
|
||||
padding:1px 6px 1px 3px;
|
||||
text-align:left;
|
||||
font-weight:bold;
|
||||
font-size:14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#djDebug .djdt-panelContent tbody th {
|
||||
width:12em;
|
||||
text-align:right;
|
||||
color:#666;
|
||||
padding-right:.5em;
|
||||
}
|
||||
|
||||
#djDebug .djTemplateContext {
|
||||
background-color:#fff;
|
||||
}
|
||||
|
||||
/*
|
||||
#djDebug .djdt-panelContent p a:hover, #djDebug .djdt-panelContent dd a:hover {
|
||||
color:#111;
|
||||
background-color:#ffc;
|
||||
}
|
||||
|
||||
#djDebug .djdt-panelContent p {
|
||||
padding:0 5px;
|
||||
}
|
||||
|
||||
#djDebug .djdt-panelContent p, #djDebug .djdt-panelContent table, #djDebug .djdt-panelContent ol, #djDebug .djdt-panelContent ul, #djDebug .djdt-panelContent dl {
|
||||
margin:5px 0 15px;
|
||||
background-color:#fff;
|
||||
}
|
||||
#djDebug .djdt-panelContent table {
|
||||
clear:both;
|
||||
border:0;
|
||||
padding:0;
|
||||
margin:0;
|
||||
border-collapse:collapse;
|
||||
border-spacing:0;
|
||||
}
|
||||
|
||||
#djDebug .djdt-panelContent table a {
|
||||
color:#000;
|
||||
padding:2px 4px;
|
||||
}
|
||||
#djDebug .djdt-panelContent table a:hover {
|
||||
background-color:#ffc;
|
||||
}
|
||||
|
||||
#djDebug .djdt-panelContent table th {
|
||||
background-color:#333;
|
||||
font-weight:bold;
|
||||
color:#fff;
|
||||
padding:3px 7px 3px;
|
||||
text-align:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
#djDebug .djdt-panelContent table td {
|
||||
padding:5px 10px;
|
||||
font-size:14px;
|
||||
background-color:#fff;
|
||||
color:#000;
|
||||
vertical-align:top;
|
||||
border:0;
|
||||
}
|
||||
#djDebug .djdt-panelContent table tr.djDebugOdd td {
|
||||
background-color:#eee;
|
||||
}
|
||||
*/
|
||||
|
||||
#djDebug .djdt-panelContent .djDebugClose {
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:4px;
|
||||
right:15px;
|
||||
height:40px;
|
||||
width:40px;
|
||||
background: no-repeat center center;
|
||||
background-image: url(../img/close.png);
|
||||
}
|
||||
|
||||
#djDebug .djdt-panelContent .djDebugClose:hover {
|
||||
background-image: url(../img/close_hover.png);
|
||||
}
|
||||
|
||||
#djDebug .djdt-panelContent .djDebugClose.djDebugBack {
|
||||
background-image: url(../img/back.png);
|
||||
}
|
||||
|
||||
#djDebug .djdt-panelContent .djDebugClose.djDebugBack:hover {
|
||||
background-image: url(../img/back_hover.png);
|
||||
}
|
||||
|
||||
#djDebug .djdt-panelContent dt, #djDebug .djdt-panelContent dd {
|
||||
display:block;
|
||||
}
|
||||
|
||||
#djDebug .djdt-panelContent dt {
|
||||
margin-top:0.75em;
|
||||
}
|
||||
|
||||
#djDebug .djdt-panelContent dd {
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
#djDebug a.toggleTemplate {
|
||||
padding:4px;
|
||||
background-color:#bbb;
|
||||
-webkit-border-radius:3px;
|
||||
-moz-border-radius:3px;
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
#djDebug a.toggleTemplate:hover {
|
||||
padding:4px;
|
||||
background-color:#444;
|
||||
color:#ffe761;
|
||||
-webkit-border-radius:3px;
|
||||
-moz-border-radius:3px;
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
|
||||
#djDebug .djDebugSqlWrap {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
#djDebug .djDebugCollapsed {
|
||||
display: none;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#djDebug .djDebugUncollapsed {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#djDebug .djUnselected {
|
||||
display: none;
|
||||
}
|
||||
#djDebug tr.djHiddenByDefault {
|
||||
display: none;
|
||||
}
|
||||
#djDebug tr.djSelected {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
#djDebug .djDebugSql {
|
||||
word-break:break-word;
|
||||
z-index:100000002;
|
||||
}
|
||||
|
||||
#djDebug .djSQLDetailsDiv tbody th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#djDebug .djSqlExplain td {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#djDebug span.djDebugLineChart {
|
||||
background-color:#777;
|
||||
height:3px;
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
top:0;
|
||||
left:0;
|
||||
display:block;
|
||||
z-index:1000000001;
|
||||
}
|
||||
#djDebug span.djDebugLineChartWarning {
|
||||
background-color:#900;
|
||||
}
|
||||
|
||||
#djDebug .highlight { color:#000; }
|
||||
#djDebug .highlight .err { color:#000; } /* Error */
|
||||
#djDebug .highlight .g { color:#000; } /* Generic */
|
||||
#djDebug .highlight .k { color:#000; font-weight:bold } /* Keyword */
|
||||
#djDebug .highlight .o { color:#000; } /* Operator */
|
||||
#djDebug .highlight .n { color:#000; } /* Name */
|
||||
#djDebug .highlight .mi { color:#000; font-weight:bold } /* Literal.Number.Integer */
|
||||
#djDebug .highlight .l { color:#000; } /* Literal */
|
||||
#djDebug .highlight .x { color:#000; } /* Other */
|
||||
#djDebug .highlight .p { color:#000; } /* Punctuation */
|
||||
#djDebug .highlight .m { color:#000; font-weight:bold } /* Literal.Number */
|
||||
#djDebug .highlight .s { color:#333 } /* Literal.String */
|
||||
#djDebug .highlight .w { color:#888888 } /* Text.Whitespace */
|
||||
#djDebug .highlight .il { color:#000; font-weight:bold } /* Literal.Number.Integer.Long */
|
||||
#djDebug .highlight .na { color:#333 } /* Name.Attribute */
|
||||
#djDebug .highlight .nt { color:#000; font-weight:bold } /* Name.Tag */
|
||||
#djDebug .highlight .nv { color:#333 } /* Name.Variable */
|
||||
#djDebug .highlight .s2 { color:#333 } /* Literal.String.Double */
|
||||
#djDebug .highlight .cp { color:#333 } /* Comment.Preproc */
|
||||
|
||||
#djDebug .djdt-timeline {
|
||||
width: 30%;
|
||||
}
|
||||
#djDebug .djDebugTimeline {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
#djDebug div.djDebugLineChart {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#djDebug div.djDebugLineChart strong {
|
||||
text-indent: -10000em;
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
background-color:#ccc;
|
||||
}
|
||||
|
||||
#djDebug div.djDebugLineChartWarning strong {
|
||||
background-color:#900;
|
||||
}
|
||||
|
||||
#djDebug .djDebugInTransaction div.djDebugLineChart strong {
|
||||
background-color: #d3ff82;
|
||||
}
|
||||
#djDebug .djDebugStartTransaction div.djDebugLineChart strong {
|
||||
border-left: 1px solid #94b24d;
|
||||
}
|
||||
#djDebug .djDebugEndTransaction div.djDebugLineChart strong {
|
||||
border-right: 1px solid #94b24d;
|
||||
}
|
||||
|
||||
#djDebug .djdt-panelContent ul.djdt-stats {
|
||||
position: relative;
|
||||
list-style-type: none;
|
||||
}
|
||||
#djDebug .djdt-panelContent ul.djdt-stats li {
|
||||
width: 30%;
|
||||
float: left;
|
||||
}
|
||||
#djDebug .djdt-panelContent ul.djdt-stats li strong.djdt-label {
|
||||
display: block;
|
||||
}
|
||||
#djDebug .djdt-panelContent ul.djdt-stats li span.djdt-color {
|
||||
height: 12px;
|
||||
width: 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
#djDebug .djdt-panelContent ul.djdt-stats li span.djdt-info {
|
||||
display: block;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
#djDebug .djdt-panelContent thead th {
|
||||
white-space: nowrap;
|
||||
}
|
||||
#djDebug .djDebugRowWarning .djdt-time {
|
||||
color: red;
|
||||
}
|
||||
#djdebug .djdt-panelContent table .djdt-toggle {
|
||||
width: 14px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
#djDebug .djdt-panelContent table .djdt-actions {
|
||||
min-width: 70px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#djdebug .djdt-panelContent table .djdt-color {
|
||||
width: 3px;
|
||||
}
|
||||
#djdebug .djdt-panelContent table .djdt-color span {
|
||||
width: 3px;
|
||||
height: 12px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
#djDebug .djToggleSwitch {
|
||||
text-decoration: none;
|
||||
border: 1px solid #999;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
display: inline-block;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF', endColorstr='#DCDCDC'); /* for IE */
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DCDCDC)); /* for webkit browsers */
|
||||
background:-moz-linear-gradient(center top , #FFFFFF 0pt, #DCDCDC 100%) repeat scroll 0 0 transparent;
|
||||
}
|
||||
#djDebug .djNoToggleSwitch {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#djDebug .djSQLDetailsDiv {
|
||||
margin-top:0.8em;
|
||||
}
|
||||
#djDebug pre {
|
||||
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
|
||||
white-space: -pre-wrap; /* Opera 4-6 */
|
||||
white-space: -o-pre-wrap; /* Opera 7 */
|
||||
white-space: pre-wrap; /* CSS-3 */
|
||||
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
||||
color: #555;
|
||||
border:1px solid #ccc;
|
||||
border-collapse:collapse;
|
||||
background-color:#fff;
|
||||
display:block;
|
||||
overflow: auto;
|
||||
padding:2px 3px;
|
||||
margin-bottom: 3px;
|
||||
font-family:Consolas, Monaco, "Bitstream Vera Sans Mono", "Lucida Console", monospace;
|
||||
}
|
||||
#djDebug .djdt-stack span {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
#djDebug .djdt-stack span.djdt-path,
|
||||
#djDebug .djdt-stack pre.djdt-locals,
|
||||
#djDebug .djdt-stack pre.djdt-locals span {
|
||||
color: #777;
|
||||
font-weight: normal;
|
||||
}
|
||||
#djDebug .djdt-stack span.djdt-code {
|
||||
font-weight: normal;
|
||||
}
|
||||
#djDebug .djdt-stack pre.djdt-locals {
|
||||
margin: 0 27px 27px 27px;
|
||||
}
|
||||
|
||||
#djDebug .djdt-width-20 {
|
||||
width: 20%;
|
||||
}
|
||||
#djDebug .djdt-width-60 {
|
||||
width: 60%;
|
||||
}
|
||||
#djDebug .djdt-highlighted {
|
||||
background-color: lightgrey;
|
||||
}
|
||||
.djdt-hidden {
|
||||
display: none;
|
||||
}
|
||||
BIN
static/debug_toolbar/img/ajax-loader.gif
Normal file
BIN
static/debug_toolbar/img/ajax-loader.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 404 B |
BIN
static/debug_toolbar/img/back.png
Normal file
BIN
static/debug_toolbar/img/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 574 B |
BIN
static/debug_toolbar/img/back_hover.png
Normal file
BIN
static/debug_toolbar/img/back_hover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 613 B |
BIN
static/debug_toolbar/img/close.png
Normal file
BIN
static/debug_toolbar/img/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 498 B |
BIN
static/debug_toolbar/img/close_hover.png
Normal file
BIN
static/debug_toolbar/img/close_hover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 706 B |
BIN
static/debug_toolbar/img/djdt_vertical.png
Normal file
BIN
static/debug_toolbar/img/djdt_vertical.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 882 B |
BIN
static/debug_toolbar/img/indicator.png
Normal file
BIN
static/debug_toolbar/img/indicator.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 436 B |
1
static/debug_toolbar/js/redirect.js
Normal file
1
static/debug_toolbar/js/redirect.js
Normal file
@@ -0,0 +1 @@
|
||||
document.getElementById('redirect_to').focus();
|
||||
324
static/debug_toolbar/js/toolbar.js
Normal file
324
static/debug_toolbar/js/toolbar.js
Normal file
@@ -0,0 +1,324 @@
|
||||
(function () {
|
||||
var $$ = {
|
||||
on: function(root, eventName, selector, fn) {
|
||||
root.addEventListener(eventName, function(event) {
|
||||
var target = event.target.closest(selector);
|
||||
if (root.contains(target)) {
|
||||
fn.call(target, event);
|
||||
}
|
||||
});
|
||||
},
|
||||
show: function(element) {
|
||||
element.style.display = 'block';
|
||||
},
|
||||
hide: function(element) {
|
||||
element.style.display = 'none';
|
||||
},
|
||||
toggle: function(element, value) {
|
||||
if (value) {
|
||||
$$.show(element);
|
||||
} else {
|
||||
$$.hide(element);
|
||||
}
|
||||
},
|
||||
visible: function(element) {
|
||||
style = getComputedStyle(element);
|
||||
return style.display !== 'none';
|
||||
},
|
||||
executeScripts: function(root) {
|
||||
root.querySelectorAll('script').forEach(function(e) {
|
||||
var clone = document.createElement('script');
|
||||
clone.src = e.src;
|
||||
root.appendChild(clone);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
var onKeyDown = function(event) {
|
||||
if (event.keyCode == 27) {
|
||||
djdt.hide_one_level();
|
||||
}
|
||||
};
|
||||
|
||||
var ajax = function(url, init) {
|
||||
init = Object.assign({credentials: 'same-origin'}, init);
|
||||
return fetch(url, init).then(function(response) {
|
||||
if (response.ok) {
|
||||
return response.text();
|
||||
} else {
|
||||
var win = document.querySelector('#djDebugWindow');
|
||||
win.innerHTML = '<div class="djDebugPanelTitle"><a class="djDebugClose djDebugBack" href=""></a><h3>'+response.status+': '+response.statusText+'</h3></div>';
|
||||
$$.show(win);
|
||||
return Promise.reject();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var djdt = {
|
||||
handleDragged: false,
|
||||
events: {
|
||||
ready: []
|
||||
},
|
||||
isReady: false,
|
||||
init: function() {
|
||||
var djDebug = document.querySelector('#djDebug');
|
||||
$$.show(djDebug);
|
||||
$$.on(djDebug.querySelector('#djDebugPanelList'), 'click', 'li a', function(event) {
|
||||
event.preventDefault();
|
||||
if (!this.className) {
|
||||
return;
|
||||
}
|
||||
var current = djDebug.querySelector('#' + this.className);
|
||||
if ($$.visible(current)) {
|
||||
djdt.hide_panels();
|
||||
} else {
|
||||
djdt.hide_panels();
|
||||
|
||||
$$.show(current);
|
||||
this.parentElement.classList.add('djdt-active');
|
||||
|
||||
var inner = current.querySelector('.djDebugPanelContent .djdt-scroll'),
|
||||
store_id = djDebug.dataset.storeId;
|
||||
if (store_id && inner.children.length === 0) {
|
||||
var url = djDebug.dataset.renderPanelUrl;
|
||||
var url_params = new URLSearchParams();
|
||||
url_params.append('store_id', store_id);
|
||||
url_params.append('panel_id', this.className);
|
||||
url += '?' + url_params.toString();
|
||||
ajax(url).then(function(body) {
|
||||
inner.previousElementSibling.remove(); // Remove AJAX loader
|
||||
inner.innerHTML = body;
|
||||
$$.executeScripts(inner);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
$$.on(djDebug, 'click', 'a.djDebugClose', function(event) {
|
||||
event.preventDefault();
|
||||
djdt.hide_one_level();
|
||||
});
|
||||
$$.on(djDebug, 'click', '.djDebugPanelButton input[type=checkbox]', function() {
|
||||
djdt.cookie.set(this.dataset.cookie, this.checked ? 'on' : 'off', {
|
||||
path: '/',
|
||||
expires: 10
|
||||
});
|
||||
});
|
||||
|
||||
// Used by the SQL and template panels
|
||||
$$.on(djDebug, 'click', '.remoteCall', function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
var name = this.tagName.toLowerCase();
|
||||
var ajax_data = {};
|
||||
|
||||
if (name == 'button') {
|
||||
var form = this.closest('form');
|
||||
ajax_data.url = this.getAttribute('formaction');
|
||||
|
||||
if (form) {
|
||||
ajax_data.body = new FormData(form);
|
||||
ajax_data.method = form.getAttribute('method') || 'POST';
|
||||
}
|
||||
}
|
||||
|
||||
if (name == 'a') {
|
||||
ajax_data.url = this.getAttribute('href');
|
||||
}
|
||||
|
||||
ajax(ajax_data.url, ajax_data).then(function(body) {
|
||||
var win = djDebug.querySelector('#djDebugWindow');
|
||||
win.innerHTML = body;
|
||||
$$.executeScripts(win);
|
||||
$$.show(win);
|
||||
});
|
||||
});
|
||||
|
||||
// Used by the cache, profiling and SQL panels
|
||||
$$.on(djDebug, 'click', 'a.djToggleSwitch', function(event) {
|
||||
event.preventDefault();
|
||||
var self = this;
|
||||
var id = this.dataset.toggleId;
|
||||
var open_me = this.textContent == this.dataset.toggleOpen;
|
||||
if (id === '' || !id) {
|
||||
return;
|
||||
}
|
||||
var name = this.dataset.toggleName;
|
||||
var container = this.closest('.djDebugPanelContent').querySelector('#' + name + '_' + id);
|
||||
container.querySelectorAll('.djDebugCollapsed').forEach(function(e) {
|
||||
$$.toggle(e, open_me);
|
||||
});
|
||||
container.querySelectorAll('.djDebugUncollapsed').forEach(function(e) {
|
||||
$$.toggle(e, !open_me);
|
||||
});
|
||||
this.closest('.djDebugPanelContent').querySelectorAll('.djToggleDetails_' + id).forEach(function(e) {
|
||||
if (open_me) {
|
||||
e.classList.add('djSelected');
|
||||
e.classList.remove('djUnselected');
|
||||
self.textContent = self.dataset.toggleClose;
|
||||
} else {
|
||||
e.classList.remove('djSelected');
|
||||
e.classList.add('djUnselected');
|
||||
self.textContent = self.dataset.toggleOpen;
|
||||
}
|
||||
var switch_ = e.querySelector('.djToggleSwitch')
|
||||
if (switch_) switch_.textContent = self.textContent;
|
||||
});
|
||||
});
|
||||
|
||||
djDebug.querySelector('#djHideToolBarButton').addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
djdt.hide_toolbar(true);
|
||||
});
|
||||
djDebug.querySelector('#djShowToolBarButton').addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
if (!djdt.handleDragged) {
|
||||
djdt.show_toolbar();
|
||||
}
|
||||
});
|
||||
var startPageY, baseY;
|
||||
var handle = document.querySelector('#djDebugToolbarHandle');
|
||||
var onHandleMove = function(event) {
|
||||
// Chrome can send spurious mousemove events, so don't do anything unless the
|
||||
// cursor really moved. Otherwise, it will be impossible to expand the toolbar
|
||||
// due to djdt.handleDragged being set to true.
|
||||
if (djdt.handleDragged || event.pageY != startPageY) {
|
||||
var top = baseY + event.pageY;
|
||||
|
||||
if (top < 0) {
|
||||
top = 0;
|
||||
} else if (top + handle.offsetHeight > window.innerHeight) {
|
||||
top = window.innerHeight - handle.offsetHeight;
|
||||
}
|
||||
|
||||
handle.style.top = top + 'px';
|
||||
djdt.handleDragged = true;
|
||||
}
|
||||
};
|
||||
djDebug.querySelector('#djShowToolBarButton').addEventListener('mousedown', function(event) {
|
||||
event.preventDefault();
|
||||
startPageY = event.pageY;
|
||||
baseY = handle.offsetTop - startPageY;
|
||||
document.addEventListener('mousemove', onHandleMove);
|
||||
});
|
||||
document.addEventListener('mouseup', function (event) {
|
||||
document.removeEventListener('mousemove', onHandleMove);
|
||||
if (djdt.handleDragged) {
|
||||
event.preventDefault();
|
||||
djdt.cookie.set('djdttop', handle.offsetTop, {
|
||||
path: '/',
|
||||
expires: 10
|
||||
});
|
||||
setTimeout(function () {
|
||||
djdt.handleDragged = false;
|
||||
}, 10);
|
||||
}
|
||||
});
|
||||
if (djdt.cookie.get('djdt') == 'hide') {
|
||||
djdt.hide_toolbar(false);
|
||||
} else {
|
||||
djdt.show_toolbar();
|
||||
}
|
||||
djdt.isReady = true;
|
||||
djdt.events.ready.forEach(function(callback) {
|
||||
callback(djdt);
|
||||
});
|
||||
},
|
||||
hide_panels: function() {
|
||||
$$.hide(djDebug.querySelector('#djDebugWindow'));
|
||||
djDebug.querySelectorAll('.djdt-panelContent').forEach(function(e) {
|
||||
$$.hide(e);
|
||||
});
|
||||
djDebug.querySelectorAll('#djDebugToolbar li').forEach(function(e) {
|
||||
e.classList.remove('djdt-active');
|
||||
});
|
||||
},
|
||||
hide_toolbar: function(setCookie) {
|
||||
djdt.hide_panels();
|
||||
$$.hide(djDebug.querySelector('#djDebugToolbar'));
|
||||
|
||||
var handle = document.querySelector('#djDebugToolbarHandle');
|
||||
$$.show(handle);
|
||||
// set handle position
|
||||
var handleTop = djdt.cookie.get('djdttop');
|
||||
if (handleTop) {
|
||||
handleTop = Math.min(handleTop, window.innerHeight - handle.offsetHeight);
|
||||
handle.style.top = handleTop + 'px';
|
||||
}
|
||||
|
||||
document.removeEventListener('keydown', onKeyDown);
|
||||
|
||||
if (setCookie) {
|
||||
djdt.cookie.set('djdt', 'hide', {
|
||||
path: '/',
|
||||
expires: 10
|
||||
});
|
||||
}
|
||||
},
|
||||
hide_one_level: function(skipDebugWindow) {
|
||||
if ($$.visible(djDebug.querySelector('#djDebugWindow'))) {
|
||||
$$.hide(djDebug.querySelector('#djDebugWindow'));
|
||||
} else if (djDebug.querySelector('#djDebugToolbar li.djdt-active')) {
|
||||
djdt.hide_panels();
|
||||
} else {
|
||||
djdt.hide_toolbar(true);
|
||||
}
|
||||
},
|
||||
show_toolbar: function() {
|
||||
document.addEventListener('keydown', onKeyDown);
|
||||
$$.hide(djDebug.querySelector('#djDebugToolbarHandle'));
|
||||
$$.show(djDebug.querySelector('#djDebugToolbar'));
|
||||
djdt.cookie.set('djdt', 'show', {
|
||||
path: '/',
|
||||
expires: 10
|
||||
});
|
||||
},
|
||||
ready: function(callback){
|
||||
if (djdt.isReady) {
|
||||
callback(djdt);
|
||||
} else {
|
||||
djdt.events.ready.push(callback);
|
||||
}
|
||||
},
|
||||
cookie: {
|
||||
get: function(key){
|
||||
if (document.cookie.indexOf(key) === -1) return null;
|
||||
|
||||
var cookieArray = document.cookie.split('; '),
|
||||
cookies = {};
|
||||
|
||||
cookieArray.forEach(function(e){
|
||||
var parts = e.split('=');
|
||||
cookies[ parts[0] ] = parts[1];
|
||||
});
|
||||
|
||||
return cookies[ key ];
|
||||
},
|
||||
set: function(key, value, options){
|
||||
options = options || {};
|
||||
|
||||
if (typeof options.expires === 'number') {
|
||||
var days = options.expires, t = options.expires = new Date();
|
||||
t.setDate(t.getDate() + days);
|
||||
}
|
||||
|
||||
document.cookie = [
|
||||
encodeURIComponent(key) + '=' + String(value),
|
||||
options.expires ? '; expires=' + options.expires.toUTCString() : '',
|
||||
options.path ? '; path=' + options.path : '',
|
||||
options.domain ? '; domain=' + options.domain : '',
|
||||
options.secure ? '; secure' : ''
|
||||
].join('');
|
||||
|
||||
return value;
|
||||
}
|
||||
},
|
||||
};
|
||||
window.djdt = {
|
||||
show_toolbar: djdt.show_toolbar,
|
||||
hide_toolbar: djdt.hide_toolbar,
|
||||
init: djdt.init,
|
||||
close: djdt.hide_one_level,
|
||||
cookie: djdt.cookie,
|
||||
};
|
||||
document.addEventListener('DOMContentLoaded', djdt.init);
|
||||
})();
|
||||
52
static/debug_toolbar/js/toolbar.timer.js
Normal file
52
static/debug_toolbar/js/toolbar.timer.js
Normal file
@@ -0,0 +1,52 @@
|
||||
(function () {
|
||||
// Browser timing remains hidden unless we can successfully access the performance object
|
||||
var perf = window.performance || window.msPerformance ||
|
||||
window.webkitPerformance || window.mozPerformance;
|
||||
if (!perf)
|
||||
return;
|
||||
|
||||
var rowCount = 0,
|
||||
timingOffset = perf.timing.navigationStart,
|
||||
timingEnd = perf.timing.loadEventEnd,
|
||||
totalTime = timingEnd - timingOffset;
|
||||
function getLeft(stat) {
|
||||
return ((perf.timing[stat] - timingOffset) / (totalTime)) * 100.0;
|
||||
}
|
||||
function getCSSWidth(stat, endStat) {
|
||||
var width = ((perf.timing[endStat] - perf.timing[stat]) / (totalTime)) * 100.0;
|
||||
// Calculate relative percent (same as sql panel logic)
|
||||
width = 100.0 * width / (100.0 - getLeft(stat));
|
||||
return (width < 1) ? "2px" : width + "%";
|
||||
}
|
||||
function addRow(stat, endStat) {
|
||||
rowCount++;
|
||||
var row = document.createElement('tr');
|
||||
row.className = (rowCount % 2) ? 'djDebugOdd' : 'djDebugEven';
|
||||
if (endStat) {
|
||||
// Render a start through end bar
|
||||
row.innerHTML = '<td>' + stat.replace('Start', '') + '</td>' +
|
||||
'<td class="djdt-timeline"><div class="djDebugTimeline"><div class="djDebugLineChart"><strong> </strong></div></div></td>' +
|
||||
'<td>' + (perf.timing[stat] - timingOffset) + ' (+' + (perf.timing[endStat] - perf.timing[stat]) + ')</td>';
|
||||
row.querySelector('strong').style.width = getCSSWidth(stat, endStat);
|
||||
} else {
|
||||
// Render a point in time
|
||||
row.innerHTML = '<td>' + stat + '</td>' +
|
||||
'<td class="djdt-timeline"><div class="djDebugTimeline"><div class="djDebugLineChart"><strong> </strong></div></div></td>' +
|
||||
'<td>' + (perf.timing[stat] - timingOffset) + '</td>';
|
||||
row.querySelector('strong').style.width = '2px';
|
||||
}
|
||||
row.querySelector('.djDebugLineChart').style.left = getLeft(stat) + '%';
|
||||
document.querySelector('#djDebugBrowserTimingTableBody').appendChild(row);
|
||||
}
|
||||
|
||||
// This is a reasonably complete and ordered set of timing periods (2 params) and events (1 param)
|
||||
addRow('domainLookupStart', 'domainLookupEnd');
|
||||
addRow('connectStart', 'connectEnd');
|
||||
addRow('requestStart', 'responseEnd'); // There is no requestEnd
|
||||
addRow('responseStart', 'responseEnd');
|
||||
addRow('domLoading', 'domComplete'); // Spans the events below
|
||||
addRow('domInteractive');
|
||||
addRow('domContentLoadedEventStart', 'domContentLoadedEventEnd');
|
||||
addRow('loadEventStart', 'loadEventEnd');
|
||||
document.querySelector('#djDebugBrowserTiming').classList.remove('djdt-hidden');
|
||||
})();
|
||||
Reference in New Issue
Block a user