cleanup(tooling): move tooling to the browser platform and rename profile into instrumentation
BREAKING CHANGE Before import * as p from 'angular2/profile'; import * as t from 'angular2/tools'; After import * as p from 'angular2/instrumentation'; import * as t from 'angular2/platform/browser';
This commit is contained in:
vsavkin
Victor Savkin
@@ -1,19 +0,0 @@
|
||||
import {Type, isPresent, isBlank} from 'angular2/src/facade/lang';
|
||||
import {Predicate} from 'angular2/src/facade/collection';
|
||||
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
|
||||
import {DebugElement} from 'angular2/core';
|
||||
|
||||
export class By {
|
||||
static all(): Function { return (debugElement) => true; }
|
||||
|
||||
static css(selector: string): Predicate<DebugElement> {
|
||||
return (debugElement) => {
|
||||
return isPresent(debugElement.nativeElement) ?
|
||||
DOM.elementMatches(debugElement.nativeElement, selector) :
|
||||
false;
|
||||
};
|
||||
}
|
||||
static directive(type: Type): Predicate<DebugElement> {
|
||||
return (debugElement) => { return debugElement.hasDirective(type); };
|
||||
}
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
import {CONST_EXPR, isPresent, NumberWrapper, StringWrapper} from 'angular2/src/facade/lang';
|
||||
import {MapWrapper, Map, ListWrapper} from 'angular2/src/facade/collection';
|
||||
import {Injectable, provide, Provider} from 'angular2/src/core/di';
|
||||
import {AppViewListener} from 'angular2/src/core/linker/view_listener';
|
||||
import {AppView} from 'angular2/src/core/linker/view';
|
||||
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
|
||||
import {Renderer} from 'angular2/src/core/render/api';
|
||||
import {DebugElement, DebugElement_} from 'angular2/src/core/debug/debug_element';
|
||||
|
||||
const NG_ID_PROPERTY = 'ngid';
|
||||
const INSPECT_GLOBAL_NAME = 'ng.probe';
|
||||
|
||||
const NG_ID_SEPARATOR = '#';
|
||||
|
||||
// Need to keep the views in a global Map so that multiple angular apps are supported
|
||||
var _allIdsByView = new Map<AppView, number>();
|
||||
var _allViewsById = new Map<number, AppView>();
|
||||
|
||||
var _nextId = 0;
|
||||
|
||||
function _setElementId(element, indices: number[]) {
|
||||
if (isPresent(element)) {
|
||||
DOM.setData(element, NG_ID_PROPERTY, indices.join(NG_ID_SEPARATOR));
|
||||
}
|
||||
}
|
||||
|
||||
function _getElementId(element): number[] {
|
||||
var elId = DOM.getData(element, NG_ID_PROPERTY);
|
||||
if (isPresent(elId)) {
|
||||
return elId.split(NG_ID_SEPARATOR).map(partStr => NumberWrapper.parseInt(partStr, 10));
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export function inspectNativeElement(element): DebugElement {
|
||||
var elId = _getElementId(element);
|
||||
if (isPresent(elId)) {
|
||||
var view = _allViewsById.get(elId[0]);
|
||||
if (isPresent(view)) {
|
||||
return new DebugElement_(view, elId[1]);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
export class DebugElementViewListener implements AppViewListener {
|
||||
constructor(private _renderer: Renderer) {
|
||||
DOM.setGlobalVar(INSPECT_GLOBAL_NAME, inspectNativeElement);
|
||||
}
|
||||
|
||||
onViewCreated(view: AppView) {
|
||||
var viewId = _nextId++;
|
||||
_allViewsById.set(viewId, view);
|
||||
_allIdsByView.set(view, viewId);
|
||||
for (var i = 0; i < view.elementRefs.length; i++) {
|
||||
var el = view.elementRefs[i];
|
||||
_setElementId(this._renderer.getNativeElementSync(el), [viewId, i]);
|
||||
}
|
||||
}
|
||||
|
||||
onViewDestroyed(view: AppView) {
|
||||
var viewId = _allIdsByView.get(view);
|
||||
_allIdsByView.delete(view);
|
||||
_allViewsById.delete(viewId);
|
||||
}
|
||||
}
|
||||
|
||||
export const ELEMENT_PROBE_PROVIDERS: any[] = CONST_EXPR([
|
||||
DebugElementViewListener,
|
||||
CONST_EXPR(new Provider(AppViewListener, {useExisting: DebugElementViewListener})),
|
||||
]);
|
||||
|
||||
export const ELEMENT_PROBE_BINDINGS = ELEMENT_PROBE_PROVIDERS;
|
||||
@@ -0,0 +1,70 @@
|
||||
import {ApplicationRef} from 'angular2/src/core/application_ref';
|
||||
import {ComponentRef, ComponentRef_} from 'angular2/src/core/linker/dynamic_component_loader';
|
||||
import {isPresent, NumberWrapper} from 'angular2/src/facade/lang';
|
||||
import {performance, window} from 'angular2/src/facade/browser';
|
||||
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
|
||||
|
||||
/**
|
||||
* Entry point for all Angular debug tools. This object corresponds to the `ng`
|
||||
* global variable accessible in the dev console.
|
||||
*/
|
||||
export class AngularTools {
|
||||
profiler: AngularProfiler;
|
||||
|
||||
constructor(ref: ComponentRef) { this.profiler = new AngularProfiler(ref); }
|
||||
}
|
||||
|
||||
/**
|
||||
* Entry point for all Angular profiling-related debug tools. This object
|
||||
* corresponds to the `ng.profiler` in the dev console.
|
||||
*/
|
||||
export class AngularProfiler {
|
||||
appRef: ApplicationRef;
|
||||
|
||||
constructor(ref: ComponentRef) {
|
||||
this.appRef = (<ComponentRef_>ref).injector.get(ApplicationRef);
|
||||
}
|
||||
|
||||
/**
|
||||
* Exercises change detection in a loop and then prints the average amount of
|
||||
* time in milliseconds how long a single round of change detection takes for
|
||||
* the current state of the UI. It runs a minimum of 5 rounds for a minimum
|
||||
* of 500 milliseconds.
|
||||
*
|
||||
* Optionally, a user may pass a `config` parameter containing a map of
|
||||
* options. Supported options are:
|
||||
*
|
||||
* `record` (boolean) - causes the profiler to record a CPU profile while
|
||||
* it exercises the change detector. Example:
|
||||
*
|
||||
* ```
|
||||
* ng.profiler.timeChangeDetection({record: true})
|
||||
* ```
|
||||
*/
|
||||
timeChangeDetection(config: any) {
|
||||
var record = isPresent(config) && config['record'];
|
||||
var profileName = 'Change Detection';
|
||||
// Profiler is not available in Android browsers, nor in IE 9 without dev tools opened
|
||||
var isProfilerAvailable = isPresent(window.console.profile);
|
||||
if (record && isProfilerAvailable) {
|
||||
window.console.profile(profileName);
|
||||
}
|
||||
var start = DOM.performanceNow();
|
||||
var numTicks = 0;
|
||||
while (numTicks < 5 || (DOM.performanceNow() - start) < 500) {
|
||||
this.appRef.tick();
|
||||
numTicks++;
|
||||
}
|
||||
var end = DOM.performanceNow();
|
||||
if (record && isProfilerAvailable) {
|
||||
// need to cast to <any> because type checker thinks there's no argument
|
||||
// while in fact there is:
|
||||
//
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Console/profileEnd
|
||||
(<any>window.console.profileEnd)(profileName);
|
||||
}
|
||||
var msPerTick = (end - start) / numTicks;
|
||||
window.console.log(`ran ${numTicks} change detection cycles`);
|
||||
window.console.log(`${NumberWrapper.toFixed(msPerTick, 2)} ms per check`);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
library angular2.src.tools.tools;
|
||||
|
||||
import 'dart:js';
|
||||
import 'package:angular2/src/core/linker/dynamic_component_loader.dart'
|
||||
show ComponentRef;
|
||||
import 'common_tools.dart' show AngularTools;
|
||||
|
||||
/**
|
||||
* Enabled Angular 2 debug tools that are accessible via your browser's
|
||||
* developer console.
|
||||
*
|
||||
* Usage:
|
||||
*
|
||||
* 1. Open developer console (e.g. in Chrome Ctrl + Shift + j)
|
||||
* 1. Type `ng.` (usually the console will show auto-complete suggestion)
|
||||
* 1. Try the change detection profiler `ng.profiler.timeChangeDetection()`
|
||||
* then hit Enter.
|
||||
*/
|
||||
void enableDebugTools(ComponentRef ref) {
|
||||
final tools = new AngularTools(ref);
|
||||
context['ng'] = new JsObject.jsify({
|
||||
'profiler': {
|
||||
'timeChangeDetection': ([config]) {
|
||||
tools.profiler.timeChangeDetection(config);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Disables Angular 2 tools.
|
||||
*/
|
||||
void disableDebugTools() {
|
||||
context.deleteProperty('ng');
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import {global} from 'angular2/src/facade/lang';
|
||||
import {ComponentRef} from 'angular2/src/core/linker/dynamic_component_loader';
|
||||
import {AngularTools} from './common_tools';
|
||||
|
||||
var context = <any>global;
|
||||
|
||||
/**
|
||||
* Enabled Angular 2 debug tools that are accessible via your browser's
|
||||
* developer console.
|
||||
*
|
||||
* Usage:
|
||||
*
|
||||
* 1. Open developer console (e.g. in Chrome Ctrl + Shift + j)
|
||||
* 1. Type `ng.` (usually the console will show auto-complete suggestion)
|
||||
* 1. Try the change detection profiler `ng.profiler.timeChangeDetection()`
|
||||
* then hit Enter.
|
||||
*/
|
||||
export function enableDebugTools(ref: ComponentRef): void {
|
||||
context.ng = new AngularTools(ref);
|
||||
}
|
||||
|
||||
/**
|
||||
* Disables Angular 2 tools.
|
||||
*/
|
||||
export function disableDebugTools(): void {
|
||||
context.ng = undefined;
|
||||
}
|
||||
Reference in New Issue
Block a user