r107610 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r107609‎ | r107610 | r107611 >
Date:01:08, 30 December 2011
Author:krinkle
Status:ok (Comments)
Tags:
Comment:
[mediawiki.debug] highlight current pane and styling
* wrapping bits in container and centering tabs
* letting includes-pane use same markup and styling as queries
* move appendTo action into common function (more DRY)
Modified paths:
  • /trunk/phase3/resources/mediawiki/mediawiki.debug.css (modified) (history)
  • /trunk/phase3/resources/mediawiki/mediawiki.debug.js (modified) (history)

Diff [purge]

Index: trunk/phase3/resources/mediawiki/mediawiki.debug.css
——@@ -4,7 +4,7 @@
55 position: fixed;
66 bottom: 0;
77 background-color: #eee;
8 - border-top: 1px solid #ccc;
 8+ border-top: 1px solid #aaa;
99 }
1010
1111 .mw-debug pre {
——@@ -16,49 +16,85 @@
1717 border: none;
1818 }
1919
 20+.mw-debug table {
 21+ border-spacing: 0;
 22+ width: 100%;
 23+}
 24+
 25+.mw-debug table tr {
 26+ background-color: #fff;
 27+}
 28+
 29+.mw-debug table tr:nth-child(even) {
 30+ background-color: #f9f9f9;
 31+}
 32+
 33+.mw-debug table td {
 34+ padding: 4px 10px;
 35+ border-bottom: 1px solid #eee;
 36+}
 37+
 38+.mw-debug table td.nr {
 39+ text-align: right;
 40+}
 41+
 42+.mw-debug table td span.stats {
 43+ color: #808080;
 44+}
 45+
2046 .mw-debug ul {
2147 margin: 0;
2248 list-style: none;
23 - box-sizing: border-box;
2449 }
2550
2651 .mw-debug li {
27 - padding: 2px 5px;
 52+ padding: 4px 0;
2853 width: 100%;
29 - display: table;
3054 }
3155
 56+.mw-debug-bits {
 57+ text-align: center;
 58+ border-bottom: 1px solid #aaa;
 59+}
 60+
3261 .mw-debug-bit {
33 - min-height: 25px;
3462 display: inline-block;
35 - padding: 5px;
36 - border-right: 1px solid #ccc;
 63+ padding: 10px 5px;
3764 font-size: 13px;
3865 }
3966
 67+.mw-debug-panelink {
 68+ background-color: #eee;
 69+ border-right: 1px solid #ccc;
 70+}
 71+
 72+.mw-debug-panelink:first-child {
 73+ border-left: 1px solid #ccc;
 74+}
 75+
 76+.mw-debug-panelink:hover {
 77+ background-color: #fefefe;
 78+ cursor: pointer;
 79+}
 80+.mw-debug-panelink.current {
 81+ background-color: #dedede;
 82+
 83+}
 84+a.mw-debug-panelabel,
 85+a.mw-debug-panelabel:visited {
 86+ color: #000;
 87+}
 88+
4089 .mw-debug-pane {
4190 max-height: 300px;
4291 overflow: scroll;
43 - border-top: 2px solid #ccc;
4492 display: none;
4593 font-size: 11px;
4694 background-color: #e1eff2;
4795 box-sizing: border-box;
4896 }
4997
50 -.mw-debug-right {
51 - float: right;
52 -}
53 -
54 -#mw-debug-querylist td {
55 - padding: 2px 5px;
56 - border-bottom: 1px solid #ccc;
57 -}
58 -
59 -.mw-debug-query-time {
60 - color: #808080;
61 -}
62 -
 98+#mw-debug-pane-debuglog,
