r107604 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r107603‎ | r107604 | r107605 >
Date:23:49, 29 December 2011
Author:krinkle
Status:ok
Tags:
Comment:
[mediawiki.debug] apply code conventions
* Quote "class"-key in object literals. It's stupid that JavaScript does not allow reserved words in this position but that's the way it is. As of ES5 (which Chrome/Firefox already started to implement) this is now part of the standard and no longer have to be quoted, still required for the browsers we support though.
* Fix usage of Array to Object. Arrays are for numeral keys only.
* Make usage of $() for building elements from HTML strings more consistent. Using shortag syntax for new elements creation. And valid HTML for snippets (as supposed to $("<div></div>") and $("<span class="foo">")). valid HTML is always okay, but shortag should only be used for creating plain elements (which jQuery recognizes and calls document-createElement for. Anything else goes into innerHTML which causes problems in browsers that require it to be valid and don't apply normalization.
* Remove empty style rule
* Moving declaration inside for-blocks to the function scope. JavaScript doesn't have just-in-time variables or block scope, only function scope.
* Apply general code conventions
* Follows-up r105122
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
——@@ -50,10 +50,6 @@
5151 float: right;
5252 }
5353
54 -#mw-debug-querylist tr {
55 -
56 -}
57 -
5854 #mw-debug-querylist td {
5955 padding: 2px 5px;
6056 border-bottom: 1px solid #ccc;
Index: trunk/phase3/resources/mediawiki/mediawiki.debug.js
——@@ -1,11 +1,12 @@
22 /**
3 - * Javascript for the new debug toolbar, enabled with $wgDebugToolbar
 3+ * JavaScript for the new debug toolbar, enabled with $wgDebugToolbar
44 *
55 * @author John Du Hart
66 * @since 1.19
77 */
88
9 -( function( $ ) {
 9+( function ( $, mw, undefined ) {
 10+"use strict";
1011
1112 var debug = mw.Debug = {
1213 /**
——@@ -16,18 +17,18 @@
1718 $container: null,
1819
1920 /**
20 - * Array containing data for the debug toolbar
 21+ * Object containing data for the debug toolbar
2122 *
22 - * @var {Array}
 23+ * @var {Object}
2324 */
2425 data: {},
2526
2627 /**
2728 * Initializes the debugging pane
2829 *
29 - * @param {Array} data
 30+ * @param {Object} data
3031 */
31 - init: function( data ) {
 32+ init: function ( data ) {
3233 this.data = data;
3334 this.buildHtml();
3435
——@@ -44,7 +45,7 @@
4546 * @context {Element}
4647 * @param {jQuery.Event} e
4748 */
48 - switchPane: function( e ) {
 49+ switchPane: function ( e ) {
4950 var currentPaneId = debug.$container.data( 'currentPane' ),
5051 requestedPaneId = $(this).parent().attr( 'id' ).substr( 9 ),
5152 $currentPane = $( '#mw-debug-pane-' + currentPaneId ),
——@@ -71,11 +72,13 @@
7273 /**
7374 * Constructs the HTML for the debugging toolbar
7475 */
75 - buildHtml: function() {
76 - var $container = this.$container = $( '<div></div>' )
 76+ buildHtml: function () {
 77+ var $container, panes, id;
 78+
 79+ $container = $( '<div>' )
7780 .attr({
7881 id: 'mw-debug-container',
79 - class: 'mw-debug'
 82+ 'class': 'mw-debug'
8083 });
8184
8285 /**
——@@ -84,12 +87,13 @@
8588 * @param id
8689 * @return {jQuery}
8790 */
88 - var bitDiv = function( id ) {
89 - return $( '<div></div>' ).attr({
 91+ function bitDiv( id ) {
 92+ return $( '<div>' ).attr({
9093 id: 'mw-debug-' + id,
91 - class: 'mw-debug-bit'
 94+ 'class': 'mw-debug-bit'
9295 });
93 - };
 96+ }
 97+
9498 /**
9599 * Returns a jQuery element for a pane link
96100 *
——@@ -97,23 +101,23 @@
98102 * @param text
99103 * @return {jQuery}
100104 */
101 - var paneLink = function( id, text ) {
102 - return $( '<a></a>' )
 105+ function paneLink( id, text ) {
 106+ return $( '<a>' )
103107 .attr({
104108 href: '#',
105 - class: 'mw-debug-panelink',
 109+ 'class': 'mw-debug-panelink',
106110 id: 'mw-debug-' + id + '-link'
107111 })
108112 .text( text );
109113 }
110114
111115 bitDiv( 'mwversion' )
112 - .append( $( '<a href="https://www.mediawiki.org//www.mediawiki.org/">' ).text( 'MediaWiki' ) )
 116+ .append( $( '<a href="https://www.mediawiki.org//www.mediawiki.org/"></a>' ).text( 'MediaWiki' ) )
113117 .append( ': ' + this.data.mwVersion )
114118 .appendTo( $container );
115119
116120 bitDiv( 'phpversion' )
117 - .append( $( '<a href="https://www.mediawiki.org//www.php.net/">' ).text( 'PHP' ) )
 121+ .append( $( '<a href="https://www.mediawiki.org//www.php.net/"></a>' ).text( 'PHP' ) )
118122 .append( ': ' + this.data.phpVersion )
119123 .appendTo( $container );
120124
——@@ -141,42 +145,46 @@
142146 .append( paneLink( 'files-includes', this.data.includes.length + ' Files Included' ) )
143147 .appendTo( $container );
144148
145 - var panes = {
146 - 'querylist': this.buildQueryTable(),
147 - 'debuglog': this.buildDebugLogTable(),
148 - 'request': this.buildRequestPane(),
149 - 'includes': this.buildIncludesPane()
 149+ panes = {
 150+ querylist: this.buildQueryTable(),
 151+ debuglog: this.buildDebugLogTable(),
 152+ request: this.buildRequestPane(),
 153+ includes: this.buildIncludesPane()
150154 };
151155
152 - for ( var id in panes ) {
 156+ for ( id in panes ) {
153157 if ( !panes.hasOwnProperty( id ) ) {
154158 continue;
155159 }
156160
157 - $( '<div></div>' )
 161+ $( '<div>' )
158162 .attr({
159 - class: 'mw-debug-pane',
 163+ 'class': 'mw-debug-pane',
160164 id: 'mw-debug-pane-' + id
161165 })
162166 .append( panes[id] )
163167 .appendTo( $container );
164168 }
 169+
 170+ this.$container = $container;
165171 },
166172
167173 /**
168174 * Query list pane
169175 */
170 - buildQueryTable: function() {
171 - var $table = $( '<table id="mw-debug-querylist"></table>' );
 176+ buildQueryTable: function () {
 177+ var $table, i, length, query;
172178
173 - for ( var i = 0, length = this.data.queries.length; i < length; i++ ) {
174 - var query = this.data.queries[i];
 179+ $table = $( '<table id="mw-debug-querylist"></table>' );
175180
 181+ for ( i = 0, length = this.data.queries.length; i < length; i += 1 ) {
 182+ query = this.data.queries[i];
 183+
176184 $( '<tr>' )
177185 .append( $( '<td>' ).text( i + 1 ) )
178186 .append( $( '<td>' ).text( query.sql ) )
179187 .append( $( '<td>' )
180 - .append( $( '<span class="mw-debug-query-time">' ).text( '(' + query.time.toFixed( 4 ) + 'ms) ' ) )
 188+ .append( $( '<span class="mw-debug-query-time"></span>' ).text( '(' + query.time.toFixed( 4 ) + 'ms) ' ) )
181189 .append( query['function'] )
182190 )
183191 .appendTo( $table );
——@@ -188,11 +196,12 @@
189197 /**
190198 * Legacy debug log pane
191199 */
192 - buildDebugLogTable: function() {
193 - var $list = $( '<ul>' );
 200+ buildDebugLogTable: function () {
 201+ var $list, i, length, line;
 202+ $list = $( '<ul>' );
194203
195 - for ( var i = 0, length = this.data.debugLog.length; i < length; i++ ) {
196 - var line = this.data.debugLog[i];
 204+ for ( i = 0, length = this.data.debugLog.length; i < length; i += 1 ) {
 205+ line = this.data.debugLog[i];
197206 $( '<li>' )
198207 .html( mw.html.escape( line ).replace( /\n/g, "<br />\n" ) )
199208 .appendTo( $list );
——@@ -204,18 +213,20 @@
205214 /**
206215 * Request information pane
207216 */
208 - buildRequestPane: function() {
209 - var buildTable = function( title, data ) {
210 - var $unit = $( '<div></div>' )
211 - .append( $( '<h2>' ).text( title ) );
 217+ buildRequestPane: function () {
212218
213 - var $table = $( '<table>' ).appendTo( $unit );
 219+ function buildTable( title, data ) {
 220+ var $unit, $table, key;
214221
 222+ $unit = $( '<div>' ).append( $( '<h2>' ).text( title ) );
 223+
 224+ $table = $( '<table>' ).appendTo( $unit );
 225+
215226 $( '<tr>' )
216 - .html( '<th>Key</th> <th>Value</th>' )
 227+ .html( '<th>Key</th><th>Value</th>' )
217228 .appendTo( $table );
218229
219 - for ( var key in data ) {
 230+ for ( key in data ) {
220231 if ( !data.hasOwnProperty( key ) ) {
221232 continue;
222233 }
——@@ -227,26 +238,27 @@
228239 }
229240
230241 return $unit;
231 - };
 242+ }
232243
233 - var $pane = $( '<div>' )
 244+ return $( '<div>' )
234245 .text( this.data.request.method + ' ' + this.data.request.url )
235246 .append( buildTable( 'Headers', this.data.request.headers ) )
236247 .append( buildTable( 'Parameters', this.data.request.params ) );
237 - return $pane;
238248 },
239249
240250 /**
241251 * Included files pane
242252 */
243 - buildIncludesPane: function() {
244 - var $list = $( '<ul>' )
 253+ buildIncludesPane: function () {
 254+ var $list, i, len, file;
245255
246 - for ( var i = 0, l = this.data.includes.length; i < l; i++ ) {
247 - var file = this.data.includes[i];
 256+ $list = $( '<ul>' );
 257+
 258+ for ( i = 0, len = this.data.includes.length; i < len; i += 1 ) {
 259+ file = this.data.includes[i];
248260 $( '<li>' )
249261 .text( file.name )
250 - .prepend( $( '<span class="mw-debug-right">' ).text( file.size ) )
 262+ .prepend( $( '<span class="mw-debug-right"></span>' ).text( file.size ) )
251263 .appendTo( $list );
252264 }
253265
——@@ -254,4 +266,4 @@
255267 }
256268 };
257269
258 -} )( jQuery );
\ No newline at end of file
 270+} )( jQuery, mediaWiki );

Past revisions this follows-up on

RevisionCommit summaryAuthorDate
r105122Adding new debugging toolbar...johnduhart18:29, 4 December 2011

Status & tagging log