%PDF-
%PDF-
Mini Shell
Mini Shell
/*!
* JavaScript for the debug toolbar profiler, enabled through $wgDebugToolbar
* and StartProfiler.php.
*
* @author Erik Bernhardson
* @since 1.23
*/
( function ( mw, $ ) {
'use strict';
/**
* @singleton
* @class mw.Debug.profile
*/
var profile = mw.Debug.profile = {
/**
* Object containing data for the debug toolbar
*
* @property ProfileData
*/
data: null,
/**
* @property DOMElement
*/
container: null,
/**
* Initializes the profiling pane.
*/
init: function ( data, width, mergeThresholdPx, dropThresholdPx ) {
data = data || mw.config.get( 'debugInfo' ).profile;
profile.width = width || $(window).width() - 20;
// merge events from same pixel(some events are very granular)
mergeThresholdPx = mergeThresholdPx || 2;
// only drop events if requested
dropThresholdPx = dropThresholdPx || 0;
if (
!Array.prototype.map ||
!Array.prototype.reduce ||
!Array.prototype.filter ||
!document.createElementNS ||
!document.createElementNS.bind
) {
profile.container = profile.buildRequiresBrowserFeatures();
} else if ( data.length === 0 ) {
profile.container = profile.buildNoData();
} else {
// Initialize createSvgElement (now that we know we have
// document.createElementNS and bind)
this.createSvgElement = document.createElementNS.bind( document, 'http://www.w3.org/2000/svg' );
// generate a flyout
profile.data = new ProfileData( data, profile.width, mergeThresholdPx, dropThresholdPx );
// draw it
profile.container = profile.buildSvg( profile.container );
profile.attachFlyout();
}
return profile.container;
},
buildRequiresBrowserFeatures: function () {
return $( '<div>' )
.text( 'Certain browser features, including parts of ECMAScript 5 and document.createElementNS, are required for the profile visualization.' )
.get( 0 );
},
buildNoData: function () {
return $( '<div>' ).addClass( 'mw-debug-profile-no-data' )
.text( 'No events recorded, ensure profiling is enabled in StartProfiler.php.' )
.get( 0 );
},
/**
* Creates DOM nodes appropriately namespaced for SVG.
* Initialized in init after checking support
*
* @param string tag to create
* @return DOMElement
*/
createSvgElement: null,
/**
* @param DOMElement|undefined
*/
buildSvg: function ( node ) {
var container, group, i, g,
timespan = profile.data.timespan,
gapPerEvent = 38,
space = 10.5,
currentHeight = space,
totalHeight = 0;
profile.ratio = ( profile.width - space * 2 ) / ( timespan.end - timespan.start );
totalHeight += gapPerEvent * profile.data.groups.length;
if ( node ) {
$( node ).empty();
} else {
node = profile.createSvgElement( 'svg' );
node.setAttribute( 'version', '1.2' );
node.setAttribute( 'baseProfile', 'tiny' );
}
node.style.height = totalHeight;
node.style.width = profile.width;
// use a container that can be transformed
container = profile.createSvgElement( 'g' );
node.appendChild( container );
for ( i = 0; i < profile.data.groups.length; i++ ) {
group = profile.data.groups[i];
g = profile.buildTimeline( group );
g.setAttribute( 'transform', 'translate( 0 ' + currentHeight + ' )' );
container.appendChild( g );
currentHeight += gapPerEvent;
}
return node;
},
/**
* @param Object group of periods to transform into graphics
*/
buildTimeline: function ( group ) {
var text, tspan, line, i,
sum = group.timespan.sum,
ms = ' ~ ' + ( sum < 1 ? sum.toFixed( 2 ) : sum.toFixed( 0 ) ) + ' ms',
timeline = profile.createSvgElement( 'g' );
timeline.setAttribute( 'class', 'mw-debug-profile-timeline' );
// draw label
text = profile.createSvgElement( 'text' );
text.setAttribute( 'x', profile.xCoord( group.timespan.start ) );
text.setAttribute( 'y', 0 );
text.textContent = group.name;
timeline.appendChild( text );
// draw metadata
tspan = profile.createSvgElement( 'tspan' );
tspan.textContent = ms;
text.appendChild( tspan );
// draw timeline periods
for ( i = 0; i < group.periods.length; i++ ) {
timeline.appendChild( profile.buildPeriod( group.periods[i] ) );
}
// full-width line under each timeline
line = profile.createSvgElement( 'line' );
line.setAttribute( 'class', 'mw-debug-profile-underline' );
line.setAttribute( 'x1', 0 );
line.setAttribute( 'y1', 28 );
line.setAttribute( 'x2', profile.width );
line.setAttribute( 'y2', 28 );
timeline.appendChild( line );
return timeline;
},
/**
* @param Object period to transform into graphics
*/
buildPeriod: function ( period ) {
var node,
head = profile.xCoord( period.start ),
tail = profile.xCoord( period.end ),
g = profile.createSvgElement( 'g' );
g.setAttribute( 'class', 'mw-debug-profile-period' );
$( g ).data( 'period', period );
if ( head + 16 > tail ) {
node = profile.createSvgElement( 'rect' );
node.setAttribute( 'x', head );
node.setAttribute( 'y', 8 );
node.setAttribute( 'width', 2 );
node.setAttribute( 'height', 9 );
g.appendChild( node );
node = profile.createSvgElement( 'rect' );
node.setAttribute( 'x', head );
node.setAttribute( 'y', 8 );
node.setAttribute( 'width', ( period.end - period.start ) * profile.ratio || 2 );
node.setAttribute( 'height', 6 );
g.appendChild( node );
} else {
node = profile.createSvgElement( 'polygon' );
node.setAttribute( 'points', pointList( [
[ head, 8 ],
[ head, 19 ],
[ head + 8, 8 ],
[ head, 8]
] ) );
g.appendChild( node );
node = profile.createSvgElement( 'polygon' );
node.setAttribute( 'points', pointList( [
[ tail, 8 ],
[ tail, 19 ],
[ tail - 8, 8 ],
[ tail, 8 ]
] ) );
g.appendChild( node );
node = profile.createSvgElement( 'line' );
node.setAttribute( 'x1', head );
node.setAttribute( 'y1', 9 );
node.setAttribute( 'x2', tail );
node.setAttribute( 'y2', 9 );
g.appendChild( node );
}
return g;
},
/**
* @param Object
*/
buildFlyout: function ( period ) {
var contained, sum, ms, mem, i,
node = $( '<div>' );
for ( i = 0; i < period.contained.length; i++ ) {
contained = period.contained[i];
sum = contained.end - contained.start;
ms = '' + ( sum < 1 ? sum.toFixed( 2 ) : sum.toFixed( 0 ) ) + ' ms';
mem = formatBytes( contained.memory );
$( '<div>' ).text( contained.source.name )
.append( $( '<span>' ).text( ' ~ ' + ms + ' / ' + mem ).addClass( 'mw-debug-profile-meta' ) )
.appendTo( node );
}
return node;
},
/**
* Attach a hover flyout to all .mw-debug-profile-period groups.
*/
attachFlyout: function () {
// for some reason addClass and removeClass from jQuery
// arn't working on svg elements in chrome <= 33.0 (possibly more)
var $container = $( profile.container ),
addClass = function ( node, value ) {
var current = node.getAttribute( 'class' ),
list = current ? current.split( ' ' ) : false,
idx = list ? list.indexOf( value ) : -1;
if ( idx === -1 ) {
node.setAttribute( 'class', current ? ( current + ' ' + value ) : value );
}
},
removeClass = function ( node, value ) {
var current = node.getAttribute( 'class' ),
list = current ? current.split( ' ' ) : false,
idx = list ? list.indexOf( value ) : -1;
if ( idx !== -1 ) {
list.splice( idx, 1 );
node.setAttribute( 'class', list.join( ' ' ) );
}
},
// hide all tipsy flyouts
hide = function () {
$container.find( '.mw-debug-profile-period.tipsy-visible' )
.each( function () {
removeClass( this, 'tipsy-visible' );
$( this ).tipsy( 'hide' );
} );
};
$container.find( '.mw-debug-profile-period' ).tipsy( {
fade: true,
gravity: function () {
return $.fn.tipsy.autoNS.call( this ) + $.fn.tipsy.autoWE.call( this );
},
className: 'mw-debug-profile-tipsy',
center: false,
html: true,
trigger: 'manual',
title: function () {
return profile.buildFlyout( $( this ).data( 'period' ) ).html();
}
} ).on( 'mouseenter', function () {
hide();
addClass( this, 'tipsy-visible' );
$( this ).tipsy( 'show' );
} );
$container.on( 'mouseleave', function ( event ) {
var $from = $( event.relatedTarget ),
$to = $( event.target );
// only close the tipsy if we are not
if ( $from.closest( '.tipsy' ).length === 0 &&
$to.closest( '.tipsy' ).length === 0 &&
$to.get( 0 ).namespaceURI !== 'http://www.w4.org/2000/svg'
) {
hide();
}
} ).on( 'click', function () {
// convenience method for closing
hide();
} );
},
/**
* @return number the x co-ordinate for the specified timestamp
*/
xCoord: function ( msTimestamp ) {
return ( msTimestamp - profile.data.timespan.start ) * profile.ratio;
}
};
function ProfileData( data, width, mergeThresholdPx, dropThresholdPx ) {
// validate input data
this.data = data.map( function ( event ) {
event.periods = event.periods.filter( function ( period ) {
return period.start && period.end
&& period.start < period.end
// period start must be a reasonable ms timestamp
&& period.start > 1000000;
} );
return event;
} ).filter( function ( event ) {
return event.name && event.periods.length > 0;
} );
// start and end time of the data
this.timespan = this.data.reduce( function ( result, event ) {
return event.periods.reduce( periodMinMax, result );
}, periodMinMax.initial() );
// transform input data
this.groups = this.collate( width, mergeThresholdPx, dropThresholdPx );
return this;
}
/**
* There are too many unique events to display a line for each,
* so this does a basic grouping.
*/
ProfileData.groupOf = function ( label ) {
var pos, prefix = 'Profile section ended by close(): ';
if ( label.indexOf( prefix ) === 0 ) {
label = label.slice( prefix.length );
}
pos = [ '::', ':', '-' ].reduce( function ( result, separator ) {
var pos = label.indexOf( separator );
if ( pos === -1 ) {
return result;
} else if ( result === -1 ) {
return pos;
} else {
return Math.min( result, pos );
}
}, -1 );
if ( pos === -1 ) {
return label;
} else {
return label.slice( 0, pos );
}
};
/**
* @return Array list of objects with `name` and `events` keys
*/
ProfileData.groupEvents = function ( events ) {
var group, i,
groups = {};
// Group events together
for ( i = events.length - 1; i >= 0; i-- ) {
group = ProfileData.groupOf( events[i].name );
if ( groups[group] ) {
groups[group].push( events[i] );
} else {
groups[group] = [events[i]];
}
}
// Return an array of groups
return Object.keys( groups ).map( function ( group ) {
return {
name: group,
events: groups[group]
};
} );
};
ProfileData.periodSorter = function ( a, b ) {
if ( a.start === b.start ) {
return a.end - b.end;
}
return a.start - b.start;
};
ProfileData.genMergePeriodReducer = function ( mergeThresholdMs ) {
return function ( result, period ) {
if ( result.length === 0 ) {
// period is first result
return [{
start: period.start,
end: period.end,
contained: [period]
}];
}
var last = result[result.length - 1];
if ( period.end < last.end ) {
// end is contained within previous
result[result.length - 1].contained.push( period );
} else if ( period.start - mergeThresholdMs < last.end ) {
// neighbors within merging distance
result[result.length - 1].end = period.end;
result[result.length - 1].contained.push( period );
} else {
// period is next result
result.push( {
start: period.start,
end: period.end,
contained: [period]
} );
}
return result;
};
};
/**
* Collect all periods from the grouped events and apply merge and
* drop transformations
*/
ProfileData.extractPeriods = function ( events, mergeThresholdMs, dropThresholdMs ) {
// collect the periods from all events
return events.reduce( function ( result, event ) {
if ( !event.periods.length ) {
return result;
}
result.push.apply( result, event.periods.map( function ( period ) {
// maintain link from period to event
period.source = event;
return period;
} ) );
return result;
}, [] )
// sort combined periods
.sort( ProfileData.periodSorter )
// Apply merge threshold. Original periods
// are maintained in the `contained` property
.reduce( ProfileData.genMergePeriodReducer( mergeThresholdMs ), [] )
// Apply drop threshold
.filter( function ( period ) {
return period.end - period.start > dropThresholdMs;
} );
};
/**
* runs a callback on all periods in the group. Only valid after
* groups.periods[0..n].contained are populated. This runs against
* un-transformed data and is better suited to summing or other
* stat collection
*/
ProfileData.reducePeriods = function ( group, callback, result ) {
return group.periods.reduce( function ( result, period ) {
return period.contained.reduce( callback, result );
}, result );
};
/**
* Transforms this.data grouping by labels, merging neighboring
* events in the groups, and drops events and groups below the
* display threshold. Groups are returned sorted by starting time.
*/
ProfileData.prototype.collate = function ( width, mergeThresholdPx, dropThresholdPx ) {
// ms to pixel ratio
var ratio = ( this.timespan.end - this.timespan.start ) / width,
// transform thresholds to ms
mergeThresholdMs = mergeThresholdPx * ratio,
dropThresholdMs = dropThresholdPx * ratio;
return ProfileData.groupEvents( this.data )
// generate data about the grouped events
.map( function ( group ) {
// Cleaned periods from all events
group.periods = ProfileData.extractPeriods( group.events, mergeThresholdMs, dropThresholdMs );
// min and max timestamp per group
group.timespan = ProfileData.reducePeriods( group, periodMinMax, periodMinMax.initial() );
// ms from first call to end of last call
group.timespan.length = group.timespan.end - group.timespan.start;
// collect the un-transformed periods
group.timespan.sum = ProfileData.reducePeriods( group, function ( result, period ) {
result.push( period );
return result;
}, [] )
// sort by start time
.sort( ProfileData.periodSorter )
// merge overlapping
.reduce( ProfileData.genMergePeriodReducer( 0 ), [] )
// sum
.reduce( function ( result, period ) {
return result + period.end - period.start;
}, 0 );
return group;
}, this )
// remove groups that have had all their periods filtered
.filter( function ( group ) {
return group.periods.length > 0;
} )
// sort events by first start
.sort( function ( a, b ) {
return ProfileData.periodSorter( a.timespan, b.timespan );
} );
};
// reducer to find edges of period array
function periodMinMax( result, period ) {
if ( period.start < result.start ) {
result.start = period.start;
}
if ( period.end > result.end ) {
result.end = period.end;
}
return result;
}
periodMinMax.initial = function () {
return { start: Number.POSITIVE_INFINITY, end: Number.NEGATIVE_INFINITY };
};
function formatBytes( bytes ) {
var i, sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if ( bytes === 0 ) {
return '0 Bytes';
}
i = parseInt( Math.floor( Math.log( bytes ) / Math.log( 1024 ) ), 10 );
return Math.round( bytes / Math.pow( 1024, i ), 2 ) + ' ' + sizes[i];
}
// turns a 2d array into a point list for svg
// polygon points attribute
// ex: [[1,2],[3,4],[4,2]] = '1,2 3,4 4,2'
function pointList( pairs ) {
return pairs.map( function ( pair ) {
return pair.join( ',' );
} ).join( ' ' );
}
}( mediaWiki, jQuery ) );
Zerion Mini Shell 1.0