6399 #mw-debug-pane-request {
64100 padding: 20px;
65101 }
——@@ -91,17 +127,3 @@
92128 #mw-debug-pane-request td {
93129 background-color: white;
94130 }
95 -
96 -#mw-debug-pane-querylist table {
97 - border-spacing: 0;
98 -}
99 -
100 -#mw-debug-pane-includes li,
101 -#mw-debug-pane-querylist tr td {
102 - background-color: #ccc;
103 -}
104 -
105 -#mw-debug-pane-includes li:nth-child(odd),
106 -#mw-debug-pane-querylist tr:nth-child(odd) td {
107 - background-color: #ddd;
108 -}
Index: trunk/phase3/resources/mediawiki/mediawiki.debug.js
——@@ -47,11 +47,14 @@
4848 */
4949 switchPane: function ( e ) {
5050 var currentPaneId = debug.$container.data( 'currentPane' ),
51 - requestedPaneId = $(this).parent().attr( 'id' ).substr( 9 ),
 51+ requestedPaneId = $(this).prop( 'id' ).substr( 9 ),
5252 $currentPane = $( '#mw-debug-pane-' + currentPaneId ),
5353 $requestedPane = $( '#mw-debug-pane-' + requestedPaneId );
54 - e.preventDefault();
5554
 55+ $( this ).addClass( 'current ')
 56+ $( '.mw-debug-panelink' ).not( this ).removeClass( 'current ');
 57+
 58+
5659 // Hide the current pane
5760 if ( requestedPaneId === currentPaneId ) {
5861 $currentPane.slideUp();
——@@ -73,14 +76,12 @@
7477 * Constructs the HTML for the debugging toolbar
7578 */
7679 buildHtml: function () {
77 - var $container, panes, id;
 80+ var $container, $bits, panes, id;
7881
79 - $container = $( '<div>' )
80 - .attr({
81 - id: 'mw-debug-container',
82 - 'class': 'mw-debug'
83 - });
 82+ $container = $( '<div id="mw-debug-container" class="mw-debug"></div>' );
8483
 84+ $bits = $( '<div class="mw-debug-bits"></div>' );
 85+
8586 /**
8687 * Returns a jQuery element for a debug-bit div
8788 *
——@@ -91,7 +92,8 @@
9293 return $( '<div>' ).attr({
9394 id: 'mw-debug-' + id,
9495 'class': 'mw-debug-bit'
95 - });
 96+ })
 97+ .appendTo( $bits );
9698 }
9799
98100 /**
——@@ -101,50 +103,56 @@
102104 * @param text
103105 * @return {jQuery}
104106 */
105 - function paneLink( id, text ) {
 107+ function paneLabel( id, text ) {
106108 return $( '<a>' )
107109 .attr({
108 - href: '#',
109 - 'class': 'mw-debug-panelink',
110 - id: 'mw-debug-' + id + '-link'
 110+ 'class': 'mw-debug-panelabel',
 111+ href: '#mw-debug-pane-' + id
111112 })
112113 .text( text );
113114 }
114115
 116+ /**
 117+ * Returns a jQuery element for a debug-bit div with a for a pane link
 118+ *
 119+ * @param id
 120+ * @return {jQuery}
 121+ */
 122+ function paneTriggerBitDiv( id, text ) {
 123+ return $( '<div>' ).attr({
 124+ id: 'mw-debug-' + id,
 125+ 'class': 'mw-debug-bit mw-debug-panelink'
 126+ })
 127+ .append( paneLabel( id, text ) )
 128+ .appendTo( $bits );
 129+ }
 130+
 131+ paneTriggerBitDiv( 'querylist', 'Queries: ' + this.data.queries.length );
 132+
 133+ paneTriggerBitDiv( 'debuglog', 'Debug Log (' + this.data.debugLog.length + ' lines)' );
 134+
 135+ paneTriggerBitDiv( 'request', 'Request' );
 136+
 137+ paneTriggerBitDiv( 'includes', this.data.includes.length + ' Files Included' );
 138+
115139 bitDiv( 'mwversion' )
116140 .append( $( '<a href="https://www.mediawiki.org//www.mediawiki.org/"></a>' ).text( 'MediaWiki' ) )
117 - .append( ': ' + this.data.mwVersion )
118 - .appendTo( $container );
 141+ .append( ': ' + this.data.mwVersion );
119142
120143 bitDiv( 'phpversion' )
121144 .append( $( '<a href="https://www.mediawiki.org//www.php.net/"></a>' ).text( 'PHP' ) )
122 - .append( ': ' + this.data.phpVersion )
123 - .appendTo( $container );
 145+ .append( ': ' + this.data.phpVersion );
124146
125147 bitDiv( 'time' )
126 - .text( 'Time: ' + this.data.time.toFixed( 5 ) )
127 - .appendTo( $container );
 148+ .text( 'Time: ' + this.data.time.toFixed( 5 ) );
 149+
128150 bitDiv( 'memory' )
129151 .text( 'Memory: ' + this.data.memory )
130 - .append( $( '<span title="Peak usage"></span>' ).text( ' (' + this.data.memoryPeak + ')' ) )
131 - .appendTo( $container );
 152+ .append( $( '<span title="Peak usage"></span>' ).text( ' (' + this.data.memoryPeak + ')' ) );
 153+
132154
133 - bitDiv( 'querylist' )
134 - .append( paneLink( 'query', 'Queries: ' + this.data.queries.length ) )
135 - .appendTo( $container );
 155+ $bits.appendTo( $container );
136156
137 - bitDiv( 'debuglog' )
138 - .append( paneLink( 'debuglog', 'Debug Log (' + this.data.debugLog.length + ' lines)' ) )
139 - .appendTo( $container );
140 -
141 - bitDiv( 'request' )
142 - .append( paneLink( 'request', 'Request' ) )
143 - .appendTo( $container );
144 -
145 - bitDiv( 'includes' )
146 - .append( paneLink( 'files-includes', this.data.includes.length + ' Files Included' ) )
147 - .appendTo( $container );
148 -
149157 panes = {
150158 querylist: this.buildQueryTable(),
151159 debuglog: this.buildDebugLogTable(),
——@@ -184,7 +192,7 @@
185193 .append( $( '<td>' ).text( i + 1 ) )
186194 .append( $( '<td>' ).text( query.sql ) )
187195 .append( $( '<td>' )
188 - .append( $( '<span class="mw-debug-query-time"></span>' ).text( '(' + query.time.toFixed( 4 ) + 'ms) ' ) )
 196+ .append( $( '<span class="stats"></span>' ).text( '(' + query.time.toFixed( 4 ) + 'ms) ' ) )
189197 .append( query['function'] )
190198 )
191199 .appendTo( $table );
——@@ -250,19 +258,19 @@
251259 * Included files pane
252260 */
253261 buildIncludesPane: function () {
254 - var $list, i, len, file;
 262+ var $table, i, length, file;
255263
256 - $list = $( '<ul>' );
 264+ $table = $( '<table>' );
257265
258 - for ( i = 0, len = this.data.includes.length; i < len; i += 1 ) {
 266+ for ( i = 0, length = this.data.includes.length; i < length; i += 1 ) {
259267 file = this.data.includes[i];
260 - $( '<li>' )
261 - .text( file.name )
262 - .prepend( $( '<span class="mw-debug-right"></span>' ).text( file.size ) )
263 - .appendTo( $list );
 268+ $( '<tr>' )
 269+ .append( $( '<td>' ).text( file.name ) )
 270+ .append( $( '<td class="nr">' ).text( file.size ) )
 271+ .appendTo( $table );
264272 }
265273
266 - return $list;
 274+ return $table;
267275 }
268276 };
269277

Follow-up revisions

RevisionCommit summaryAuthorDate
r107640[mediawiki.debug] attempt at fixing off-screen mega wide cells for some queries....krinkle18:21, 30 December 2011
r108071[mediawiki.debug] add implied semi-colon...krinkle19:14, 4 January 2012

Comments

#Comment by Nikerabbit (talk | contribs)   06:33, 30 December 2011

I'm getting horizontal scrollbars in query view, is it related to this commit?

#Comment by Krinkle (talk | contribs)   10:13, 30 December 2011

Hm.. will check out in a few hours. Thanks :)

#Comment by Nikerabbit (talk | contribs)   10:38, 30 December 2011

Just FYI if it comes in need: Google Chrome 16.0.912.63 in Linux. Seen on http://translatewiki.net/sw/

#Comment by Krinkle (talk | contribs)   18:21, 30 December 2011

I see it. Looks like the proper behavior for tables. They auto-expand and are really stubborn when it comes to wrapping lines.

Using table-layout: fixed; this will go away, but then we have to manually set the widths for column, browsers will then completely drop the auto-column devision.

#Comment by Krinkle (talk | contribs)   09:07, 2 January 2012

This was fixed last week in r107640.

Status & tagging log