[ui] Fix eslint issues (`ui/eslint-all --fix`)
Change-Id: Idaa87c4d126af606d45c326d1a7d73341a0557c1
diff --git a/ui/src/base/array_utils.ts b/ui/src/base/array_utils.ts
index 785210a..2f525ea 100644
--- a/ui/src/base/array_utils.ts
+++ b/ui/src/base/array_utils.ts
@@ -42,6 +42,6 @@
}
export function isArrayOf<P, Q>(
- predicate: (x: P|Q) => x is P, xs: (P|Q)[]): xs is P[] {
+ predicate: (x: P|Q) => x is P, xs: (P|Q)[]): xs is P[] {
return xs.every(predicate);
}
diff --git a/ui/src/base/bigint_math_unittest.ts b/ui/src/base/bigint_math_unittest.ts
index 2aa6b19..efe7d79 100644
--- a/ui/src/base/bigint_math_unittest.ts
+++ b/ui/src/base/bigint_math_unittest.ts
@@ -201,7 +201,7 @@
it('should throw when presented with a negative integer', () => {
expect(() => BIM.popcount(-1n))
- .toThrowError('Can\'t get popcount of negative number -1');
+ .toThrowError('Can\'t get popcount of negative number -1');
});
});
@@ -212,13 +212,13 @@
expect(BIM.ratio(1n, 2n)).toBeCloseTo(0.5);
expect(BIM.ratio(1n, 100n)).toBeCloseTo(0.01);
expect(
- BIM.ratio(
- 987654321098765432109876543210n, 123456789012345678901234567890n))
- .toBeCloseTo(8);
+ BIM.ratio(
+ 987654321098765432109876543210n, 123456789012345678901234567890n))
+ .toBeCloseTo(8);
expect(
- BIM.ratio(
- 123456789012345678901234567890n, 987654321098765432109876543210n))
- .toBeCloseTo(0.125, 3);
+ BIM.ratio(
+ 123456789012345678901234567890n, 987654321098765432109876543210n))
+ .toBeCloseTo(0.125, 3);
});
});
diff --git a/ui/src/base/binary_search.ts b/ui/src/base/binary_search.ts
index 2b78627..90a4cd1 100644
--- a/ui/src/base/binary_search.ts
+++ b/ui/src/base/binary_search.ts
@@ -16,7 +16,7 @@
type Range = [number, number];
function searchImpl<T extends Numeric>(
- haystack: ArrayLike<T>, needle: T, i: number, j: number): number {
+ haystack: ArrayLike<T>, needle: T, i: number, j: number): number {
if (i === j) return -1;
if (i + 1 === j) {
return (needle >= haystack[i]) ? i : -1;
@@ -32,7 +32,7 @@
}
function searchRangeImpl<T extends Numeric>(
- haystack: ArrayLike<T>, needle: T, i: number, j: number): Range {
+ haystack: ArrayLike<T>, needle: T, i: number, j: number): Range {
if (i === j) return [i, j];
if (i + 1 === j) {
if (haystack[i] <= needle) {
@@ -60,14 +60,14 @@
// index of the last element of |haystack| which is less than or equal to
// |needle|, or -1 if all elements of |haystack| are greater than |needle|.
export function search<T extends Numeric>(
- haystack: ArrayLike<T>, needle: T): number {
+ haystack: ArrayLike<T>, needle: T): number {
return searchImpl(haystack, needle, 0, haystack.length);
}
// Given a sorted array of numeric values (|haystack|) return the half open
// range [i, j) of indices where |haystack| is equal to needle.
export function searchEq<T extends Numeric>(
- haystack: ArrayLike<T>, needle: T, optRange?: Range): Range {
+ haystack: ArrayLike<T>, needle: T, optRange?: Range): Range {
const range = searchRange(haystack, needle, optRange);
const [i, j] = range;
if (haystack[i] === needle) return range;
@@ -77,7 +77,7 @@
// Given a sorted array of numeric values (|haystack|) and a |needle| return the
// smallest half open range [i, j) of indexes which contains |needle|.
export function searchRange<T extends Numeric>(
- haystack: ArrayLike<T>, needle: T, optRange?: Range): Range {
+ haystack: ArrayLike<T>, needle: T, optRange?: Range): Range {
const [left, right] = optRange ? optRange : [0, haystack.length];
return searchRangeImpl(haystack, needle, left, right);
}
@@ -92,7 +92,7 @@
// So we try to get the indexes of the two data points around needle
// or -1 if there is no such datapoint.
export function searchSegment<T extends Numeric>(
- haystack: ArrayLike<T>, needle: T): Range {
+ haystack: ArrayLike<T>, needle: T): Range {
if (!haystack.length) return [-1, -1];
const left = search(haystack, needle);
diff --git a/ui/src/base/classnames_unittest.ts b/ui/src/base/classnames_unittest.ts
index 29546db..9043820 100644
--- a/ui/src/base/classnames_unittest.ts
+++ b/ui/src/base/classnames_unittest.ts
@@ -28,19 +28,19 @@
const bar = false;
const baz = true;
expect(classNames(
- foo && 'foo',
- bar && 'bar',
- baz && 'baz',
- ))
- .toEqual('foo baz');
+ foo && 'foo',
+ bar && 'bar',
+ baz && 'baz',
+ ))
+ .toEqual('foo baz');
});
test('example usecase with possibly undefined classnames', () => {
let fooClass: string|undefined;
const barClass = 'bar';
expect(classNames(
- fooClass,
- barClass,
- ))
- .toEqual('bar');
+ fooClass,
+ barClass,
+ ))
+ .toEqual('bar');
});
diff --git a/ui/src/base/comparison_utils.ts b/ui/src/base/comparison_utils.ts
index 4d84a4d..979dbd0 100644
--- a/ui/src/base/comparison_utils.ts
+++ b/ui/src/base/comparison_utils.ts
@@ -21,15 +21,15 @@
// Having a comparison function of type S and a getter that returns value of
// type S from value of type T, values of type T can be compared.
export function comparingBy<T, S>(
- getter: (t: T) => S, comparison: ComparisonFn<S>): ComparisonFn<T> {
+ getter: (t: T) => S, comparison: ComparisonFn<S>): ComparisonFn<T> {
return (x, y) => {
return comparison(getter(x), getter(y));
};
}
export function withDirection<T>(
- comparison: ComparisonFn<T>,
- sortDirection?: SortDirection): ComparisonFn<T> {
+ comparison: ComparisonFn<T>,
+ sortDirection?: SortDirection): ComparisonFn<T> {
if (sortDirection !== 'DESC') {
return comparison;
}
diff --git a/ui/src/base/hotkeys.ts b/ui/src/base/hotkeys.ts
index 00962f1..80ba01a 100644
--- a/ui/src/base/hotkeys.ts
+++ b/ui/src/base/hotkeys.ts
@@ -94,7 +94,7 @@
// Check whether |hotkey| is present in the keyboard event |event|.
export function checkHotkey(
- hotkey: Hotkey, event: KeyboardEventLike, spoofPlatform?: Platform):
+ hotkey: Hotkey, event: KeyboardEventLike, spoofPlatform?: Platform):
boolean {
const result = parseHotkey(hotkey);
if (!result) {
@@ -118,7 +118,7 @@
// Return true if modifiers specified in |mods| match those in the event.
function checkMods(
- event: KeyboardEventLike, hotkey: HotkeyParts, spoofPlatform?: Platform):
+ event: KeyboardEventLike, hotkey: HotkeyParts, spoofPlatform?: Platform):
boolean {
const platform = spoofPlatform ?? getPlatform();
@@ -134,8 +134,8 @@
const wantShift = modifier.includes('Shift');
const wantAlt = modifier.includes('Alt');
const wantCtrl = platform === 'Mac' ?
- modifier.includes('Ctrl') :
- (modifier.includes('Ctrl') || modifier.includes('Mod'));
+ modifier.includes('Ctrl') :
+ (modifier.includes('Ctrl') || modifier.includes('Mod'));
const wantMeta = platform === 'Mac' && modifier.includes('Mod');
// For certain keys we relax the shift requirement, as they usually cannot be
diff --git a/ui/src/base/hotkeys_unittest.ts b/ui/src/base/hotkeys_unittest.ts
index 3ab60ca..2e1e259 100644
--- a/ui/src/base/hotkeys_unittest.ts
+++ b/ui/src/base/hotkeys_unittest.ts
@@ -16,15 +16,15 @@
test('parseHotkey', () => {
expect(parseHotkey('A'))
- .toEqual({key: 'A', allowInEditable: false, modifier: ''});
+ .toEqual({key: 'A', allowInEditable: false, modifier: ''});
expect(parseHotkey('!A'))
- .toEqual({key: 'A', allowInEditable: true, modifier: ''});
+ .toEqual({key: 'A', allowInEditable: true, modifier: ''});
expect(parseHotkey('Shift+A'))
- .toEqual({key: 'A', allowInEditable: false, modifier: 'Shift+'});
+ .toEqual({key: 'A', allowInEditable: false, modifier: 'Shift+'});
expect(parseHotkey('Mod+Shift+A'))
- .toEqual({key: 'A', allowInEditable: false, modifier: 'Mod+Shift+'});
+ .toEqual({key: 'A', allowInEditable: false, modifier: 'Mod+Shift+'});
expect(parseHotkey('!Mod+Shift+A'))
- .toEqual({key: 'A', allowInEditable: true, modifier: 'Mod+Shift+'});
+ .toEqual({key: 'A', allowInEditable: true, modifier: 'Mod+Shift+'});
});
describe('checkHotkey', () => {
diff --git a/ui/src/base/http_utils.ts b/ui/src/base/http_utils.ts
index d036751..8e7061f 100644
--- a/ui/src/base/http_utils.ts
+++ b/ui/src/base/http_utils.ts
@@ -13,15 +13,15 @@
// limitations under the License.
export function fetchWithTimeout(
- input: RequestInfo, init: RequestInit, timeoutMs: number) {
+ input: RequestInfo, init: RequestInit, timeoutMs: number) {
return new Promise<Response>((resolve, reject) => {
const timer = setTimeout(
- () => reject(
- new Error(`fetch(${input}) timed out after ${timeoutMs} ms`)),
- timeoutMs);
+ () => reject(
+ new Error(`fetch(${input}) timed out after ${timeoutMs} ms`)),
+ timeoutMs);
fetch(input, init)
- .then((response) => resolve(response))
- .catch((err) => reject(err))
- .finally(() => clearTimeout(timer));
+ .then((response) => resolve(response))
+ .catch((err) => reject(err))
+ .finally(() => clearTimeout(timer));
});
}
diff --git a/ui/src/base/json_utils.ts b/ui/src/base/json_utils.ts
index 3b6e057..0bf75df 100644
--- a/ui/src/base/json_utils.ts
+++ b/ui/src/base/json_utils.ts
@@ -19,6 +19,6 @@
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function stringifyJsonWithBigints(object: any): string {
return JSON.stringify(
- object,
- (_, value) => typeof value === 'bigint' ? value.toString() : value);
+ object,
+ (_, value) => typeof value === 'bigint' ? value.toString() : value);
}
diff --git a/ui/src/base/mithril_utils.ts b/ui/src/base/mithril_utils.ts
index 7458026..be546bf 100644
--- a/ui/src/base/mithril_utils.ts
+++ b/ui/src/base/mithril_utils.ts
@@ -42,11 +42,11 @@
export const Gate = {
view({attrs, children}: m.VnodeDOM<GateAttrs>) {
return m(
- '',
- {
- style: {display: attrs.open ? 'contents' : 'none'},
- },
- m(Passthrough, {onbeforeupdate: () => attrs.open}, children),
+ '',
+ {
+ style: {display: attrs.open ? 'contents' : 'none'},
+ },
+ m(Passthrough, {onbeforeupdate: () => attrs.open}, children),
);
},
};
diff --git a/ui/src/base/object_utils.ts b/ui/src/base/object_utils.ts
index 6fd9c52..8a67d6b 100644
--- a/ui/src/base/object_utils.ts
+++ b/ui/src/base/object_utils.ts
@@ -113,6 +113,6 @@
// Given a string enum |enum|, check that |value| is a valid member of |enum|.
export function isEnumValue<T extends {}>(
- enm: T, value: unknown): value is T[keyof T] {
+ enm: T, value: unknown): value is T[keyof T] {
return Object.values(enm).includes(value);
}
diff --git a/ui/src/base/string_utils.ts b/ui/src/base/string_utils.ts
index f2e7379..8dcde44 100644
--- a/ui/src/base/string_utils.ts
+++ b/ui/src/base/string_utils.ts
@@ -36,7 +36,7 @@
if (typeof process === 'undefined') {
// Silence the warning when we know we are running under NodeJS.
console.warn(
- 'Using fallback UTF8 Encoder/Decoder, This should happen only in ' +
+ 'Using fallback UTF8 Encoder/Decoder, This should happen only in ' +
'tests and NodeJS-based environments, not in browsers.');
}
Utf8Decoder = {decode: (buf: Uint8Array) => utf8Read(buf, 0, buf.length)};
@@ -66,7 +66,7 @@
// encode binary array to hex string
export function hexEncode(bytes: Uint8Array): string {
return bytes.reduce(
- (prev, cur) => prev + ('0' + cur.toString(16)).slice(-2), '');
+ (prev, cur) => prev + ('0' + cur.toString(16)).slice(-2), '');
}
export function utf8Encode(str: string): Uint8Array {
diff --git a/ui/src/base/time.ts b/ui/src/base/time.ts
index 9d965b0..cc32288 100644
--- a/ui/src/base/time.ts
+++ b/ui/src/base/time.ts
@@ -109,10 +109,10 @@
static getLatestMidnight(time: time, offset: duration): time {
const date = Time.toDate(time, offset);
const floorDay = new Date(Date.UTC(
- date.getUTCFullYear(),
- date.getUTCMonth(),
- date.getUTCDate(),
- ));
+ date.getUTCFullYear(),
+ date.getUTCMonth(),
+ date.getUTCDate(),
+ ));
return Time.fromDate(floorDay, offset);
}
@@ -306,7 +306,7 @@
export function currentDateHourAndMinute(): string {
const date = new Date();
return `${date.toISOString().substr(0, 10)}-${date.getHours()}-${
- date.getMinutes()}`;
+ date.getMinutes()}`;
}
// Create a Time value from an arbitrary SQL value.
@@ -334,8 +334,8 @@
constructor(start: time, end: time) {
assertTrue(
- start <= end,
- `Span start [${start}] cannot be greater than end [${end}]`);
+ start <= end,
+ `Span start [${start}] cannot be greater than end [${end}]`);
this.start = start;
this.end = end;
}
@@ -378,7 +378,7 @@
pad(padding: duration): Span<time, duration> {
return new TimeSpan(
- Time.sub(this.start, padding), Time.add(this.end, padding));
+ Time.sub(this.start, padding), Time.add(this.end, padding));
}
}
diff --git a/ui/src/base/time_unittest.ts b/ui/src/base/time_unittest.ts
index 2219780..f3bce9b 100644
--- a/ui/src/base/time_unittest.ts
+++ b/ui/src/base/time_unittest.ts
@@ -69,19 +69,19 @@
test('timecode', () => {
expect(new Timecode(Time.fromRaw(0n)).toString(' '))
- .toEqual('00:00:00.000 000 000');
+ .toEqual('00:00:00.000 000 000');
expect(new Timecode(Time.fromRaw(123n)).toString(' '))
- .toEqual('00:00:00.000 000 123');
+ .toEqual('00:00:00.000 000 123');
expect(new Timecode(Time.fromRaw(60_000_000_000n)).toString(' '))
- .toEqual('00:01:00.000 000 000');
+ .toEqual('00:01:00.000 000 000');
expect(new Timecode(Time.fromRaw(12_345_678_910n)).toString(' '))
- .toEqual('00:00:12.345 678 910');
+ .toEqual('00:00:12.345 678 910');
expect(new Timecode(Time.fromRaw(86_400_000_000_000n)).toString(' '))
- .toEqual('1d00:00:00.000 000 000');
+ .toEqual('1d00:00:00.000 000 000');
expect(new Timecode(Time.fromRaw(31_536_000_000_000_000n)).toString(' '))
- .toEqual('365d00:00:00.000 000 000');
+ .toEqual('365d00:00:00.000 000 000');
expect(new Timecode(Time.fromRaw(-123n)).toString(' '))
- .toEqual('-00:00:00.000 000 123');
+ .toEqual('-00:00:00.000 000 123');
});
function mkSpan(start: bigint, end: bigint) {
diff --git a/ui/src/base/validators.ts b/ui/src/base/validators.ts
index 8125a2d..076c07f 100644
--- a/ui/src/base/validators.ts
+++ b/ui/src/base/validators.ts
@@ -247,7 +247,7 @@
// Wrapper for running a validator initializing the context.
export function runValidator<T>(
- validator: Validator<T>, input: unknown): ValidationResult<T> {
+ validator: Validator<T>, input: unknown): ValidationResult<T> {
const context: ValidatorContext = {
path: [],
invalidKeys: [],
@@ -288,12 +288,12 @@
export function record<T extends Record<string, Validator<unknown>>>(
- validators: T): RecordValidator<T> {
+ validators: T): RecordValidator<T> {
return new RecordValidator<T>(validators);
}
export function oneOf<T>(
- values: readonly T[], defaultValue: T): OneOfValidator<T> {
+ values: readonly T[], defaultValue: T): OneOfValidator<T> {
return new OneOfValidator<T>(values, defaultValue);
}
diff --git a/ui/src/base/validators_unittest.ts b/ui/src/base/validators_unittest.ts
index fc0fe51..66e7f87 100644
--- a/ui/src/base/validators_unittest.ts
+++ b/ui/src/base/validators_unittest.ts
@@ -65,9 +65,9 @@
test('validator uses provided values', () => {
const p: Point =
runValidator(
- point,
- {id: 'test', x: 100, y: 200, color: 'GREEN', properties: {mass: 20}})
- .result;
+ point,
+ {id: 'test', x: 100, y: 200, color: 'GREEN', properties: {mass: 20}})
+ .result;
expect(p.color).toEqual('GREEN');
expect(p.x).toEqual(100);
diff --git a/ui/src/chrome_extension/chrome_tracing_controller.ts b/ui/src/chrome_extension/chrome_tracing_controller.ts
index 2410ddb..dc62366 100644
--- a/ui/src/chrome_extension/chrome_tracing_controller.ts
+++ b/ui/src/chrome_extension/chrome_tracing_controller.ts
@@ -46,13 +46,13 @@
constructor(port: chrome.runtime.Port) {
super({
onConsumerPortResponse: (message: ConsumerPortResponse) =>
- this.uiPort.postMessage(message),
+ this.uiPort.postMessage(message),
onError: (error: string) =>
- this.uiPort.postMessage({type: 'ChromeExtensionError', error}),
+ this.uiPort.postMessage({type: 'ChromeExtensionError', error}),
onStatus: (status) =>
- this.uiPort.postMessage({type: 'ChromeExtensionStatus', status}),
+ this.uiPort.postMessage({type: 'ChromeExtensionStatus', status}),
});
this.uiPort = port;
this.devtoolsSocket = new DevToolsSocket();
@@ -68,28 +68,28 @@
handleCommand(methodName: string, requestData: Uint8Array) {
switch (methodName) {
- case 'EnableTracing':
- this.enableTracing(requestData);
- break;
- case 'FreeBuffers':
- this.freeBuffers();
- break;
- case 'ReadBuffers':
- this.readBuffers();
- break;
- case 'DisableTracing':
- this.disableTracing();
- break;
- case 'GetTraceStats':
- this.getTraceStats();
- break;
- case 'GetCategories':
- this.getCategories();
- break;
- default:
- this.sendErrorMessage('Action not recognized');
- console.log('Received not recognized message: ', methodName);
- break;
+ case 'EnableTracing':
+ this.enableTracing(requestData);
+ break;
+ case 'FreeBuffers':
+ this.freeBuffers();
+ break;
+ case 'ReadBuffers':
+ this.readBuffers();
+ break;
+ case 'DisableTracing':
+ this.disableTracing();
+ break;
+ case 'GetTraceStats':
+ this.getTraceStats();
+ break;
+ case 'GetCategories':
+ this.getCategories();
+ break;
+ default:
+ this.sendErrorMessage('Action not recognized');
+ console.log('Received not recognized message: ', methodName);
+ break;
}
}
@@ -106,10 +106,10 @@
toCamelCase(key: string, separator: string): string {
return key.split(separator)
- .map((part, index) => {
- return (index === 0) ? part : part[0].toUpperCase() + part.slice(1);
- })
- .join('');
+ .map((part, index) => {
+ return (index === 0) ? part : part[0].toUpperCase() + part.slice(1);
+ })
+ .join('');
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -167,7 +167,7 @@
}
const res = await this.api.IO.read(
- {handle: this.streamHandle, offset, size: CHUNK_SIZE});
+ {handle: this.streamHandle, offset, size: CHUNK_SIZE});
if (res === undefined) return;
const chunk = res.base64Encoded ? atob(res.data) : res.data;
@@ -226,7 +226,7 @@
this.devtoolsSocket.attachToBrowser(async (error?: string) => {
if (error) {
this.sendErrorMessage(
- `Could not attach to DevTools browser target ` +
+ `Could not attach to DevTools browser target ` +
`(req. Chrome >= M81): ${error}`);
return;
}
@@ -253,7 +253,7 @@
this.devtoolsSocket.attachToBrowser(async (error?: string) => {
if (error) {
this.sendErrorMessage(
- `Could not attach to DevTools browser target ` +
+ `Could not attach to DevTools browser target ` +
`(req. Chrome >= M81): ${error}`);
return;
}
@@ -269,26 +269,26 @@
if (browserSupportsPerfettoConfig()) {
const configEncoded = base64Encode(traceConfigProto);
await this.api.Tracing.start(
- {perfettoConfig: configEncoded, ...requestParams});
+ {perfettoConfig: configEncoded, ...requestParams});
this.tracingSessionOngoing = true;
const tracingSessionId = ++this.tracingSessionId;
setTimeout(
- () => this.endTracing(tracingSessionId), traceConfig.durationMs);
+ () => this.endTracing(tracingSessionId), traceConfig.durationMs);
} else {
console.log(
- 'Used Chrome version is too old to support ' +
+ 'Used Chrome version is too old to support ' +
'perfettoConfig parameter. Using chrome config only instead.');
if (hasSystemDataSourceConfig(traceConfig)) {
this.sendErrorMessage(
- 'System tracing is not supported by this Chrome version. Choose' +
+ 'System tracing is not supported by this Chrome version. Choose' +
' the \'Chrome\' target instead to record a Chrome-only trace.');
return;
}
const chromeConfig = this.extractChromeConfig(traceConfig);
await this.api.Tracing.start(
- {traceConfig: chromeConfig, ...requestParams});
+ {traceConfig: chromeConfig, ...requestParams});
}
});
}
diff --git a/ui/src/chrome_extension/devtools_socket.ts b/ui/src/chrome_extension/devtools_socket.ts
index d3383b2..2736f3a 100644
--- a/ui/src/chrome_extension/devtools_socket.ts
+++ b/ui/src/chrome_extension/devtools_socket.ts
@@ -38,11 +38,11 @@
const msg: JsonRpc2.Request = JSON.parse(message);
chrome.debugger.sendCommand(
- this.target, msg.method, msg.params, (result) => {
- if (result === undefined) result = {};
- const response: JsonRpc2.Response = {id: msg.id, result};
- this.messageCallback(JSON.stringify(response));
- });
+ this.target, msg.method, msg.params, (result) => {
+ if (result === undefined) result = {};
+ const response: JsonRpc2.Response = {id: msg.id, result};
+ this.messageCallback(JSON.stringify(response));
+ });
}
// This method will be called once for each event soon after the creation of
@@ -70,7 +70,7 @@
}
private attachToTarget(
- target: chrome.debugger.Debuggee, then: (error?: string) => void) {
+ target: chrome.debugger.Debuggee, then: (error?: string) => void) {
chrome.debugger.attach(target, /* requiredVersion=*/ '1.3', () => {
if (chrome.runtime.lastError) {
then(chrome.runtime.lastError.message);
diff --git a/ui/src/chrome_extension/index.ts b/ui/src/chrome_extension/index.ts
index b9cbc8f..0a7d554 100644
--- a/ui/src/chrome_extension/index.ts
+++ b/ui/src/chrome_extension/index.ts
@@ -29,7 +29,7 @@
}
function onUIMessage(
- message: {method: string, requestData: string}, port: chrome.runtime.Port) {
+ message: {method: string, requestData: string}, port: chrome.runtime.Port) {
if (message.method === 'ExtensionVersion') {
port.postMessage({version: chrome.runtime.getManifest().version});
return;
@@ -39,8 +39,8 @@
// ChromeExtensionConsumerPort sends the request data as string because
// chrome.runtime.port doesn't support ArrayBuffers.
const requestDataArray: Uint8Array = message.requestData ?
- binaryDecode(message.requestData) :
- new Uint8Array();
+ binaryDecode(message.requestData) :
+ new Uint8Array();
chromeTraceController.handleCommand(message.method, requestDataArray);
}
diff --git a/ui/src/common/actions.ts b/ui/src/common/actions.ts
index bd2d4fd..1cc722a 100644
--- a/ui/src/common/actions.ts
+++ b/ui/src/common/actions.ts
@@ -205,12 +205,12 @@
},
fillUiTrackIdByTraceTrackId(
- state: StateDraft, trackState: TrackState, trackKey: string) {
+ state: StateDraft, trackState: TrackState, trackKey: string) {
const setTrackKey = (trackId: number, trackKey: string) => {
if (state.trackKeyByTrackId[trackId] !== undefined &&
state.trackKeyByTrackId[trackId] !== trackKey) {
throw new Error(`Trying to map track id ${trackId} to UI track ${
- trackKey}, already mapped to ${state.trackKeyByTrackId[trackId]}`);
+ trackKey}, already mapped to ${state.trackKeyByTrackId[trackId]}`);
}
state.trackKeyByTrackId[trackId] = trackKey;
};
@@ -268,7 +268,7 @@
},
setUtidToTrackSortKey(
- state: StateDraft, args: {threadOrderingMetadata: UtidToTrackSortKey}) {
+ state: StateDraft, args: {threadOrderingMetadata: UtidToTrackSortKey}) {
state.utidToThreadSortKey = args.threadOrderingMetadata;
},
@@ -277,10 +277,10 @@
},
addTrackGroup(
- state: StateDraft,
- // Define ID in action so a track group can be referred to without running
- // the reducer.
- args: {
+ state: StateDraft,
+ // Define ID in action so a track group can be referred to without running
+ // the reducer.
+ args: {
name: string; id: string; summaryTrackKey: string; collapsed: boolean;
fixedOrdering?: boolean;
}): void {
@@ -317,9 +317,9 @@
return [
/* eslint-disable @typescript-eslint/strict-boolean-expressions */
threadSortKey ? threadSortKey.sortKey :
- PrimaryTrackSortKey.ORDINARY_THREAD,
+ PrimaryTrackSortKey.ORDINARY_THREAD,
threadSortKey && threadSortKey.tid !== undefined ? threadSortKey.tid :
- Number.MAX_VALUE,
+ Number.MAX_VALUE,
/* eslint-enable */
threadTrackSortKey.utid,
threadTrackSortKey.priority,
@@ -347,7 +347,7 @@
},
updateAggregateSorting(
- state: StateDraft, args: {id: string, column: string}) {
+ state: StateDraft, args: {id: string, column: string}) {
let prefs = state.aggregatePreferences[args.id];
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
if (!prefs) {
@@ -374,8 +374,8 @@
},
moveTrack(
- state: StateDraft,
- args: {srcId: string; op: 'before' | 'after', dstId: string}): void {
+ state: StateDraft,
+ args: {srcId: string; op: 'before' | 'after', dstId: string}): void {
const moveWithinTrackList = (trackList: string[]) => {
const newList: string[] = [];
for (let i = 0; i < trackList.length; i++) {
@@ -420,10 +420,10 @@
toggleTrackGroupCollapsed(state: StateDraft, args: {trackGroupId: string}):
void {
- const id = args.trackGroupId;
- const trackGroup = assertExists(state.trackGroups[id]);
- trackGroup.collapsed = !trackGroup.collapsed;
- },
+ const id = args.trackGroupId;
+ const trackGroup = assertExists(state.trackGroups[id]);
+ trackGroup.collapsed = !trackGroup.collapsed;
+ },
requestTrackReload(state: StateDraft, _: {}) {
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
@@ -445,8 +445,8 @@
// TODO(hjd): engine.ready should be a published thing. If it's part
// of the state it interacts badly with permalinks.
setEngineReady(
- state: StateDraft,
- args: {engineId: string; ready: boolean, mode: EngineMode}): void {
+ state: StateDraft,
+ args: {engineId: string; ready: boolean, mode: EngineMode}): void {
const engine = state.engine;
if (engine === undefined || engine.id !== args.engineId) {
return;
@@ -462,10 +462,10 @@
// Marks all engines matching the given |mode| as failed.
setEngineFailed(state: StateDraft, args: {mode: EngineMode; failure: string}):
void {
- if (state.engine !== undefined && state.engine.mode === args.mode) {
- state.engine.failed = args.failure;
- }
- },
+ if (state.engine !== undefined && state.engine.mode === args.mode) {
+ state.engine.failed = args.failure;
+ }
+ },
createPermalink(state: StateDraft, args: {isRecordingConfig: boolean}): void {
state.permalink = {
@@ -477,10 +477,10 @@
setPermalink(state: StateDraft, args: {requestId: string; hash: string}):
void {
- // Drop any links for old requests.
- if (state.permalink.requestId !== args.requestId) return;
- state.permalink = args;
- },
+ // Drop any links for old requests.
+ if (state.permalink.requestId !== args.requestId) return;
+ state.permalink = args;
+ },
loadPermalink(state: StateDraft, args: {hash: string}): void {
state.permalink = {requestId: generateNextId(state), hash: args.hash};
@@ -522,8 +522,8 @@
},
setRecordConfig(
- state: StateDraft,
- args: {config: RecordConfig, configType?: LoadedConfig}): void {
+ state: StateDraft,
+ args: {config: RecordConfig, configType?: LoadedConfig}): void {
state.recordConfig = args.config;
state.lastLoadedConfig = args.configType || {type: 'NONE'};
},
@@ -538,8 +538,8 @@
},
addAutomaticNote(
- state: StateDraft,
- args: {timestamp: time, color: string, text: string}): void {
+ state: StateDraft,
+ args: {timestamp: time, color: string, text: string}): void {
const id = generateNextId(state);
state.notes[id] = {
noteType: 'DEFAULT',
@@ -563,23 +563,23 @@
},
markCurrentArea(
- state: StateDraft, args: {color: string, persistent: boolean}):
+ state: StateDraft, args: {color: string, persistent: boolean}):
void {
- if (state.currentSelection === null ||
+ if (state.currentSelection === null ||
state.currentSelection.kind !== 'AREA') {
- return;
- }
- const id = args.persistent ? generateNextId(state) : '0';
- const color = args.persistent ? args.color : '#344596';
- state.notes[id] = {
- noteType: 'AREA',
- id,
- areaId: state.currentSelection.areaId,
- color,
- text: '',
- };
- state.currentSelection.noteId = id;
- },
+ return;
+ }
+ const id = args.persistent ? generateNextId(state) : '0';
+ const color = args.persistent ? args.color : '#344596';
+ state.notes[id] = {
+ noteType: 'AREA',
+ id,
+ areaId: state.currentSelection.areaId,
+ color,
+ text: '',
+ };
+ state.currentSelection.noteId = id;
+ },
toggleMarkCurrentArea(state: StateDraft, args: {persistent: boolean}) {
const selection = state.currentSelection;
@@ -610,10 +610,10 @@
changeNoteColor(state: StateDraft, args: {id: string, newColor: string}):
void {
- const note = state.notes[args.id];
- if (note === undefined) return;
- note.color = args.newColor;
- },
+ const note = state.notes[args.id];
+ if (note === undefined) return;
+ note.color = args.newColor;
+ },
changeNoteText(state: StateDraft, args: {id: string, newText: string}): void {
const note = state.notes[args.id];
@@ -631,15 +631,15 @@
state.currentSelection.id === args.id) {
state.currentSelection = null;
} else if (
- state.currentSelection.kind === 'AREA' &&
+ state.currentSelection.kind === 'AREA' &&
state.currentSelection.noteId === args.id) {
state.currentSelection.noteId = undefined;
}
},
selectSlice(
- state: StateDraft,
- args: {id: number, trackKey: string, scroll?: boolean}): void {
+ state: StateDraft,
+ args: {id: number, trackKey: string, scroll?: boolean}): void {
state.currentSelection = {
kind: 'SLICE',
id: args.id,
@@ -649,8 +649,8 @@
},
selectCounter(
- state: StateDraft,
- args: {leftTs: time, rightTs: time, id: number, trackKey: string}): void {
+ state: StateDraft,
+ args: {leftTs: time, rightTs: time, id: number, trackKey: string}): void {
state.currentSelection = {
kind: 'COUNTER',
leftTs: args.leftTs,
@@ -661,8 +661,8 @@
},
selectHeapProfile(
- state: StateDraft,
- args: {id: number, upid: number, ts: time, type: ProfileType}): void {
+ state: StateDraft,
+ args: {id: number, upid: number, ts: time, type: ProfileType}): void {
state.currentSelection = {
kind: 'HEAP_PROFILE',
id: args.id,
@@ -723,7 +723,7 @@
},
selectCpuProfileSample(
- state: StateDraft, args: {id: number, utid: number, ts: time}): void {
+ state: StateDraft, args: {id: number, utid: number, ts: time}): void {
state.currentSelection = {
kind: 'CPU_PROFILE_SAMPLE',
id: args.id,
@@ -733,36 +733,36 @@
},
expandFlamegraphState(
- state: StateDraft, args: {expandedCallsite?: CallsiteInfo}): void {
+ state: StateDraft, args: {expandedCallsite?: CallsiteInfo}): void {
if (state.currentFlamegraphState === null) return;
state.currentFlamegraphState.expandedCallsite = args.expandedCallsite;
},
changeViewFlamegraphState(
- state: StateDraft, args: {viewingOption: FlamegraphStateViewingOption}):
+ state: StateDraft, args: {viewingOption: FlamegraphStateViewingOption}):
void {
- if (state.currentFlamegraphState === null) return;
- state.currentFlamegraphState.viewingOption = args.viewingOption;
- },
+ if (state.currentFlamegraphState === null) return;
+ state.currentFlamegraphState.viewingOption = args.viewingOption;
+ },
changeFocusFlamegraphState(state: StateDraft, args: {focusRegex: string}):
void {
- if (state.currentFlamegraphState === null) return;
- state.currentFlamegraphState.focusRegex = args.focusRegex;
- },
+ if (state.currentFlamegraphState === null) return;
+ state.currentFlamegraphState.focusRegex = args.focusRegex;
+ },
selectChromeSlice(
- state: StateDraft,
- args: {id: number, trackKey: string, table?: string, scroll?: boolean}):
+ state: StateDraft,
+ args: {id: number, trackKey: string, table?: string, scroll?: boolean}):
void {
- state.currentSelection = {
- kind: 'CHROME_SLICE',
- id: args.id,
- trackKey: args.trackKey,
- table: args.table,
- };
- state.pendingScrollId = args.scroll ? args.id : undefined;
- },
+ state.currentSelection = {
+ kind: 'CHROME_SLICE',
+ id: args.id,
+ trackKey: args.trackKey,
+ table: args.table,
+ };
+ state.pendingScrollId = args.scroll ? args.id : undefined;
+ },
selectGenericSlice(state: StateDraft, args: {
id: number,
@@ -796,16 +796,16 @@
selectThreadState(state: StateDraft, args: {id: number, trackKey: string}):
void {
- state.currentSelection = {
- kind: 'THREAD_STATE',
- id: args.id,
- trackKey: args.trackKey,
- };
- },
+ state.currentSelection = {
+ kind: 'THREAD_STATE',
+ id: args.id,
+ trackKey: args.trackKey,
+ };
+ },
selectLog(
- state: StateDraft,
- args: {id: number, trackKey: string, scroll?: boolean}): void {
+ state: StateDraft,
+ args: {id: number, trackKey: string, scroll?: boolean}): void {
state.currentSelection = {
kind: 'LOG',
id: args.id,
@@ -831,19 +831,19 @@
const excludedNames = state.ftraceFilter.excludedNames;
for (const [addRemove, name] of diffs) {
switch (addRemove) {
- case 'add':
- if (!excludedNames.some((excluded: string) => excluded === name)) {
- excludedNames.push(name);
- }
- break;
- case 'remove':
- state.ftraceFilter.excludedNames =
+ case 'add':
+ if (!excludedNames.some((excluded: string) => excluded === name)) {
+ excludedNames.push(name);
+ }
+ break;
+ case 'remove':
+ state.ftraceFilter.excludedNames =
state.ftraceFilter.excludedNames.filter(
- (excluded: string) => excluded !== name);
- break;
- default:
- assertUnreachable(addRemove);
- break;
+ (excluded: string) => excluded !== name);
+ break;
+ default:
+ assertUnreachable(addRemove);
+ break;
}
}
},
@@ -876,7 +876,7 @@
},
setAvailableAdbDevices(
- state: StateDraft, args: {devices: AdbRecordingTarget[]}): void {
+ state: StateDraft, args: {devices: AdbRecordingTarget[]}): void {
state.availableAdbDevices = args.devices;
},
@@ -904,15 +904,15 @@
reSelectArea(state: StateDraft, args: {areaId: string, noteId: string}):
void {
- state.currentSelection = {
- kind: 'AREA',
- areaId: args.areaId,
- noteId: args.noteId,
- };
- },
+ state.currentSelection = {
+ kind: 'AREA',
+ areaId: args.areaId,
+ noteId: args.noteId,
+ };
+ },
toggleTrackSelection(
- state: StateDraft, args: {id: string, isTrackGroup: boolean}) {
+ state: StateDraft, args: {id: string, isTrackGroup: boolean}) {
const selection = state.currentSelection;
if (selection === null || selection.kind !== 'AREA') return;
const areaId = selection.areaId;
@@ -1073,8 +1073,8 @@
togglePivotTable(state: StateDraft, args: {areaId: string|null}) {
state.nonSerializableState.pivotTable.selectionArea = args.areaId === null ?
- undefined :
- {areaId: args.areaId, tracks: state.areas[args.areaId].tracks};
+ undefined :
+ {areaId: args.areaId, tracks: state.areas[args.areaId].tracks};
if (args.areaId !==
state.nonSerializableState.pivotTable.selectionArea?.areaId) {
state.nonSerializableState.pivotTable.queryResult = null;
@@ -1082,7 +1082,7 @@
},
setPivotStateQueryResult(
- state: StateDraft, args: {queryResult: PivotTableResult|null}) {
+ state: StateDraft, args: {queryResult: PivotTableResult|null}) {
state.nonSerializableState.pivotTable.queryResult = args.queryResult;
},
@@ -1095,73 +1095,73 @@
},
addPivotTableAggregation(
- state: StateDraft, args: {aggregation: Aggregation, after: number}) {
+ state: StateDraft, args: {aggregation: Aggregation, after: number}) {
state.nonSerializableState.pivotTable.selectedAggregations.splice(
- args.after, 0, args.aggregation);
+ args.after, 0, args.aggregation);
},
removePivotTableAggregation(state: StateDraft, args: {index: number}) {
state.nonSerializableState.pivotTable.selectedAggregations.splice(
- args.index, 1);
+ args.index, 1);
},
setPivotTableQueryRequested(
- state: StateDraft, args: {queryRequested: boolean}) {
+ state: StateDraft, args: {queryRequested: boolean}) {
state.nonSerializableState.pivotTable.queryRequested = args.queryRequested;
},
setPivotTablePivotSelected(
- state: StateDraft, args: {column: TableColumn, selected: boolean}) {
+ state: StateDraft, args: {column: TableColumn, selected: boolean}) {
toggleEnabled(
- tableColumnEquals,
- state.nonSerializableState.pivotTable.selectedPivots,
- args.column,
- args.selected);
+ tableColumnEquals,
+ state.nonSerializableState.pivotTable.selectedPivots,
+ args.column,
+ args.selected);
},
setPivotTableAggregationFunction(
- state: StateDraft, args: {index: number, function: AggregationFunction}) {
+ state: StateDraft, args: {index: number, function: AggregationFunction}) {
state.nonSerializableState.pivotTable.selectedAggregations[args.index]
- .aggregationFunction = args.function;
+ .aggregationFunction = args.function;
},
setPivotTableSortColumn(
- state: StateDraft,
- args: {aggregationIndex: number, order: SortDirection}) {
+ state: StateDraft,
+ args: {aggregationIndex: number, order: SortDirection}) {
state.nonSerializableState.pivotTable.selectedAggregations =
state.nonSerializableState.pivotTable.selectedAggregations.map(
- (agg, index) => ({
- column: agg.column,
- aggregationFunction: agg.aggregationFunction,
- sortDirection: (index === args.aggregationIndex) ? args.order :
- undefined,
- }));
+ (agg, index) => ({
+ column: agg.column,
+ aggregationFunction: agg.aggregationFunction,
+ sortDirection: (index === args.aggregationIndex) ? args.order :
+ undefined,
+ }));
},
setPivotTableArgumentNames(
- state: StateDraft, args: {argumentNames: string[]}) {
+ state: StateDraft, args: {argumentNames: string[]}) {
state.nonSerializableState.pivotTable.argumentNames = args.argumentNames;
},
changePivotTablePivotOrder(
- state: StateDraft,
- args: {from: number, to: number, direction: DropDirection}) {
+ state: StateDraft,
+ args: {from: number, to: number, direction: DropDirection}) {
const pivots = state.nonSerializableState.pivotTable.selectedPivots;
state.nonSerializableState.pivotTable.selectedPivots = performReordering(
- computeIntervals(pivots.length, args.from, args.to, args.direction),
- pivots);
+ computeIntervals(pivots.length, args.from, args.to, args.direction),
+ pivots);
},
changePivotTableAggregationOrder(
- state: StateDraft,
- args: {from: number, to: number, direction: DropDirection}) {
+ state: StateDraft,
+ args: {from: number, to: number, direction: DropDirection}) {
const aggregations =
state.nonSerializableState.pivotTable.selectedAggregations;
state.nonSerializableState.pivotTable.selectedAggregations =
performReordering(
- computeIntervals(
- aggregations.length, args.from, args.to, args.direction),
- aggregations);
+ computeIntervals(
+ aggregations.length, args.from, args.to, args.direction),
+ aggregations);
},
setMinimumLogLevel(state: StateDraft, args: {minimumLevel: number}) {
diff --git a/ui/src/common/actions_unittest.ts b/ui/src/common/actions_unittest.ts
index 3fb0246..e14e265 100644
--- a/ui/src/common/actions_unittest.ts
+++ b/ui/src/common/actions_unittest.ts
@@ -49,15 +49,15 @@
key: args.key,
name: args.name || 'A track',
trackSortKey: args.trackSortKey === undefined ?
- PrimaryTrackSortKey.ORDINARY_TRACK :
- args.trackSortKey,
+ PrimaryTrackSortKey.ORDINARY_TRACK :
+ args.trackSortKey,
trackGroup: args.trackGroup || SCROLLING_TRACK_GROUP,
});
});
}
function fakeTrackGroup(
- state: State, args: {id: string, summaryTrackId: string}): State {
+ state: State, args: {id: string, summaryTrackId: string}): State {
return produce(state, (draft) => {
StateActions.addTrackGroup(draft, {
name: 'A group',
@@ -69,10 +69,10 @@
}
function pinnedAndScrollingTracks(
- state: State,
- keys: string[],
- pinnedTracks: string[],
- scrollingTracks: string[]): State {
+ state: State,
+ keys: string[],
+ pinnedTracks: string[],
+ scrollingTracks: string[]): State {
for (const key of keys) {
state = fakeTrack(state, {key});
}
@@ -258,7 +258,7 @@
expect(after.engine).not.toBeUndefined();
expect((after.engine!!.source as TraceUrlSource).url)
- .toBe('https://example.com/bar');
+ .toBe('https://example.com/bar');
expect(after.recordConfig).toBe(recordConfig);
});
@@ -285,7 +285,7 @@
expect(thrice.engine).not.toBeUndefined();
expect((thrice.engine!!.source as TraceUrlSource).url)
- .toBe('https://example.com/foo');
+ .toBe('https://example.com/foo');
expect(thrice.pinnedTracks.length).toBe(0);
expect(thrice.scrollingTracks.length).toBe(0);
});
@@ -294,7 +294,7 @@
const state = createEmptyState();
produce(state, (draft) => {
StateActions.setEngineReady(
- draft, {engineId: '1', ready: true, mode: 'WASM'});
+ draft, {engineId: '1', ready: true, mode: 'WASM'});
});
});
@@ -306,7 +306,7 @@
});
const latestEngineId = assertExists(draft.engine).id;
StateActions.setEngineReady(
- draft, {engineId: latestEngineId, ready: true, mode: 'WASM'});
+ draft, {engineId: latestEngineId, ready: true, mode: 'WASM'});
});
expect(after.engine!!.ready).toBe(true);
});
@@ -364,11 +364,11 @@
trackSortKey: PrimaryTrackSortKey.GPU_COMPLETION_THREAD,
});
state = fakeTrack(
- state, {key: 'e', uri: HEAP_PROFILE_TRACK_KIND, trackGroup: 'g'});
+ state, {key: 'e', uri: HEAP_PROFILE_TRACK_KIND, trackGroup: 'g'});
state = fakeTrack(
- state, {key: 'f', uri: SLICE_TRACK_KIND, trackGroup: 'g', name: 'T2'});
+ state, {key: 'f', uri: SLICE_TRACK_KIND, trackGroup: 'g', name: 'T2'});
state = fakeTrack(
- state, {key: 'g', uri: SLICE_TRACK_KIND, trackGroup: 'g', name: 'T10'});
+ state, {key: 'g', uri: SLICE_TRACK_KIND, trackGroup: 'g', name: 'T10'});
const after = produce(state, (draft) => {
StateActions.sortThreadTracks(draft, {});
@@ -380,7 +380,7 @@
// 3.Low priority
// 4.Collated name string (ie. 'T2' will be before 'T10')
expect(after.trackGroups['g'].tracks)
- .toEqual(['a', 'b', 'b', 'c', 'd', 'e', 'f', 'g']);
+ .toEqual(['a', 'b', 'b', 'c', 'd', 'e', 'f', 'g']);
});
test('sortTracksByTidThenName', () => {
@@ -441,7 +441,7 @@
});
expect(assertExists(afterSelectingPerf.currentFlamegraphState).type)
- .toBe(ProfileType.PERF_SAMPLE);
+ .toBe(ProfileType.PERF_SAMPLE);
});
test('heap profile opens flamegraph', () => {
@@ -457,5 +457,5 @@
});
expect(assertExists(afterSelectingPerf.currentFlamegraphState).type)
- .toBe(ProfileType.JAVA_HEAP_GRAPH);
+ .toBe(ProfileType.JAVA_HEAP_GRAPH);
});
diff --git a/ui/src/common/array_buffer_builder.ts b/ui/src/common/array_buffer_builder.ts
index fd86c04..3b9ae88 100644
--- a/ui/src/common/array_buffer_builder.ts
+++ b/ui/src/common/array_buffer_builder.ts
@@ -43,10 +43,10 @@
// @param byteOffset Position to write at, in the buffer.
// @param token Token to insert into the buffer.
function insertToken(
- dataView: DataView,
- typedArray: Uint8Array,
- byteOffset: number,
- token: ArrayBufferToken): void {
+ dataView: DataView,
+ typedArray: Uint8Array,
+ byteOffset: number,
+ token: ArrayBufferToken): void {
if (isString(token)) {
// Encode the string in UTF-8
const written = utf8Write(token, typedArray, byteOffset);
diff --git a/ui/src/common/cache_manager.ts b/ui/src/common/cache_manager.ts
index b22ee05..41faf66 100644
--- a/ui/src/common/cache_manager.ts
+++ b/ui/src/common/cache_manager.ts
@@ -86,7 +86,7 @@
}
export async function cacheTrace(
- traceSource: TraceSource, traceUuid: string): Promise<boolean> {
+ traceSource: TraceSource, traceUuid: string): Promise<boolean> {
let trace;
let title = '';
let fileName = '';
@@ -94,21 +94,21 @@
let contentLength = 0;
let localOnly = false;
switch (traceSource.type) {
- case 'ARRAY_BUFFER':
- trace = traceSource.buffer;
- title = traceSource.title;
- fileName = traceSource.fileName || '';
- url = traceSource.url || '';
- contentLength = traceSource.buffer.byteLength;
- localOnly = traceSource.localOnly || false;
- break;
- case 'FILE':
- trace = await traceSource.file.arrayBuffer();
- title = traceSource.file.name;
- contentLength = traceSource.file.size;
- break;
- default:
- return false;
+ case 'ARRAY_BUFFER':
+ trace = traceSource.buffer;
+ title = traceSource.title;
+ fileName = traceSource.fileName || '';
+ url = traceSource.url || '';
+ contentLength = traceSource.buffer.byteLength;
+ localOnly = traceSource.localOnly || false;
+ break;
+ case 'FILE':
+ trace = await traceSource.file.arrayBuffer();
+ title = traceSource.file.name;
+ contentLength = traceSource.file.size;
+ break;
+ default:
+ return false;
}
const headers = new Headers([
@@ -122,12 +122,12 @@
'expires',
// Expires in a week from now (now = upload time)
(new Date((new Date()).getTime() + (1000 * 60 * 60 * 24 * 7)))
- .toUTCString(),
+ .toUTCString(),
],
]);
await deleteStaleEntries();
await cachePut(
- `/_${TRACE_CACHE_NAME}/${traceUuid}`, new Response(trace, {headers}));
+ `/_${TRACE_CACHE_NAME}/${traceUuid}`, new Response(trace, {headers}));
return true;
}
@@ -180,7 +180,7 @@
// delete them from cache.
const oldTraces =
storedTraces.sort((a, b) => b.date.getTime() - a.date.getTime())
- .slice(TRACE_CACHE_SIZE);
+ .slice(TRACE_CACHE_SIZE);
for (const oldTrace of oldTraces) {
deletions.push(cacheDelete(oldTrace.key));
}
diff --git a/ui/src/common/canvas_utils.ts b/ui/src/common/canvas_utils.ts
index 2f56b5f..e0111f9 100644
--- a/ui/src/common/canvas_utils.ts
+++ b/ui/src/common/canvas_utils.ts
@@ -38,13 +38,13 @@
}
export function drawDoubleHeadedArrow(
- ctx: CanvasRenderingContext2D,
- x: number,
- y: number,
- length: number,
- showArrowHeads: boolean,
- width = 2,
- color = 'black') {
+ ctx: CanvasRenderingContext2D,
+ x: number,
+ y: number,
+ length: number,
+ showArrowHeads: boolean,
+ width = 2,
+ color = 'black') {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = 'round';
@@ -71,12 +71,12 @@
}
export function drawIncompleteSlice(
- ctx: CanvasRenderingContext2D,
- x: number,
- y: number,
- width: number,
- height: number,
- showGradient: boolean = true) {
+ ctx: CanvasRenderingContext2D,
+ x: number,
+ y: number,
+ width: number,
+ height: number,
+ showGradient: boolean = true) {
if (width <= 0 || height <= 0) {
return;
}
@@ -104,8 +104,8 @@
}
} else {
throw new Error(
- `drawIncompleteSlice() expects fillStyle to be a simple color not ${
- fillStyle}`);
+ `drawIncompleteSlice() expects fillStyle to be a simple color not ${
+ fillStyle}`);
}
ctx.fill();
@@ -113,11 +113,11 @@
}
export function drawTrackHoverTooltip(
- ctx: CanvasRenderingContext2D,
- pos: {x: number, y: number},
- maxHeight: number,
- text: string,
- text2?: string) {
+ ctx: CanvasRenderingContext2D,
+ pos: {x: number, y: number},
+ maxHeight: number,
+ text: string,
+ text2?: string) {
ctx.font = '10px Roboto Condensed';
ctx.textBaseline = 'middle';
ctx.textAlign = 'left';
@@ -168,7 +168,7 @@
ctx.fillStyle = 'hsl(200, 50%, 40%)';
ctx.fillText(
- text, x + paddingPx, y + paddingPx + textMetrics.fontBoundingBoxAscent);
+ text, x + paddingPx, y + paddingPx + textMetrics.fontBoundingBoxAscent);
if (text2 !== undefined) {
const yOffsetPx = textMetrics.fontBoundingBoxAscent +
textMetrics.fontBoundingBoxDescent + text2Metrics.fontBoundingBoxAscent;
diff --git a/ui/src/common/canvas_utils_unittest.ts b/ui/src/common/canvas_utils_unittest.ts
index 3aa005f..e8e4c42 100644
--- a/ui/src/common/canvas_utils_unittest.ts
+++ b/ui/src/common/canvas_utils_unittest.ts
@@ -18,18 +18,18 @@
const tripleDot = '\u2026';
const emoji = '\uD83D\uDE00';
expect(cropText(
- 'com.android.camera [4096]',
- /* charWidth=*/ 5,
- /* rectWidth=*/ 2 * 5))
- .toBe('c');
+ 'com.android.camera [4096]',
+ /* charWidth=*/ 5,
+ /* rectWidth=*/ 2 * 5))
+ .toBe('c');
expect(cropText('com.android.camera [4096]', 5, 4 * 5 + 2))
- .toBe('co' + tripleDot);
+ .toBe('co' + tripleDot);
expect(cropText('com.android.camera [4096]', 5, 5 * 5 + 2))
- .toBe('com' + tripleDot);
+ .toBe('com' + tripleDot);
expect(cropText('com.android.camera [4096]', 5, 13 * 5 + 2))
- .toBe('com.android' + tripleDot);
+ .toBe('com.android' + tripleDot);
expect(cropText('com.android.camera [4096]', 5, 26 * 5 + 2))
- .toBe('com.android.camera [4096]');
+ .toBe('com.android.camera [4096]');
expect(cropText(emoji + 'abc', 5, 2 * 5)).toBe(emoji);
expect(cropText(emoji + 'abc', 5, 5 * 5)).toBe(emoji + 'a' + tripleDot);
});
diff --git a/ui/src/common/color.ts b/ui/src/common/color.ts
index 127bfbb..903c11b 100644
--- a/ui/src/common/color.ts
+++ b/ui/src/common/color.ts
@@ -261,15 +261,15 @@
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
- case r:
- h = (g - b) / d + (g < b ? 6 : 0);
- break;
- case g:
- h = (b - r) / d + 2;
- break;
- case b:
- h = (r - g) / d + 4;
- break;
+ case r:
+ h = (g - b) / d + (g < b ? 6 : 0);
+ break;
+ case g:
+ h = (b - r) / d + 2;
+ break;
+ case b:
+ h = (r - g) / d + 4;
+ break;
}
h /= 6;
}
diff --git a/ui/src/common/color_unittest.ts b/ui/src/common/color_unittest.ts
index 4973308..6dd54df 100644
--- a/ui/src/common/color_unittest.ts
+++ b/ui/src/common/color_unittest.ts
@@ -21,11 +21,11 @@
expect(col.cssString).toBe('rgb(39 190 47)');
expect(new HSLColor({h: 0, s: 0, l: 0}).cssString).toBe('rgb(0 0 0)');
expect(new HSLColor({h: 0, s: 100, l: 100}).cssString)
- .toBe('rgb(255 255 255)');
+ .toBe('rgb(255 255 255)');
expect(new HSLColor({h: 90, s: 25, l: 55}).cssString)
- .toBe('rgb(140 169 112)');
+ .toBe('rgb(140 169 112)');
expect(new HSLColor({h: 180, s: 80, l: 40}, 0.7).cssString)
- .toBe('rgb(20 184 184 / 0.7)');
+ .toBe('rgb(20 184 184 / 0.7)');
});
test('lighten', () => {
@@ -48,14 +48,14 @@
test('perceivedBrightness', () => {
// Test a few obviously light/dark colours.
expect(new HSLColor({h: 0, s: 0, l: 0}).perceivedBrightness)
- .toBeLessThan(128);
+ .toBeLessThan(128);
expect(new HSLColor({h: 0, s: 0, l: 100}).perceivedBrightness)
- .toBeGreaterThan(128);
+ .toBeGreaterThan(128);
expect(new HSLColor({h: 0, s: 0, l: 40}).perceivedBrightness)
- .toBeLessThan(128);
+ .toBeLessThan(128);
expect(new HSLColor({h: 0, s: 0, l: 60}).perceivedBrightness)
- .toBeGreaterThan(128);
+ .toBeGreaterThan(128);
});
});
@@ -66,11 +66,11 @@
expect(col.cssString).toBe('rgb(69 117 58)');
expect(new HSLColor({h: 0, s: 0, l: 0}).cssString).toBe('rgb(0 0 0)');
expect(new HSLColor({h: 0, s: 100, l: 100}).cssString)
- .toBe('rgb(255 255 255)');
+ .toBe('rgb(255 255 255)');
expect(new HSLuvColor({h: 90, s: 25, l: 55}).cssString)
- .toBe('rgb(131 133 112)');
+ .toBe('rgb(131 133 112)');
expect(new HSLuvColor({h: 240, s: 100, l: 100}, 0.3).cssString)
- .toBe('rgb(254 255 255 / 0.3)');
+ .toBe('rgb(254 255 255 / 0.3)');
});
test('lighten', () => {
@@ -93,14 +93,14 @@
test('perceivedBrightness', () => {
// Test a few obviously light/dark colours.
expect(new HSLuvColor({h: 0, s: 0, l: 0}).perceivedBrightness)
- .toBeLessThan(128);
+ .toBeLessThan(128);
expect(new HSLuvColor({h: 0, s: 0, l: 100}).perceivedBrightness)
- .toBeGreaterThan(128);
+ .toBeGreaterThan(128);
expect(new HSLuvColor({h: 0, s: 0, l: 40}).perceivedBrightness)
- .toBeLessThan(128);
+ .toBeLessThan(128);
expect(new HSLuvColor({h: 0, s: 0, l: 60}).perceivedBrightness)
- .toBeGreaterThan(128);
+ .toBeGreaterThan(128);
});
});
diff --git a/ui/src/common/colorizer.ts b/ui/src/common/colorizer.ts
index 0d4f31e..1fec0ba 100644
--- a/ui/src/common/colorizer.ts
+++ b/ui/src/common/colorizer.ts
@@ -111,11 +111,11 @@
variant,
disabled: GRAY_COLOR,
textBase: base.perceivedBrightness >= PERCEIVED_BRIGHTNESS_LIMIT ?
- BLACK_COLOR :
- WHITE_COLOR,
+ BLACK_COLOR :
+ WHITE_COLOR,
textVariant: variant.perceivedBrightness >= PERCEIVED_BRIGHTNESS_LIMIT ?
- BLACK_COLOR :
- WHITE_COLOR,
+ BLACK_COLOR :
+ WHITE_COLOR,
textDisabled: WHITE_COLOR, // Low contrast is on purpose
};
}
diff --git a/ui/src/common/comparator_builder.ts b/ui/src/common/comparator_builder.ts
index 17d0b64..bb5c1a3 100644
--- a/ui/src/common/comparator_builder.ts
+++ b/ui/src/common/comparator_builder.ts
@@ -31,8 +31,8 @@
}
compare<S>(
- comparator: (first: S, second: S) => boolean,
- getter: (arg: T) => S): EqualsBuilder<T> {
+ comparator: (first: S, second: S) => boolean,
+ getter: (arg: T) => S): EqualsBuilder<T> {
if (this.result) {
this.result = comparator(getter(this.first), getter(this.second));
}
diff --git a/ui/src/common/dragndrop_logic.ts b/ui/src/common/dragndrop_logic.ts
index 27280c3..0bb283f 100644
--- a/ui/src/common/dragndrop_logic.ts
+++ b/ui/src/common/dragndrop_logic.ts
@@ -33,7 +33,7 @@
* the element `dragTo`.
*/
export function computeIntervals(
- length: number, dragFrom: number, dragTo: number, direction: DropDirection):
+ length: number, dragFrom: number, dragTo: number, direction: DropDirection):
Interval[] {
assertTrue(dragFrom !== dragTo);
diff --git a/ui/src/common/empty_state.ts b/ui/src/common/empty_state.ts
index fb174be..9704dc9 100644
--- a/ui/src/common/empty_state.ts
+++ b/ui/src/common/empty_state.ts
@@ -40,7 +40,7 @@
});
export function keyedMap<T>(
- keyFn: (key: T) => string, ...values: T[]): Map<string, T> {
+ keyFn: (key: T) => string, ...values: T[]): Map<string, T> {
const result = new Map<string, T>();
for (const value of values) {
@@ -105,8 +105,8 @@
notes: {},
recordConfig: AUTOLOAD_STARTED_CONFIG_FLAG.get() ?
- autosaveConfigStore.get() :
- createEmptyRecordConfig(),
+ autosaveConfigStore.get() :
+ createEmptyRecordConfig(),
displayConfigAsPbtxt: false,
lastLoadedConfig: {type: 'NONE'},
diff --git a/ui/src/common/event_set.ts b/ui/src/common/event_set.ts
index 309bdf0..47e4e1b 100644
--- a/ui/src/common/event_set.ts
+++ b/ui/src/common/event_set.ts
@@ -214,7 +214,7 @@
union<Q extends KeySet>(other: EventSet<Q>): Merged<P, Q> {
const merged = mergeKeys(this.keys, other.keys);
const result = new NaiveUnionEventSet<MergedKeys<P, Q>>(
- merged, this as UntypedEventSet, other as UntypedEventSet);
+ merged, this as UntypedEventSet, other as UntypedEventSet);
const optimised = optimise(result);
return optimised;
}
@@ -222,7 +222,7 @@
intersect<Q extends KeySet>(other: EventSet<Q>): Merged<P, Q> {
const merged = mergeKeys(this.keys, other.keys);
const result = new NaiveIntersectionEventSet<MergedKeys<P, Q>>(
- merged, this as UntypedEventSet, other as UntypedEventSet);
+ merged, this as UntypedEventSet, other as UntypedEventSet);
const optimised = optimise(result);
return optimised;
}
@@ -251,7 +251,7 @@
}
class NaiveFilterEventSet<P extends KeySet> extends
- OptimisingEventSet<P> implements FilterEventSet<P> {
+ OptimisingEventSet<P> implements FilterEventSet<P> {
readonly isFilter = true;
readonly parent: EventSet<P>;
readonly filters: Filter[];
@@ -298,12 +298,12 @@
events = events.filter((e) => filter.execute(e));
}
return (new ConcreteEventSet(combined, events))
- .materialise(keys, offset, limit);
+ .materialise(keys, offset, limit);
}
}
class NaiveSortEventSet<P extends KeySet> extends
- OptimisingEventSet<P> implements SortEventSet<P> {
+ OptimisingEventSet<P> implements SortEventSet<P> {
readonly isSort = true;
readonly parent: EventSet<P>;
readonly sorts: Sort[];
@@ -333,13 +333,13 @@
events = events.sort(cmpFromSort(sort));
}
return (new ConcreteEventSet(combined, events))
- .materialise(keys, offset, limit);
+ .materialise(keys, offset, limit);
}
}
export class NaiveUnionEventSet<T extends KeySet> extends
- OptimisingEventSet<T> implements UnionEventSet<T> {
+ OptimisingEventSet<T> implements UnionEventSet<T> {
readonly isUnion = true;
readonly parents: EventSet<T>[];
readonly keys: T;
@@ -382,7 +382,7 @@
}
export class NaiveIntersectionEventSet<T extends KeySet> extends
- OptimisingEventSet<T> implements IntersectionEventSet<T> {
+ OptimisingEventSet<T> implements IntersectionEventSet<T> {
readonly isIntersection = true;
readonly parents: EventSet<T>[];
readonly keys: T;
@@ -436,7 +436,7 @@
// A completely empty EventSet.
export class EmptyEventSet<T extends KeySet> extends
- OptimisingEventSet<T> implements EventSet<T> {
+ OptimisingEventSet<T> implements EventSet<T> {
readonly isEmptyEventSet = true;
readonly keys: T;
@@ -458,7 +458,7 @@
}
async materialise<Q extends KeySet>(
- keys: Q, _offset?: number, _limit?: number): Promise<Materialised<Q, T>> {
+ keys: Q, _offset?: number, _limit?: number): Promise<Materialised<Q, T>> {
return Promise.resolve(
new ConcreteEventSet<Q>(keys, []) as unknown as Materialised<Q, T>);
}
@@ -466,7 +466,7 @@
export class ConcreteEventSet<P extends KeySet> extends
- OptimisingEventSet<P> implements EventSet<P> {
+ OptimisingEventSet<P> implements EventSet<P> {
readonly isConcreteEventSet = true;
readonly events: Event<P>[];
readonly keys: P;
@@ -593,7 +593,7 @@
// The union of concrete EventSets is a concrete EventSets with all
// the events in.
if (isArrayOf<ConcreteEventSet<T>, EventSet<T>>(
- isConcreteEventSet, newParents)) {
+ isConcreteEventSet, newParents)) {
const seen = new Set<string>();
const events = [];
for (const p of newParents) {
@@ -859,35 +859,35 @@
// Type guards:
export function isEmptyEventSet<T extends KeySet>(
- s: EventSet<T>|EmptyEventSet<T>): s is EmptyEventSet<T> {
+ s: EventSet<T>|EmptyEventSet<T>): s is EmptyEventSet<T> {
return !!((s as EmptyEventSet<T>).isEmptyEventSet);
}
export function isConcreteEventSet<T extends KeySet>(
- s: EventSet<T>|ConcreteEventSet<T>): s is ConcreteEventSet<T> {
+ s: EventSet<T>|ConcreteEventSet<T>): s is ConcreteEventSet<T> {
return !!((s as ConcreteEventSet<T>).isConcreteEventSet);
}
export function isUnionEventSet<T extends KeySet>(
- s: EventSet<T>|UnionEventSet<T>): s is UnionEventSet<T> {
+ s: EventSet<T>|UnionEventSet<T>): s is UnionEventSet<T> {
return (s as UnionEventSet<T>).isUnion &&
Array.isArray((s as UnionEventSet<T>).parents);
}
export function isIntersectionEventSet<T extends KeySet>(
- s: EventSet<T>|IntersectionEventSet<T>): s is IntersectionEventSet<T> {
+ s: EventSet<T>|IntersectionEventSet<T>): s is IntersectionEventSet<T> {
return (s as IntersectionEventSet<T>).isIntersection &&
Array.isArray((s as IntersectionEventSet<T>).parents);
}
export function isFilterEventSet<T extends KeySet>(
- s: EventSet<T>|FilterEventSet<T>): s is FilterEventSet<T> {
+ s: EventSet<T>|FilterEventSet<T>): s is FilterEventSet<T> {
return (s as FilterEventSet<T>).isFilter &&
Array.isArray((s as FilterEventSet<T>).filters);
}
export function isSortEventSet<T extends KeySet>(
- s: EventSet<T>|SortEventSet<T>): s is SortEventSet<T> {
+ s: EventSet<T>|SortEventSet<T>): s is SortEventSet<T> {
return (s as SortEventSet<T>).isSort &&
Array.isArray((s as SortEventSet<T>).sorts);
}
@@ -933,28 +933,28 @@
}
function mergeKeys<P extends KeySet, Q extends KeySet>(
- left: P, right: Q): MergedKeys<P, Q> {
+ left: P, right: Q): MergedKeys<P, Q> {
return Object.assign({}, left, right);
}
function getKeyDefault(keyName: string, keyType: KeyType): Primitive {
switch (keyType) {
- case Id:
- throw new Error(
- `Can't create default for key '${keyName}' with type '${keyType}'`);
- case Num:
- return 0;
- case Null:
- return null;
- case Str:
- return '';
- case Bool:
- return false;
- case BigInt:
- return 0n;
- default:
- const _exhaustiveCheck: never = keyType;
- return _exhaustiveCheck;
+ case Id:
+ throw new Error(
+ `Can't create default for key '${keyName}' with type '${keyType}'`);
+ case Num:
+ return 0;
+ case Null:
+ return null;
+ case Str:
+ return '';
+ case Bool:
+ return false;
+ case BigInt:
+ return 0n;
+ default:
+ const _exhaustiveCheck: never = keyType;
+ return _exhaustiveCheck;
}
}
@@ -973,7 +973,7 @@
}
function freeVariablesFromFilters(
- filters: Filter[], initialKeySet?: KeySet): KeySet {
+ filters: Filter[], initialKeySet?: KeySet): KeySet {
let result = {};
if (initialKeySet !== undefined) {
diff --git a/ui/src/common/event_set_unittest.ts b/ui/src/common/event_set_unittest.ts
index 2242e87..746eaf1 100644
--- a/ui/src/common/event_set_unittest.ts
+++ b/ui/src/common/event_set_unittest.ts
@@ -131,7 +131,7 @@
test('isConcreteEventSet', () => {
expect(isConcreteEventSet(new ConcreteEventSet<EmptyKeySet>({}, [])))
- .toEqual(true);
+ .toEqual(true);
expect(isConcreteEventSet(EmptyEventSet.get())).toEqual(false);
});
diff --git a/ui/src/common/flamegraph_util.ts b/ui/src/common/flamegraph_util.ts
index 3e6ae8d..3ea3aa2 100644
--- a/ui/src/common/flamegraph_util.ts
+++ b/ui/src/common/flamegraph_util.ts
@@ -21,88 +21,88 @@
export function viewingOptions(profileType: ProfileType): Array<ViewingOption> {
switch (profileType) {
- case ProfileType.PERF_SAMPLE:
- return [{
- option: FlamegraphStateViewingOption.PERF_SAMPLES_KEY,
- name: 'Samples',
- }];
- case ProfileType.JAVA_HEAP_GRAPH:
- return [
- {
- option:
+ case ProfileType.PERF_SAMPLE:
+ return [{
+ option: FlamegraphStateViewingOption.PERF_SAMPLES_KEY,
+ name: 'Samples',
+ }];
+ case ProfileType.JAVA_HEAP_GRAPH:
+ return [
+ {
+ option:
FlamegraphStateViewingOption.SPACE_MEMORY_ALLOCATED_NOT_FREED_KEY,
- name: 'Size',
- },
- {
- option: FlamegraphStateViewingOption.OBJECTS_ALLOCATED_NOT_FREED_KEY,
- name: 'Objects',
- },
- ];
- case ProfileType.HEAP_PROFILE:
- return [
- {
- option:
+ name: 'Size',
+ },
+ {
+ option: FlamegraphStateViewingOption.OBJECTS_ALLOCATED_NOT_FREED_KEY,
+ name: 'Objects',
+ },
+ ];
+ case ProfileType.HEAP_PROFILE:
+ return [
+ {
+ option:
FlamegraphStateViewingOption.SPACE_MEMORY_ALLOCATED_NOT_FREED_KEY,
- name: 'Unreleased size',
- },
- {
- option: FlamegraphStateViewingOption.OBJECTS_ALLOCATED_NOT_FREED_KEY,
- name: 'Unreleased count',
- },
- {
- option: FlamegraphStateViewingOption.ALLOC_SPACE_MEMORY_ALLOCATED_KEY,
- name: 'Total size',
- },
- {
- option: FlamegraphStateViewingOption.OBJECTS_ALLOCATED_KEY,
- name: 'Total count',
- },
- ];
- case ProfileType.NATIVE_HEAP_PROFILE:
- return [
- {
- option:
+ name: 'Unreleased size',
+ },
+ {
+ option: FlamegraphStateViewingOption.OBJECTS_ALLOCATED_NOT_FREED_KEY,
+ name: 'Unreleased count',
+ },
+ {
+ option: FlamegraphStateViewingOption.ALLOC_SPACE_MEMORY_ALLOCATED_KEY,
+ name: 'Total size',
+ },
+ {
+ option: FlamegraphStateViewingOption.OBJECTS_ALLOCATED_KEY,
+ name: 'Total count',
+ },
+ ];
+ case ProfileType.NATIVE_HEAP_PROFILE:
+ return [
+ {
+ option:
FlamegraphStateViewingOption.SPACE_MEMORY_ALLOCATED_NOT_FREED_KEY,
- name: 'Unreleased malloc size',
- },
- {
- option: FlamegraphStateViewingOption.OBJECTS_ALLOCATED_NOT_FREED_KEY,
- name: 'Unreleased malloc count',
- },
- {
- option: FlamegraphStateViewingOption.ALLOC_SPACE_MEMORY_ALLOCATED_KEY,
- name: 'Total malloc size',
- },
- {
- option: FlamegraphStateViewingOption.OBJECTS_ALLOCATED_KEY,
- name: 'Total malloc count',
- },
- ];
- case ProfileType.JAVA_HEAP_SAMPLES:
- return [
- {
- option: FlamegraphStateViewingOption.ALLOC_SPACE_MEMORY_ALLOCATED_KEY,
- name: 'Total allocation size',
- },
- {
- option: FlamegraphStateViewingOption.OBJECTS_ALLOCATED_KEY,
- name: 'Total allocation count',
- },
- ];
- case ProfileType.MIXED_HEAP_PROFILE:
- return [
- {
- option: FlamegraphStateViewingOption.ALLOC_SPACE_MEMORY_ALLOCATED_KEY,
- name: 'Total allocation size (malloc + java)',
- },
- {
- option: FlamegraphStateViewingOption.OBJECTS_ALLOCATED_KEY,
- name: 'Total allocation count (malloc + java)',
- },
- ];
- default:
- const exhaustiveCheck: never = profileType;
- throw new Error(`Unhandled case: ${exhaustiveCheck}`);
+ name: 'Unreleased malloc size',
+ },
+ {
+ option: FlamegraphStateViewingOption.OBJECTS_ALLOCATED_NOT_FREED_KEY,
+ name: 'Unreleased malloc count',
+ },
+ {
+ option: FlamegraphStateViewingOption.ALLOC_SPACE_MEMORY_ALLOCATED_KEY,
+ name: 'Total malloc size',
+ },
+ {
+ option: FlamegraphStateViewingOption.OBJECTS_ALLOCATED_KEY,
+ name: 'Total malloc count',
+ },
+ ];
+ case ProfileType.JAVA_HEAP_SAMPLES:
+ return [
+ {
+ option: FlamegraphStateViewingOption.ALLOC_SPACE_MEMORY_ALLOCATED_KEY,
+ name: 'Total allocation size',
+ },
+ {
+ option: FlamegraphStateViewingOption.OBJECTS_ALLOCATED_KEY,
+ name: 'Total allocation count',
+ },
+ ];
+ case ProfileType.MIXED_HEAP_PROFILE:
+ return [
+ {
+ option: FlamegraphStateViewingOption.ALLOC_SPACE_MEMORY_ALLOCATED_KEY,
+ name: 'Total allocation size (malloc + java)',
+ },
+ {
+ option: FlamegraphStateViewingOption.OBJECTS_ALLOCATED_KEY,
+ name: 'Total allocation count (malloc + java)',
+ },
+ ];
+ default:
+ const exhaustiveCheck: never = profileType;
+ throw new Error(`Unhandled case: ${exhaustiveCheck}`);
}
}
@@ -112,7 +112,7 @@
}
export function expandCallsites(
- data: CallsiteInfo[], clickedCallsiteIndex: number): CallsiteInfo[] {
+ data: CallsiteInfo[], clickedCallsiteIndex: number): CallsiteInfo[] {
if (clickedCallsiteIndex === -1) return data;
const expandedCallsites: CallsiteInfo[] = [];
if (clickedCallsiteIndex >= data.length || clickedCallsiteIndex < -1) {
@@ -199,9 +199,9 @@
}
function getCallsitesParentHash(
- callsite: CallsiteInfo, map: Map<number, number>): number {
+ callsite: CallsiteInfo, map: Map<number, number>): number {
return map.has(callsite.parentId) ? +map.get(callsite.parentId)! :
- callsite.parentId;
+ callsite.parentId;
}
export function findRootSize(data: CallsiteInfo[]) {
let totalSize = 0;
diff --git a/ui/src/common/high_precision_time.ts b/ui/src/common/high_precision_time.ts
index a886e8a..4d4ce27 100644
--- a/ui/src/common/high_precision_time.ts
+++ b/ui/src/common/high_precision_time.ts
@@ -70,15 +70,15 @@
toTime(roundMode: RoundMode = 'floor'): time {
switch (roundMode) {
- case 'round':
- return Time.fromRaw(this.base + BigInt(Math.round(this.offset)));
- case 'floor':
- return Time.fromRaw(this.base);
- case 'ceil':
- return Time.fromRaw(this.base + BigInt(Math.ceil(this.offset)));
- default:
- const exhaustiveCheck: never = roundMode;
- throw new Error(`Unhandled roundMode case: ${exhaustiveCheck}`);
+ case 'round':
+ return Time.fromRaw(this.base + BigInt(Math.round(this.offset)));
+ case 'floor':
+ return Time.fromRaw(this.base);
+ case 'ceil':
+ return Time.fromRaw(this.base + BigInt(Math.ceil(this.offset)));
+ default:
+ const exhaustiveCheck: never = roundMode;
+ throw new Error(`Unhandled roundMode case: ${exhaustiveCheck}`);
}
}
@@ -96,7 +96,7 @@
add(other: HighPrecisionTime): HighPrecisionTime {
return new HighPrecisionTime(
- this.base + other.base, this.offset + other.offset);
+ this.base + other.base, this.offset + other.offset);
}
addNanos(nanos: number|bigint): HighPrecisionTime {
@@ -113,7 +113,7 @@
sub(other: HighPrecisionTime): HighPrecisionTime {
return new HighPrecisionTime(
- this.base - other.base, this.offset - other.offset);
+ this.base - other.base, this.offset - other.offset);
}
subTime(ts: time): HighPrecisionTime {
@@ -215,27 +215,27 @@
readonly end: HighPrecisionTime;
static readonly ZERO = new HighPrecisionTimeSpan(
- HighPrecisionTime.ZERO,
- HighPrecisionTime.ZERO,
+ HighPrecisionTime.ZERO,
+ HighPrecisionTime.ZERO,
);
constructor(start: time|HighPrecisionTime, end: time|HighPrecisionTime) {
this.start = (start instanceof HighPrecisionTime) ?
- start :
- HighPrecisionTime.fromTime(start);
+ start :
+ HighPrecisionTime.fromTime(start);
this.end = (end instanceof HighPrecisionTime) ?
- end :
- HighPrecisionTime.fromTime(end);
+ end :
+ HighPrecisionTime.fromTime(end);
assertTrue(
- this.start.lte(this.end),
- `TimeSpan start [${this.start}] cannot be greater than end [${
- this.end}]`);
+ this.start.lte(this.end),
+ `TimeSpan start [${this.start}] cannot be greater than end [${
+ this.end}]`);
}
static fromTime(start: time, end: time): HighPrecisionTimeSpan {
return new HighPrecisionTimeSpan(
- HighPrecisionTime.fromTime(start),
- HighPrecisionTime.fromTime(end),
+ HighPrecisionTime.fromTime(start),
+ HighPrecisionTime.fromTime(end),
);
}
@@ -274,8 +274,8 @@
// Move the start and end away from each other a certain amount
pad(time: HighPrecisionTime): Span<HighPrecisionTime> {
return new HighPrecisionTimeSpan(
- this.start.sub(time),
- this.end.add(time),
+ this.start.sub(time),
+ this.end.add(time),
);
}
}
diff --git a/ui/src/common/high_precision_time_unittest.ts b/ui/src/common/high_precision_time_unittest.ts
index b4bd7dd..e7e6624 100644
--- a/ui/src/common/high_precision_time_unittest.ts
+++ b/ui/src/common/high_precision_time_unittest.ts
@@ -269,7 +269,7 @@
it('throws when start is later than end', () => {
expect(() => new HPTimeInterval(mkTime('0.1'), mkTime('0'))).toThrow();
expect(() => new HPTimeInterval(mkTime('1124.0001'), mkTime('1124')))
- .toThrow();
+ .toThrow();
});
it('can calc duration', () => {
diff --git a/ui/src/common/internal_layout_utils.ts b/ui/src/common/internal_layout_utils.ts
index be6f296..6a42f30 100644
--- a/ui/src/common/internal_layout_utils.ts
+++ b/ui/src/common/internal_layout_utils.ts
@@ -36,7 +36,7 @@
string {
let sql = `SELECT ` + sqlArgs.columns.toString() +
`, internal_layout(${sqlArgs.ts}, ${sqlArgs.dur}) OVER (ORDER BY ${
- sqlArgs.ts}` +
+ sqlArgs.ts}` +
' ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW) AS depth' +
' FROM ' + sqlArgs.sourceTable;
if (sqlArgs.whereClause !== undefined) {
diff --git a/ui/src/common/metatracing.ts b/ui/src/common/metatracing.ts
index 8ef4a34..bc0c4eb 100644
--- a/ui/src/common/metatracing.ts
+++ b/ui/src/common/metatracing.ts
@@ -131,7 +131,7 @@
}
export function traceEvent<T>(
- name: string, event: () => T, params?: TraceEventParams): T {
+ name: string, event: () => T, params?: TraceEventParams): T {
const scope = traceEventBegin(name, params);
try {
const result = event();
@@ -142,7 +142,7 @@
}
export function traceEventBegin(
- eventName: string, params?: TraceEventParams): TraceEventScope {
+ eventName: string, params?: TraceEventParams): TraceEventScope {
return {
eventName,
startNs: now(),
@@ -167,7 +167,7 @@
// Flatten arbitrary values so they can be used as args in traceEvent() et al.
export function flattenArgs(
- input: unknown, parentKey = ''): {[key: string]: string} {
+ input: unknown, parentKey = ''): {[key: string]: string} {
if (typeof input !== 'object' || input === null) {
return {[parentKey]: String(input)};
}
diff --git a/ui/src/common/plugins.ts b/ui/src/common/plugins.ts
index 6d451c5..d9037c6 100644
--- a/ui/src/common/plugins.ts
+++ b/ui/src/common/plugins.ts
@@ -170,7 +170,7 @@
const tabMan = globals.tabManager;
tabMan.registerCurrentSelectionSection(section);
this.trash.addCallback(
- () => tabMan.unregisterCurrentSelectionSection(section));
+ () => tabMan.unregisterCurrentSelectionSection(section));
}
get sidebar() {
@@ -184,13 +184,13 @@
showTab(uri: string):
void {
- globals.dispatch(Actions.showTab({uri}));
- },
+ globals.dispatch(Actions.showTab({uri}));
+ },
hideTab(uri: string):
void {
- globals.dispatch(Actions.hideTab({uri}));
- },
+ globals.dispatch(Actions.hideTab({uri}));
+ },
};
get pluginId(): string {
@@ -214,8 +214,8 @@
removeTrack(key: string):
void {
- globals.dispatch(Actions.removeTracks({trackKeys: [key]}));
- },
+ globals.dispatch(Actions.removeTracks({trackKeys: [key]}));
+ },
pinTrack(key: string) {
if (!isPinned(key)) {
@@ -259,32 +259,32 @@
removeTracksByPredicate(predicate: TrackPredicate) {
const trackKeysToRemove = Object.values(globals.state.tracks)
- .filter((track) => {
- const tags = {
- name: track.name,
- };
- return predicate(tags);
- })
- .map((trackState) => trackState.key);
+ .filter((track) => {
+ const tags = {
+ name: track.name,
+ };
+ return predicate(tags);
+ })
+ .map((trackState) => trackState.key);
globals.dispatch(Actions.removeTracks({trackKeys: trackKeysToRemove}));
},
get tracks():
TrackRef[] {
- return Object.values(globals.state.tracks).map((trackState) => {
- return {
- displayName: trackState.name,
- uri: trackState.uri,
- params: trackState.params,
- };
- });
- },
+ return Object.values(globals.state.tracks).map((trackState) => {
+ return {
+ displayName: trackState.name,
+ uri: trackState.uri,
+ params: trackState.params,
+ };
+ });
+ },
panToTimestamp(ts: time):
void {
- globals.panToTimestamp(ts);
- },
+ globals.panToTimestamp(ts);
+ },
};
dispose(): void {
@@ -437,18 +437,18 @@
}
private async doPluginTraceLoad(
- pluginDetails: PluginDetails, engine: Engine,
- pluginId: string): Promise<void> {
+ pluginDetails: PluginDetails, engine: Engine,
+ pluginId: string): Promise<void> {
const {plugin, context} = pluginDetails;
const engineProxy = engine.getProxy(pluginId);
const traceCtx = new PluginContextTraceImpl(
- context,
- engineProxy,
- this.trackRegistry,
- this.defaultTracks,
- this.commandRegistry);
+ context,
+ engineProxy,
+ this.trackRegistry,
+ this.defaultTracks,
+ this.commandRegistry);
pluginDetails.traceContext = traceCtx;
const result = plugin.onTraceLoad?.(traceCtx);
diff --git a/ui/src/common/queries.ts b/ui/src/common/queries.ts
index f5f5cb9..cda6153 100644
--- a/ui/src/common/queries.ts
+++ b/ui/src/common/queries.ts
@@ -35,7 +35,7 @@
}
export async function runQuery(
- sqlQuery: string, engine: EngineProxy, params?: QueryRunParams):
+ sqlQuery: string, engine: EngineProxy, params?: QueryRunParams):
Promise<QueryResponse> {
const startMs = performance.now();
const queryRes = engine.query(sqlQuery);
diff --git a/ui/src/common/recordingV2/adb_connection_impl.ts b/ui/src/common/recordingV2/adb_connection_impl.ts
index 9fae926..38b5c95 100644
--- a/ui/src/common/recordingV2/adb_connection_impl.ts
+++ b/ui/src/common/recordingV2/adb_connection_impl.ts
@@ -60,7 +60,7 @@
});
adbStream.addOnStreamCloseCallback(() => {
onStreamingEnded.resolve(
- textDecoder.decode(commandOutput.toArrayBuffer()));
+ textDecoder.decode(commandOutput.toArrayBuffer()));
});
return onStreamingEnded;
}
diff --git a/ui/src/common/recordingV2/adb_connection_over_websocket.ts b/ui/src/common/recordingV2/adb_connection_over_websocket.ts
index 7287b65..d169124 100644
--- a/ui/src/common/recordingV2/adb_connection_over_websocket.ts
+++ b/ui/src/common/recordingV2/adb_connection_over_websocket.ts
@@ -53,10 +53,10 @@
protected async openStream(destination: string):
Promise<AdbOverWebsocketStream> {
return AdbOverWebsocketStream.create(
- this.websocketUrl,
- destination,
- this.deviceSerialNumber,
- this.closeStream.bind(this));
+ this.websocketUrl,
+ destination,
+ this.deviceSerialNumber,
+ this.closeStream.bind(this));
}
// The disconnection for AdbConnectionOverWebsocket is synchronous, but this
@@ -103,7 +103,7 @@
private onStreamCloseCallbacks: OnStreamCloseCallback[] = [];
private constructor(
- websocketUrl: string, destination: string, deviceSerialNumber: string,
+ websocketUrl: string, destination: string, deviceSerialNumber: string,
private removeFromConnection: (stream: AdbOverWebsocketStream) => void) {
this.websocket = new WebSocket(websocketUrl);
@@ -170,7 +170,7 @@
private async onOpen(deviceSerialNumber: string): Promise<void> {
this.websocket.send(
- buildAbdWebsocketCommand(`host:transport:${deviceSerialNumber}`));
+ buildAbdWebsocketCommand(`host:transport:${deviceSerialNumber}`));
}
private async onMessage(destination: string, evt: MessageEvent):
@@ -187,11 +187,11 @@
this.commandSentSignal.resolve(this);
} else if (prefix === 'FAIL' && txt.includes('device unauthorized')) {
this.commandSentSignal.reject(
- new RecordingError(ALLOW_USB_DEBUGGING));
+ new RecordingError(ALLOW_USB_DEBUGGING));
this.close();
} else {
this.commandSentSignal.reject(
- new RecordingError(WEBSOCKET_UNABLE_TO_CONNECT));
+ new RecordingError(WEBSOCKET_UNABLE_TO_CONNECT));
this.close();
}
} else {
@@ -215,14 +215,14 @@
}
static create(
- websocketUrl: string, destination: string, deviceSerialNumber: string,
- removeFromConnection: (stream: AdbOverWebsocketStream) => void):
+ websocketUrl: string, destination: string, deviceSerialNumber: string,
+ removeFromConnection: (stream: AdbOverWebsocketStream) => void):
Promise<AdbOverWebsocketStream> {
return (new AdbOverWebsocketStream(
- websocketUrl,
- destination,
- deviceSerialNumber,
- removeFromConnection))
- .commandSentSignal;
+ websocketUrl,
+ destination,
+ deviceSerialNumber,
+ removeFromConnection))
+ .commandSentSignal;
}
}
diff --git a/ui/src/common/recordingV2/adb_connection_over_webusb.ts b/ui/src/common/recordingV2/adb_connection_over_webusb.ts
index bd42c52..5b22154 100644
--- a/ui/src/common/recordingV2/adb_connection_over_webusb.ts
+++ b/ui/src/common/recordingV2/adb_connection_over_webusb.ts
@@ -174,12 +174,12 @@
async streamClose(stream: AdbOverWebusbStream): Promise<void> {
const otherStreamsQueue = this.writeQueue.filter(
- (queueElement) => queueElement.localStreamId !== stream.localStreamId);
+ (queueElement) => queueElement.localStreamId !== stream.localStreamId);
const droppedPacketCount =
this.writeQueue.length - otherStreamsQueue.length;
if (droppedPacketCount > 0) {
console.debug(`Dropping ${
- droppedPacketCount} queued messages due to stream closing.`);
+ droppedPacketCount} queued messages due to stream closing.`);
this.writeQueue = otherStreamsQueue;
}
@@ -224,8 +224,8 @@
// We have already disconnected so there is no need to pass a callback
// which clears resources or notifies the user into 'wrapRecordingError'.
await wrapRecordingError(
- this.device.releaseInterface(assertExists(this.usbInterfaceNumber)),
- () => {});
+ this.device.releaseInterface(assertExists(this.usbInterfaceNumber)),
+ () => {});
this.usbInterfaceNumber = undefined;
}
@@ -243,7 +243,7 @@
this.connectingStreams.clear();
for (const [id, stream] of streamsToDelete) {
stream.reject(
- `Failed to open stream with id ${id} because adb was disconnected.`);
+ `Failed to open stream with id ${id} because adb was disconnected.`);
}
if (this.state === AdbState.DISCONNECTED) {
@@ -267,7 +267,7 @@
}
private findEndpointNumber(
- endpoints: USBEndpoint[], direction: 'out'|'in', type = 'bulk'): number {
+ endpoints: USBEndpoint[], direction: 'out'|'in', type = 'bulk'): number {
const ep =
endpoints.find((ep) => ep.type === type && ep.direction === direction);
@@ -281,7 +281,7 @@
this.isUsbReceiveLoopRunning = true;
for (; this.state !== AdbState.DISCONNECTED;) {
const res = await this.wrapUsb(
- this.device.transferIn(this.usbReadEndpoint, ADB_MSG_SIZE));
+ this.device.transferIn(this.usbReadEndpoint, ADB_MSG_SIZE));
if (!res) {
this.isUsbReceiveLoopRunning = false;
return;
@@ -290,14 +290,14 @@
// Log and ignore messages with invalid status. These can occur
// when the device is connected/disconnected repeatedly.
console.error(
- `Received message with unexpected status '${res.status}'`);
+ `Received message with unexpected status '${res.status}'`);
continue;
}
const msg = AdbMsg.decodeHeader(res.data!);
if (msg.dataLen > 0) {
const resp = await this.wrapUsb(
- this.device.transferIn(this.usbReadEndpoint, msg.dataLen));
+ this.device.transferIn(this.usbReadEndpoint, msg.dataLen));
if (!resp) {
this.isUsbReceiveLoopRunning = false;
return;
@@ -319,11 +319,11 @@
!this.getStreamForLocalStreamId(msg.arg1)) {
continue;
} else if (
- msg.cmd === 'OKAY' && !this.connectingStreams.has(msg.arg1) &&
+ msg.cmd === 'OKAY' && !this.connectingStreams.has(msg.arg1) &&
!this.getStreamForLocalStreamId(msg.arg1)) {
continue;
} else if (
- msg.cmd === 'AUTH' && msg.arg0 === AuthCmd.TOKEN &&
+ msg.cmd === 'AUTH' && msg.arg0 === AuthCmd.TOKEN &&
this.state === AdbState.AUTH_WITH_PUBLIC) {
// If we start a recording but fail because of a faulty physical
// connection to the device, when we start a new recording, we will
@@ -344,27 +344,27 @@
// the device.
this.state = AdbState.AUTH_WITH_PRIVATE;
await this.sendMessage(
- 'AUTH', AuthCmd.SIGNATURE, 0, key.sign(msg.data));
+ 'AUTH', AuthCmd.SIGNATURE, 0, key.sign(msg.data));
} else {
// If our signature with the private key is not accepted by the
// device, we generate a new keypair and send the public key.
this.state = AdbState.AUTH_WITH_PUBLIC;
await this.sendMessage(
- 'AUTH', AuthCmd.RSAPUBLICKEY, 0, key.getPublicKey() + '\0');
+ 'AUTH', AuthCmd.RSAPUBLICKEY, 0, key.getPublicKey() + '\0');
this.onStatus(ALLOW_USB_DEBUGGING);
await maybeStoreKey(key);
}
} else if (msg.cmd === 'CNXN') {
assertTrue(
- [AdbState.AUTH_WITH_PRIVATE, AdbState.AUTH_WITH_PUBLIC].includes(
- this.state));
+ [AdbState.AUTH_WITH_PRIVATE, AdbState.AUTH_WITH_PUBLIC].includes(
+ this.state));
this.state = AdbState.CONNECTED;
this.maxPayload = msg.arg1;
const deviceVersion = msg.arg0;
if (![VERSION_WITH_CHECKSUM, VERSION_NO_CHECKSUM].includes(
- deviceVersion)) {
+ deviceVersion)) {
throw new RecordingError(`Version ${msg.arg0} not supported.`);
}
this.useChecksum = deviceVersion === VERSION_WITH_CHECKSUM;
@@ -373,7 +373,7 @@
// This will resolve the promises awaited by
// "ensureConnectionEstablished".
this.pendingConnPromises.forEach(
- (connPromise) => connPromise.resolve());
+ (connPromise) => connPromise.resolve());
this.pendingConnPromises = [];
} else if (msg.cmd === 'OKAY') {
if (this.connectingStreams.has(msg.arg1)) {
@@ -401,12 +401,12 @@
} else if (msg.cmd === 'WRTE') {
const stream = assertExists(this.getStreamForLocalStreamId(msg.arg1));
await this.sendMessage(
- 'OKAY', stream.localStreamId, stream.remoteStreamId);
+ 'OKAY', stream.localStreamId, stream.remoteStreamId);
stream.signalStreamData(msg.data);
} else {
this.isUsbReceiveLoopRunning = false;
throw new RecordingError(
- `Unexpected message ${msg} in state ${this.state}`);
+ `Unexpected message ${msg} in state ${this.state}`);
}
}
this.isUsbReceiveLoopRunning = false;
@@ -427,22 +427,22 @@
// resulting in something like [header1] [header2] [data1] [data2];
// In this way we are waiting both promises to be resolved before continuing.
private async sendMessage(
- cmd: CmdType, arg0: number, arg1: number,
- data?: Uint8Array|string): Promise<void> {
+ cmd: CmdType, arg0: number, arg1: number,
+ data?: Uint8Array|string): Promise<void> {
const msg =
AdbMsg.create({cmd, arg0, arg1, data, useChecksum: this.useChecksum});
const msgHeader = msg.encodeHeader();
const msgData = msg.data;
assertTrue(
- msgHeader.length <= this.maxPayload &&
+ msgHeader.length <= this.maxPayload &&
msgData.length <= this.maxPayload);
const sendPromises = [this.wrapUsb(
- this.device.transferOut(this.usbWriteEpEndpoint, msgHeader.buffer))];
+ this.device.transferOut(this.usbWriteEpEndpoint, msgHeader.buffer))];
if (msg.data.length > 0) {
sendPromises.push(this.wrapUsb(
- this.device.transferOut(this.usbWriteEpEndpoint, msgData.buffer)));
+ this.device.transferOut(this.usbWriteEpEndpoint, msgData.buffer)));
}
await Promise.all(sendPromises);
}
@@ -465,8 +465,8 @@
remoteStreamId = -1;
constructor(
- adb: AdbConnectionOverWebusb, localStreamId: number,
- remoteStreamId: number) {
+ adb: AdbConnectionOverWebusb, localStreamId: number,
+ remoteStreamId: number) {
this.adbConnection = adb;
this.localStreamId = localStreamId;
this.remoteStreamId = remoteStreamId;
@@ -531,8 +531,8 @@
readonly useChecksum: boolean;
constructor(
- cmd: CmdType, arg0: number, arg1: number, dataLen: number,
- dataChecksum: number, useChecksum = false) {
+ cmd: CmdType, arg0: number, arg1: number, dataLen: number,
+ dataChecksum: number, useChecksum = false) {
assertTrue(cmd.length === 4);
this.cmd = cmd;
this.arg0 = arg0;
diff --git a/ui/src/common/recordingV2/adb_file_handler.ts b/ui/src/common/recordingV2/adb_file_handler.ts
index ec1dd56..a5ee6cc 100644
--- a/ui/src/common/recordingV2/adb_file_handler.ts
+++ b/ui/src/common/recordingV2/adb_file_handler.ts
@@ -52,7 +52,7 @@
const transferFinished = defer<void>();
this.byteStream.addOnStreamDataCallback(
- (data) => this.onStreamData(data, transferFinished));
+ (data) => this.onStreamData(data, transferFinished));
this.byteStream.addOnStreamCloseCallback(() => this.isPushOngoing = false);
const sendMessage = new ArrayBufferBuilder();
@@ -82,7 +82,7 @@
// but the date is not formatted correctly):
// 'OKAYFAIL\npath too long'
transferFinished.reject(
- new RecordingError(`${BINARY_PUSH_FAILURE}: ${response}`));
+ new RecordingError(`${BINARY_PUSH_FAILURE}: ${response}`));
} else if (textDecoder.decode(data).substring(0, 4) === 'OKAY') {
// In case of success, the server responds to the last request with
// 'OKAY'.
@@ -94,7 +94,7 @@
private async sendNextDataChunk(binary: Uint8Array): Promise<boolean> {
const endPosition = Math.min(
- this.sentByteCount + MAX_SYNC_SEND_CHUNK_SIZE, binary.byteLength);
+ this.sentByteCount + MAX_SYNC_SEND_CHUNK_SIZE, binary.byteLength);
const chunk = await binary.slice(this.sentByteCount, endPosition);
// The file is sent in chunks. Each chunk is prefixed with "DATA" and the
// chunk length. This is repeated until the entire file is transferred. Each
@@ -104,7 +104,7 @@
dataMessage.append('DATA');
dataMessage.append(chunkLength);
dataMessage.append(
- new Uint8Array(chunk.buffer, chunk.byteOffset, chunkLength));
+ new Uint8Array(chunk.buffer, chunk.byteOffset, chunkLength));
this.sentByteCount += chunkLength;
const isDone = this.sentByteCount === binary.byteLength;
diff --git a/ui/src/common/recordingV2/auth/adb_auth.ts b/ui/src/common/recordingV2/auth/adb_auth.ts
index 71f7d19..c704ec5 100644
--- a/ui/src/common/recordingV2/auth/adb_auth.ts
+++ b/ui/src/common/recordingV2/auth/adb_auth.ts
@@ -105,9 +105,9 @@
static async GenerateNewKeyPair(): Promise<AdbKey> {
// Construct a new CryptoKeyPair and keep its private key in JWB format.
const keyPair = await crypto.subtle.generateKey(
- ADB_WEB_CRYPTO_ALGORITHM,
- ADB_WEB_CRYPTO_EXPORTABLE,
- ADB_WEB_CRYPTO_OPERATIONS);
+ ADB_WEB_CRYPTO_ALGORITHM,
+ ADB_WEB_CRYPTO_EXPORTABLE,
+ ADB_WEB_CRYPTO_OPERATIONS);
const jwkPrivate = await crypto.subtle.exportKey('jwk', keyPair.privateKey);
if (!isValidJsonWebKey(jwkPrivate)) {
throw new RecordingError('Could not generate a valid private key.');
@@ -130,14 +130,14 @@
sign(token: Uint8Array): Uint8Array {
const rsaKey = new RSAKey();
rsaKey.setPrivateEx(
- hexEncode(base64Decode(this.jwkPrivate.n)),
- hexEncode(base64Decode(this.jwkPrivate.e)),
- hexEncode(base64Decode(this.jwkPrivate.d)),
- hexEncode(base64Decode(this.jwkPrivate.p)),
- hexEncode(base64Decode(this.jwkPrivate.q)),
- hexEncode(base64Decode(this.jwkPrivate.dp)),
- hexEncode(base64Decode(this.jwkPrivate.dq)),
- hexEncode(base64Decode(this.jwkPrivate.qi)));
+ hexEncode(base64Decode(this.jwkPrivate.n)),
+ hexEncode(base64Decode(this.jwkPrivate.e)),
+ hexEncode(base64Decode(this.jwkPrivate.d)),
+ hexEncode(base64Decode(this.jwkPrivate.p)),
+ hexEncode(base64Decode(this.jwkPrivate.q)),
+ hexEncode(base64Decode(this.jwkPrivate.dp)),
+ hexEncode(base64Decode(this.jwkPrivate.dq)),
+ hexEncode(base64Decode(this.jwkPrivate.qi)));
assertTrue(rsaKey.n.bitLength() === MODULUS_SIZE_BITS);
// Message Layout (size equals that of the key modulus):
@@ -153,8 +153,8 @@
// add the ASN.1 prefix
message.set(
- SIGNING_ASN1_PREFIX,
- message.length - SIGNING_ASN1_PREFIX.length - token.length);
+ SIGNING_ASN1_PREFIX,
+ message.length - SIGNING_ASN1_PREFIX.length - token.length);
// then the actual token at the end
message.set(token, message.length - token.length);
@@ -169,8 +169,8 @@
getPublicKey(): string {
const rsaKey = new RSAKey();
rsaKey.setPublic(
- hexEncode(base64Decode((assertExists(this.jwkPrivate.n)))),
- hexEncode(base64Decode((assertExists(this.jwkPrivate.e)))));
+ hexEncode(base64Decode((assertExists(this.jwkPrivate.n)))),
+ hexEncode(base64Decode((assertExists(this.jwkPrivate.e)))));
const n0inv = R32.subtract(rsaKey.n.modInverse(R32)).intValue();
const r = BigInteger.ONE.shiftLeft(1).pow(MODULUS_SIZE_BITS);
@@ -183,11 +183,11 @@
const dvU8 = new Uint8Array(dv.buffer, dv.byteOffset, dv.byteLength);
dvU8.set(
- bigIntToFixedByteArray(rsaKey.n, MODULUS_SIZE).reverse(),
- 2 * WORD_SIZE);
+ bigIntToFixedByteArray(rsaKey.n, MODULUS_SIZE).reverse(),
+ 2 * WORD_SIZE);
dvU8.set(
- bigIntToFixedByteArray(rr, MODULUS_SIZE).reverse(),
- 2 * WORD_SIZE + MODULUS_SIZE);
+ bigIntToFixedByteArray(rr, MODULUS_SIZE).reverse(),
+ 2 * WORD_SIZE + MODULUS_SIZE);
dv.setUint32(2 * WORD_SIZE + 2 * MODULUS_SIZE, rsaKey.e, true);
return base64Encode(dvU8) + ' ui.perfetto.dev';
diff --git a/ui/src/common/recordingV2/chrome_traced_tracing_session.ts b/ui/src/common/recordingV2/chrome_traced_tracing_session.ts
index 186ce15..dea0d2d 100644
--- a/ui/src/common/recordingV2/chrome_traced_tracing_session.ts
+++ b/ui/src/common/recordingV2/chrome_traced_tracing_session.ts
@@ -75,14 +75,14 @@
if (!this.isPortConnected) return;
const duration = config.durationMs;
this.tracingSessionListener.onStatus(`Recording in progress${
- duration ? ' for ' + duration.toString() + ' ms' : ''}...`);
+ duration ? ' for ' + duration.toString() + ' ms' : ''}...`);
const enableTracingRequest = new EnableTracingRequest();
enableTracingRequest.traceConfig = config;
const enableTracingRequestProto = binaryEncode(
- EnableTracingRequest.encode(enableTracingRequest).finish());
+ EnableTracingRequest.encode(enableTracingRequest).finish());
this.chromePort.postMessage(
- {method: 'EnableTracing', requestData: enableTracingRequestProto});
+ {method: 'EnableTracing', requestData: enableTracingRequestProto});
}
// The 'cancel' method will end the tracing session and will NOT return the
@@ -105,7 +105,7 @@
getCategories(): Promise<string[]> {
if (!this.isPortConnected) {
throw new RecordingError(
- 'Attempting to get categories from a ' +
+ 'Attempting to get categories from a ' +
'disconnected tracing session.');
}
if (this.pendingGetCategoriesMessage) {
@@ -203,7 +203,7 @@
}
} else if (isGetCategoriesResponse(message)) {
assertExists(this.pendingGetCategoriesMessage)
- .resolve(message.categories);
+ .resolve(message.categories);
this.pendingGetCategoriesMessage = undefined;
} else if (isEnableTracingResponse(message)) {
// Once the service notifies us that a tracing session is enabled,
@@ -213,7 +213,7 @@
const maybePendingStatsMessage = this.pendingStatsMessages.shift();
if (maybePendingStatsMessage) {
maybePendingStatsMessage.resolve(
- message?.traceStats?.bufferStats || []);
+ message?.traceStats?.bufferStats || []);
}
} else if (isFreeBuffersResponse(message)) {
// No action required. If we successfully read a whole trace,
diff --git a/ui/src/common/recordingV2/recording_config_utils.ts b/ui/src/common/recordingV2/recording_config_utils.ts
index bd88f1f..c204872 100644
--- a/ui/src/common/recordingV2/recording_config_utils.ts
+++ b/ui/src/common/recordingV2/recording_config_utils.ts
@@ -95,7 +95,7 @@
}
export function genTraceConfig(
- uiCfg: RecordConfig, targetInfo: TargetInfo): TraceConfig {
+ uiCfg: RecordConfig, targetInfo: TargetInfo): TraceConfig {
const isAndroid = targetInfo.targetType === 'ANDROID';
const androidApiLevel = isAndroid ? targetInfo.androidApiLevel : undefined;
const protoCfg = new TraceConfig();
@@ -141,7 +141,7 @@
const chromeCategories = new Set<string>();
uiCfg.chromeCategoriesSelected.forEach((it) => chromeCategories.add(it));
uiCfg.chromeHighOverheadCategoriesSelected.forEach(
- (it) => chromeCategories.add(it));
+ (it) => chromeCategories.add(it));
let procThreadAssociationPolling = false;
let procThreadAssociationFtrace = false;
@@ -784,7 +784,7 @@
yield ' '.repeat(indent) + '}';
} else {
throw new Error(`Record proto entry "${entry}" with unexpected type ${
- typeof entry}`);
+ typeof entry}`);
}
yield '\n';
}
diff --git a/ui/src/common/recordingV2/recording_error_handling.ts b/ui/src/common/recordingV2/recording_error_handling.ts
index 6abdfdb..f058917 100644
--- a/ui/src/common/recordingV2/recording_error_handling.ts
+++ b/ui/src/common/recordingV2/recording_error_handling.ts
@@ -57,7 +57,7 @@
// b) When the user starts a tracing session, but cancels it before they
// authorize the session on the device.
export async function wrapRecordingError<T>(
- promise: Promise<T>, onFailure: OnMessageCallback): Promise<T|undefined> {
+ promise: Promise<T>, onFailure: OnMessageCallback): Promise<T|undefined> {
try {
return await promise;
} catch (e) {
@@ -74,26 +74,26 @@
// can be handled in a central location.
export function showRecordingModal(message: string): void {
if ([
- 'Unable to claim interface.',
- 'The specified endpoint is not part of a claimed and selected ' +
+ 'Unable to claim interface.',
+ 'The specified endpoint is not part of a claimed and selected ' +
'alternate interface.',
- // thrown when calling the 'reset' method on a WebUSB device.
- 'Unable to reset the device.',
- ].some((partOfMessage) => message.includes(partOfMessage))) {
+ // thrown when calling the 'reset' method on a WebUSB device.
+ 'Unable to reset the device.',
+ ].some((partOfMessage) => message.includes(partOfMessage))) {
showWebUSBErrorV2();
} else if (
- [
- 'A transfer error has occurred.',
- 'The device was disconnected.',
- 'The transfer was cancelled.',
- ].some((partOfMessage) => message.includes(partOfMessage)) ||
+ [
+ 'A transfer error has occurred.',
+ 'The device was disconnected.',
+ 'The transfer was cancelled.',
+ ].some((partOfMessage) => message.includes(partOfMessage)) ||
isDeviceDisconnectedError(message)) {
showConnectionLostError();
} else if (message === ALLOW_USB_DEBUGGING) {
showAllowUSBDebugging();
} else if (isMessageComposedOf(
- message,
- [BINARY_PUSH_FAILURE, BINARY_PUSH_UNKNOWN_RESPONSE])) {
+ message,
+ [BINARY_PUSH_FAILURE, BINARY_PUSH_UNKNOWN_RESPONSE])) {
showFailedToPushBinary(message.substring(message.indexOf(':') + 1));
} else if (message === NO_DEVICE_SELECTED) {
showNoDeviceSelected();
@@ -102,11 +102,11 @@
} else if (message === EXTENSION_NOT_INSTALLED) {
showExtensionNotInstalled();
} else if (isMessageComposedOf(message, [
- PARSING_UNKNWON_REQUEST_ID,
- PARSING_UNABLE_TO_DECODE_METHOD,
- PARSING_UNRECOGNIZED_PORT,
- PARSING_UNRECOGNIZED_MESSAGE,
- ])) {
+ PARSING_UNKNWON_REQUEST_ID,
+ PARSING_UNABLE_TO_DECODE_METHOD,
+ PARSING_UNRECOGNIZED_PORT,
+ PARSING_UNRECOGNIZED_MESSAGE,
+ ])) {
showIssueParsingTheTracedResponse(message);
} else {
throw new Error(`${message}`);
diff --git a/ui/src/common/recordingV2/recording_page_controller.ts b/ui/src/common/recordingV2/recording_page_controller.ts
index 6ef0b0d..3069319 100644
--- a/ui/src/common/recordingV2/recording_page_controller.ts
+++ b/ui/src/common/recordingV2/recording_page_controller.ts
@@ -90,12 +90,12 @@
// influence the UI.
private tracingSessionListener: TracingSessionListener = {
onTraceData: (trace: Uint8Array) =>
- this.controller.maybeOnTraceData(this, trace),
+ this.controller.maybeOnTraceData(this, trace),
onStatus: (message) => this.controller.maybeOnStatus(this, message),
onDisconnect: (errorMessage?: string) =>
- this.controller.maybeOnDisconnect(this, errorMessage),
+ this.controller.maybeOnDisconnect(this, errorMessage),
onError: (errorMessage: string) =>
- this.controller.maybeOnError(this, errorMessage),
+ this.controller.maybeOnError(this, errorMessage),
};
private target: RecordingTargetV2;
@@ -111,7 +111,7 @@
const createSession = async () => {
try {
this.controller.maybeSetState(
- this, RecordingState.AUTH_P2, stateGeneratioNr);
+ this, RecordingState.AUTH_P2, stateGeneratioNr);
stateGeneratioNr += 1;
const session =
@@ -126,7 +126,7 @@
this.tracingSession = session;
this.controller.maybeSetState(
- this, RecordingState.RECORDING, stateGeneratioNr);
+ this, RecordingState.RECORDING, stateGeneratioNr);
// When the session is resolved, the traceConfig has been instantiated.
this.tracingSession.start(assertExists(traceConfig));
} catch (e) {
@@ -140,10 +140,10 @@
// If we need to reset the connection to be able to connect, we ask
// the user if they want to reset the connection.
this.controller.maybeSetState(
- this, RecordingState.ASK_TO_FORCE_P2, stateGeneratioNr);
+ this, RecordingState.ASK_TO_FORCE_P2, stateGeneratioNr);
stateGeneratioNr += 1;
couldNotClaimInterface(
- createSession, () => this.controller.maybeClearRecordingState(this));
+ createSession, () => this.controller.maybeClearRecordingState(this));
}
}
@@ -152,11 +152,11 @@
const createSession = async () => {
try {
this.controller.maybeSetState(
- this, RecordingState.AUTH_P1, stateGeneratioNr);
+ this, RecordingState.AUTH_P1, stateGeneratioNr);
stateGeneratioNr += 1;
await this.target.fetchTargetInfo(this.tracingSessionListener);
this.controller.maybeSetState(
- this, RecordingState.TARGET_INFO_DISPLAYED, stateGeneratioNr);
+ this, RecordingState.TARGET_INFO_DISPLAYED, stateGeneratioNr);
} catch (e) {
this.tracingSessionListener.onError(e.message);
}
@@ -168,12 +168,12 @@
// If we need to reset the connection to be able to connect, we ask
// the user if they want to reset the connection.
this.controller.maybeSetState(
- this, RecordingState.ASK_TO_FORCE_P1, stateGeneratioNr);
+ this, RecordingState.ASK_TO_FORCE_P1, stateGeneratioNr);
stateGeneratioNr += 1;
couldNotClaimInterface(
- createSession,
- () => this.controller.maybeSetState(
- this, RecordingState.TARGET_SELECTED, stateGeneratioNr));
+ createSession,
+ () => this.controller.maybeSetState(
+ this, RecordingState.TARGET_SELECTED, stateGeneratioNr));
}
}
@@ -201,7 +201,7 @@
if (this.tracingSession) {
this.tracingSession.stop();
this.controller.maybeSetState(
- this, RecordingState.WAITING_FOR_TRACE_DISPLAY, stateGeneratioNr);
+ this, RecordingState.WAITING_FOR_TRACE_DISPLAY, stateGeneratioNr);
} else {
// In some cases, the tracingSession may not be available to the
// TracingSessionWrapper when the user stops it.
@@ -257,8 +257,8 @@
}
maybeSetState(
- tracingSessionWrapper: TracingSessionWrapper, state: RecordingState,
- stateGeneration: number): void {
+ tracingSessionWrapper: TracingSessionWrapper, state: RecordingState,
+ stateGeneration: number): void {
if (this.tracingSessionWrapper !== tracingSessionWrapper) {
return;
}
@@ -277,7 +277,7 @@
}
maybeOnTraceData(
- tracingSessionWrapper: TracingSessionWrapper, trace: Uint8Array) {
+ tracingSessionWrapper: TracingSessionWrapper, trace: Uint8Array) {
if (this.tracingSessionWrapper !== tracingSessionWrapper) {
return;
}
@@ -305,7 +305,7 @@
}
maybeOnDisconnect(
- tracingSessionWrapper: TracingSessionWrapper, errorMessage?: string) {
+ tracingSessionWrapper: TracingSessionWrapper, errorMessage?: string) {
if (this.tracingSessionWrapper !== tracingSessionWrapper) {
return;
}
@@ -317,7 +317,7 @@
}
maybeOnError(
- tracingSessionWrapper: TracingSessionWrapper, errorMessage: string) {
+ tracingSessionWrapper: TracingSessionWrapper, errorMessage: string) {
if (this.tracingSessionWrapper !== tracingSessionWrapper) {
return;
}
@@ -341,7 +341,7 @@
selectTarget(selectedTarget?: RecordingTargetV2) {
assertTrue(
- RecordingState.NO_TARGET <= this.state &&
+ RecordingState.NO_TARGET <= this.state &&
this.state < RecordingState.RECORDING);
// If the selected target exists and is the same as the previous one, we
// don't need to do anything.
@@ -368,7 +368,7 @@
try {
const target =
await targetFactoryRegistry.get(ANDROID_WEBUSB_TARGET_FACTORY)
- .connectNewTarget();
+ .connectNewTarget();
this.selectTarget(target);
} catch (e) {
if (e instanceof RecordingError) {
@@ -381,7 +381,7 @@
onTargetSelection(targetName: string): void {
assertTrue(
- RecordingState.NO_TARGET <= this.state &&
+ RecordingState.NO_TARGET <= this.state &&
this.state < RecordingState.RECORDING);
const allTargets = targetFactoryRegistry.listTargets();
this.selectTarget(allTargets.find((t) => t.getInfo().name === targetName));
@@ -395,7 +395,7 @@
const target = this.getTarget();
const targetInfo = target.getInfo();
globals.logging.logEvent(
- 'Record Trace', `Record trace (${targetInfo.targetType})`);
+ 'Record Trace', `Record trace (${targetInfo.targetType})`);
const traceConfig = genTraceConfig(globals.state.recordConfig, targetInfo);
this.tracingSessionWrapper = this.createTracingSessionWrapper(target);
@@ -404,7 +404,7 @@
onCancel() {
assertTrue(
- RecordingState.AUTH_P2 <= this.state &&
+ RecordingState.AUTH_P2 <= this.state &&
this.state <= RecordingState.RECORDING);
// The 'Cancel' button will only be shown after a `tracingSessionWrapper`
// is created.
@@ -413,7 +413,7 @@
onStop() {
assertTrue(
- RecordingState.AUTH_P2 <= this.state &&
+ RecordingState.AUTH_P2 <= this.state &&
this.state <= RecordingState.RECORDING);
// The 'Stop' button will only be shown after a `tracingSessionWrapper`
// is created.
@@ -463,7 +463,7 @@
targetFactoryRegistry.get(HOST_OS_TARGET_FACTORY) as
HostOsTargetFactory;
websocketTargetFactory.tryEstablishWebsocket(
- DEFAULT_TRACED_WEBSOCKET_URL);
+ DEFAULT_TRACED_WEBSOCKET_URL);
}
}
@@ -517,7 +517,7 @@
private getTracingSessionWrapper(): TracingSessionWrapper {
assertTrue(
- RecordingState.ASK_TO_FORCE_P2 <= this.state &&
+ RecordingState.ASK_TO_FORCE_P2 <= this.state &&
this.state <= RecordingState.RECORDING);
return assertExists(this.tracingSessionWrapper);
}
diff --git a/ui/src/common/recordingV2/target_factories/android_websocket_target_factory.ts b/ui/src/common/recordingV2/target_factories/android_websocket_target_factory.ts
index 6e963bd..af1f0e9 100644
--- a/ui/src/common/recordingV2/target_factories/android_websocket_target_factory.ts
+++ b/ui/src/common/recordingV2/target_factories/android_websocket_target_factory.ts
@@ -86,14 +86,14 @@
if (listedDevice) {
// We overwrite previous states for the same serial number.
latestStatusByDevice.set(
- listedDevice.serialNumber, listedDevice.connectionState);
+ listedDevice.serialNumber, listedDevice.connectionState);
}
}
message = message.substring(prefixAndPayloadLength);
}
const listedDevices: ListedDevice[] = [];
for (const [serialNumber, connectionState] of latestStatusByDevice
- .entries()) {
+ .entries()) {
listedDevices.push({serialNumber, connectionState});
}
return {listedDevices, messageRemainder: message};
@@ -101,7 +101,7 @@
export class WebsocketConnection {
private targets: Map<string, AndroidWebsocketTarget> =
- new Map<string, AndroidWebsocketTarget>();
+ new Map<string, AndroidWebsocketTarget>();
private pendingData: string = '';
constructor(
@@ -120,8 +120,8 @@
this.websocket.onclose = (ev: CloseEvent) => {
if (ev.code === WEBSOCKET_CLOSED_ABNORMALLY_CODE) {
console.info(
- `It's safe to ignore the 'WebSocket connection to ${
- this.websocket.url} error above, if present. It occurs when ` +
+ `It's safe to ignore the 'WebSocket connection to ${
+ this.websocket.url} error above, if present. It occurs when ` +
'checking the connection to the local Websocket server.');
}
this.maybeClearConnection(this);
@@ -185,11 +185,11 @@
targetsUpdated = true;
} else if (!this.targets.has(listedDevice.serialNumber)) {
this.targets.set(
+ listedDevice.serialNumber,
+ new AndroidWebsocketTarget(
listedDevice.serialNumber,
- new AndroidWebsocketTarget(
- listedDevice.serialNumber,
- this.websocket.url,
- this.onTargetChange));
+ this.websocket.url,
+ this.onTargetChange));
targetsUpdated = true;
}
}
@@ -212,7 +212,7 @@
listTargets(): RecordingTargetV2[] {
return this.websocketConnection ? this.websocketConnection.listTargets() :
- [];
+ [];
}
listRecordingProblems(): string[] {
@@ -224,7 +224,7 @@
// server detects a new target.
connectNewTarget(): Promise<RecordingTargetV2> {
return Promise.reject(new Error(
- 'The websocket can only automatically connect targets ' +
+ 'The websocket can only automatically connect targets ' +
'when they become available.'));
}
@@ -239,7 +239,7 @@
const websocket = new WebSocket(websocketUrl);
this.websocketConnection = new WebsocketConnection(
- websocket, this.maybeClearConnection, this.onTargetChange);
+ websocket, this.maybeClearConnection, this.onTargetChange);
}
maybeClearConnection(connection: WebsocketConnection): void {
diff --git a/ui/src/common/recordingV2/target_factories/android_webusb_target_factory.ts b/ui/src/common/recordingV2/target_factories/android_webusb_target_factory.ts
index 634b2c4..8657d9c 100644
--- a/ui/src/common/recordingV2/target_factories/android_webusb_target_factory.ts
+++ b/ui/src/common/recordingV2/target_factories/android_webusb_target_factory.ts
@@ -45,7 +45,7 @@
onTargetChange: OnTargetChangeCallback = () => {};
private recordingProblems: string[] = [];
private targets: Map<string, AndroidWebusbTarget> =
- new Map<string, AndroidWebusbTarget>();
+ new Map<string, AndroidWebusbTarget>();
// AdbKeyManager should only be instantiated once, so we can use the same key
// for all devices.
private keyManager: AdbKeyManager = new AdbKeyManager();
@@ -100,18 +100,18 @@
for (const device of devices) {
if (this.checkDeviceValidity(device).isValid) {
this.targets.set(
- assertExists(device.serialNumber),
- new AndroidWebusbTarget(
- device, this.keyManager, this.onTargetChange));
+ assertExists(device.serialNumber),
+ new AndroidWebusbTarget(
+ device, this.keyManager, this.onTargetChange));
}
}
this.usb.addEventListener('connect', (ev: USBConnectionEvent) => {
if (this.checkDeviceValidity(ev.device).isValid) {
this.targets.set(
- assertExists(ev.device.serialNumber),
- new AndroidWebusbTarget(
- ev.device, this.keyManager, this.onTargetChange));
+ assertExists(ev.device.serialNumber),
+ new AndroidWebusbTarget(
+ ev.device, this.keyManager, this.onTargetChange));
this.onTargetChange();
}
});
@@ -121,7 +121,7 @@
// is invalid we would not have connected in the first place.
const serialNumber = assertExists(ev.device.serialNumber);
await assertExists(this.targets.get(serialNumber))
- .disconnect(`Device with serial ${serialNumber} was disconnected.`);
+ .disconnect(`Device with serial ${serialNumber} was disconnected.`);
this.targets.delete(serialNumber);
this.onTargetChange();
});
@@ -131,12 +131,12 @@
const deviceValidity: DeviceValidity = {isValid: true, issues: []};
if (!device.serialNumber) {
deviceValidity.issues.push(
- createDeviceErrorMessage(device, SERIAL_NUMBER_ISSUE));
+ createDeviceErrorMessage(device, SERIAL_NUMBER_ISSUE));
deviceValidity.isValid = false;
}
if (!findInterfaceAndEndpoint(device)) {
deviceValidity.issues.push(
- createDeviceErrorMessage(device, ADB_INTERFACE_ISSUE));
+ createDeviceErrorMessage(device, ADB_INTERFACE_ISSUE));
deviceValidity.isValid = false;
}
this.recordingProblems.push(...deviceValidity.issues);
diff --git a/ui/src/common/recordingV2/target_factories/chrome_target_factory.ts b/ui/src/common/recordingV2/target_factories/chrome_target_factory.ts
index f5cde47..4b72624 100644
--- a/ui/src/common/recordingV2/target_factories/chrome_target_factory.ts
+++ b/ui/src/common/recordingV2/target_factories/chrome_target_factory.ts
@@ -59,7 +59,7 @@
connectNewTarget(): Promise<RecordingTargetV2> {
throw new RecordingError(
- 'Can not create a new Chrome target.' +
+ 'Can not create a new Chrome target.' +
'All Chrome targets are created at factory initialisation.');
}
diff --git a/ui/src/common/recordingV2/target_factories/host_os_target_factory.ts b/ui/src/common/recordingV2/target_factories/host_os_target_factory.ts
index d7342c0..e03cfb8 100644
--- a/ui/src/common/recordingV2/target_factories/host_os_target_factory.ts
+++ b/ui/src/common/recordingV2/target_factories/host_os_target_factory.ts
@@ -31,7 +31,7 @@
connectNewTarget(): Promise<RecordingTargetV2> {
throw new RecordingError(
- 'Can not create a new Host OS target.' +
+ 'Can not create a new Host OS target.' +
'The Host OS target is created at factory initialisation.');
}
@@ -59,7 +59,7 @@
}
}
this.target = new HostOsTarget(
- websocketUrl, this.maybeClearTarget.bind(this), this.onTargetChange);
+ websocketUrl, this.maybeClearTarget.bind(this), this.onTargetChange);
this.onTargetChange();
}
diff --git a/ui/src/common/recordingV2/target_factories/virtual_target_factory.ts b/ui/src/common/recordingV2/target_factories/virtual_target_factory.ts
index b882168..52d16e9 100644
--- a/ui/src/common/recordingV2/target_factories/virtual_target_factory.ts
+++ b/ui/src/common/recordingV2/target_factories/virtual_target_factory.ts
@@ -36,7 +36,7 @@
connectNewTarget(): Promise<RecordingTargetV2> {
throw new RecordingError(
- 'Can not create a new virtual target.' +
+ 'Can not create a new virtual target.' +
'All virtual targets are created at factory initialisation.');
}
diff --git a/ui/src/common/recordingV2/targets/android_target.ts b/ui/src/common/recordingV2/targets/android_target.ts
index 688f747..141c96b 100644
--- a/ui/src/common/recordingV2/targets/android_target.ts
+++ b/ui/src/common/recordingV2/targets/android_target.ts
@@ -70,7 +70,7 @@
if (!exists(this.androidApiLevel)) {
// 1. Fetch the API version from the device.
const version = await this.adbConnection.shellAndGetOutput(
- 'getprop ro.build.version.sdk');
+ 'getprop ro.build.version.sdk');
this.androidApiLevel = Number(version);
this.onTargetChange();
@@ -81,9 +81,9 @@
this.consumerSocketPath = CUSTOM_TRACED_CONSUMER_SOCKET_PATH;
await this.adbConnection.shellAndWaitCompletion(
- this.composeTraceboxCommand('traced'));
+ this.composeTraceboxCommand('traced'));
await this.adbConnection.shellAndWaitCompletion(
- this.composeTraceboxCommand('traced_probes'));
+ this.composeTraceboxCommand('traced_probes'));
}
}
@@ -109,22 +109,22 @@
const shortVersion = VERSION.split('-')[0];
const requestUrl =
`https://commondatastorage.googleapis.com/perfetto-luci-artifacts/${
- shortVersion}/${arch}/tracebox`;
+ shortVersion}/${arch}/tracebox`;
const fetchResponse = await fetchWithTimeout(
- requestUrl, {method: 'get'}, TRACEBOX_FETCH_TIMEOUT);
+ requestUrl, {method: 'get'}, TRACEBOX_FETCH_TIMEOUT);
const traceboxBin = await fetchResponse.arrayBuffer();
await this.adbConnection.push(
- new Uint8Array(traceboxBin), TRACEBOX_DEVICE_PATH);
+ new Uint8Array(traceboxBin), TRACEBOX_DEVICE_PATH);
// We explicitly set the tracebox permissions because adb does not reliably
// set permissions when uploading the binary.
await this.adbConnection.shellAndWaitCompletion(
- `chmod 755 ${TRACEBOX_DEVICE_PATH}`);
+ `chmod 755 ${TRACEBOX_DEVICE_PATH}`);
}
async fetchArchitecture() {
const abiList = await this.adbConnection.shellAndGetOutput(
- 'getprop ro.vendor.product.cpu.abilist');
+ 'getprop ro.vendor.product.cpu.abilist');
// If multiple ABIs are allowed, the 64bit ones should have higher priority.
if (abiList.includes('arm64-v8a')) {
return 'android-arm64';
diff --git a/ui/src/common/recordingV2/targets/android_virtual_target.ts b/ui/src/common/recordingV2/targets/android_virtual_target.ts
index b632699..9aa1676 100644
--- a/ui/src/common/recordingV2/targets/android_virtual_target.ts
+++ b/ui/src/common/recordingV2/targets/android_virtual_target.ts
@@ -33,7 +33,7 @@
createTracingSession(_: TracingSessionListener): Promise<TracingSession> {
throw new RecordingError(
- 'Can not create tracing session for a virtual target');
+ 'Can not create tracing session for a virtual target');
}
disconnect(_?: string): Promise<void> {
diff --git a/ui/src/common/recordingV2/targets/android_websocket_target.ts b/ui/src/common/recordingV2/targets/android_websocket_target.ts
index ab4f130..e660aaa 100644
--- a/ui/src/common/recordingV2/targets/android_websocket_target.ts
+++ b/ui/src/common/recordingV2/targets/android_websocket_target.ts
@@ -24,8 +24,8 @@
private serialNumber: string, websocketUrl: string,
onTargetChange: OnTargetChangeCallback) {
super(
- new AdbConnectionOverWebsocket(serialNumber, websocketUrl),
- onTargetChange);
+ new AdbConnectionOverWebsocket(serialNumber, websocketUrl),
+ onTargetChange);
}
getInfo(): TargetInfo {
diff --git a/ui/src/common/recordingV2/targets/host_os_target.ts b/ui/src/common/recordingV2/targets/host_os_target.ts
index 6b13025..73fbabd 100644
--- a/ui/src/common/recordingV2/targets/host_os_target.ts
+++ b/ui/src/common/recordingV2/targets/host_os_target.ts
@@ -39,7 +39,7 @@
private onDisconnect: OnDisconnectCallback = (_) => {};
constructor(
- websocketUrl: string,
+ websocketUrl: string,
private maybeClearTarget: (target: HostOsTarget) => void,
private onTargetChange: OnTargetChangeCallback) {
if (isMacOs(navigator.userAgent)) {
@@ -50,7 +50,7 @@
this.targetType = 'LINUX';
} else {
throw new RecordingError(
- 'Host OS target created on an unsupported operating system.');
+ 'Host OS target created on an unsupported operating system.');
}
this.websocket = new WebSocket(websocketUrl);
@@ -128,8 +128,8 @@
private onClose(ev: CloseEvent): void {
if (ev.code === WEBSOCKET_CLOSED_ABNORMALLY_CODE) {
console.info(
- `It's safe to ignore the 'WebSocket connection to ${
- this.getUrl()} error above, if present. It occurs when ` +
+ `It's safe to ignore the 'WebSocket connection to ${
+ this.getUrl()} error above, if present. It occurs when ` +
'checking the connection to the local Websocket server.');
}
this.disconnect();
diff --git a/ui/src/common/recordingV2/traced_tracing_session.ts b/ui/src/common/recordingV2/traced_tracing_session.ts
index 95fb08f..affc476 100644
--- a/ui/src/common/recordingV2/traced_tracing_session.ts
+++ b/ui/src/common/recordingV2/traced_tracing_session.ts
@@ -111,7 +111,7 @@
private byteStream: ByteStream,
private tracingSessionListener: TracingSessionListener) {
this.byteStream.addOnStreamDataCallback(
- (data) => this.handleReceivedData(data));
+ (data) => this.handleReceivedData(data));
this.byteStream.addOnStreamCloseCallback(() => this.clearState());
}
@@ -122,7 +122,7 @@
const requestProto =
QueryServiceStateRequest.encode(new QueryServiceStateRequest())
- .finish();
+ .finish();
this.rpcInvoke('QueryServiceState', requestProto);
return this.pendingQssMessage = defer<DataSource[]>();
@@ -131,7 +131,7 @@
start(config: TraceConfig): void {
const duration = config.durationMs;
this.tracingSessionListener.onStatus(`${RECORDING_IN_PROGRESS}${
- duration ? ' for ' + duration.toString() + ' ms' : ''}...`);
+ duration ? ' for ' + duration.toString() + ' ms' : ''}...`);
const enableTracingRequest = new EnableTracingRequest();
enableTracingRequest.traceConfig = config;
@@ -233,13 +233,13 @@
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
if (!method || !method.id) {
throw new RecordingError(
- `Method ${methodName} not supported by the target`);
+ `Method ${methodName} not supported by the target`);
}
const requestId = this.requestId++;
const frame = new IPCFrame({
requestId,
msgInvokeMethod: new IPCFrame.InvokeMethod(
- {serviceId: this.serviceId, methodId: method.id, argsProto}),
+ {serviceId: this.serviceId, methodId: method.id, argsProto}),
});
this.requestMethods.set(requestId, methodName);
this.writeFrame(frame);
@@ -364,7 +364,7 @@
}
if (msgInvokeMethodReply.hasMore === false) {
this.tracingSessionListener.onTraceData(
- this.traceProtoWriter.finish());
+ this.traceProtoWriter.finish());
this.terminateConnection();
}
} else if (method === 'EnableTracing') {
@@ -391,7 +391,7 @@
const name = dataSource?.dsDescriptor?.name;
if (name) {
this.pendingDataSources.push(
- {name, descriptor: dataSource.dsDescriptor});
+ {name, descriptor: dataSource.dsDescriptor});
}
}
if (msgInvokeMethodReply.hasMore === false) {
@@ -415,9 +415,9 @@
const decoders =
new Map<string, Function>()
- .set('EnableTracing', EnableTracingResponse.decode)
- .set('FreeBuffers', FreeBuffersResponse.decode)
- .set('ReadBuffers', ReadBuffersResponse.decode)
- .set('DisableTracing', DisableTracingResponse.decode)
- .set('GetTraceStats', GetTraceStatsResponse.decode)
- .set('QueryServiceState', QueryServiceStateResponse.decode);
+ .set('EnableTracing', EnableTracingResponse.decode)
+ .set('FreeBuffers', FreeBuffersResponse.decode)
+ .set('ReadBuffers', ReadBuffersResponse.decode)
+ .set('DisableTracing', DisableTracingResponse.decode)
+ .set('GetTraceStats', GetTraceStatsResponse.decode)
+ .set('QueryServiceState', QueryServiceStateResponse.decode);
diff --git a/ui/src/common/recordingV2/websocket_menu_controller.ts b/ui/src/common/recordingV2/websocket_menu_controller.ts
index 0237810..ae49a25 100644
--- a/ui/src/common/recordingV2/websocket_menu_controller.ts
+++ b/ui/src/common/recordingV2/websocket_menu_controller.ts
@@ -64,7 +64,7 @@
const targetFactories = [];
if (targetFactoryRegistry.has(ANDROID_WEBSOCKET_TARGET_FACTORY)) {
targetFactories.push(
- targetFactoryRegistry.get(ANDROID_WEBSOCKET_TARGET_FACTORY));
+ targetFactoryRegistry.get(ANDROID_WEBSOCKET_TARGET_FACTORY));
}
if (targetFactoryRegistry.has(HOST_OS_TARGET_FACTORY)) {
targetFactories.push(targetFactoryRegistry.get(HOST_OS_TARGET_FACTORY));
diff --git a/ui/src/common/registry.ts b/ui/src/common/registry.ts
index 72cf0bc..f20ad5c 100644
--- a/ui/src/common/registry.ts
+++ b/ui/src/common/registry.ts
@@ -40,7 +40,7 @@
const kind = this.key(registrant);
if (this.registry.has(kind)) {
throw new RegistryError(
- `Registrant ${kind} already exists in the registry`);
+ `Registrant ${kind} already exists in the registry`);
}
this.registry.set(kind, registrant);
diff --git a/ui/src/common/schema.ts b/ui/src/common/schema.ts
index dda3c7a..46f94eb 100644
--- a/ui/src/common/schema.ts
+++ b/ui/src/common/schema.ts
@@ -40,7 +40,7 @@
}
async function getColumns(
- engine: EngineProxy, table: string): Promise<ColumnInfo[]> {
+ engine: EngineProxy, table: string): Promise<ColumnInfo[]> {
const result = await engine.query(`PRAGMA table_info(${table});`);
const it = result.iter({
name: STR,
diff --git a/ui/src/common/selection_observer.ts b/ui/src/common/selection_observer.ts
index 2a25d37..990486b 100644
--- a/ui/src/common/selection_observer.ts
+++ b/ui/src/common/selection_observer.ts
@@ -20,7 +20,7 @@
const selectionObservers: SelectionChangedObserver[] = [];
export function onSelectionChanged(
- selection: Selection|undefined, openCurrentSelectionTab: boolean) {
+ selection: Selection|undefined, openCurrentSelectionTab: boolean) {
for (const observer of selectionObservers) {
observer(selection, openCurrentSelectionTab);
}
diff --git a/ui/src/common/state.ts b/ui/src/common/state.ts
index 84cdb1b..777724b 100644
--- a/ui/src/common/state.ts
+++ b/ui/src/common/state.ts
@@ -669,7 +669,7 @@
export function hasActiveProbes(config: RecordConfig) {
const fieldsWithEmptyResult = new Set<string>(
- ['hpBlockClient', 'allAtraceApps', 'chromePrivacyFiltering']);
+ ['hpBlockClient', 'allAtraceApps', 'chromePrivacyFiltering']);
let key: keyof RecordConfig;
for (key in config) {
if (typeof (config[key]) === 'boolean' && config[key] === true &&
diff --git a/ui/src/common/thread_state.ts b/ui/src/common/thread_state.ts
index d38de4a..9c23ce2 100644
--- a/ui/src/common/thread_state.ts
+++ b/ui/src/common/thread_state.ts
@@ -30,7 +30,7 @@
};
export function translateState(
- state: string|undefined|null, ioWait: boolean|undefined = undefined) {
+ state: string|undefined|null, ioWait: boolean|undefined = undefined) {
if (state === undefined) return '';
if (state === 'Running') {
return state;
diff --git a/ui/src/common/track_cache.ts b/ui/src/common/track_cache.ts
index 2c68eca..69f649a 100644
--- a/ui/src/common/track_cache.ts
+++ b/ui/src/common/track_cache.ts
@@ -122,77 +122,77 @@
update(): void {
switch (this.state) {
- case TrackState.Creating:
- case TrackState.Updating:
- this.state = TrackState.UpdatePending;
- break;
- case TrackState.Ready:
- const result = this.track.onUpdate?.();
- Promise.resolve(result).then(() => this.onTrackUpdated());
- this.state = TrackState.Updating;
- break;
- case TrackState.UpdatePending:
- // Update already pending... do nothing!
- break;
- default:
- throw new Error('Invalid state transition');
+ case TrackState.Creating:
+ case TrackState.Updating:
+ this.state = TrackState.UpdatePending;
+ break;
+ case TrackState.Ready:
+ const result = this.track.onUpdate?.();
+ Promise.resolve(result).then(() => this.onTrackUpdated());
+ this.state = TrackState.Updating;
+ break;
+ case TrackState.UpdatePending:
+ // Update already pending... do nothing!
+ break;
+ default:
+ throw new Error('Invalid state transition');
}
}
destroy(): void {
switch (this.state) {
- case TrackState.Ready:
- // Don't bother awaiting this as the track can no longer be used.
- this.track.onDestroy?.();
- this.state = TrackState.Destroyed;
- break;
- case TrackState.Creating:
- case TrackState.Updating:
- case TrackState.UpdatePending:
- this.state = TrackState.DestroyPending;
- break;
- default:
- throw new Error('Invalid state transition');
+ case TrackState.Ready:
+ // Don't bother awaiting this as the track can no longer be used.
+ this.track.onDestroy?.();
+ this.state = TrackState.Destroyed;
+ break;
+ case TrackState.Creating:
+ case TrackState.Updating:
+ case TrackState.UpdatePending:
+ this.state = TrackState.DestroyPending;
+ break;
+ default:
+ throw new Error('Invalid state transition');
}
}
private onTrackCreated() {
switch (this.state) {
- case TrackState.DestroyPending:
- // Don't bother awaiting this as the track can no longer be used.
- this.track.onDestroy?.();
- this.state = TrackState.Destroyed;
- break;
- case TrackState.UpdatePending:
- const result = this.track.onUpdate?.();
- Promise.resolve(result).then(() => this.onTrackUpdated());
- this.state = TrackState.Updating;
- break;
- case TrackState.Creating:
- this.state = TrackState.Ready;
- break;
- default:
- throw new Error('Invalid state transition');
+ case TrackState.DestroyPending:
+ // Don't bother awaiting this as the track can no longer be used.
+ this.track.onDestroy?.();
+ this.state = TrackState.Destroyed;
+ break;
+ case TrackState.UpdatePending:
+ const result = this.track.onUpdate?.();
+ Promise.resolve(result).then(() => this.onTrackUpdated());
+ this.state = TrackState.Updating;
+ break;
+ case TrackState.Creating:
+ this.state = TrackState.Ready;
+ break;
+ default:
+ throw new Error('Invalid state transition');
}
}
private onTrackUpdated() {
switch (this.state) {
- case TrackState.DestroyPending:
- // Don't bother awaiting this as the track can no longer be used.
- this.track.onDestroy?.();
- this.state = TrackState.Destroyed;
- break;
- case TrackState.UpdatePending:
- const result = this.track.onUpdate?.();
- Promise.resolve(result).then(() => this.onTrackUpdated());
- this.state = TrackState.Updating;
- break;
- case TrackState.Updating:
- this.state = TrackState.Ready;
- break;
- default:
- throw new Error('Invalid state transition');
+ case TrackState.DestroyPending:
+ // Don't bother awaiting this as the track can no longer be used.
+ this.track.onDestroy?.();
+ this.state = TrackState.Destroyed;
+ break;
+ case TrackState.UpdatePending:
+ const result = this.track.onUpdate?.();
+ Promise.resolve(result).then(() => this.onTrackUpdated());
+ this.state = TrackState.Updating;
+ break;
+ case TrackState.Updating:
+ this.state = TrackState.Ready;
+ break;
+ default:
+ throw new Error('Invalid state transition');
}
}
}
diff --git a/ui/src/common/upload_utils.ts b/ui/src/common/upload_utils.ts
index 0431fb9..0b17ee9 100644
--- a/ui/src/common/upload_utils.ts
+++ b/ui/src/common/upload_utils.ts
@@ -75,29 +75,29 @@
private onRpcEvent(e: ProgressEvent) {
let done = false;
switch (e.type) {
- case 'progress':
- this.uploadedSize = e.loaded;
- this.totalSize = e.total;
- break;
- case 'abort':
- this.state = 'ERROR';
- this.error = 'Upload aborted';
- break;
- case 'error':
+ case 'progress':
+ this.uploadedSize = e.loaded;
+ this.totalSize = e.total;
+ break;
+ case 'abort':
+ this.state = 'ERROR';
+ this.error = 'Upload aborted';
+ break;
+ case 'error':
+ this.state = 'ERROR';
+ this.error = `${this.req.status} - ${this.req.statusText}`;
+ break;
+ case 'loadend':
+ done = true;
+ if (this.req.status === 200) {
+ this.state = 'UPLOADED';
+ } else if (this.state === 'UPLOADING') {
this.state = 'ERROR';
this.error = `${this.req.status} - ${this.req.statusText}`;
- break;
- case 'loadend':
- done = true;
- if (this.req.status === 200) {
- this.state = 'UPLOADED';
- } else if (this.state === 'UPLOADING') {
- this.state = 'ERROR';
- this.error = `${this.req.status} - ${this.req.statusText}`;
- }
- break;
- default:
- return;
+ }
+ break;
+ default:
+ return;
}
this.onProgress();
if (done) {
@@ -188,6 +188,6 @@
const buffer = new TextEncoder().encode(str);
const digest = await crypto.subtle.digest('SHA-256', buffer);
return Array.from(new Uint8Array(digest))
- .map((x) => x.toString(16).padStart(2, '0'))
- .join('');
+ .map((x) => x.toString(16).padStart(2, '0'))
+ .join('');
}
diff --git a/ui/src/controller/adb.ts b/ui/src/controller/adb.ts
index 2b592a2..258c9c6 100644
--- a/ui/src/controller/adb.ts
+++ b/ui/src/controller/adb.ts
@@ -185,7 +185,7 @@
}
findEndpointNumber(
- endpoints: USBEndpoint[], direction: 'out'|'in', type = 'bulk'): number {
+ endpoints: USBEndpoint[], direction: 'out'|'in', type = 'bulk'): number {
const ep =
endpoints.find((ep) => ep.type === type && ep.direction === direction);
@@ -196,18 +196,18 @@
receiveDeviceMessages() {
this.recv()
- .then((msg) => {
- this.onMessage(msg);
- this.receiveDeviceMessages();
- })
- .catch((e) => {
- // Ignore error with "DEVICE_NOT_SET_ERROR" message since it is always
- // thrown after the device disconnects.
- if (e.message !== DEVICE_NOT_SET_ERROR) {
- console.error(`Exception in recv: ${e.name}. error: ${e.message}`);
- }
- this.disconnect();
- });
+ .then((msg) => {
+ this.onMessage(msg);
+ this.receiveDeviceMessages();
+ })
+ .catch((e) => {
+ // Ignore error with "DEVICE_NOT_SET_ERROR" message since it is always
+ // thrown after the device disconnects.
+ if (e.message !== DEVICE_NOT_SET_ERROR) {
+ console.error(`Exception in recv: ${e.name}. error: ${e.message}`);
+ }
+ this.disconnect();
+ });
}
async onMessage(msg: AdbMsg) {
@@ -217,14 +217,14 @@
this.handleAuthentication(msg);
} else if (msg.cmd === 'CNXN') {
console.assert(
- [AdbState.AUTH_STEP2, AdbState.AUTH_STEP3].includes(this.state));
+ [AdbState.AUTH_STEP2, AdbState.AUTH_STEP3].includes(this.state));
this.state = AdbState.CONNECTED;
this.handleConnectedMessage(msg);
} else if (this.state === AdbState.CONNECTED && [
- 'OKAY',
- 'WRTE',
- 'CLSE',
- ].indexOf(msg.cmd) >= 0) {
+ 'OKAY',
+ 'WRTE',
+ 'CLSE',
+ ].indexOf(msg.cmd) >= 0) {
const stream = this.streams.get(msg.arg1);
if (!stream) {
console.warn(`Received message ${msg} for unknown stream ${msg.arg1}`);
@@ -305,7 +305,7 @@
resolve(stream);
};
stream.onClose = () =>
- reject(new Error(`Failed to openStream svc=${svc}`));
+ reject(new Error(`Failed to openStream svc=${svc}`));
});
}
@@ -320,9 +320,9 @@
}
async send(
- cmd: CmdType, arg0: number, arg1: number, data?: Uint8Array|string) {
+ cmd: CmdType, arg0: number, arg1: number, data?: Uint8Array|string) {
await this.sendMsg(AdbMsgImpl.create(
- {cmd, arg0, arg1, data, useChecksum: this.useChecksum}));
+ {cmd, arg0, arg1, data, useChecksum: this.useChecksum}));
}
// The header and the message data must be sent consecutively. Using 2 awaits
@@ -362,7 +362,7 @@
};
const key = await crypto.subtle.generateKey(
- keySpec, /* extractable=*/ true, ['sign', 'verify']);
+ keySpec, /* extractable=*/ true, ['sign', 'verify']);
return key;
}
@@ -428,7 +428,7 @@
if (this.writeQueue.length > 0) {
console.error(`Dropping ${
- this.writeQueue.length} queued messages due to stream closing.`);
+ this.writeQueue.length} queued messages due to stream closing.`);
this.writeQueue = [];
}
@@ -483,7 +483,7 @@
return;
}
console.error(
- `Unexpected stream msg ${msg.toString()} in state ${this.state}`);
+ `Unexpected stream msg ${msg.toString()} in state ${this.state}`);
}
}
@@ -504,8 +504,8 @@
useChecksum: boolean;
constructor(
- cmd: CmdType, arg0: number, arg1: number, dataLen: number,
- dataChecksum: number, useChecksum = false) {
+ cmd: CmdType, arg0: number, arg1: number, dataLen: number,
+ dataChecksum: number, useChecksum = false) {
console.assert(cmd.length === 4);
this.cmd = cmd;
this.arg0 = arg0;
@@ -655,7 +655,7 @@
// CL can work:
// https://android-review.googlesource.com/c/platform/external/perfetto/+/1105354/18
async function signAdbTokenWithPrivateKey(
- _privateKey: CryptoKey, token: Uint8Array): Promise<ArrayBuffer> {
+ _privateKey: CryptoKey, token: Uint8Array): Promise<ArrayBuffer> {
// This function is not implemented.
return token.buffer;
}
diff --git a/ui/src/controller/adb_base_controller.ts b/ui/src/controller/adb_base_controller.ts
index e55c11c..3bb0249 100644
--- a/ui/src/controller/adb_base_controller.ts
+++ b/ui/src/controller/adb_base_controller.ts
@@ -78,7 +78,7 @@
this.state = AdbConnectionState.READY_TO_CONNECT;
const target = globals.state.recordingTarget;
throw Error(`Device with serial ${
- isAdbTarget(target) ? target.serial : 'n/a'} not found.`);
+ isAdbTarget(target) ? target.serial : 'n/a'} not found.`);
}
this.sendStatus(`Please allow USB debugging on device.
@@ -118,7 +118,7 @@
if (!traceConfigProto) return;
const duration = extractDurationFromTraceConfig(traceConfigProto);
this.sendStatus(`Recording in progress${
- exists(duration) ? ' for ' + duration.toString() + ' ms' : ''}...`);
+ exists(duration) ? ' for ' + duration.toString() + ' ms' : ''}...`);
}
abstract invoke(method: string, argsProto: Uint8Array): void;
diff --git a/ui/src/controller/adb_record_controller_jsdomtest.ts b/ui/src/controller/adb_record_controller_jsdomtest.ts
index efa32c5..538bfd0 100644
--- a/ui/src/controller/adb_record_controller_jsdomtest.ts
+++ b/ui/src/controller/adb_record_controller_jsdomtest.ts
@@ -107,20 +107,20 @@
testArray[0] = 65;
const generatedCmd = adbController.generateStartTracingCommand(testArray);
expect(generatedCmd)
- .toBe(`echo '${btoa('A')}' | base64 -d | perfetto -c - -o DEST`);
+ .toBe(`echo '${btoa('A')}' | base64 -d | perfetto -c - -o DEST`);
});
test('tracingEndedSuccessfully', () => {
expect(
- adbController.tracingEndedSuccessfully(
- 'Connected to the Perfetto traced service, starting tracing for 10000 ms\nWrote 564 bytes into /data/misc/perfetto-traces/trace'))
- .toBe(true);
+ adbController.tracingEndedSuccessfully(
+ 'Connected to the Perfetto traced service, starting tracing for 10000 ms\nWrote 564 bytes into /data/misc/perfetto-traces/trace'))
+ .toBe(true);
expect(
- adbController.tracingEndedSuccessfully(
- 'Connected to the Perfetto traced service, starting tracing for 10000 ms'))
- .toBe(false);
+ adbController.tracingEndedSuccessfully(
+ 'Connected to the Perfetto traced service, starting tracing for 10000 ms'))
+ .toBe(false);
expect(
- adbController.tracingEndedSuccessfully(
- 'Connected to the Perfetto traced service, starting tracing for 0 ms'))
- .toBe(false);
+ adbController.tracingEndedSuccessfully(
+ 'Connected to the Perfetto traced service, starting tracing for 0 ms'))
+ .toBe(false);
});
diff --git a/ui/src/controller/adb_shell_controller.ts b/ui/src/controller/adb_shell_controller.ts
index d2fe620..3a95708 100644
--- a/ui/src/controller/adb_shell_controller.ts
+++ b/ui/src/controller/adb_shell_controller.ts
@@ -45,23 +45,23 @@
console.assert(this.state === AdbConnectionState.CONNECTED);
switch (method) {
- case 'EnableTracing':
- this.enableTracing(params);
- break;
- case 'ReadBuffers':
- this.readBuffers();
- break;
- case 'DisableTracing':
- this.disableTracing();
- break;
- case 'FreeBuffers':
- this.freeBuffers();
- break;
- case 'GetTraceStats':
- break;
- default:
- this.sendErrorMessage(`Method not recognized: ${method}`);
- break;
+ case 'EnableTracing':
+ this.enableTracing(params);
+ break;
+ case 'ReadBuffers':
+ this.readBuffers();
+ break;
+ case 'DisableTracing':
+ this.disableTracing();
+ break;
+ case 'FreeBuffers':
+ this.freeBuffers();
+ break;
+ case 'GetTraceStats':
+ break;
+ default:
+ this.sendErrorMessage(`Method not recognized: ${method}`);
+ break;
}
}
@@ -110,11 +110,11 @@
const readTraceShell =
await this.adb.shell(this.generateReadTraceCommand());
readTraceShell.onData = (raw) =>
- this.sendMessage(this.generateChunkReadResponse(raw));
+ this.sendMessage(this.generateChunkReadResponse(raw));
readTraceShell.onClose = () => {
this.sendMessage(
- this.generateChunkReadResponse(new Uint8Array(), /* last */ true));
+ this.generateChunkReadResponse(new Uint8Array(), /* last */ true));
};
}
diff --git a/ui/src/controller/adb_socket_controller.ts b/ui/src/controller/adb_socket_controller.ts
index bf74fbc..487a4ba 100644
--- a/ui/src/controller/adb_socket_controller.ts
+++ b/ui/src/controller/adb_socket_controller.ts
@@ -124,7 +124,7 @@
const frame = new IPCFrame({
requestId,
msgInvokeMethod: new IPCFrame.InvokeMethod(
- {serviceId: this.serviceId, methodId, argsProto}),
+ {serviceId: this.serviceId, methodId, argsProto}),
});
this.requestMethods.set(requestId, method);
this.sendFrame(frame);
@@ -221,9 +221,9 @@
const bytesToCompleteMessage =
this.frameToParseLen - this.incomingBufferLen;
this.appendToIncomingBuffer(
- newData.subarray(0, bytesToCompleteMessage));
+ newData.subarray(0, bytesToCompleteMessage));
this.parseMessage(
- this.incomingBuffer.subarray(0, this.frameToParseLen));
+ this.incomingBuffer.subarray(0, this.frameToParseLen));
this.incomingBufferLen = 0;
// Remove the data just parsed.
newData = newData.subarray(bytesToCompleteMessage);
@@ -240,7 +240,7 @@
}
decodeResponse(
- requestId: number, responseProto: Uint8Array, hasMore = false) {
+ requestId: number, responseProto: Uint8Array, hasMore = false) {
const method = this.requestMethods.get(requestId);
if (!method) {
console.error(`Unknown request id: ${requestId}`);
@@ -296,7 +296,7 @@
sendReadBufferResponse() {
this.sendMessage(this.generateChunkReadResponse(
- this.traceProtoWriter.finish(), /* last */ true));
+ this.traceProtoWriter.finish(), /* last */ true));
this.traceProtoWriter = protobuf.Writer.create();
}
@@ -332,44 +332,44 @@
handleIncomingFrame(frame: IPCFrame) {
const requestId = frame.requestId;
switch (frame.msg) {
- case 'msgBindServiceReply': {
- const msgBindServiceReply = frame.msgBindServiceReply;
- if (msgBindServiceReply && msgBindServiceReply.methods &&
+ case 'msgBindServiceReply': {
+ const msgBindServiceReply = frame.msgBindServiceReply;
+ if (msgBindServiceReply && msgBindServiceReply.methods &&
/* eslint-disable @typescript-eslint/strict-boolean-expressions */
msgBindServiceReply.serviceId) {
- /* eslint-enable */
- console.assert(msgBindServiceReply.success);
- this.availableMethods = msgBindServiceReply.methods;
- this.serviceId = msgBindServiceReply.serviceId;
- this.resolveBindingPromise();
- this.resolveBindingPromise = () => {};
- }
- return;
+ /* eslint-enable */
+ console.assert(msgBindServiceReply.success);
+ this.availableMethods = msgBindServiceReply.methods;
+ this.serviceId = msgBindServiceReply.serviceId;
+ this.resolveBindingPromise();
+ this.resolveBindingPromise = () => {};
}
- case 'msgInvokeMethodReply': {
- const msgInvokeMethodReply = frame.msgInvokeMethodReply;
- if (msgInvokeMethodReply && msgInvokeMethodReply.replyProto) {
- if (!msgInvokeMethodReply.success) {
- console.error(
- 'Unsuccessful method invocation: ', msgInvokeMethodReply);
- return;
- }
- this.decodeResponse(
- requestId,
- msgInvokeMethodReply.replyProto,
- msgInvokeMethodReply.hasMore === true);
+ return;
+ }
+ case 'msgInvokeMethodReply': {
+ const msgInvokeMethodReply = frame.msgInvokeMethodReply;
+ if (msgInvokeMethodReply && msgInvokeMethodReply.replyProto) {
+ if (!msgInvokeMethodReply.success) {
+ console.error(
+ 'Unsuccessful method invocation: ', msgInvokeMethodReply);
+ return;
}
- return;
+ this.decodeResponse(
+ requestId,
+ msgInvokeMethodReply.replyProto,
+ msgInvokeMethodReply.hasMore === true);
}
- default:
- console.error(`not recognized frame message: ${frame.msg}`);
+ return;
+ }
+ default:
+ console.error(`not recognized frame message: ${frame.msg}`);
}
}
}
const decoders = new Map<string, Function>()
- .set('EnableTracing', EnableTracingResponse.decode)
- .set('FreeBuffers', FreeBuffersResponse.decode)
- .set('ReadBuffers', ReadBuffersResponse.decode)
- .set('DisableTracing', DisableTracingResponse.decode)
- .set('GetTraceStats', GetTraceStatsResponse.decode);
+ .set('EnableTracing', EnableTracingResponse.decode)
+ .set('FreeBuffers', FreeBuffersResponse.decode)
+ .set('ReadBuffers', ReadBuffersResponse.decode)
+ .set('DisableTracing', DisableTracingResponse.decode)
+ .set('GetTraceStats', GetTraceStatsResponse.decode);
diff --git a/ui/src/controller/aggregation/aggregation_controller.ts b/ui/src/controller/aggregation/aggregation_controller.ts
index 137d133..b0c145d 100644
--- a/ui/src/controller/aggregation/aggregation_controller.ts
+++ b/ui/src/controller/aggregation/aggregation_controller.ts
@@ -86,14 +86,14 @@
this.requestingData = true;
if (sortingChanged) this.previousSorting = aggregatePreferences.sorting;
this.getAggregateData(area, hasAreaChanged)
- .then((data) => publishAggregateData({data, kind: this.args.kind}))
- .finally(() => {
- this.requestingData = false;
- if (this.queuedRequest) {
- this.queuedRequest = false;
- this.run();
- }
- });
+ .then((data) => publishAggregateData({data, kind: this.args.kind}))
+ .finally(() => {
+ this.requestingData = false;
+ if (this.queuedRequest) {
+ this.queuedRequest = false;
+ this.run();
+ }
+ });
}
}
@@ -115,7 +115,7 @@
const colIds = defs.map((col) => col.columnId);
const pref = globals.state.aggregatePreferences[this.kind];
let sorting = `${this.getDefaultSorting().column} ${
- this.getDefaultSorting().direction}`;
+ this.getDefaultSorting().direction}`;
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
if (pref && pref.sorting) {
sorting = `${pref.sorting.column} ${pref.sorting.direction}`;
@@ -171,7 +171,7 @@
async getSum(def: ColumnDef): Promise<string> {
if (!def.sum) return '';
const result = await this.args.engine.query(
- `select ifnull(sum(${def.columnId}), 0) as s from ${this.kind}`);
+ `select ifnull(sum(${def.columnId}), 0) as s from ${this.kind}`);
let sum = result.firstRow({s: NUM}).s;
if (def.kind === 'TIMESTAMP_NS') {
sum = sum / 1e6;
diff --git a/ui/src/controller/aggregation/thread_aggregation_controller.ts b/ui/src/controller/aggregation/thread_aggregation_controller.ts
index 1473848..9906fab 100644
--- a/ui/src/controller/aggregation/thread_aggregation_controller.ts
+++ b/ui/src/controller/aggregation/thread_aggregation_controller.ts
@@ -77,7 +77,7 @@
const query = `select state, io_wait as ioWait, sum(dur) as totalDur
FROM thread JOIN thread_state USING(utid)
WHERE utid IN (${this.utids}) AND thread_state.ts + thread_state.dur > ${
- area.start} AND
+ area.start} AND
thread_state.ts < ${area.end}
GROUP BY state, io_wait`;
const result = await engine.query(query);
diff --git a/ui/src/controller/app_controller.ts b/ui/src/controller/app_controller.ts
index b6d9969..256580b 100644
--- a/ui/src/controller/app_controller.ts
+++ b/ui/src/controller/app_controller.ts
@@ -44,7 +44,7 @@
[Child('permalink', PermalinkController, {})];
if (!RECORDING_V2_FLAG.get()) {
childControllers.push(Child(
- 'record', RecordController, {extensionPort: this.extensionPort}));
+ 'record', RecordController, {extensionPort: this.extensionPort}));
}
if (globals.state.engine !== undefined) {
const engineCfg = globals.state.engine;
diff --git a/ui/src/controller/args_parser.ts b/ui/src/controller/args_parser.ts
index b36c30b..8ca1b8f 100644
--- a/ui/src/controller/args_parser.ts
+++ b/ui/src/controller/args_parser.ts
@@ -60,7 +60,7 @@
}
function insert<T>(
- args: ArgNode<T>[], keys: Key[], path: string, value: T): void {
+ args: ArgNode<T>[], keys: Key[], path: string, value: T): void {
const currentKey = keys.shift()!;
let node = args.find((x) => x.key === currentKey);
if (!node) {
diff --git a/ui/src/controller/args_parser_unittest.ts b/ui/src/controller/args_parser_unittest.ts
index 8586157..e4ea2f7 100644
--- a/ui/src/controller/args_parser_unittest.ts
+++ b/ui/src/controller/args_parser_unittest.ts
@@ -27,70 +27,70 @@
describe('convertArgsToTree', () => {
test('converts example arg set', () => {
expect(convertArgsToTree(args))
- .toEqual(
- [
+ .toEqual(
+ [
+ {
+ key: 'simple_key',
+ value: {key: 'simple_key', value: 'simple_value'},
+ },
+ {
+ key: 'thing',
+ children: [
+ {key: 'key', value: {key: 'thing.key', value: 'value'}},
{
- key: 'simple_key',
- value: {key: 'simple_key', value: 'simple_value'},
- },
- {
- key: 'thing',
+ key: 'point',
children: [
- {key: 'key', value: {key: 'thing.key', value: 'value'}},
{
- key: 'point',
+ key: 0,
children: [
{
- key: 0,
- children: [
- {
- key: 'x',
- value: {key: 'thing.point[0].x', value: 10},
- },
- {
- key: 'y',
- value: {key: 'thing.point[0].y', value: 20},
- },
- ],
+ key: 'x',
+ value: {key: 'thing.point[0].x', value: 10},
},
{
- key: 1,
- children: [
- {
- key: 'x',
- value: {key: 'thing.point[1].x', value: 0},
- },
- {
- key: 'y',
- value: {key: 'thing.point[1].y', value: -10},
- },
- ],
+ key: 'y',
+ value: {key: 'thing.point[0].y', value: 20},
},
],
},
- ],
- },
- {
- key: 'foo',
- children: [
{
- key: 'bar',
+ key: 1,
children: [
{
- key: 'foo',
- children: [
- {
- key: 'bar',
- value: {key: 'foo.bar.foo.bar', value: 'baz'},
- },
- ],
+ key: 'x',
+ value: {key: 'thing.point[1].x', value: 0},
+ },
+ {
+ key: 'y',
+ value: {key: 'thing.point[1].y', value: -10},
},
],
},
],
},
],
- );
+ },
+ {
+ key: 'foo',
+ children: [
+ {
+ key: 'bar',
+ children: [
+ {
+ key: 'foo',
+ children: [
+ {
+ key: 'bar',
+ value: {key: 'foo.bar.foo.bar', value: 'baz'},
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ );
});
test('handles value and children in same node', () => {
diff --git a/ui/src/controller/consumer_port_types.ts b/ui/src/controller/consumer_port_types.ts
index 950c0ed..dcd8a65 100644
--- a/ui/src/controller/consumer_port_types.ts
+++ b/ui/src/controller/consumer_port_types.ts
@@ -27,7 +27,7 @@
// A type guard that can be used in order to be able to access the property of
// an object in a checked manner.
export function hasProperty<T extends object, P extends string>(
- obj: T, prop: P): obj is T&{[prop in P]: unknown} {
+ obj: T, prop: P): obj is T&{[prop in P]: unknown} {
return obj.hasOwnProperty(prop);
}
diff --git a/ui/src/controller/controller.ts b/ui/src/controller/controller.ts
index 92d61d0..e4299d5 100644
--- a/ui/src/controller/controller.ts
+++ b/ui/src/controller/controller.ts
@@ -28,9 +28,9 @@
export type ControllerInitializerAny = ControllerInitializer<any>;
export function Child<ConstructorArgs>(
- id: string,
- factory: ControllerFactory<ConstructorArgs>,
- args: ConstructorArgs): ControllerInitializer<ConstructorArgs> {
+ id: string,
+ factory: ControllerFactory<ConstructorArgs>,
+ args: ConstructorArgs): ControllerInitializer<ConstructorArgs> {
return {id, factory, args};
}
diff --git a/ui/src/controller/cpu_profile_controller.ts b/ui/src/controller/cpu_profile_controller.ts
index 89f4828..a251442 100644
--- a/ui/src/controller/cpu_profile_controller.ts
+++ b/ui/src/controller/cpu_profile_controller.ts
@@ -54,29 +54,29 @@
this.lastSelectedSample = this.copyCpuProfileSample(selection);
this.getSampleData(selectedSample.id)
- .then((sampleData) => {
- /* eslint-disable @typescript-eslint/strict-boolean-expressions */
- if (sampleData !== undefined && selectedSample &&
+ .then((sampleData) => {
+ /* eslint-disable @typescript-eslint/strict-boolean-expressions */
+ if (sampleData !== undefined && selectedSample &&
/* eslint-enable */
this.lastSelectedSample &&
this.lastSelectedSample.id === selectedSample.id) {
- const cpuProfileDetails: CpuProfileDetails = {
- id: selectedSample.id,
- ts: selectedSample.ts,
- utid: selectedSample.utid,
- stack: sampleData,
- };
+ const cpuProfileDetails: CpuProfileDetails = {
+ id: selectedSample.id,
+ ts: selectedSample.ts,
+ utid: selectedSample.utid,
+ stack: sampleData,
+ };
- publishCpuProfileDetails(cpuProfileDetails);
- }
- })
- .finally(() => {
- this.requestingData = false;
- if (this.queuedRunRequest) {
- this.queuedRunRequest = false;
- this.run();
- }
- });
+ publishCpuProfileDetails(cpuProfileDetails);
+ }
+ })
+ .finally(() => {
+ this.requestingData = false;
+ if (this.queuedRunRequest) {
+ this.queuedRunRequest = false;
+ this.run();
+ }
+ });
}
private copyCpuProfileSample(cpuProfileSample: CpuProfileSampleSelection):
diff --git a/ui/src/controller/flamegraph_controller.ts b/ui/src/controller/flamegraph_controller.ts
index 62648df..e856d72 100644
--- a/ui/src/controller/flamegraph_controller.ts
+++ b/ui/src/controller/flamegraph_controller.ts
@@ -53,18 +53,18 @@
function getFlamegraphType(type: ProfileType) {
switch (type) {
- case ProfileType.HEAP_PROFILE:
- case ProfileType.MIXED_HEAP_PROFILE:
- case ProfileType.NATIVE_HEAP_PROFILE:
- case ProfileType.JAVA_HEAP_SAMPLES:
- return 'native';
- case ProfileType.JAVA_HEAP_GRAPH:
- return 'graph';
- case ProfileType.PERF_SAMPLE:
- return 'perf';
- default:
- const exhaustiveCheck: never = type;
- throw new Error(`Unhandled case: ${exhaustiveCheck}`);
+ case ProfileType.HEAP_PROFILE:
+ case ProfileType.MIXED_HEAP_PROFILE:
+ case ProfileType.NATIVE_HEAP_PROFILE:
+ case ProfileType.JAVA_HEAP_SAMPLES:
+ return 'native';
+ case ProfileType.JAVA_HEAP_GRAPH:
+ return 'graph';
+ case ProfileType.PERF_SAMPLE:
+ return 'perf';
+ default:
+ const exhaustiveCheck: never = type;
+ throw new Error(`Unhandled case: ${exhaustiveCheck}`);
}
}
@@ -100,7 +100,7 @@
}
tableName = `${this.prefix}_${this.tableId++}`;
await this.engine.query(
- `create temp table if not exists ${tableName} as ${query}`);
+ `create temp table if not exists ${tableName} as ${query}`);
this.cache.set(query, tableName);
}
return tableName;
@@ -128,7 +128,7 @@
const upids = [];
if (!area) {
this.checkCompletionAndPublishFlamegraph(
- {...globals.flamegraphDetails, isInAreaSelection: false});
+ {...globals.flamegraphDetails, isInAreaSelection: false});
return;
}
for (const trackId of area.tracks) {
@@ -142,7 +142,7 @@
}
if (upids.length === 0) {
this.checkCompletionAndPublishFlamegraph(
- {...globals.flamegraphDetails, isInAreaSelection: false});
+ {...globals.flamegraphDetails, isInAreaSelection: false});
return;
}
globals.dispatch(Actions.openFlamegraph({
@@ -167,13 +167,13 @@
}
private async assembleFlamegraphDetails(
- selection: FlamegraphState, isInAreaSelection: boolean) {
+ selection: FlamegraphState, isInAreaSelection: boolean) {
const selectedFlamegraphState = {...selection};
const flamegraphMetadata = await this.getFlamegraphMetadata(
- selection.type,
- selectedFlamegraphState.start,
- selectedFlamegraphState.end,
- selectedFlamegraphState.upids);
+ selection.type,
+ selectedFlamegraphState.start,
+ selectedFlamegraphState.end,
+ selectedFlamegraphState.upids);
if (flamegraphMetadata !== undefined) {
Object.assign(this.flamegraphDetails, flamegraphMetadata);
}
@@ -187,28 +187,28 @@
this.lastSelectedFlamegraphState = {...selection};
const expandedId = selectedFlamegraphState.expandedCallsite ?
- selectedFlamegraphState.expandedCallsite.id :
- -1;
+ selectedFlamegraphState.expandedCallsite.id :
+ -1;
const rootSize = selectedFlamegraphState.expandedCallsite === undefined ?
- undefined :
- selectedFlamegraphState.expandedCallsite.totalSize;
+ undefined :
+ selectedFlamegraphState.expandedCallsite.totalSize;
const key = `${selectedFlamegraphState.upids};${
- selectedFlamegraphState.start};${selectedFlamegraphState.end}`;
+ selectedFlamegraphState.start};${selectedFlamegraphState.end}`;
try {
const flamegraphData = await this.getFlamegraphData(
- key,
- /* eslint-disable @typescript-eslint/strict-boolean-expressions */
- selectedFlamegraphState.viewingOption ?
- /* eslint-enable */
- selectedFlamegraphState.viewingOption :
- defaultViewingOption(selectedFlamegraphState.type),
- selection.start,
- selection.end,
- selectedFlamegraphState.upids,
- selectedFlamegraphState.type,
- selectedFlamegraphState.focusRegex);
+ key,
+ /* eslint-disable @typescript-eslint/strict-boolean-expressions */
+ selectedFlamegraphState.viewingOption ?
+ /* eslint-enable */
+ selectedFlamegraphState.viewingOption :
+ defaultViewingOption(selectedFlamegraphState.type),
+ selection.start,
+ selection.end,
+ selectedFlamegraphState.upids,
+ selectedFlamegraphState.type,
+ selectedFlamegraphState.focusRegex);
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
if (flamegraphData !== undefined && selection &&
selection.kind === selectedFlamegraphState.kind &&
@@ -217,11 +217,11 @@
const expandedFlamegraphData =
expandCallsites(flamegraphData, expandedId);
this.prepareAndMergeCallsites(
- expandedFlamegraphData,
- this.lastSelectedFlamegraphState.viewingOption,
- isInAreaSelection,
- rootSize,
- this.lastSelectedFlamegraphState.expandedCallsite);
+ expandedFlamegraphData,
+ this.lastSelectedFlamegraphState.viewingOption,
+ isInAreaSelection,
+ rootSize,
+ this.lastSelectedFlamegraphState.expandedCallsite);
}
} finally {
this.requestingData = false;
@@ -239,7 +239,7 @@
this.lastSelectedFlamegraphState.end !== selection.end ||
this.lastSelectedFlamegraphState.type !== selection.type ||
!FlamegraphController.areArraysEqual(
- this.lastSelectedFlamegraphState.upids, selection.upids) ||
+ this.lastSelectedFlamegraphState.upids, selection.upids) ||
this.lastSelectedFlamegraphState.viewingOption !==
selection.viewingOption ||
this.lastSelectedFlamegraphState.focusRegex !==
@@ -249,11 +249,11 @@
}
private prepareAndMergeCallsites(
- flamegraphData: CallsiteInfo[],
- viewingOption: FlamegraphStateViewingOption, isInAreaSelection: boolean,
- rootSize?: number, expandedCallsite?: CallsiteInfo) {
+ flamegraphData: CallsiteInfo[],
+ viewingOption: FlamegraphStateViewingOption, isInAreaSelection: boolean,
+ rootSize?: number, expandedCallsite?: CallsiteInfo) {
this.flamegraphDetails.flamegraph = mergeCallsites(
- flamegraphData, this.getMinSizeDisplayed(flamegraphData, rootSize));
+ flamegraphData, this.getMinSizeDisplayed(flamegraphData, rootSize));
this.flamegraphDetails.expandedCallsite = expandedCallsite;
this.flamegraphDetails.viewingOption = viewingOption;
this.flamegraphDetails.isInAreaSelection = isInAreaSelection;
@@ -265,15 +265,15 @@
flamegraphDetails.graphIncomplete =
(await this.args.engine.query(`select value from stats
where severity = 'error' and name = 'heap_graph_non_finalized_graph'`))
- .firstRow({value: NUM})
- .value > 0;
+ .firstRow({value: NUM})
+ .value > 0;
publishFlamegraphDetails(flamegraphDetails);
}
async getFlamegraphData(
- baseKey: string, viewingOption: FlamegraphStateViewingOption, start: time,
- end: time, upids: number[], type: ProfileType,
- focusRegex: string): Promise<CallsiteInfo[]> {
+ baseKey: string, viewingOption: FlamegraphStateViewingOption, start: time,
+ end: time, upids: number[], type: ProfileType,
+ focusRegex: string): Promise<CallsiteInfo[]> {
let currentData: CallsiteInfo[];
const key = `${baseKey}-${viewingOption}`;
if (this.flamegraphDatasets.has(key)) {
@@ -287,15 +287,15 @@
const tableName =
await this.prepareViewsAndTables(start, end, upids, type, focusRegex);
currentData = await this.getFlamegraphDataFromTables(
- tableName, viewingOption, focusRegex);
+ tableName, viewingOption, focusRegex);
this.flamegraphDatasets.set(key, currentData);
}
return currentData;
}
async getFlamegraphDataFromTables(
- tableName: string, viewingOption: FlamegraphStateViewingOption,
- focusRegex: string) {
+ tableName: string, viewingOption: FlamegraphStateViewingOption,
+ focusRegex: string) {
let orderBy = '';
let totalColumnName: 'cumulativeSize'|'cumulativeAllocSize'|
'cumulativeCount'|'cumulativeAllocCount' = 'cumulativeSize';
@@ -304,39 +304,39 @@
// Alternatively consider collapsing frames of the same label.
const maxDepth = 100;
switch (viewingOption) {
- case FlamegraphStateViewingOption.ALLOC_SPACE_MEMORY_ALLOCATED_KEY:
- orderBy = `where cumulative_alloc_size > 0 and depth < ${
- maxDepth} order by depth, parent_id,
+ case FlamegraphStateViewingOption.ALLOC_SPACE_MEMORY_ALLOCATED_KEY:
+ orderBy = `where cumulative_alloc_size > 0 and depth < ${
+ maxDepth} order by depth, parent_id,
cumulative_alloc_size desc, name`;
- totalColumnName = 'cumulativeAllocSize';
- selfColumnName = 'size';
- break;
- case FlamegraphStateViewingOption.OBJECTS_ALLOCATED_NOT_FREED_KEY:
- orderBy = `where cumulative_count > 0 and depth < ${
- maxDepth} order by depth, parent_id,
+ totalColumnName = 'cumulativeAllocSize';
+ selfColumnName = 'size';
+ break;
+ case FlamegraphStateViewingOption.OBJECTS_ALLOCATED_NOT_FREED_KEY:
+ orderBy = `where cumulative_count > 0 and depth < ${
+ maxDepth} order by depth, parent_id,
cumulative_count desc, name`;
- totalColumnName = 'cumulativeCount';
- selfColumnName = 'count';
- break;
- case FlamegraphStateViewingOption.OBJECTS_ALLOCATED_KEY:
- orderBy = `where cumulative_alloc_count > 0 and depth < ${
- maxDepth} order by depth, parent_id,
+ totalColumnName = 'cumulativeCount';
+ selfColumnName = 'count';
+ break;
+ case FlamegraphStateViewingOption.OBJECTS_ALLOCATED_KEY:
+ orderBy = `where cumulative_alloc_count > 0 and depth < ${
+ maxDepth} order by depth, parent_id,
cumulative_alloc_count desc, name`;
- totalColumnName = 'cumulativeAllocCount';
- selfColumnName = 'count';
- break;
- case FlamegraphStateViewingOption.PERF_SAMPLES_KEY:
- case FlamegraphStateViewingOption.SPACE_MEMORY_ALLOCATED_NOT_FREED_KEY:
- orderBy = `where cumulative_size > 0 and depth < ${
- maxDepth} order by depth, parent_id,
+ totalColumnName = 'cumulativeAllocCount';
+ selfColumnName = 'count';
+ break;
+ case FlamegraphStateViewingOption.PERF_SAMPLES_KEY:
+ case FlamegraphStateViewingOption.SPACE_MEMORY_ALLOCATED_NOT_FREED_KEY:
+ orderBy = `where cumulative_size > 0 and depth < ${
+ maxDepth} order by depth, parent_id,
cumulative_size desc, name`;
- totalColumnName = 'cumulativeSize';
- selfColumnName = 'size';
- break;
- default:
- const exhaustiveCheck: never = viewingOption;
- throw new Error(`Unhandled case: ${exhaustiveCheck}`);
- break;
+ totalColumnName = 'cumulativeSize';
+ selfColumnName = 'size';
+ break;
+ default:
+ const exhaustiveCheck: never = viewingOption;
+ throw new Error(`Unhandled case: ${exhaustiveCheck}`);
+ break;
}
const callsites = await this.args.engine.query(`
@@ -419,8 +419,8 @@
}
private async prepareViewsAndTables(
- start: time, end: time, upids: number[], type: ProfileType,
- focusRegex: string): Promise<string> {
+ start: time, end: time, upids: number[], type: ProfileType,
+ focusRegex: string): Promise<string> {
const flamegraphType = getFlamegraphType(type);
if (type === ProfileType.PERF_SAMPLE) {
let upid: string;
@@ -433,7 +433,7 @@
upidGroup = `NULL`;
}
return this.cache.getTableName(
- `select id, name, map_name, parent_id, depth, cumulative_size,
+ `select id, name, map_name, parent_id, depth, cumulative_size,
cumulative_alloc_size, cumulative_count, cumulative_alloc_count,
size, alloc_size, count, alloc_count, source_file, line_number
from experimental_flamegraph(
@@ -446,7 +446,7 @@
)`);
}
return this.cache.getTableName(
- `select id, name, map_name, parent_id, depth, cumulative_size,
+ `select id, name, map_name, parent_id, depth, cumulative_size,
cumulative_alloc_size, cumulative_count, cumulative_alloc_count,
size, alloc_size, count, alloc_count, source_file, line_number
from experimental_flamegraph(
@@ -474,14 +474,14 @@
}
async getFlamegraphMetadata(
- type: ProfileType, start: time, end: time,
- upids: number[]): Promise<FlamegraphDetails|undefined> {
+ type: ProfileType, start: time, end: time,
+ upids: number[]): Promise<FlamegraphDetails|undefined> {
// Don't do anything if selection of the marker stayed the same.
if ((this.lastSelectedFlamegraphState !== undefined &&
((this.lastSelectedFlamegraphState.start === start &&
this.lastSelectedFlamegraphState.end === end &&
FlamegraphController.areArraysEqual(
- this.lastSelectedFlamegraphState.upids, upids))))) {
+ this.lastSelectedFlamegraphState.upids, upids))))) {
return undefined;
}
@@ -490,7 +490,7 @@
const upidGroup = FlamegraphController.serializeUpidGroup(upids);
const result = await this.args.engine.query(
- `select pid from process where upid in (${upidGroup})`);
+ `select pid from process where upid in (${upidGroup})`);
const it = result.iter({pid: NUM});
const pids = [];
for (let i = 0; it.valid(); ++i, it.next()) {
diff --git a/ui/src/controller/flow_events_controller.ts b/ui/src/controller/flow_events_controller.ts
index c6515b3..202a626 100644
--- a/ui/src/controller/flow_events_controller.ts
+++ b/ui/src/controller/flow_events_controller.ts
@@ -314,12 +314,12 @@
this.lastSelectedKind = 'CHROME_SLICE';
const connectedFlows = SHOW_INDIRECT_PRECEDING_FLOWS_FLAG.get() ?
- `(
+ `(
select * from directly_connected_flow(${sliceId})
union
select * from preceding_flow(${sliceId})
)` :
- `directly_connected_flow(${sliceId})`;
+ `directly_connected_flow(${sliceId})`;
const query = `
select
@@ -358,7 +358,7 @@
left join process process_in on process_in.upid = thread_in.upid
`;
this.queryFlowEvents(
- query, (flows: Flow[]) => publishConnectedFlows(flows));
+ query, (flows: Flow[]) => publishConnectedFlows(flows));
}
areaSelected(areaId: string) {
diff --git a/ui/src/controller/ftrace_controller.ts b/ui/src/controller/ftrace_controller.ts
index e4f13cc..664d754 100644
--- a/ui/src/controller/ftrace_controller.ts
+++ b/ui/src/controller/ftrace_controller.ts
@@ -129,15 +129,15 @@
limit ${count} offset ${offset};`);
const events: FtraceEvent[] = [];
const it = queryRes.iter(
- {
- id: NUM,
- ts: LONG,
- name: STR,
- cpu: NUM,
- thread: STR_NULL,
- process: STR_NULL,
- args: STR,
- },
+ {
+ id: NUM,
+ ts: LONG,
+ name: STR,
+ cpu: NUM,
+ thread: STR_NULL,
+ process: STR_NULL,
+ args: STR,
+ },
);
for (let row = 0; it.valid(); it.next(), row++) {
events.push({
diff --git a/ui/src/controller/logs_controller.ts b/ui/src/controller/logs_controller.ts
index 987a7fb..aa6b505 100644
--- a/ui/src/controller/logs_controller.ts
+++ b/ui/src/controller/logs_controller.ts
@@ -36,7 +36,7 @@
import {Controller} from './controller';
async function updateLogBounds(
- engine: Engine, span: Span<time, duration>): Promise<LogBounds> {
+ engine: Engine, span: Span<time, duration>): Promise<LogBounds> {
const vizStartNs = span.start;
const vizEndNs = span.end;
@@ -73,7 +73,7 @@
}
async function updateLogEntries(
- engine: Engine, span: Span<time, duration>, pagination: Pagination):
+ engine: Engine, span: Span<time, duration>, pagination: Pagination):
Promise<LogEntries> {
const vizStartNs = span.start;
const vizEndNs = span.end;
@@ -116,7 +116,7 @@
tags.push(it.tag);
messages.push(it.msg);
isHighlighted.push(
- it.isMsgHighlighted === 1 || it.isProcessHighlighted === 1);
+ it.isMsgHighlighted === 1 || it.isProcessHighlighted === 1);
processName.push(it.processName);
}
@@ -253,8 +253,8 @@
await this.engine.query('drop view if exists filtered_logs');
const globMatch = LogsController.composeGlobMatch(
- this.logFilteringCriteria.hideNonMatching,
- this.logFilteringCriteria.textEntry);
+ this.logFilteringCriteria.hideNonMatching,
+ this.logFilteringCriteria.textEntry);
let selectedRows = `select prio, ts, tag, msg,
process.name as process_name, ${globMatch}
from android_logs
@@ -263,7 +263,7 @@
where prio >= ${this.logFilteringCriteria.minimumLevel}`;
if (this.logFilteringCriteria.tags.length) {
selectedRows += ` and tag in (${
- LogsController.serializeTags(this.logFilteringCriteria.tags)})`;
+ LogsController.serializeTags(this.logFilteringCriteria.tags)})`;
}
// We extract only the rows which will be visible.
@@ -301,7 +301,7 @@
// If the entries are collapsed, we won't highlight any lines.
return `msg glob ${escapeGlob(textEntry)} as is_msg_chosen,
(process.name is not null and process.name glob ${
- escapeGlob(textEntry)}) as is_process_chosen,
+ escapeGlob(textEntry)}) as is_process_chosen,
0 as is_msg_highlighted,
0 as is_process_highlighted`;
} else if (!textEntry) {
@@ -316,7 +316,7 @@
1 as is_process_chosen,
msg glob ${escapeGlob(textEntry)} as is_msg_highlighted,
(process.name is not null and process.name glob ${
- escapeGlob(textEntry)}) as is_process_highlighted`;
+ escapeGlob(textEntry)}) as is_process_highlighted`;
}
}
}
diff --git a/ui/src/controller/permalink_controller.ts b/ui/src/controller/permalink_controller.ts
index c49673a..a309be3 100644
--- a/ui/src/controller/permalink_controller.ts
+++ b/ui/src/controller/permalink_controller.ts
@@ -77,34 +77,34 @@
});
PermalinkController.createPermalink(isRecordingConfig)
- .then((hash) => {
- globals.dispatch(Actions.setPermalink({requestId, hash}));
- })
- .finally(() => {
- publishConversionJobStatusUpdate({
- jobName,
- jobStatus: ConversionJobStatus.NotRunning,
- });
+ .then((hash) => {
+ globals.dispatch(Actions.setPermalink({requestId, hash}));
+ })
+ .finally(() => {
+ publishConversionJobStatusUpdate({
+ jobName,
+ jobStatus: ConversionJobStatus.NotRunning,
});
+ });
return;
}
// Otherwise, this is a request to load the permalink.
PermalinkController.loadState(globals.state.permalink.hash)
- .then((stateOrConfig) => {
- if (PermalinkController.isRecordConfig(stateOrConfig)) {
- // This permalink state only contains a RecordConfig. Show the
- // recording page with the config, but keep other state as-is.
- const validConfig =
+ .then((stateOrConfig) => {
+ if (PermalinkController.isRecordConfig(stateOrConfig)) {
+ // This permalink state only contains a RecordConfig. Show the
+ // recording page with the config, but keep other state as-is.
+ const validConfig =
runValidator(recordConfigValidator, stateOrConfig as unknown)
- .result;
- globals.dispatch(Actions.setRecordConfig({config: validConfig}));
- Router.navigate('#!/record');
- return;
- }
- globals.dispatch(Actions.setState({newState: stateOrConfig}));
- this.lastRequestId = stateOrConfig.permalink.requestId;
- });
+ .result;
+ globals.dispatch(Actions.setRecordConfig({config: validConfig}));
+ Router.navigate('#!/record');
+ return;
+ }
+ globals.dispatch(Actions.setState({newState: stateOrConfig}));
+ this.lastRequestId = stateOrConfig.permalink.requestId;
+ });
}
private static upgradeState(state: State): State {
@@ -170,22 +170,22 @@
PermalinkController.updateStatus(`Uploading ${traceName}`);
const uploader = new TraceGcsUploader(dataToUpload, () => {
switch (uploader.state) {
- case 'UPLOADING':
- const statusTxt = `Uploading ${uploader.getEtaString()}`;
- PermalinkController.updateStatus(statusTxt);
- break;
- case 'UPLOADED':
- // Convert state to use URLs and remove permalink.
- const url = uploader.uploadedUrl;
- uploadState = produce(globals.state, (draft) => {
- assertExists(draft.engine).source = {type: 'URL', url};
- draft.permalink = {};
- });
- break;
- case 'ERROR':
- PermalinkController.updateStatus(
- `Upload failed ${uploader.error}`);
- break;
+ case 'UPLOADING':
+ const statusTxt = `Uploading ${uploader.getEtaString()}`;
+ PermalinkController.updateStatus(statusTxt);
+ break;
+ case 'UPLOADED':
+ // Convert state to use URLs and remove permalink.
+ const url = uploader.uploadedUrl;
+ uploadState = produce(globals.state, (draft) => {
+ assertExists(draft.engine).source = {type: 'URL', url};
+ draft.permalink = {};
+ });
+ break;
+ case 'ERROR':
+ PermalinkController.updateStatus(
+ `Upload failed ${uploader.error}`);
+ break;
} // switch (state)
}); // onProgress
await uploader.waitForCompletion();
@@ -204,7 +204,7 @@
const response = await fetch(url);
if (!response.ok) {
throw new Error(
- `Could not fetch permalink.\n` +
+ `Could not fetch permalink.\n` +
`Are you sure the id (${id}) is correct?\n` +
`URL: ${url}`);
}
diff --git a/ui/src/controller/pivot_table_controller.ts b/ui/src/controller/pivot_table_controller.ts
index 4954544..230a151 100644
--- a/ui/src/controller/pivot_table_controller.ts
+++ b/ui/src/controller/pivot_table_controller.ts
@@ -103,9 +103,9 @@
const treeCount =
countIndex >= 0 ? expectNumber(tree.aggregates[countIndex]) : 0;
const rowCount = countIndex >= 0 ?
- expectNumber(
- row[aggregationIndex(this.pivotColumnsCount, countIndex)]) :
- 0;
+ expectNumber(
+ row[aggregationIndex(this.pivotColumnsCount, countIndex)]) :
+ 0;
for (let i = 0; i < this.aggregateColumns.length; i++) {
const agg = this.aggregateColumns[i];
@@ -114,22 +114,22 @@
const childAgg = row[aggregationIndex(this.pivotColumnsCount, i)];
if (typeof currAgg === 'number' && typeof childAgg === 'number') {
switch (agg.aggregationFunction) {
- case 'SUM':
- case 'COUNT':
- tree.aggregates[i] = currAgg + childAgg;
- break;
- case 'MAX':
- tree.aggregates[i] = Math.max(currAgg, childAgg);
- break;
- case 'MIN':
- tree.aggregates[i] = Math.min(currAgg, childAgg);
- break;
- case 'AVG': {
- const currSum = currAgg * treeCount;
- const addSum = childAgg * rowCount;
- tree.aggregates[i] = (currSum + addSum) / (treeCount + rowCount);
- break;
- }
+ case 'SUM':
+ case 'COUNT':
+ tree.aggregates[i] = currAgg + childAgg;
+ break;
+ case 'MAX':
+ tree.aggregates[i] = Math.max(currAgg, childAgg);
+ break;
+ case 'MIN':
+ tree.aggregates[i] = Math.min(currAgg, childAgg);
+ break;
+ case 'AVG': {
+ const currSum = currAgg * treeCount;
+ const addSum = childAgg * rowCount;
+ tree.aggregates[i] = (currSum + addSum) / (treeCount + rowCount);
+ break;
+ }
}
}
}
@@ -153,7 +153,7 @@
aggregates.push(row[aggregationIndex(this.pivotColumnsCount, j)]);
}
aggregates.push(row[aggregationIndex(
- this.pivotColumnsCount, this.aggregateColumns.length)]);
+ this.pivotColumnsCount, this.aggregateColumns.length)]);
return {
isCollapsed: false,
@@ -246,7 +246,7 @@
// Iterator is invalid after creation; means that there are no rows
// satisfying filtering criteria. Return an empty tree.
globals.dispatch(Actions.setPivotStateQueryResult(
- {queryResult: createEmptyQueryResult(query.metadata)}));
+ {queryResult: createEmptyQueryResult(query.metadata)}));
return;
}
@@ -256,7 +256,7 @@
}
globals.dispatch(Actions.setPivotStateQueryResult(
- {queryResult: {tree: treeBuilder.build(), metadata: query.metadata}}));
+ {queryResult: {tree: treeBuilder.build(), metadata: query.metadata}}));
globals.dispatch(Actions.setCurrentTab({tab: 'pivot_table'}));
}
@@ -293,7 +293,7 @@
(selection !== null && selection.kind === 'AREA' &&
this.shouldRerun(pivotTableState, selection))) {
globals.dispatch(
- Actions.setPivotTableQueryRequested({queryRequested: false}));
+ Actions.setPivotTableQueryRequested({queryRequested: false}));
// Need to re-run the existing query, clear the current result.
globals.dispatch(Actions.setPivotStateQueryResult({queryResult: null}));
this.processQuery(generateQueryFromState(pivotTableState));
diff --git a/ui/src/controller/pivot_table_tree_builder_unittest.ts b/ui/src/controller/pivot_table_tree_builder_unittest.ts
index 5ab93f9..8d3d696 100644
--- a/ui/src/controller/pivot_table_tree_builder_unittest.ts
+++ b/ui/src/controller/pivot_table_tree_builder_unittest.ts
@@ -19,18 +19,18 @@
describe('Pivot Table tree builder', () => {
test('aggregates averages correctly', () => {
const builder = new PivotTableTreeBuilder(
- {
- pivotColumns: [
- {kind: 'regular', table: 'slice', column: 'category'},
- {kind: 'regular', table: 'slice', column: 'name'},
- ],
- aggregationColumns: [{
- aggregationFunction: 'AVG',
- column: {kind: 'regular', table: 'slice', column: 'dur'},
- }],
- countIndex: 1,
- },
- ['cat1', 'name1', 80.0, 2]);
+ {
+ pivotColumns: [
+ {kind: 'regular', table: 'slice', column: 'category'},
+ {kind: 'regular', table: 'slice', column: 'name'},
+ ],
+ aggregationColumns: [{
+ aggregationFunction: 'AVG',
+ column: {kind: 'regular', table: 'slice', column: 'dur'},
+ }],
+ countIndex: 1,
+ },
+ ['cat1', 'name1', 80.0, 2]);
builder.ingestRow(['cat1', 'name2', 20.0, 1]);
builder.ingestRow(['cat2', 'name3', 20.0, 1]);
diff --git a/ui/src/controller/record_config_types.ts b/ui/src/controller/record_config_types.ts
index 78f6478..06e4ec8 100644
--- a/ui/src/controller/record_config_types.ts
+++ b/ui/src/controller/record_config_types.ts
@@ -115,7 +115,7 @@
targetCmdLine: arrayOf(str()),
});
export const namedRecordConfigValidator = record(
- {title: requiredStr, key: requiredStr, config: recordConfigValidator});
+ {title: requiredStr, key: requiredStr, config: recordConfigValidator});
export type NamedRecordConfig =
ValidatedType<typeof namedRecordConfigValidator>;
export type RecordConfig = ValidatedType<typeof recordConfigValidator>;
diff --git a/ui/src/controller/record_controller.ts b/ui/src/controller/record_controller.ts
index f5d8d61..8ce241d 100644
--- a/ui/src/controller/record_controller.ts
+++ b/ui/src/controller/record_controller.ts
@@ -53,7 +53,7 @@
type RPCImplMethod = (Method|rpc.ServiceMethod<Message<{}>, Message<{}>>);
export function genConfigProto(
- uiCfg: RecordConfig, target: RecordingTarget): Uint8Array {
+ uiCfg: RecordConfig, target: RecordingTarget): Uint8Array {
return TraceConfig.encode(convertToRecordingV2Input(uiCfg, target)).finish();
}
@@ -62,38 +62,38 @@
// diverge.
// TODO(octaviant) delete this once we switch to RecordingV2.
function convertToRecordingV2Input(
- uiCfg: RecordConfig, target: RecordingTarget): TraceConfig {
+ uiCfg: RecordConfig, target: RecordingTarget): TraceConfig {
let targetType: 'ANDROID'|'CHROME'|'CHROME_OS'|'LINUX';
let androidApiLevel!: number;
switch (target.os) {
- case 'L':
- targetType = 'LINUX';
- break;
- case 'C':
- targetType = 'CHROME';
- break;
- case 'CrOS':
- targetType = 'CHROME_OS';
- break;
- case 'S':
- androidApiLevel = 31;
- targetType = 'ANDROID';
- break;
- case 'R':
- androidApiLevel = 30;
- targetType = 'ANDROID';
- break;
- case 'Q':
- androidApiLevel = 29;
- targetType = 'ANDROID';
- break;
- case 'P':
- androidApiLevel = 28;
- targetType = 'ANDROID';
- break;
- default:
- androidApiLevel = 26;
- targetType = 'ANDROID';
+ case 'L':
+ targetType = 'LINUX';
+ break;
+ case 'C':
+ targetType = 'CHROME';
+ break;
+ case 'CrOS':
+ targetType = 'CHROME_OS';
+ break;
+ case 'S':
+ androidApiLevel = 31;
+ targetType = 'ANDROID';
+ break;
+ case 'R':
+ androidApiLevel = 30;
+ targetType = 'ANDROID';
+ break;
+ case 'Q':
+ androidApiLevel = 29;
+ targetType = 'ANDROID';
+ break;
+ case 'P':
+ androidApiLevel = 28;
+ targetType = 'ANDROID';
+ break;
+ default:
+ androidApiLevel = 26;
+ targetType = 'ANDROID';
}
let targetInfo: TargetInfo;
@@ -170,7 +170,7 @@
yield ' '.repeat(indent) + '}';
} else {
throw new Error(`Record proto entry "${entry}" with unexpected type ${
- typeof entry}`);
+ typeof entry}`);
}
yield '\n';
}
@@ -307,7 +307,7 @@
globals.dispatch(Actions.setRecordingStatus({status: undefined}));
if (globals.state.recordingCancelled) {
globals.dispatch(
- Actions.setLastRecordingError({error: 'Recording cancelled.'}));
+ Actions.setLastRecordingError({error: 'Recording cancelled.'}));
this.traceBuffer = [];
return;
}
@@ -349,7 +349,7 @@
// TODO(octaviant): b/204998302
console.error('Error in record controller: ', message);
globals.dispatch(
- Actions.setLastRecordingError({error: message.substr(0, 150)}));
+ Actions.setLastRecordingError({error: message.substr(0, 150)}));
globals.dispatch(Actions.stopRecording({}));
}
@@ -387,8 +387,8 @@
const socketAccess = await this.hasSocketAccess(target);
controller = socketAccess ?
- new AdbSocketConsumerPort(this.adb, this) :
- new AdbConsumerPort(this.adb, this);
+ new AdbSocketConsumerPort(this.adb, this) :
+ new AdbConsumerPort(this.adb, this);
} else {
throw Error(`No device connected`);
}
@@ -416,8 +416,8 @@
}
private async rpcImpl(
- method: RPCImplMethod, requestData: Uint8Array,
- _callback: RPCImplCallback) {
+ method: RPCImplMethod, requestData: Uint8Array,
+ _callback: RPCImplCallback) {
try {
const state = globals.state;
// TODO(hjd): This is a bit weird. We implicitly send each RPC message to
diff --git a/ui/src/controller/search_controller.ts b/ui/src/controller/search_controller.ts
index 8474274..937a4d4 100644
--- a/ui/src/controller/search_controller.ts
+++ b/ui/src/controller/search_controller.ts
@@ -117,26 +117,26 @@
this.updateInProgress = true;
const computeSummary =
this.update(search, newSpan.start, newSpan.end, newResolution)
- .then((summary) => {
- publishSearch(summary);
- });
+ .then((summary) => {
+ publishSearch(summary);
+ });
const computeResults = this.specificSearch(search).then((searchResults) => {
publishSearchResult(searchResults);
});
Promise.all([computeSummary, computeResults])
- .finally(() => {
- this.updateInProgress = false;
- this.run();
- });
+ .finally(() => {
+ this.updateInProgress = false;
+ this.run();
+ });
}
onDestroy() {}
private async update(
- search: string, start: time, end: time,
- resolution: duration): Promise<SearchSummary> {
+ search: string, start: time, end: time,
+ resolution: duration): Promise<SearchSummary> {
const searchLiteral = escapeSearchQuery(search);
const quantum = resolution * 10n;
@@ -273,7 +273,7 @@
};
const it = queryRes.iter(
- {sliceId: NUM, ts: LONG, source: STR, sourceId: NUM, utid: NUM});
+ {sliceId: NUM, ts: LONG, source: STR, sourceId: NUM, utid: NUM});
for (; it.valid(); it.next()) {
let trackId = undefined;
if (it.source === 'cpu') {
diff --git a/ui/src/controller/selection_controller.ts b/ui/src/controller/selection_controller.ts
index 52245a8..09753b2 100644
--- a/ui/src/controller/selection_controller.ts
+++ b/ui/src/controller/selection_controller.ts
@@ -89,12 +89,12 @@
if (selection.kind === 'COUNTER') {
this.counterDetails(selection.leftTs, selection.rightTs, selection.id)
- .then((results) => {
- if (results !== undefined && selection.kind === selectedKind &&
+ .then((results) => {
+ if (results !== undefined && selection.kind === selectedKind &&
selection.id === selectedId) {
- publishCounterDetails(results);
- }
- });
+ publishCounterDetails(results);
+ }
+ });
} else if (selection.kind === 'SLICE') {
this.sliceDetails(selectedId as number);
} else if (selection.kind === 'THREAD_STATE') {
@@ -138,7 +138,7 @@
const promisedDetails = this.args.engine.query(`
SELECT *, ABS_TIME_STR(ts) as absTime FROM ${leafTable} WHERE id = ${
- selectedId};
+ selectedId};
`);
const [details, args] = await Promise.all([promisedDetails, promisedArgs]);
@@ -179,37 +179,37 @@
for (const k of details.columns()) {
const v = rowIter.get(k);
switch (k) {
- case 'id':
- break;
- case 'ts':
- ts = timeFromSql(v);
- break;
- case 'thread_ts':
- threadTs = timeFromSql(v);
- break;
- case 'absTime':
- /* eslint-disable @typescript-eslint/strict-boolean-expressions */
- if (v) absTime = `${v}`;
- /* eslint-enable */
- break;
- case 'name':
- name = `${v}`;
- break;
- case 'dur':
- dur = durationFromSql(v);
- break;
- case 'thread_dur':
- threadDur = durationFromSql(v);
- break;
- case 'category':
- case 'cat':
- category = `${v}`;
- break;
- case 'track_id':
- trackId = Number(v);
- break;
- default:
- if (!ignoredColumns.includes(k)) args.set(k, `${v}`);
+ case 'id':
+ break;
+ case 'ts':
+ ts = timeFromSql(v);
+ break;
+ case 'thread_ts':
+ threadTs = timeFromSql(v);
+ break;
+ case 'absTime':
+ /* eslint-disable @typescript-eslint/strict-boolean-expressions */
+ if (v) absTime = `${v}`;
+ /* eslint-enable */
+ break;
+ case 'name':
+ name = `${v}`;
+ break;
+ case 'dur':
+ dur = durationFromSql(v);
+ break;
+ case 'thread_dur':
+ threadDur = durationFromSql(v);
+ break;
+ case 'category':
+ case 'cat':
+ category = `${v}`;
+ break;
+ case 'track_id':
+ trackId = Number(v);
+ break;
+ default:
+ if (!ignoredColumns.includes(k)) args.set(k, `${v}`);
}
}
@@ -248,8 +248,8 @@
FROM ${columnInfo.leafTrackTable}
WHERE id = ${trackId};
`)).firstRow({
- utid: NUM,
- }).utid;
+ utid: NUM,
+ }).utid;
Object.assign(selected, await this.computeThreadDetails(utid));
} else if (hasUpid) {
const upid = (await this.args.engine.query(`
@@ -257,8 +257,8 @@
FROM ${columnInfo.leafTrackTable}
WHERE id = ${trackId};
`)).firstRow({
- upid: NUM,
- }).upid;
+ upid: NUM,
+ }).upid;
Object.assign(selected, await this.computeProcessDetails(upid));
}
}
@@ -394,19 +394,19 @@
Object.assign(selected, await this.computeThreadDetails(utid));
this.schedulingDetails(ts, utid)
- .then((wakeResult) => {
- Object.assign(selected, wakeResult);
- })
- .finally(() => {
- publishSliceDetails(selected);
- });
+ .then((wakeResult) => {
+ Object.assign(selected, wakeResult);
+ })
+ .finally(() => {
+ publishSliceDetails(selected);
+ });
}
}
async counterDetails(ts: time, rightTs: time, id: number):
Promise<CounterDetails> {
const counter = await this.args.engine.query(
- `SELECT value, track_id as trackId FROM counter WHERE id = ${id}`);
+ `SELECT value, track_id as trackId FROM counter WHERE id = ${id}`);
const row = counter.iter({
value: NUM,
trackId: NUM,
@@ -496,7 +496,7 @@
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
if (threadInfo.upid) {
return Object.assign(
- {}, threadDetails, await this.computeProcessDetails(threadInfo.upid));
+ {}, threadDetails, await this.computeProcessDetails(threadInfo.upid));
}
return threadDetails;
}
diff --git a/ui/src/controller/trace_controller.ts b/ui/src/controller/trace_controller.ts
index aaf4820..f752427 100644
--- a/ui/src/controller/trace_controller.ts
+++ b/ui/src/controller/trace_controller.ts
@@ -258,101 +258,101 @@
run() {
const engineCfg = assertExists(globals.state.engine);
switch (this.state) {
- case 'init':
- this.loadTrace()
- .then((mode) => {
- globals.dispatch(Actions.setEngineReady({
- engineId: this.engineId,
- ready: true,
- mode,
- }));
- })
- .catch((err) => {
- this.updateStatus(`${err}`);
- throw err;
- });
- this.updateStatus('Opening trace');
- this.setState('loading_trace');
- break;
+ case 'init':
+ this.loadTrace()
+ .then((mode) => {
+ globals.dispatch(Actions.setEngineReady({
+ engineId: this.engineId,
+ ready: true,
+ mode,
+ }));
+ })
+ .catch((err) => {
+ this.updateStatus(`${err}`);
+ throw err;
+ });
+ this.updateStatus('Opening trace');
+ this.setState('loading_trace');
+ break;
- case 'loading_trace':
- // Stay in this state until loadTrace() returns and marks the engine as
- // ready.
- if (this.engine === undefined || !engineCfg.ready) return;
- this.setState('ready');
- break;
+ case 'loading_trace':
+ // Stay in this state until loadTrace() returns and marks the engine as
+ // ready.
+ if (this.engine === undefined || !engineCfg.ready) return;
+ this.setState('ready');
+ break;
- case 'ready':
- // At this point we are ready to serve queries and handle tracks.
- const engine = assertExists(this.engine);
- const childControllers: Children = [];
+ case 'ready':
+ // At this point we are ready to serve queries and handle tracks.
+ const engine = assertExists(this.engine);
+ const childControllers: Children = [];
- const selectionArgs: SelectionControllerArgs = {engine};
- childControllers.push(
- Child('selection', SelectionController, selectionArgs));
+ const selectionArgs: SelectionControllerArgs = {engine};
+ childControllers.push(
+ Child('selection', SelectionController, selectionArgs));
- const flowEventsArgs: FlowEventsControllerArgs = {engine};
- childControllers.push(
- Child('flowEvents', FlowEventsController, flowEventsArgs));
+ const flowEventsArgs: FlowEventsControllerArgs = {engine};
+ childControllers.push(
+ Child('flowEvents', FlowEventsController, flowEventsArgs));
- const cpuProfileArgs: CpuProfileControllerArgs = {engine};
- childControllers.push(
- Child('cpuProfile', CpuProfileController, cpuProfileArgs));
+ const cpuProfileArgs: CpuProfileControllerArgs = {engine};
+ childControllers.push(
+ Child('cpuProfile', CpuProfileController, cpuProfileArgs));
- const flamegraphArgs: FlamegraphControllerArgs = {engine};
- childControllers.push(
- Child('flamegraph', FlamegraphController, flamegraphArgs));
+ const flamegraphArgs: FlamegraphControllerArgs = {engine};
+ childControllers.push(
+ Child('flamegraph', FlamegraphController, flamegraphArgs));
+ childControllers.push(Child(
+ 'cpu_aggregation',
+ CpuAggregationController,
+ {engine, kind: 'cpu_aggregation'}));
+ childControllers.push(Child(
+ 'thread_aggregation',
+ ThreadAggregationController,
+ {engine, kind: 'thread_state_aggregation'}));
+ childControllers.push(Child(
+ 'cpu_process_aggregation',
+ CpuByProcessAggregationController,
+ {engine, kind: 'cpu_by_process_aggregation'}));
+ if (!PIVOT_TABLE_REDUX_FLAG.get()) {
+ // Pivot table is supposed to handle the use cases the slice
+ // aggregation panel is used right now. When a flag to use pivot
+ // tables is enabled, do not add slice aggregation controller.
childControllers.push(Child(
- 'cpu_aggregation',
- CpuAggregationController,
- {engine, kind: 'cpu_aggregation'}));
- childControllers.push(Child(
- 'thread_aggregation',
- ThreadAggregationController,
- {engine, kind: 'thread_state_aggregation'}));
- childControllers.push(Child(
- 'cpu_process_aggregation',
- CpuByProcessAggregationController,
- {engine, kind: 'cpu_by_process_aggregation'}));
- if (!PIVOT_TABLE_REDUX_FLAG.get()) {
- // Pivot table is supposed to handle the use cases the slice
- // aggregation panel is used right now. When a flag to use pivot
- // tables is enabled, do not add slice aggregation controller.
- childControllers.push(Child(
- 'slice_aggregation',
- SliceAggregationController,
- {engine, kind: 'slice_aggregation'}));
- }
- childControllers.push(Child(
- 'counter_aggregation',
- CounterAggregationController,
- {engine, kind: 'counter_aggregation'}));
- childControllers.push(Child(
- 'frame_aggregation',
- FrameAggregationController,
- {engine, kind: 'frame_aggregation'}));
- childControllers.push(Child('search', SearchController, {
- engine,
- app: globals,
- }));
- childControllers.push(
- Child('pivot_table', PivotTableController, {engine}));
+ 'slice_aggregation',
+ SliceAggregationController,
+ {engine, kind: 'slice_aggregation'}));
+ }
+ childControllers.push(Child(
+ 'counter_aggregation',
+ CounterAggregationController,
+ {engine, kind: 'counter_aggregation'}));
+ childControllers.push(Child(
+ 'frame_aggregation',
+ FrameAggregationController,
+ {engine, kind: 'frame_aggregation'}));
+ childControllers.push(Child('search', SearchController, {
+ engine,
+ app: globals,
+ }));
+ childControllers.push(
+ Child('pivot_table', PivotTableController, {engine}));
- childControllers.push(Child('logs', LogsController, {
- engine,
- app: globals,
- }));
+ childControllers.push(Child('logs', LogsController, {
+ engine,
+ app: globals,
+ }));
- childControllers.push(
- Child('ftrace', FtraceController, {engine, app: globals}));
+ childControllers.push(
+ Child('ftrace', FtraceController, {engine, app: globals}));
- childControllers.push(
- Child('traceError', TraceErrorController, {engine}));
+ childControllers.push(
+ Child('traceError', TraceErrorController, {engine}));
- return childControllers;
+ return childControllers;
- default:
- throw new Error(`unknown state ${this.state}`);
+ default:
+ throw new Error(`unknown state ${this.state}`);
}
return;
}
@@ -378,7 +378,7 @@
engine = new HttpRpcEngine(this.engineId, LoadingManager.getInstance);
engine.errorHandler = (err) => {
globals.dispatch(
- Actions.setEngineFailed({mode: 'HTTP_RPC', failure: `${err}`}));
+ Actions.setEngineFailed({mode: 'HTTP_RPC', failure: `${err}`}));
throw err;
};
} else {
@@ -492,7 +492,7 @@
];
const visibleTimeSpan = await computeVisibleTime(
- traceTime.start, traceTime.end, isJsonTrace, this.engine);
+ traceTime.start, traceTime.end, isJsonTrace, this.engine);
// We don't know the resolution at this point. However this will be
// replaced in 50ms so a guess is fine.
const resolution = visibleTimeSpan.duration.divide(1000).toTime();
@@ -600,13 +600,13 @@
// Find the previous closest midnight from the trace start time.
const utcOffset = Time.getLatestMidnight(
- globals.state.traceTime.start,
- realtimeOffset,
+ globals.state.traceTime.start,
+ realtimeOffset,
);
const traceTzOffset = Time.getLatestMidnight(
- globals.state.traceTime.start,
- Time.sub(realtimeOffset, Time.fromSeconds(tzOffMin * 60)));
+ globals.state.traceTime.start,
+ Time.sub(realtimeOffset, Time.fromSeconds(tzOffMin * 60)));
publishRealtimeOffset(realtimeOffset, utcOffset, traceTzOffset);
}
@@ -626,7 +626,7 @@
if (pendingDeeplink.visStart !== undefined &&
pendingDeeplink.visEnd !== undefined) {
this.zoomPendingDeeplink(
- pendingDeeplink.visStart, pendingDeeplink.visEnd);
+ pendingDeeplink.visStart, pendingDeeplink.visEnd);
}
if (pendingDeeplink.query !== undefined) {
globals.openQuery(pendingDeeplink.query, 'Deeplink Query');
@@ -671,7 +671,7 @@
const leftTs = globals.state.traceTime.start;
const rightTs = globals.state.traceTime.end;
globals.dispatch(Actions.selectPerfSamples(
- {id: 0, upid, leftTs, rightTs, type: ProfileType.PERF_SAMPLE}));
+ {id: 0, upid, leftTs, rightTs, type: ProfileType.PERF_SAMPLE}));
}
private async selectFirstHeapProfile() {
@@ -798,11 +798,11 @@
if (hasSchedOverview) {
const stepPromises = [];
for (let start = trace.start; start < trace.end;
- start = Time.add(start, stepSize)) {
+ start = Time.add(start, stepSize)) {
const progress = start - trace.start;
const ratio = Number(progress) / Number(trace.duration);
this.updateStatus(
- 'Loading overview ' +
+ 'Loading overview ' +
`${Math.round(ratio * 100)}%`);
const end = Time.add(start, stepSize);
// The (async() => {})() queues all the 100 async promises in one batch.
@@ -811,8 +811,8 @@
// between each step, slowing down significantly the overall process.
stepPromises.push((async () => {
const schedResult = await engine.query(
- `select cast(sum(dur) as float)/${
- stepSize} as load, cpu from sched ` +
+ `select cast(sum(dur) as float)/${
+ stepSize} as load, cpu from sched ` +
`where ts >= ${start} and ts < ${end} and utid != 0 ` +
'group by cpu order by cpu');
const schedData: {[key: string]: QuantizedLoad} = {};
@@ -838,7 +838,7 @@
inner join (
select
ifnull(cast((ts - ${trace.start})/${
- stepSize} as int), 0) as bucket,
+ stepSize} as int), 0) as bucket,
sum(dur) as utid_sum,
utid
from slice
@@ -1113,7 +1113,7 @@
}
async function computeVisibleTime(
- traceStart: time, traceEnd: time, isJsonTrace: boolean, engine: Engine):
+ traceStart: time, traceEnd: time, isJsonTrace: boolean, engine: Engine):
Promise<Span<HighPrecisionTime>> {
// if we have non-default visible state, update the visible time to it
const previousVisibleState = globals.stateVisibleTime();
@@ -1124,7 +1124,7 @@
(previousVisibleState.start >= traceStart &&
previousVisibleState.end <= traceEnd)) {
return HighPrecisionTimeSpan.fromTime(
- previousVisibleState.start, previousVisibleState.end);
+ previousVisibleState.start, previousVisibleState.end);
}
// initialise visible time to the trace time bounds
diff --git a/ui/src/controller/trace_error_controller.ts b/ui/src/controller/trace_error_controller.ts
index 005ed14..c0da8e5 100644
--- a/ui/src/controller/trace_error_controller.ts
+++ b/ui/src/controller/trace_error_controller.ts
@@ -35,11 +35,11 @@
this.hasRun = true;
const engine = this.args.engine;
engine
- .query(
- `SELECT sum(value) as sumValue FROM stats WHERE severity != 'info'`)
- .then((result) => {
- const errors = result.firstRow({sumValue: NUM}).sumValue;
- publishTraceErrors(errors);
- });
+ .query(
+ `SELECT sum(value) as sumValue FROM stats WHERE severity != 'info'`)
+ .then((result) => {
+ const errors = result.firstRow({sumValue: NUM}).sumValue;
+ publishTraceErrors(errors);
+ });
}
}
diff --git a/ui/src/controller/track_decider.ts b/ui/src/controller/track_decider.ts
index fee96cf..4ef5258 100644
--- a/ui/src/controller/track_decider.ts
+++ b/ui/src/controller/track_decider.ts
@@ -821,7 +821,7 @@
name,
trackSortKey: PrimaryTrackSortKey.COUNTER_TRACK,
trackGroup: upid === 0 ? SCROLLING_TRACK_GROUP :
- this.upidToUuid.get(upid),
+ this.upidToUuid.get(upid),
});
}
}
@@ -1334,8 +1334,8 @@
trackSortKey: {
utid,
priority: isDefaultTrackForScope ?
- InThreadTrackSortKey.DEFAULT_TRACK :
- InThreadTrackSortKey.ORDINARY,
+ InThreadTrackSortKey.DEFAULT_TRACK :
+ InThreadTrackSortKey.ORDINARY,
},
});
}
@@ -1348,8 +1348,8 @@
trackSortKey: {
utid,
priority: isDefaultTrackForScope ?
- InThreadTrackSortKey.DEFAULT_TRACK :
- InThreadTrackSortKey.ORDINARY,
+ InThreadTrackSortKey.DEFAULT_TRACK :
+ InThreadTrackSortKey.ORDINARY,
},
});
}
@@ -1382,12 +1382,12 @@
const processName = it.processName;
const uuid = this.getUuid(0, upid);
const name = getTrackName(
- {name: trackName, upid, pid, kind: COUNTER_TRACK_KIND, processName});
+ {name: trackName, upid, pid, kind: COUNTER_TRACK_KIND, processName});
this.tracksToAdd.push({
uri: `perfetto.Counter#process${trackId}`,
name,
trackSortKey: await this.resolveTrackSortKeyForProcessCounterTrack(
- upid, trackName || undefined),
+ upid, trackName || undefined),
trackGroup: uuid,
});
}
@@ -1432,7 +1432,7 @@
getUuidUnchecked(utid: number, upid: number|null) {
return upid === null ? this.utidToUuid.get(utid) :
- this.upidToUuid.get(upid);
+ this.upidToUuid.get(upid);
}
getUuid(utid: number, upid: number|null) {
@@ -1678,8 +1678,8 @@
uri,
key: summaryTrackKey,
trackSortKey: hasSched ?
- PrimaryTrackSortKey.PROCESS_SCHEDULING_TRACK :
- PrimaryTrackSortKey.PROCESS_SUMMARY_TRACK,
+ PrimaryTrackSortKey.PROCESS_SCHEDULING_TRACK :
+ PrimaryTrackSortKey.PROCESS_SUMMARY_TRACK,
name: `${upid === null ? tid : pid} summary`,
labels: it.chromeProcessLabels.split(','),
});
@@ -1763,31 +1763,31 @@
await this.addScrollJankPluginTracks();
await this.addCpuSchedulingTracks();
await this.addFtraceTrack(
- this.engine.getProxy('TrackDecider::addFtraceTrack'));
+ this.engine.getProxy('TrackDecider::addFtraceTrack'));
await this.addCpuFreqTracks(
- this.engine.getProxy('TrackDecider::addCpuFreqTracks'));
+ this.engine.getProxy('TrackDecider::addCpuFreqTracks'));
await this.addGlobalAsyncTracks(
- this.engine.getProxy('TrackDecider::addGlobalAsyncTracks'));
+ this.engine.getProxy('TrackDecider::addGlobalAsyncTracks'));
await this.addGpuFreqTracks(
- this.engine.getProxy('TrackDecider::addGpuFreqTracks'));
+ this.engine.getProxy('TrackDecider::addGpuFreqTracks'));
await this.addCpuFreqLimitCounterTracks(
- this.engine.getProxy('TrackDecider::addCpuFreqLimitCounterTracks'));
+ this.engine.getProxy('TrackDecider::addCpuFreqLimitCounterTracks'));
await this.addCpuPerfCounterTracks(
- this.engine.getProxy('TrackDecider::addCpuPerfCounterTracks'));
+ this.engine.getProxy('TrackDecider::addCpuPerfCounterTracks'));
this.addPluginTracks();
await this.addAnnotationTracks(
- this.engine.getProxy('TrackDecider::addAnnotationTracks'));
+ this.engine.getProxy('TrackDecider::addAnnotationTracks'));
await this.groupGlobalIonTracks();
await this.groupGlobalIostatTracks(F2FS_IOSTAT_TAG, F2FS_IOSTAT_GROUP_NAME);
await this.groupGlobalIostatTracks(
- F2FS_IOSTAT_LAT_TAG, F2FS_IOSTAT_LAT_GROUP_NAME);
+ F2FS_IOSTAT_LAT_TAG, F2FS_IOSTAT_LAT_GROUP_NAME);
await this.groupGlobalIostatTracks(DISK_IOSTAT_TAG, DISK_IOSTAT_GROUP_NAME);
await this.groupGlobalUfsCmdTagTracks(UFS_CMD_TAG, UFS_CMD_TAG_GROUP_NAME);
await this.groupGlobalBuddyInfoTracks();
await this.groupTracksByRegex(KERNEL_WAKELOCK_REGEX, KERNEL_WAKELOCK_GROUP);
await this.groupTracksByRegex(NETWORK_TRACK_REGEX, NETWORK_TRACK_GROUP);
await this.groupTracksByRegex(
- ENTITY_RESIDENCY_REGEX, ENTITY_RESIDENCY_GROUP);
+ ENTITY_RESIDENCY_REGEX, ENTITY_RESIDENCY_GROUP);
await this.groupTracksByRegex(UCLAMP_REGEX, UCLAMP_GROUP);
await this.groupFrequencyTracks(FREQUENCY_GROUP);
await this.groupTracksByRegex(POWER_RAILS_REGEX, POWER_RAILS_GROUP);
@@ -1800,7 +1800,7 @@
// be listed with their user/package name only, and they will be grouped
// under on their original shared track names. E.g. "GPU Work Period"
await this.addUserAsyncSliceTracks(
- this.engine.getProxy('TrackDecider::addUserAsyncSliceTracks'));
+ this.engine.getProxy('TrackDecider::addUserAsyncSliceTracks'));
// Pre-group all kernel "threads" (actually processes) if this is a linux
// system trace. Below, addProcessTrackGroups will skip them due to an
@@ -1809,37 +1809,37 @@
// TrackKindPriority.MAIN_THREAD, any process-level tracks will end up
// pushed to the bottom of the group in the UI.
await this.addKernelThreadGrouping(
- this.engine.getProxy('TrackDecider::addKernelThreadGrouping'));
+ this.engine.getProxy('TrackDecider::addKernelThreadGrouping'));
// Create the per-process track groups. Note that this won't necessarily
// create a track per process. If a process has been completely idle and has
// no sched events, no track group will be emitted.
// Will populate this.addTrackGroupActions
await this.addProcessTrackGroups(
- this.engine.getProxy('TrackDecider::addProcessTrackGroups'));
+ this.engine.getProxy('TrackDecider::addProcessTrackGroups'));
await this.addProcessHeapProfileTracks(
- this.engine.getProxy('TrackDecider::addProcessHeapProfileTracks'));
+ this.engine.getProxy('TrackDecider::addProcessHeapProfileTracks'));
if (PERF_SAMPLE_FLAG.get()) {
await this.addProcessPerfSamplesTracks(
- this.engine.getProxy('TrackDecider::addProcessPerfSamplesTracks'));
+ this.engine.getProxy('TrackDecider::addProcessPerfSamplesTracks'));
}
await this.addProcessCounterTracks(
- this.engine.getProxy('TrackDecider::addProcessCounterTracks'));
+ this.engine.getProxy('TrackDecider::addProcessCounterTracks'));
await this.addProcessAsyncSliceTracks(
- this.engine.getProxy('TrackDecider::addProcessAsyncSliceTracks'));
+ this.engine.getProxy('TrackDecider::addProcessAsyncSliceTracks'));
await this.addActualFramesTracks(
- this.engine.getProxy('TrackDecider::addActualFramesTracks'));
+ this.engine.getProxy('TrackDecider::addActualFramesTracks'));
await this.addExpectedFramesTracks(
- this.engine.getProxy('TrackDecider::addExpectedFramesTracks'));
+ this.engine.getProxy('TrackDecider::addExpectedFramesTracks'));
await this.addThreadCounterTracks(
- this.engine.getProxy('TrackDecider::addThreadCounterTracks'));
+ this.engine.getProxy('TrackDecider::addThreadCounterTracks'));
await this.addThreadStateTracks(
- this.engine.getProxy('TrackDecider::addThreadStateTracks'));
+ this.engine.getProxy('TrackDecider::addThreadStateTracks'));
await this.addThreadSliceTracks(
- this.engine.getProxy('TrackDecider::addThreadSliceTracks'));
+ this.engine.getProxy('TrackDecider::addThreadSliceTracks'));
await this.addThreadCpuSampleTracks(
- this.engine.getProxy('TrackDecider::addThreadCpuSampleTracks'));
+ this.engine.getProxy('TrackDecider::addThreadCpuSampleTracks'));
await this.addLogsTrack(this.engine.getProxy('TrackDecider::addLogsTrack'));
// TODO(hjd): Move into plugin API.
@@ -1854,11 +1854,11 @@
}
this.addTrackGroupActions.push(
- Actions.addTracks({tracks: this.tracksToAdd}));
+ Actions.addTracks({tracks: this.tracksToAdd}));
const threadOrderingMetadata = await this.computeThreadOrderingMetadata();
this.addTrackGroupActions.push(
- Actions.setUtidToTrackSortKey({threadOrderingMetadata}));
+ Actions.setUtidToTrackSortKey({threadOrderingMetadata}));
return this.addTrackGroupActions;
}
@@ -1866,7 +1866,7 @@
// Some process counter tracks are tied to specific threads based on their
// name.
private async resolveTrackSortKeyForProcessCounterTrack(
- upid: number, threadName?: string): Promise<TrackSortKey> {
+ upid: number, threadName?: string): Promise<TrackSortKey> {
if (threadName !== 'GPU completion') {
return PrimaryTrackSortKey.COUNTER_TRACK;
}
@@ -1889,8 +1889,8 @@
}
private static getThreadSortKey(
- threadName?: string|null, tid?: number|null,
- pid?: number|null): PrimaryTrackSortKey {
+ threadName?: string|null, tid?: number|null,
+ pid?: number|null): PrimaryTrackSortKey {
if (pid !== undefined && pid !== null && pid === tid) {
return PrimaryTrackSortKey.MAIN_THREAD;
}
@@ -1917,12 +1917,12 @@
}
switch (true) {
- case /.*RenderThread.*/.test(threadName):
- return PrimaryTrackSortKey.RENDER_THREAD;
- case /.*GPU completion.*/.test(threadName):
- return PrimaryTrackSortKey.GPU_COMPLETION_THREAD;
- default:
- return PrimaryTrackSortKey.ORDINARY_THREAD;
+ case /.*RenderThread.*/.test(threadName):
+ return PrimaryTrackSortKey.RENDER_THREAD;
+ case /.*GPU completion.*/.test(threadName):
+ return PrimaryTrackSortKey.GPU_COMPLETION_THREAD;
+ default:
+ return PrimaryTrackSortKey.ORDINARY_THREAD;
}
}
}
diff --git a/ui/src/core/feature_flags.ts b/ui/src/core/feature_flags.ts
index de2cc7c..c6c98bd 100644
--- a/ui/src/core/feature_flags.ts
+++ b/ui/src/core/feature_flags.ts
@@ -172,13 +172,13 @@
get(): boolean {
switch (this.state) {
- case OverrideState.TRUE:
- return true;
- case OverrideState.FALSE:
- return false;
- case OverrideState.DEFAULT:
- default:
- return this.defaultValue;
+ case OverrideState.TRUE:
+ return true;
+ case OverrideState.FALSE:
+ return false;
+ case OverrideState.DEFAULT:
+ default:
+ return this.defaultValue;
}
}
diff --git a/ui/src/core/perf.ts b/ui/src/core/perf.ts
index ddb1f05..fd53429 100644
--- a/ui/src/core/perf.ts
+++ b/ui/src/core/perf.ts
@@ -123,11 +123,11 @@
},
m('i.material-icons', 'close')),
this.containers.map(
- (c, i) => m(
- 'section',
- m('div', `Panel Container ${i + 1}`),
- c.renderPerfStats(),
- )),
+ (c, i) => m(
+ 'section',
+ m('div', `Panel Container ${i + 1}`),
+ c.renderPerfStats(),
+ )),
]);
}
}
diff --git a/ui/src/core/raf_scheduler.ts b/ui/src/core/raf_scheduler.ts
index f86e541..3d57e1d 100644
--- a/ui/src/core/raf_scheduler.ts
+++ b/ui/src/core/raf_scheduler.ts
@@ -26,20 +26,20 @@
function statTableHeader() {
return m(
- 'tr',
- m('th', ''),
- m('th', 'Last (ms)'),
- m('th', 'Avg (ms)'),
- m('th', 'Avg-10 (ms)'));
+ 'tr',
+ m('th', ''),
+ m('th', 'Last (ms)'),
+ m('th', 'Avg (ms)'),
+ m('th', 'Avg-10 (ms)'));
}
function statTableRow(title: string, stat: RunningStatistics) {
return m(
- 'tr',
- m('td', title),
- m('td', stat.last.toFixed(2)),
- m('td', stat.mean.toFixed(2)),
- m('td', stat.bufferMean.toFixed(2)));
+ 'tr',
+ m('td', title),
+ m('td', stat.last.toFixed(2)),
+ m('td', stat.mean.toFixed(2)),
+ m('td', stat.bufferMean.toFixed(2)));
}
export type ActionCallback = (nowMs: number) => void;
@@ -196,8 +196,8 @@
}
private updatePerfStats(
- actionsTime: number, domTime: number, canvasTime: number,
- totalRafTime: number) {
+ actionsTime: number, domTime: number, canvasTime: number,
+ totalRafTime: number) {
if (!perfDebug()) return;
this.perfStats.rafActions.addValue(actionsTime);
this.perfStats.rafDom.addValue(domTime);
@@ -207,28 +207,28 @@
renderPerfStats() {
return m(
- 'div',
- m('div',
- [
- m('button',
- {onclick: () => this.scheduleRedraw()},
- 'Do Canvas Redraw'),
- ' | ',
- m('button',
- {onclick: () => this.scheduleFullRedraw()},
- 'Do Full Redraw'),
- ]),
- m('div',
- 'Raf Timing ' +
+ 'div',
+ m('div',
+ [
+ m('button',
+ {onclick: () => this.scheduleRedraw()},
+ 'Do Canvas Redraw'),
+ ' | ',
+ m('button',
+ {onclick: () => this.scheduleFullRedraw()},
+ 'Do Full Redraw'),
+ ]),
+ m('div',
+ 'Raf Timing ' +
'(Total may not add up due to imprecision)'),
- m('table',
- statTableHeader(),
- statTableRow('Actions', this.perfStats.rafActions),
- statTableRow('Dom', this.perfStats.rafDom),
- statTableRow('Canvas', this.perfStats.rafCanvas),
- statTableRow('Total', this.perfStats.rafTotal)),
- m('div',
- 'Dom redraw: ' +
+ m('table',
+ statTableHeader(),
+ statTableRow('Actions', this.perfStats.rafActions),
+ statTableRow('Dom', this.perfStats.rafDom),
+ statTableRow('Canvas', this.perfStats.rafCanvas),
+ statTableRow('Total', this.perfStats.rafTotal)),
+ m('div',
+ 'Dom redraw: ' +
`Count: ${this.perfStats.domRedraw.count} | ` +
runningStatStr(this.perfStats.domRedraw)));
}
diff --git a/ui/src/core/trace_config_utils.ts b/ui/src/core/trace_config_utils.ts
index 7fdb110..7c3de41 100644
--- a/ui/src/core/trace_config_utils.ts
+++ b/ui/src/core/trace_config_utils.ts
@@ -40,7 +40,7 @@
export function browserSupportsPerfettoConfig(): boolean {
const minimumChromeVersion = '91.0.4448.0';
const runningVersion = String(
- (/Chrome\/(([0-9]+\.?){4})/.exec(navigator.userAgent) || [, 0])[1]);
+ (/Chrome\/(([0-9]+\.?){4})/.exec(navigator.userAgent) || [, 0])[1]);
if (!runningVersion) return false;
diff --git a/ui/src/engine/wasm_bridge.ts b/ui/src/engine/wasm_bridge.ts
index 9cbcada..27bf435 100644
--- a/ui/src/engine/wasm_bridge.ts
+++ b/ui/src/engine/wasm_bridge.ts
@@ -54,10 +54,10 @@
this.whenInitialized = deferredRuntimeInitialized.then(() => {
const fn = this.connection.addFunction(this.onReply.bind(this), 'vii');
this.reqBufferAddr = this.connection.ccall(
- 'trace_processor_rpc_init',
- /* return=*/ 'number',
- /* args=*/['number', 'number'],
- [fn, REQ_BUF_SIZE]);
+ 'trace_processor_rpc_init',
+ /* return=*/ 'number',
+ /* args=*/['number', 'number'],
+ [fn, REQ_BUF_SIZE]);
});
}
@@ -87,10 +87,10 @@
wrSize += sliceLen;
try {
this.connection.ccall(
- 'trace_processor_on_rpc_request', // C function name.
- 'void', // Return type.
- ['number'], // Arg types.
- [sliceLen], // Args.
+ 'trace_processor_on_rpc_request', // C function name.
+ 'void', // Return type.
+ ['number'], // Arg types.
+ [sliceLen], // Args.
);
} catch (err) {
this.aborted = true;
diff --git a/ui/src/frontend/aggregation_panel.ts b/ui/src/frontend/aggregation_panel.ts
index cc685d5..c7f3eb8 100644
--- a/ui/src/frontend/aggregation_panel.ts
+++ b/ui/src/frontend/aggregation_panel.ts
@@ -35,25 +35,25 @@
m.ClassComponent<AggregationPanelAttrs> {
view({attrs}: m.CVnode<AggregationPanelAttrs>) {
return m(
- '.details-panel',
- m('.details-panel-heading.aggregation',
- attrs.data.extra !== undefined &&
+ '.details-panel',
+ m('.details-panel-heading.aggregation',
+ attrs.data.extra !== undefined &&
attrs.data.extra.kind === 'THREAD_STATE' ?
- this.showStateSummary(attrs.data.extra) :
- null,
- this.showTimeRange(),
- m('table',
- m('tr',
- attrs.data.columns.map(
- (col) => this.formatColumnHeading(col, attrs.kind))),
- m('tr.sum', attrs.data.columnSums.map((sum) => {
- const sumClass = sum === '' ? 'td' : 'td.sum-data';
- return m(sumClass, sum);
- })))),
- m(
- '.details-table.aggregation',
- m('table', this.getRows(attrs.data)),
- ));
+ this.showStateSummary(attrs.data.extra) :
+ null,
+ this.showTimeRange(),
+ m('table',
+ m('tr',
+ attrs.data.columns.map(
+ (col) => this.formatColumnHeading(col, attrs.kind))),
+ m('tr.sum', attrs.data.columnSums.map((sum) => {
+ const sumClass = sum === '' ? 'td' : 'td.sum-data';
+ return m(sumClass, sum);
+ })))),
+ m(
+ '.details-table.aggregation',
+ m('table', this.getRows(attrs.data)),
+ ));
}
formatColumnHeading(col: Column, id: string) {
@@ -62,18 +62,18 @@
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
if (pref && pref.sorting && pref.sorting.column === col.columnId) {
sortIcon = pref.sorting.direction === 'DESC' ? 'arrow_drop_down' :
- 'arrow_drop_up';
+ 'arrow_drop_up';
}
return m(
- 'th',
- {
- onclick: () => {
- globals.dispatch(
- Actions.updateAggregateSorting({id, column: col.columnId}));
- },
+ 'th',
+ {
+ onclick: () => {
+ globals.dispatch(
+ Actions.updateAggregateSorting({id, column: col.columnId}));
},
- col.title,
- m('i.material-icons', sortIcon));
+ },
+ col.title,
+ m('i.material-icons', sortIcon));
}
getRows(data: AggregateData) {
@@ -91,21 +91,21 @@
getFormattedData(data: AggregateData, rowIndex: number, columnIndex: number) {
switch (data.columns[columnIndex].kind) {
- case 'STRING':
- return data.strings[data.columns[columnIndex].data[rowIndex]];
- case 'TIMESTAMP_NS':
- return `${data.columns[columnIndex].data[rowIndex] / 1000000}`;
- case 'STATE': {
- const concatState =
+ case 'STRING':
+ return data.strings[data.columns[columnIndex].data[rowIndex]];
+ case 'TIMESTAMP_NS':
+ return `${data.columns[columnIndex].data[rowIndex] / 1000000}`;
+ case 'STATE': {
+ const concatState =
data.strings[data.columns[columnIndex].data[rowIndex]];
- const split = concatState.split(',');
- const ioWait =
+ const split = concatState.split(',');
+ const ioWait =
split[1] === 'NULL' ? undefined : !!Number.parseInt(split[1], 10);
- return translateState(split[0], ioWait);
- }
- case 'NUMBER':
- default:
- return data.columns[columnIndex].data[rowIndex];
+ return translateState(split[0], ioWait);
+ }
+ case 'NUMBER':
+ default:
+ return data.columns[columnIndex].data[rowIndex];
}
}
@@ -115,7 +115,7 @@
const selectedArea = globals.state.areas[selection.areaId];
const duration = selectedArea.end - selectedArea.start;
return m(
- '.time-range', 'Selected range: ', m(DurationWidget, {dur: duration}));
+ '.time-range', 'Selected range: ', m(DurationWidget, {dur: duration}));
}
// Thread state aggregation panel only
@@ -126,15 +126,15 @@
const colorScheme = colorForState(data.states[i]);
const width = data.values[i] / data.totalMs * 100;
states.push(
- m('.state',
- {
- style: {
- background: colorScheme.base.cssString,
- color: colorScheme.textBase.cssString,
- width: `${width}%`,
- },
+ m('.state',
+ {
+ style: {
+ background: colorScheme.base.cssString,
+ color: colorScheme.textBase.cssString,
+ width: `${width}%`,
},
- `${data.states[i]}: ${data.values[i]} ms`));
+ },
+ `${data.states[i]}: ${data.values[i]} ms`));
}
return m('.states', states);
}
diff --git a/ui/src/frontend/analytics.ts b/ui/src/frontend/analytics.ts
index 02501fe..bc1872e 100644
--- a/ui/src/frontend/analytics.ts
+++ b/ui/src/frontend/analytics.ts
@@ -135,8 +135,8 @@
document.head.appendChild(script);
const route = window.location.href;
console.log(
- `GA initialized. route=${route}`,
- `isInternalUser=${globals.isInternalUser}`);
+ `GA initialized. route=${route}`,
+ `isInternalUser=${globals.isInternalUser}`);
// GA's recommendation for SPAs is to disable automatic page views and
// manually send page_view events. See:
// https://developers.google.com/analytics/devguides/collection/gtagjs/pages#manual_pageviews
@@ -160,7 +160,7 @@
updatePath(path: string) {
gtagGlobals.gtag(
- 'event', 'page_view', {page_path: path, page_title: PAGE_TITLE});
+ 'event', 'page_view', {page_path: path, page_title: PAGE_TITLE});
}
logEvent(category: TraceCategories|null, event: string) {
diff --git a/ui/src/frontend/android_bug_tool.ts b/ui/src/frontend/android_bug_tool.ts
index c36e3d8..49f89ea 100644
--- a/ui/src/frontend/android_bug_tool.ts
+++ b/ui/src/frontend/android_bug_tool.ts
@@ -50,13 +50,13 @@
// Request to convert the blob object url "blob:chrome-extension://xxx"
// the chrome extension has to a web downloadable url "blob:http://xxx".
chrome.runtime.sendMessage(
- ANDROID_BUG_TOOL_EXTENSION_ID,
- {action: WebContentScriptMessageType.CONVERT_OBJECT_URL},
- async (response: ConvertObjectUrlResponse) => {
- switch (response.action) {
- case WebContentScriptMessageType.CONVERT_OBJECT_URL_RESPONSE:
- if (response.attachments?.length > 0) {
- const filesBlobPromises =
+ ANDROID_BUG_TOOL_EXTENSION_ID,
+ {action: WebContentScriptMessageType.CONVERT_OBJECT_URL},
+ async (response: ConvertObjectUrlResponse) => {
+ switch (response.action) {
+ case WebContentScriptMessageType.CONVERT_OBJECT_URL_RESPONSE:
+ if (response.attachments?.length > 0) {
+ const filesBlobPromises =
response.attachments.map(async (attachment) => {
const fileQueryResponse = await fetch(attachment.objectUrl);
const blob = await fileQueryResponse.blob();
@@ -64,20 +64,20 @@
// Clone blob to clear media type.
return new File([blob], attachment.name);
});
- const files = await Promise.all(filesBlobPromises);
- deferred.resolve({
- issueId: response.issueId,
- issueTitle: response.issueTitle,
- file: files[0],
- });
- } else {
- throw new Error('Got no attachements from extension');
- }
- break;
- default:
- throw new Error(`Received unhandled response code (${
- response.action}) from extension.`);
+ const files = await Promise.all(filesBlobPromises);
+ deferred.resolve({
+ issueId: response.issueId,
+ issueTitle: response.issueTitle,
+ file: files[0],
+ });
+ } else {
+ throw new Error('Got no attachements from extension');
}
- });
+ break;
+ default:
+ throw new Error(`Received unhandled response code (${
+ response.action}) from extension.`);
+ }
+ });
return deferred;
}
diff --git a/ui/src/frontend/app.ts b/ui/src/frontend/app.ts
index 5bf82ee..39392c7 100644
--- a/ui/src/frontend/app.ts
+++ b/ui/src/frontend/app.ts
@@ -321,12 +321,12 @@
if (engine !== undefined && trackUtid != 0) {
await runQuery(
- `SELECT IMPORT('experimental.thread_executing_span');`,
- engine);
+ `SELECT IMPORT('experimental.thread_executing_span');`,
+ engine);
await addDebugSliceTrack(
- engine,
- {
- sqlSource: `
+ engine,
+ {
+ sqlSource: `
SELECT
cr.id,
cr.utid,
@@ -343,12 +343,12 @@
JOIN thread USING(utid)
JOIN process USING(upid)
`,
- columns: criticalPathsliceLiteColumnNames,
- },
- (await getThreadInfo(engine, trackUtid as Utid)).name ??
+ columns: criticalPathsliceLiteColumnNames,
+ },
+ (await getThreadInfo(engine, trackUtid as Utid)).name ??
'<thread name>',
- criticalPathsliceLiteColumns,
- criticalPathsliceLiteColumnNames);
+ criticalPathsliceLiteColumns,
+ criticalPathsliceLiteColumnNames);
}
},
},
@@ -363,26 +363,26 @@
if (engine !== undefined && trackUtid != 0) {
await runQuery(
- `SELECT IMPORT('experimental.thread_executing_span');`,
- engine);
+ `SELECT IMPORT('experimental.thread_executing_span');`,
+ engine);
await addDebugSliceTrack(
- engine,
- {
- sqlSource: `
+ engine,
+ {
+ sqlSource: `
SELECT cr.id, cr.utid, cr.ts, cr.dur, cr.name, cr.table_name
FROM
internal_critical_path_stack(
${trackUtid},
${window.start},
${window.end} - ${
- window.start}, 1, 1, 1, 1) cr WHERE name IS NOT NULL
+ window.start}, 1, 1, 1, 1) cr WHERE name IS NOT NULL
`,
- columns: criticalPathsliceColumnNames,
- },
- (await getThreadInfo(engine, trackUtid as Utid)).name ??
+ columns: criticalPathsliceColumnNames,
+ },
+ (await getThreadInfo(engine, trackUtid as Utid)).name ??
'<thread name>',
- criticalPathSliceColumns,
- criticalPathsliceColumnNames);
+ criticalPathSliceColumns,
+ criticalPathsliceColumnNames);
}
},
},
@@ -397,7 +397,7 @@
if (engine !== undefined && trackUtid != 0) {
runQueryInNewTab(
- `SELECT IMPORT('experimental.thread_executing_span');
+ `SELECT IMPORT('experimental.thread_executing_span');
SELECT *
FROM
experimental_thread_executing_span_critical_path_graph(
@@ -405,8 +405,8 @@
${trackUtid},
${window.start},
${window.end} - ${window.start}) cr`,
- 'Critical path',
- 'omnibox_query');
+ 'Critical path',
+ 'omnibox_query');
}
},
},
@@ -527,19 +527,19 @@
// Find the first track with this URI
const firstTrack = Object.values(globals.state.tracks)
- .find(({uri}) => uri === selectedUri);
+ .find(({uri}) => uri === selectedUri);
if (firstTrack) {
console.log(firstTrack);
verticalScrollToTrack(firstTrack.key, true);
const traceTime = globals.stateTraceTimeTP();
globals.makeSelection(
- Actions.selectArea({
- area: {
- start: traceTime.start,
- end: traceTime.end,
- tracks: [firstTrack.key],
- },
- }),
+ Actions.selectArea({
+ area: {
+ start: traceTime.start,
+ end: traceTime.end,
+ tracks: [firstTrack.key],
+ },
+ }),
);
} else {
alert(`No tracks with uri ${selectedUri} on the timeline`);
@@ -575,10 +575,10 @@
if (msgTTL > 0 || engineIsBusy) {
setTimeout(() => raf.scheduleFullRedraw(), msgTTL * 1000);
return m(
- `.omnibox.message-mode`, m(`input[readonly][disabled][ref=omnibox]`, {
- value: '',
- placeholder: globals.state.status.msg,
- }));
+ `.omnibox.message-mode`, m(`input[readonly][disabled][ref=omnibox]`, {
+ value: '',
+ placeholder: globals.state.status.msg,
+ }));
}
if (this.omniboxMode === OmniboxMode.Command) {
@@ -725,9 +725,9 @@
},
onSubmit: (value, alt) => {
globals.openQuery(
- undoCommonChatAppReplacements(value),
- alt ? 'Pinned query' : 'Omnibox query',
- alt ? undefined : 'omnibox_query');
+ undoCommonChatAppReplacements(value),
+ alt ? 'Pinned query' : 'Omnibox query',
+ alt ? undefined : 'omnibox_query');
},
onClose: () => {
this.queryText = '';
@@ -769,7 +769,7 @@
onSubmit: (value, _mod, shift) => {
executeSearch(shift);
globals.dispatch(
- Actions.setOmnibox({omnibox: value, mode: 'SEARCH', force: true}));
+ Actions.setOmnibox({omnibox: value, mode: 'SEARCH', force: true}));
if (this.omniboxInputEl) {
this.omniboxInputEl.blur();
}
@@ -780,27 +780,27 @@
private renderStepThrough() {
return m(
- '.stepthrough',
- m('.current',
- `${
- globals.currentSearchResults.totalResults === 0 ?
- '0 / 0' :
- `${globals.state.searchIndex + 1} / ${
- globals.currentSearchResults.totalResults}`}`),
- m('button',
- {
- onclick: () => {
- executeSearch(true /* reverse direction */);
- },
+ '.stepthrough',
+ m('.current',
+ `${
+ globals.currentSearchResults.totalResults === 0 ?
+ '0 / 0' :
+ `${globals.state.searchIndex + 1} / ${
+ globals.currentSearchResults.totalResults}`}`),
+ m('button',
+ {
+ onclick: () => {
+ executeSearch(true /* reverse direction */);
},
- m('i.material-icons.left', 'keyboard_arrow_left')),
- m('button',
- {
- onclick: () => {
- executeSearch();
- },
+ },
+ m('i.material-icons.left', 'keyboard_arrow_left')),
+ m('button',
+ {
+ onclick: () => {
+ executeSearch();
},
- m('i.material-icons.right', 'keyboard_arrow_right')));
+ },
+ m('i.material-icons.right', 'keyboard_arrow_right')));
}
view({children}: m.Vnode): m.Children {
@@ -818,20 +818,20 @@
}
return m(
- HotkeyContext,
- {hotkeys},
- m(
- 'main',
- m(Sidebar),
- m(Topbar, {
- omnibox: this.renderOmnibox(),
- }),
- m(Alerts),
- children,
- m(CookieConsent),
- maybeRenderFullscreenModalDialog(),
- globals.state.perfDebug && m('.perf-stats'),
- ),
+ HotkeyContext,
+ {hotkeys},
+ m(
+ 'main',
+ m(Sidebar),
+ m(Topbar, {
+ omnibox: this.renderOmnibox(),
+ }),
+ m(Alerts),
+ children,
+ m(CookieConsent),
+ maybeRenderFullscreenModalDialog(),
+ globals.state.perfDebug && m('.perf-stats'),
+ ),
);
}
@@ -866,7 +866,7 @@
omniboxEl.select();
} else {
omniboxEl.setSelectionRange(
- this.pendingCursorPlacement, this.pendingCursorPlacement);
+ this.pendingCursorPlacement, this.pendingCursorPlacement);
this.pendingCursorPlacement = -1;
}
}
diff --git a/ui/src/frontend/base_counter_track.ts b/ui/src/frontend/base_counter_track.ts
index dcfa0d1..6f9d80b 100644
--- a/ui/src/frontend/base_counter_track.ts
+++ b/ui/src/frontend/base_counter_track.ts
@@ -164,11 +164,11 @@
// it manually, if they want to customise rendering track buttons.
protected getCounterContextMenu(): m.Child {
return m(
- PopupMenu2,
- {
- trigger: m(Button, {icon: 'show_chart', minimal: true}),
- },
- this.getCounterContextMenuItems(),
+ PopupMenu2,
+ {
+ trigger: m(Button, {icon: 'show_chart', minimal: true}),
+ },
+ this.getCounterContextMenuItems(),
);
}
@@ -241,7 +241,7 @@
if (this.getRenderOptions().yRange === 'viewport') {
const visValuesRange = this.getVisibleValuesRange(
- data.timestamps, minValues, maxValues, vizTime);
+ data.timestamps, minValues, maxValues, vizTime);
minimumValue = visValuesRange.minValue;
maximumValue = visValuesRange.maxValue;
}
@@ -336,8 +336,8 @@
const xStart = Math.floor(timeScale.timeToPx(this.hoveredTs));
const xEnd = this.hoveredTsEnd === undefined ?
- endPx :
- Math.floor(timeScale.timeToPx(this.hoveredTsEnd));
+ endPx :
+ Math.floor(timeScale.timeToPx(this.hoveredTsEnd));
const y = MARGIN_TOP + effectiveHeight -
Math.round(((this.hoveredValue - yMin) / yRange) * effectiveHeight);
@@ -352,7 +352,7 @@
// Draw change marker.
ctx.beginPath();
ctx.arc(
- xStart, y, 3 /* r*/, 0 /* start angle*/, 2 * Math.PI /* end angle*/);
+ xStart, y, 3 /* r*/, 0 /* start angle*/, 2 * Math.PI /* end angle*/);
ctx.fill();
ctx.stroke();
@@ -381,12 +381,12 @@
// If the cached trace slices don't fully cover the visible time range,
// show a gray rectangle with a "Loading..." label.
checkerboardExcept(
- ctx,
- this.getHeight(),
- 0,
- size.width,
- timeScale.timeToPx(this.countersKey.start),
- timeScale.timeToPx(this.countersKey.end));
+ ctx,
+ this.getHeight(),
+ 0,
+ size.width,
+ timeScale.timeToPx(this.countersKey.start),
+ timeScale.timeToPx(this.countersKey.end));
}
onMouseMove(pos: {x: number, y: number}) {
@@ -421,17 +421,17 @@
// entire range of possible values or the values visible on the screen. This
// method computes the latter.
private getVisibleValuesRange(
- timestamps: BigInt64Array, minValues: Float64Array,
- maxValues: Float64Array, visibleWindowTime: Span<HighPrecisionTime>):
+ timestamps: BigInt64Array, minValues: Float64Array,
+ maxValues: Float64Array, visibleWindowTime: Span<HighPrecisionTime>):
{minValue: number, maxValue: number} {
let minValue = undefined;
let maxValue = undefined;
for (let i = 0; i < timestamps.length; ++i) {
const next = i + 1 < timestamps.length ?
- HighPrecisionTime.fromNanos(timestamps[i + 1]) :
- HighPrecisionTime.fromTime(globals.state.traceTime.end);
+ HighPrecisionTime.fromNanos(timestamps[i + 1]) :
+ HighPrecisionTime.fromTime(globals.state.traceTime.end);
if (visibleWindowTime.intersects(
- HighPrecisionTime.fromNanos(timestamps[i]), next)) {
+ HighPrecisionTime.fromNanos(timestamps[i]), next)) {
if (minValue === undefined) {
minValue = minValues[i];
} else {
@@ -548,7 +548,7 @@
this.sqlState = 'QUERY_DONE';
} else if (
- this.sqlState === 'INITIALIZING' || this.sqlState === 'QUERY_PENDING') {
+ this.sqlState === 'INITIALIZING' || this.sqlState === 'QUERY_PENDING') {
return;
}
@@ -559,7 +559,7 @@
const countersKey = rawCountersKey.normalize();
if (!rawCountersKey.isCoveredBy(countersKey)) {
throw new Error(`Normalization error ${countersKey.toString()} ${
- rawCountersKey.toString()}`);
+ rawCountersKey.toString()}`);
}
const maybeCachedCounters = this.cache.lookup(countersKey);
diff --git a/ui/src/frontend/base_slice_track.ts b/ui/src/frontend/base_slice_track.ts
index d364bbd..7955172 100644
--- a/ui/src/frontend/base_slice_track.ts
+++ b/ui/src/frontend/base_slice_track.ts
@@ -74,7 +74,7 @@
// Exposed and standalone to allow for testing without making this
// visible to subclasses.
function filterVisibleSlices<S extends Slice>(
- slices: S[], start: time, end: time): S[] {
+ slices: S[], start: time, end: time): S[] {
// Here we aim to reduce the number of slices we have to draw
// by ignoring those that are not visible. A slice is visible iff:
// slice.endNsQ >= start && slice.startNsQ <= end
@@ -124,7 +124,7 @@
}
return slices.filter(
- (slice) => slice.startNsQ <= end && slice.endNsQ >= start);
+ (slice) => slice.startNsQ <= end && slice.endNsQ >= start);
}
export const filterVisibleSlicesForTesting = filterVisibleSlices;
@@ -185,7 +185,7 @@
// This is the slices cache:
private cache: TrackCache<Array<CastInternal<T['slice']>>> =
- new TrackCache(5);
+ new TrackCache(5);
// Incomplete slices (dur = -1). Rather than adding a lot of logic to
// the SQL queries to handle this case we materialise them one off
@@ -259,7 +259,7 @@
// TODO(hjd): Remove.
drawSchedLatencyArrow(
- _: CanvasRenderingContext2D, _selectedSlice?: T['slice']): void {}
+ _: CanvasRenderingContext2D, _selectedSlice?: T['slice']): void {}
constructor(args: NewTrackArgs) {
this.engine = args.engine;
@@ -277,7 +277,7 @@
sliceLayout.depthGuess !== 0) {
const {isFlat, depthGuess} = sliceLayout;
throw new Error(`if isFlat (${isFlat}) then depthGuess (${
- depthGuess}) must be 0 if defined`);
+ depthGuess}) must be 0 if defined`);
}
this.sliceLayout = sliceLayout;
}
@@ -351,7 +351,7 @@
// needed because maybeRequestData() over-fetches to handle small pan/zooms.
// We don't want to waste time drawing slices that are off screen.
const vizSlices = this.getVisibleSlicesInternal(
- vizTime.start.toTime('floor'), vizTime.end.toTime('ceil'));
+ vizTime.start.toTime('floor'), vizTime.end.toTime('ceil'));
let selection = globals.state.currentSelection;
if (!selection || !this.isSelectionHandled(selection)) {
@@ -395,7 +395,7 @@
let widthPx;
if (CROP_INCOMPLETE_SLICE_FLAG.get()) {
widthPx = slice.x > 0 ? Math.min(pxEnd, INCOMPLETE_SLICE_WIDTH_PX) :
- Math.max(0, INCOMPLETE_SLICE_WIDTH_PX + slice.x);
+ Math.max(0, INCOMPLETE_SLICE_WIDTH_PX + slice.x);
slice.x = Math.max(slice.x, 0);
} else {
slice.x = Math.max(slice.x, 0);
@@ -425,11 +425,11 @@
// Second pass: fill slices by color.
const vizSlicesByColor = vizSlices.slice();
vizSlicesByColor.sort(
- (a, b) => colorCompare(a.colorScheme.base, b.colorScheme.base));
+ (a, b) => colorCompare(a.colorScheme.base, b.colorScheme.base));
let lastColor = undefined;
for (const slice of vizSlicesByColor) {
const color = slice.isHighlighted ? slice.colorScheme.variant.cssString :
- slice.colorScheme.base.cssString;
+ slice.colorScheme.base.cssString;
if (color !== lastColor) {
lastColor = color;
ctx.fillStyle = color;
@@ -439,14 +439,14 @@
this.drawChevron(ctx, slice.x, y, sliceHeight);
} else if (slice.flags & SLICE_FLAGS_INCOMPLETE) {
const w = CROP_INCOMPLETE_SLICE_FLAG.get() ? slice.w :
- Math.max(slice.w - 2, 2);
+ Math.max(slice.w - 2, 2);
drawIncompleteSlice(
- ctx, slice.x, y, w, sliceHeight, !CROP_INCOMPLETE_SLICE_FLAG.get());
+ ctx, slice.x, y, w, sliceHeight, !CROP_INCOMPLETE_SLICE_FLAG.get());
} else {
const w = Math.max(
- slice.w,
- FADE_THIN_SLICES_FLAG.get() ? SLICE_MIN_WIDTH_FADED_PX :
- SLICE_MIN_WIDTH_PX);
+ slice.w,
+ FADE_THIN_SLICES_FLAG.get() ? SLICE_MIN_WIDTH_FADED_PX :
+ SLICE_MIN_WIDTH_PX);
ctx.fillRect(slice.x, y, w, sliceHeight);
}
}
@@ -493,7 +493,7 @@
// Change the title color dynamically depending on contrast.
const textColor = slice.isHighlighted ? slice.colorScheme.textVariant :
- slice.colorScheme.textBase;
+ slice.colorScheme.textBase;
ctx.fillStyle = textColor.cssString;
const title = cropText(slice.title, charWidth, slice.w);
const rectXCenter = slice.x + slice.w / 2;
@@ -533,19 +533,19 @@
const THICKNESS = 3;
ctx.lineWidth = THICKNESS;
ctx.strokeRect(
- slice.x, y - THICKNESS / 2, slice.w, sliceHeight + THICKNESS);
+ slice.x, y - THICKNESS / 2, slice.w, sliceHeight + THICKNESS);
ctx.closePath();
}
// If the cached trace slices don't fully cover the visible time range,
// show a gray rectangle with a "Loading..." label.
checkerboardExcept(
- ctx,
- this.getHeight(),
- 0,
- size.width,
- timeScale.timeToPx(this.slicesKey.start),
- timeScale.timeToPx(this.slicesKey.end));
+ ctx,
+ this.getHeight(),
+ 0,
+ size.width,
+ timeScale.timeToPx(this.slicesKey.start),
+ timeScale.timeToPx(this.slicesKey.end));
// TODO(hjd): Remove this.
// The only thing this does is drawing the sched latency arrow. We should
@@ -562,7 +562,7 @@
drawTrackHoverTooltip(ctx, this.hoverPos, height, tooltip[0]);
} else {
drawTrackHoverTooltip(
- ctx, this.hoverPos, height, tooltip[0], tooltip[1]);
+ ctx, this.hoverPos, height, tooltip[0], tooltip[1]);
}
} // if (hoveredSlice)
}
@@ -627,7 +627,7 @@
this.sqlState = 'QUERY_DONE';
} else if (
- this.sqlState === 'INITIALIZING' || this.sqlState === 'QUERY_PENDING') {
+ this.sqlState === 'INITIALIZING' || this.sqlState === 'QUERY_PENDING') {
return;
}
@@ -639,7 +639,7 @@
const slicesKey = rawSlicesKey.normalize();
if (!rawSlicesKey.isCoveredBy(slicesKey)) {
throw new Error(`Normalization error ${slicesKey.toString()} ${
- rawSlicesKey.toString()}`);
+ rawSlicesKey.toString()}`);
}
const maybeCachedSlices = this.cache.lookup(slicesKey);
@@ -794,8 +794,8 @@
for (const slice of this.incomplete) {
const visibleTimeScale = globals.timeline.visibleTimeScale;
const startPx = CROP_INCOMPLETE_SLICE_FLAG.get() ?
- visibleTimeScale.timeToPx(slice.startNsQ) :
- slice.x;
+ visibleTimeScale.timeToPx(slice.startNsQ) :
+ slice.x;
const cropUnfinishedSlicesCondition = CROP_INCOMPLETE_SLICE_FLAG.get() ?
startPx + INCOMPLETE_SLICE_WIDTH_PX >= x : true;
@@ -840,7 +840,7 @@
} else {
const args: OnSliceOverArgs<T['slice']> = {slice: this.hoveredSlice};
globals.dispatch(
- Actions.setHighlightedSliceId({sliceId: this.hoveredSlice.id}));
+ Actions.setHighlightedSliceId({sliceId: this.hoveredSlice.id}));
this.onSliceOver(args);
this.hoverTooltip = args.tooltip || [];
}
@@ -910,7 +910,7 @@
}
private drawChevron(
- ctx: CanvasRenderingContext2D, x: number, y: number, h: number) {
+ ctx: CanvasRenderingContext2D, x: number, y: number, h: number) {
// Draw an upward facing chevrons, in order: A, B, C, D, and back to A.
// . (x, y)
// A
diff --git a/ui/src/frontend/base_slice_track_unittest.ts b/ui/src/frontend/base_slice_track_unittest.ts
index c707e9b..7ddda8b 100644
--- a/ui/src/frontend/base_slice_track_unittest.ts
+++ b/ui/src/frontend/base_slice_track_unittest.ts
@@ -50,122 +50,122 @@
expect(filterVisibleSlices([s(0, 20)], t(10n), t(100n))).toEqual([s(0, 20)]);
expect(filterVisibleSlices([s(0, 10)], t(10n), t(100n))).toEqual([s(0, 10)]);
expect(filterVisibleSlices([s(100, 10)], t(10n), t(100n))).toEqual([s(
- 100, 10)]);
+ 100, 10)]);
expect(filterVisibleSlices([s(10, 0)], t(10n), t(100n))).toEqual([s(10, 0)]);
expect(filterVisibleSlices([s(100, 0)], t(10n), t(100n))).toEqual([s(
- 100, 0)]);
+ 100, 0)]);
expect(filterVisibleSlices([s(0, 5)], t(10n), t(90n))).toEqual([]);
expect(filterVisibleSlices([s(95, 5)], t(10n), t(90n))).toEqual([]);
expect(filterVisibleSlices([s(0, 5), s(95, 5)], t(10n), t(90n))).toEqual([]);
expect(filterVisibleSlices(
- [
- s(0, 5),
- s(50, 0),
- s(95, 5),
- ],
- t(10n),
- t(90n)))
- .toEqual([
- s(50, 0),
- ]);
+ [
+ s(0, 5),
+ s(50, 0),
+ s(95, 5),
+ ],
+ t(10n),
+ t(90n)))
+ .toEqual([
+ s(50, 0),
+ ]);
expect(filterVisibleSlices(
- [
- s(0, 5),
- s(1, 9),
- s(6, 3),
- ],
- t(10n),
- t(90n)))
- .toContainEqual(s(1, 9));
+ [
+ s(0, 5),
+ s(1, 9),
+ s(6, 3),
+ ],
+ t(10n),
+ t(90n)))
+ .toContainEqual(s(1, 9));
expect(filterVisibleSlices(
- [
- s(0, 5),
- s(1, 9),
- s(6, 3),
- s(50, 0),
- ],
- t(10n),
- t(90n)))
- .toContainEqual(s(1, 9));
+ [
+ s(0, 5),
+ s(1, 9),
+ s(6, 3),
+ s(50, 0),
+ ],
+ t(10n),
+ t(90n)))
+ .toContainEqual(s(1, 9));
expect(filterVisibleSlices(
- [
- s(85, 10),
- s(100, 10),
- ],
- t(10n),
- t(90n)))
- .toEqual([
- s(85, 10),
- ]);
+ [
+ s(85, 10),
+ s(100, 10),
+ ],
+ t(10n),
+ t(90n)))
+ .toEqual([
+ s(85, 10),
+ ]);
expect(filterVisibleSlices(
- [
- s(0, 100),
+ [
+ s(0, 100),
- ],
- t(10n),
- t(90n)))
- .toEqual([
- s(0, 100),
- ]);
+ ],
+ t(10n),
+ t(90n)))
+ .toEqual([
+ s(0, 100),
+ ]);
expect(filterVisibleSlices(
- [
- s(0, 1),
- s(1, 1),
- s(2, 1),
- s(3, 1),
- s(4, 1),
- s(5, 10),
- s(6, 1),
- s(7, 1),
- s(8, 1),
- s(9, 1),
- ],
- t(10n),
- t(90n)))
- .toContainEqual(s(5, 10));
+ [
+ s(0, 1),
+ s(1, 1),
+ s(2, 1),
+ s(3, 1),
+ s(4, 1),
+ s(5, 10),
+ s(6, 1),
+ s(7, 1),
+ s(8, 1),
+ s(9, 1),
+ ],
+ t(10n),
+ t(90n)))
+ .toContainEqual(s(5, 10));
});
test('filterVisibleSlicesOrderByDepthAndTs', () => {
expect(filterVisibleSlices(
- [
- s(5, 2, 0),
- s(5, 4, 0),
- s(5, 6, 0),
- s(7, 5, 0),
- s(8, 10, 0),
- s(4, 1, 1),
- s(6, 3, 1),
- s(8, 6, 1),
- s(6, 1, 2),
- s(10, 9, 2),
- s(11, 3, 2),
- ],
- t(10n),
- t(90n)))
- .toEqual([
- s(5, 6, 0),
- s(7, 5, 0),
- s(8, 10, 0),
- s(8, 6, 1),
- s(10, 9, 2),
- s(11, 3, 2),
- ]);
+ [
+ s(5, 2, 0),
+ s(5, 4, 0),
+ s(5, 6, 0),
+ s(7, 5, 0),
+ s(8, 10, 0),
+ s(4, 1, 1),
+ s(6, 3, 1),
+ s(8, 6, 1),
+ s(6, 1, 2),
+ s(10, 9, 2),
+ s(11, 3, 2),
+ ],
+ t(10n),
+ t(90n)))
+ .toEqual([
+ s(5, 6, 0),
+ s(7, 5, 0),
+ s(8, 10, 0),
+ s(8, 6, 1),
+ s(10, 9, 2),
+ s(11, 3, 2),
+ ]);
});
test('filterVisibleSlicesOrderByTs', () => {
expect(filterVisibleSlices(
- [
- s(4, 5),
- s(4, 3),
- s(5, 10),
- s(6, 3),
- s(7, 2),
- s(10, 10),
- ],
- t(10n),
- t(90n)))
- .toEqual([
- s(5, 10),
- s(10, 10),
- ]);
+ [
+ s(4, 5),
+ s(4, 3),
+ s(5, 10),
+ s(6, 3),
+ s(7, 2),
+ s(10, 10),
+ ],
+ t(10n),
+ t(90n)))
+ .toEqual([
+ s(5, 10),
+ s(10, 10),
+ ]);
});
diff --git a/ui/src/frontend/bottom_tab.ts b/ui/src/frontend/bottom_tab.ts
index 6cba1e2..3210b8a 100644
--- a/ui/src/frontend/bottom_tab.ts
+++ b/ui/src/frontend/bottom_tab.ts
@@ -122,7 +122,7 @@
renderPanel(): m.Children {
return m(
- BottomTabAdapter,
+ BottomTabAdapter,
{key: this.uuid, panel: this} as BottomTabAdapterAttrs);
}
}
@@ -260,7 +260,7 @@
if (tab.uuid === globals.state.currentTab && this.tabs.length > 0) {
const newActiveIndex = index === this.tabs.length ? index - 1 : index;
globals.dispatch(Actions.setCurrentTab(
- {tab: tabSelectionKey(this.tabs[newActiveIndex])}));
+ {tab: tabSelectionKey(this.tabs[newActiveIndex])}));
}
raf.scheduleFullRedraw();
}
diff --git a/ui/src/frontend/checkerboard.ts b/ui/src/frontend/checkerboard.ts
index 55b4eb7..f03dd1c 100644
--- a/ui/src/frontend/checkerboard.ts
+++ b/ui/src/frontend/checkerboard.ts
@@ -17,10 +17,10 @@
// Checker board the range [leftPx, rightPx].
export function checkerboard(
- ctx: CanvasRenderingContext2D,
- heightPx: number,
- leftPx: number,
- rightPx: number): void {
+ ctx: CanvasRenderingContext2D,
+ heightPx: number,
+ leftPx: number,
+ rightPx: number): void {
const widthPx = rightPx - leftPx;
ctx.font = '12px Roboto Condensed';
ctx.fillStyle = '#eee';
@@ -33,21 +33,21 @@
}
if (LOADING_TEXT_WIDTH <= widthPx) {
ctx.fillText(
- LOADING_TEXT,
- leftPx + widthPx / 2 - LOADING_TEXT_WIDTH / 2,
- heightPx / 2);
+ LOADING_TEXT,
+ leftPx + widthPx / 2 - LOADING_TEXT_WIDTH / 2,
+ heightPx / 2);
}
ctx.textBaseline = oldBaseline;
}
// Checker board everything between [startPx, endPx] except [leftPx, rightPx].
export function checkerboardExcept(
- ctx: CanvasRenderingContext2D,
- heightPx: number,
- startPx: number,
- endPx: number,
- leftPx: number,
- rightPx: number): void {
+ ctx: CanvasRenderingContext2D,
+ heightPx: number,
+ startPx: number,
+ endPx: number,
+ leftPx: number,
+ rightPx: number): void {
// [leftPx, rightPx] doesn't overlap [startPx, endPx] at all:
if (rightPx <= startPx || leftPx >= endPx) {
checkerboard(ctx, heightPx, startPx, endPx);
diff --git a/ui/src/frontend/chrome_slice_details_tab.ts b/ui/src/frontend/chrome_slice_details_tab.ts
index f5e5f16..20fd76a 100644
--- a/ui/src/frontend/chrome_slice_details_tab.ts
+++ b/ui/src/frontend/chrome_slice_details_tab.ts
@@ -92,9 +92,9 @@
name: 'Average duration of slice name',
shouldDisplay: (slice: SliceDetails) => hasName(slice),
run: (slice: SliceDetails) => globals.openQuery(
- `SELECT AVG(dur) / 1e9 FROM slice WHERE name = '${slice.name!}'`,
- `${slice.name} average dur`,
- ),
+ `SELECT AVG(dur) / 1e9 FROM slice WHERE name = '${slice.name!}'`,
+ `${slice.name} average dur`,
+ ),
},
{
name: 'Binder txn names + monitor contention on thread',
@@ -104,16 +104,16 @@
const engine = getEngine();
if (engine === undefined) return;
runQuery(
- `
+ `
INCLUDE PERFETTO MODULE android.binder;
INCLUDE PERFETTO MODULE android.monitor_contention;
`,
- engine)
- .then(
- () => addDebugSliceTrack(
- engine,
- {
- sqlSource: `
+ engine)
+ .then(
+ () => addDebugSliceTrack(
+ engine,
+ {
+ sqlSource: `
WITH merged AS (
SELECT s.ts, s.dur, tx.aidl_name AS name, 0 AS depth
FROM android_binder_txns tx
@@ -145,16 +145,16 @@
JOIN process ON process.upid = thread.upid
WHERE process.pid = ${getPidFromSlice(slice)}
AND thread.tid = ${
- getTidFromSlice(slice)}
+ getTidFromSlice(slice)}
AND short_blocked_method IS NOT NULL
ORDER BY depth
) SELECT ts, dur, name FROM merged`,
- },
- `Binder names (${getProcessNameFromSlice(slice)}:${
- getThreadNameFromSlice(slice)})`,
- {ts: 'ts', dur: 'dur', name: 'name'},
- [],
- ));
+ },
+ `Binder names (${getProcessNameFromSlice(slice)}:${
+ getThreadNameFromSlice(slice)})`,
+ {ts: 'ts', dur: 'dur', name: 'name'},
+ [],
+ ));
},
},
];
@@ -173,7 +173,7 @@
}
async function getAnnotationSlice(
- engine: EngineProxy, id: number): Promise<SliceDetails|undefined> {
+ engine: EngineProxy, id: number): Promise<SliceDetails|undefined> {
const query = await engine.query(`
SELECT
id,
@@ -225,7 +225,7 @@
}
export class ChromeSliceDetailsTab extends
- BottomTab<ChromeSliceDetailsTabConfig> {
+ BottomTab<ChromeSliceDetailsTabConfig> {
static readonly kind = 'dev.perfetto.ChromeSliceDetailsTab';
private sliceDetails?: SliceDetails;
@@ -249,9 +249,9 @@
if (details !== undefined && details.thread !== undefined &&
details.dur > 0) {
this.breakdownByThreadState = await breakDownIntervalByThreadState(
- this.engine,
- TimeSpan.fromTimeAndDuration(details.ts, details.dur),
- details.thread.utid);
+ this.engine,
+ TimeSpan.fromTimeAndDuration(details.ts, details.dur),
+ details.thread.utid);
}
this.sliceDetails = details;
@@ -268,17 +268,17 @@
}
const slice = this.sliceDetails;
return m(
- DetailsShell,
- {
- title: 'Slice',
- description: slice.name,
- buttons: this.renderContextButton(slice),
- },
- m(
- GridLayout,
- renderDetails(slice, this.breakdownByThreadState),
- this.renderRhs(this.engine, slice),
- ),
+ DetailsShell,
+ {
+ title: 'Slice',
+ description: slice.name,
+ buttons: this.renderContextButton(slice),
+ },
+ m(
+ GridLayout,
+ renderDetails(slice, this.breakdownByThreadState),
+ this.renderRhs(this.engine, slice),
+ ),
);
}
@@ -296,10 +296,10 @@
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
if (precFlows ?? followingFlows ?? args) {
return m(
- GridLayoutColumn,
- precFlows,
- followingFlows,
- args,
+ GridLayoutColumn,
+ precFlows,
+ followingFlows,
+ args,
);
} else {
return undefined;
@@ -315,13 +315,13 @@
slice.name === 'ThreadPool_RunTask';
return m(
- Section,
- {title: 'Preceding Flows'},
- m(
- Tree,
- inFlows.map(
- ({begin, dur}) => this.renderFlow(begin, dur, !isRunTask)),
- ));
+ Section,
+ {title: 'Preceding Flows'},
+ m(
+ Tree,
+ inFlows.map(
+ ({begin, dur}) => this.renderFlow(begin, dur, !isRunTask)),
+ ));
} else {
return null;
}
@@ -336,42 +336,42 @@
slice.name === 'SequenceManager PostTask';
return m(
- Section,
- {title: 'Following Flows'},
- m(
- Tree,
- outFlows.map(
- ({end, dur}) => this.renderFlow(end, dur, !isPostTask)),
- ));
+ Section,
+ {title: 'Following Flows'},
+ m(
+ Tree,
+ outFlows.map(
+ ({end, dur}) => this.renderFlow(end, dur, !isPostTask)),
+ ));
} else {
return null;
}
}
private renderFlow(
- flow: FlowPoint, dur: duration, includeProcessName: boolean): m.Children {
+ flow: FlowPoint, dur: duration, includeProcessName: boolean): m.Children {
const description = flow.sliceChromeCustomName === undefined ?
- flow.sliceName :
- flow.sliceChromeCustomName;
+ flow.sliceName :
+ flow.sliceChromeCustomName;
const threadName = includeProcessName ?
- `${flow.threadName} (${flow.processName})` :
- flow.threadName;
+ `${flow.threadName} (${flow.processName})` :
+ flow.threadName;
return m(
- TreeNode,
- {left: 'Flow'},
- m(TreeNode, {
- left: 'Slice',
- right: m(SliceRef, {
- id: asSliceSqlId(flow.sliceId),
- name: description,
- ts: flow.sliceStartTs,
- dur: flow.sliceEndTs - flow.sliceStartTs,
- sqlTrackId: flow.trackId,
- }),
+ TreeNode,
+ {left: 'Flow'},
+ m(TreeNode, {
+ left: 'Slice',
+ right: m(SliceRef, {
+ id: asSliceSqlId(flow.sliceId),
+ name: description,
+ ts: flow.sliceStartTs,
+ dur: flow.sliceEndTs - flow.sliceStartTs,
+ sqlTrackId: flow.trackId,
}),
- m(TreeNode, {left: 'Delay', right: m(DurationWidget, {dur})}),
- m(TreeNode, {left: 'Thread', right: threadName}),
+ }),
+ m(TreeNode, {left: 'Delay', right: m(DurationWidget, {dur})}),
+ m(TreeNode, {left: 'Thread', right: threadName}),
);
}
@@ -385,11 +385,11 @@
rightIcon: Icons.ContextMenu,
});
return m(
- PopupMenu2,
- {trigger},
- contextMenuItems.map(
- ({name, run}) =>
- m(MenuItem, {label: name, onclick: () => run(sliceInfo)})),
+ PopupMenu2,
+ {trigger},
+ contextMenuItems.map(
+ ({name, run}) =>
+ m(MenuItem, {label: name, onclick: () => run(sliceInfo)})),
);
} else {
return undefined;
diff --git a/ui/src/frontend/clipboard.ts b/ui/src/frontend/clipboard.ts
index b5f51a1..ad54464 100644
--- a/ui/src/frontend/clipboard.ts
+++ b/ui/src/frontend/clipboard.ts
@@ -23,7 +23,7 @@
e.preventDefault();
copyToClipboard(url);
globals.dispatch(Actions.updateStatus(
- {msg: 'Link copied into the clipboard', timestamp: Date.now() / 1000}));
+ {msg: 'Link copied into the clipboard', timestamp: Date.now() / 1000}));
};
}
diff --git a/ui/src/frontend/cookie_consent.ts b/ui/src/frontend/cookie_consent.ts
index adf1543..8a44cb3 100644
--- a/ui/src/frontend/cookie_consent.ts
+++ b/ui/src/frontend/cookie_consent.ts
@@ -34,27 +34,27 @@
view() {
if (!this.showCookieConsent) return;
return m(
- '.cookie-consent',
- m('.cookie-text',
- `This site uses cookies from Google to deliver its services and to
+ '.cookie-consent',
+ m('.cookie-text',
+ `This site uses cookies from Google to deliver its services and to
analyze traffic.`),
- m('.buttons',
- m('button',
- m('a',
- {
- href: 'https://policies.google.com/technologies/cookies',
- target: '_blank',
- },
- 'More details')),
- m('button',
+ m('.buttons',
+ m('button',
+ m('a',
{
- onclick: () => {
- this.showCookieConsent = false;
- localStorage.setItem(COOKIE_ACK_KEY, 'true');
- raf.scheduleFullRedraw();
- },
+ href: 'https://policies.google.com/technologies/cookies',
+ target: '_blank',
},
- 'OK')),
+ 'More details')),
+ m('button',
+ {
+ onclick: () => {
+ this.showCookieConsent = false;
+ localStorage.setItem(COOKIE_ACK_KEY, 'true');
+ raf.scheduleFullRedraw();
+ },
+ },
+ 'OK')),
);
}
}
diff --git a/ui/src/frontend/counter_panel.ts b/ui/src/frontend/counter_panel.ts
index 9a3f1ff..df9815a 100644
--- a/ui/src/frontend/counter_panel.ts
+++ b/ui/src/frontend/counter_panel.ts
@@ -30,33 +30,33 @@
counterInfo.value !== undefined && counterInfo.delta !== undefined &&
counterInfo.duration !== undefined) {
return m(
- DetailsShell,
- {title: 'Counter', description: `${counterInfo.name}`},
- m(GridLayout,
+ DetailsShell,
+ {title: 'Counter', description: `${counterInfo.name}`},
+ m(GridLayout,
+ m(
+ Section,
+ {title: 'Properties'},
m(
- Section,
- {title: 'Properties'},
- m(
- Tree,
- m(TreeNode, {left: 'Name', right: `${counterInfo.name}`}),
- m(TreeNode, {
- left: 'Start time',
- right: m(Timestamp, {ts: counterInfo.startTime}),
- }),
- m(TreeNode, {
- left: 'Value',
- right: `${counterInfo.value.toLocaleString()}`,
- }),
- m(TreeNode, {
- left: 'Delta',
- right: `${counterInfo.delta.toLocaleString()}`,
- }),
- m(TreeNode, {
- left: 'Duration',
- right: m(DurationWidget, {dur: counterInfo.duration}),
- }),
- ),
- )),
+ Tree,
+ m(TreeNode, {left: 'Name', right: `${counterInfo.name}`}),
+ m(TreeNode, {
+ left: 'Start time',
+ right: m(Timestamp, {ts: counterInfo.startTime}),
+ }),
+ m(TreeNode, {
+ left: 'Value',
+ right: `${counterInfo.value.toLocaleString()}`,
+ }),
+ m(TreeNode, {
+ left: 'Delta',
+ right: `${counterInfo.delta.toLocaleString()}`,
+ }),
+ m(TreeNode, {
+ left: 'Duration',
+ right: m(DurationWidget, {dur: counterInfo.duration}),
+ }),
+ ),
+ )),
);
} else {
return m(DetailsShell, {title: 'Counter', description: 'Loading...'});
diff --git a/ui/src/frontend/cpu_profile_panel.ts b/ui/src/frontend/cpu_profile_panel.ts
index 4206c5a..c114609 100644
--- a/ui/src/frontend/cpu_profile_panel.ts
+++ b/ui/src/frontend/cpu_profile_panel.ts
@@ -31,9 +31,9 @@
}
return m(
- '.details-panel',
- header,
- m('table', this.getStackText(sampleDetails.stack)));
+ '.details-panel',
+ header,
+ m('table', this.getStackText(sampleDetails.stack)));
}
getStackText(stack?: CallsiteInfo[]): m.Vnode[] {
diff --git a/ui/src/frontend/details_panel.ts b/ui/src/frontend/details_panel.ts
index afad1c7..3edce5d 100644
--- a/ui/src/frontend/details_panel.ts
+++ b/ui/src/frontend/details_panel.ts
@@ -59,7 +59,7 @@
function handleSelectionChange(
- newSelection: Selection|undefined, openCurrentSelectionTab: boolean): void {
+ newSelection: Selection|undefined, openCurrentSelectionTab: boolean): void {
const currentSelectionTag = CURRENT_SELECTION_TAG;
const bottomTabList = globals.bottomTabList;
if (!bottomTabList) return;
@@ -68,59 +68,59 @@
return;
}
switch (newSelection.kind) {
- case 'NOTE':
+ case 'NOTE':
+ bottomTabList.addTab({
+ kind: NotesEditorTab.kind,
+ tag: currentSelectionTag,
+ config: {
+ id: newSelection.id,
+ },
+ select: openCurrentSelectionTab,
+ });
+ break;
+ case 'AREA':
+ if (newSelection.noteId !== undefined) {
bottomTabList.addTab({
kind: NotesEditorTab.kind,
tag: currentSelectionTag,
config: {
- id: newSelection.id,
+ id: newSelection.noteId,
},
select: openCurrentSelectionTab,
});
- break;
- case 'AREA':
- if (newSelection.noteId !== undefined) {
- bottomTabList.addTab({
- kind: NotesEditorTab.kind,
- tag: currentSelectionTag,
- config: {
- id: newSelection.noteId,
- },
- select: openCurrentSelectionTab,
- });
- }
- break;
- case 'THREAD_STATE':
- bottomTabList.addTab({
- kind: ThreadStateTab.kind,
- tag: currentSelectionTag,
- config: {
- id: newSelection.id,
- },
- select: openCurrentSelectionTab,
- });
- break;
- case 'GENERIC_SLICE':
- bottomTabList.addTab({
- kind: newSelection.detailsPanelConfig.kind,
- tag: currentSelectionTag,
- config: newSelection.detailsPanelConfig.config,
- select: openCurrentSelectionTab,
- });
- break;
- case 'CHROME_SLICE':
- bottomTabList.addTab({
- kind: ChromeSliceDetailsTab.kind,
- tag: currentSelectionTag,
- config: {
- id: newSelection.id,
- table: newSelection.table,
- },
- select: openCurrentSelectionTab,
- });
- break;
- default:
- bottomTabList.closeTabByTag(currentSelectionTag);
+ }
+ break;
+ case 'THREAD_STATE':
+ bottomTabList.addTab({
+ kind: ThreadStateTab.kind,
+ tag: currentSelectionTag,
+ config: {
+ id: newSelection.id,
+ },
+ select: openCurrentSelectionTab,
+ });
+ break;
+ case 'GENERIC_SLICE':
+ bottomTabList.addTab({
+ kind: newSelection.detailsPanelConfig.kind,
+ tag: currentSelectionTag,
+ config: newSelection.detailsPanelConfig.config,
+ select: openCurrentSelectionTab,
+ });
+ break;
+ case 'CHROME_SLICE':
+ bottomTabList.addTab({
+ kind: ChromeSliceDetailsTab.kind,
+ tag: currentSelectionTag,
+ config: {
+ id: newSelection.id,
+ table: newSelection.table,
+ },
+ select: openCurrentSelectionTab,
+ });
+ break;
+ default:
+ bottomTabList.closeTabByTag(currentSelectionTag);
}
}
addSelectionChangeObserver(handleSelectionChange);
@@ -150,55 +150,55 @@
const curSelection = globals.state.currentSelection;
if (curSelection) {
switch (curSelection.kind) {
- case 'NOTE':
- // Handled in handleSelectionChange.
- break;
- case 'AREA':
- if (globals.flamegraphDetails.isInAreaSelection) {
- detailsPanels.push({
- key: 'flamegraph_selection',
- name: 'Flamegraph Selection',
- vnode: m(FlamegraphDetailsPanel, {key: 'flamegraph'}),
- });
- }
- break;
- case 'SLICE':
+ case 'NOTE':
+ // Handled in handleSelectionChange.
+ break;
+ case 'AREA':
+ if (globals.flamegraphDetails.isInAreaSelection) {
detailsPanels.push({
- key: 'current_selection',
- name: 'Current Selection',
- vnode: m(SliceDetailsPanel, {
- key: 'slice',
- }),
- });
- break;
- case 'COUNTER':
- detailsPanels.push({
- key: 'current_selection',
- name: 'Current Selection',
- vnode: m(CounterDetailsPanel, {
- key: 'counter',
- }),
- });
- break;
- case 'PERF_SAMPLES':
- case 'HEAP_PROFILE':
- detailsPanels.push({
- key: 'current_selection',
- name: 'Current Selection',
+ key: 'flamegraph_selection',
+ name: 'Flamegraph Selection',
vnode: m(FlamegraphDetailsPanel, {key: 'flamegraph'}),
});
- break;
- case 'CPU_PROFILE_SAMPLE':
- detailsPanels.push({
- key: 'current_selection',
- name: 'Current Selection',
- vnode: m(CpuProfileDetailsPanel, {
- key: 'cpu_profile_sample',
- }),
- });
- break;
- default:
- break;
+ }
+ break;
+ case 'SLICE':
+ detailsPanels.push({
+ key: 'current_selection',
+ name: 'Current Selection',
+ vnode: m(SliceDetailsPanel, {
+ key: 'slice',
+ }),
+ });
+ break;
+ case 'COUNTER':
+ detailsPanels.push({
+ key: 'current_selection',
+ name: 'Current Selection',
+ vnode: m(CounterDetailsPanel, {
+ key: 'counter',
+ }),
+ });
+ break;
+ case 'PERF_SAMPLES':
+ case 'HEAP_PROFILE':
+ detailsPanels.push({
+ key: 'current_selection',
+ name: 'Current Selection',
+ vnode: m(FlamegraphDetailsPanel, {key: 'flamegraph'}),
+ });
+ break;
+ case 'CPU_PROFILE_SAMPLE':
+ detailsPanels.push({
+ key: 'current_selection',
+ name: 'Current Selection',
+ vnode: m(CpuProfileDetailsPanel, {
+ key: 'cpu_profile_sample',
+ }),
+ });
+ break;
+ default:
+ break;
}
}
if (hasLogs()) {
@@ -289,15 +289,15 @@
},
}),
m(
- '.details-panel-container',
- {
- style: {height: `${this.detailsHeight}px`},
- },
- detailsPanels.map((tab) => {
- const active = tab === currentTabDetails;
- return m(Gate, {open: active}, tab.vnode);
- }),
- ),
+ '.details-panel-container',
+ {
+ style: {height: `${this.detailsHeight}px`},
+ },
+ detailsPanels.map((tab) => {
+ const active = tab === currentTabDetails;
+ return m(Gate, {open: active}, tab.vnode);
+ }),
+ ),
];
}
}
diff --git a/ui/src/frontend/drag_gesture_handler.ts b/ui/src/frontend/drag_gesture_handler.ts
index c32f0e9..5daa1d2 100644
--- a/ui/src/frontend/drag_gesture_handler.ts
+++ b/ui/src/frontend/drag_gesture_handler.ts
@@ -43,7 +43,7 @@
private startDragGesture(e: MouseEvent) {
this.clientRect = this.element.getBoundingClientRect();
this.onDragStarted(
- e.clientX - this.clientRect.left, e.clientY - this.clientRect.top);
+ e.clientX - this.clientRect.left, e.clientY - this.clientRect.top);
}
private onMouseMove(e: MouseEvent) {
@@ -58,7 +58,7 @@
}
if (!this.pendingMouseDownEvent) {
this.onDrag(
- e.clientX - this.clientRect!.left, e.clientY - this.clientRect!.top);
+ e.clientX - this.clientRect!.left, e.clientY - this.clientRect!.top);
}
}
diff --git a/ui/src/frontend/drag_handle.ts b/ui/src/frontend/drag_handle.ts
index f21e0ed..425899c 100644
--- a/ui/src/frontend/drag_handle.ts
+++ b/ui/src/frontend/drag_handle.ts
@@ -107,10 +107,10 @@
this.fullscreenHeight = getFullScreenHeight();
const elem = dom as HTMLElement;
this.trash.add(new DragGestureHandler(
- elem,
- this.onDrag.bind(this),
- this.onDragStart.bind(this),
- this.onDragEnd.bind(this)));
+ elem,
+ this.onDrag.bind(this),
+ this.onDragStart.bind(this),
+ this.onDragEnd.bind(this)));
}
onupdate({attrs}: m.CVnodeDOM<DragHandleAttrs>) {
@@ -156,93 +156,93 @@
} = tab;
const tag = (currentTabKey === key) ? '.tab[active]' : '.tab';
return m(
- tag,
- {
- key,
- onclick: (event: Event) => {
- if (!event.defaultPrevented) {
- onTabClick(key);
- }
- },
+ tag,
+ {
+ key,
+ onclick: (event: Event) => {
+ if (!event.defaultPrevented) {
+ onTabClick(key);
+ }
},
- m('span.pf-tab-title', tab.title),
- hasCloseButton && m(Button, {
- onclick: (event: Event) => {
- onTabClose(key);
- event.preventDefault();
- },
- minimal: true,
- compact: true,
- icon: 'close',
- }));
+ },
+ m('span.pf-tab-title', tab.title),
+ hasCloseButton && m(Button, {
+ onclick: (event: Event) => {
+ onTabClose(key);
+ event.preventDefault();
+ },
+ minimal: true,
+ compact: true,
+ icon: 'close',
+ }));
};
return m(
- '.handle',
- m('.tabs', tabs.map(renderTab)),
- m('.buttons',
- tabDropdownEntries && this.renderTabDropdown(tabDropdownEntries),
- m(
- Button,
- {
- onclick: () => {
- this.isClosed = false;
- this.isFullscreen = true;
- this.resize(this.fullscreenHeight);
- raf.scheduleFullRedraw();
- },
- title: 'Open fullscreen',
- disabled: this.isFullscreen,
- icon: 'vertical_align_top',
- minimal: true,
- compact: true,
- },
- ),
- m(
- Button,
- {
- onclick: () => {
- if (this.height === 0) {
- this.isClosed = false;
- if (this.previousHeight === 0) {
- this.previousHeight = getDetailsHeight();
- }
- this.resize(this.previousHeight);
- } else {
- this.isFullscreen = false;
- this.isClosed = true;
- this.previousHeight = this.height;
- this.resize(0);
- }
- raf.scheduleFullRedraw();
- },
- title,
- icon,
- minimal: true,
- compact: true,
- },
- )));
+ '.handle',
+ m('.tabs', tabs.map(renderTab)),
+ m('.buttons',
+ tabDropdownEntries && this.renderTabDropdown(tabDropdownEntries),
+ m(
+ Button,
+ {
+ onclick: () => {
+ this.isClosed = false;
+ this.isFullscreen = true;
+ this.resize(this.fullscreenHeight);
+ raf.scheduleFullRedraw();
+ },
+ title: 'Open fullscreen',
+ disabled: this.isFullscreen,
+ icon: 'vertical_align_top',
+ minimal: true,
+ compact: true,
+ },
+ ),
+ m(
+ Button,
+ {
+ onclick: () => {
+ if (this.height === 0) {
+ this.isClosed = false;
+ if (this.previousHeight === 0) {
+ this.previousHeight = getDetailsHeight();
+ }
+ this.resize(this.previousHeight);
+ } else {
+ this.isFullscreen = false;
+ this.isClosed = true;
+ this.previousHeight = this.height;
+ this.resize(0);
+ }
+ raf.scheduleFullRedraw();
+ },
+ title,
+ icon,
+ minimal: true,
+ compact: true,
+ },
+ )));
}
private renderTabDropdown(entries: TabDropdownEntry[]) {
return m(
- PopupMenu2,
- {
- trigger: m(Button, {
- minimal: true,
- compact: true,
- icon: 'add',
- disabled: entries.length === 0,
- title: 'Open tab',
- }),
- },
- entries.map((entry) => {
- return m(MenuItem, {
- key: entry.key,
- label: entry.title,
- onclick: () => entry.onClick(),
- });
+ PopupMenu2,
+ {
+ trigger: m(Button, {
+ minimal: true,
+ compact: true,
+ icon: 'add',
+ disabled: entries.length === 0,
+ title: 'Open tab',
}),
+ },
+ entries.map((entry) => {
+ return m(MenuItem, {
+ key: entry.key,
+ label: entry.title,
+ onclick: () => entry.onClick(),
+ });
+ }),
);
}
}
diff --git a/ui/src/frontend/error_dialog.ts b/ui/src/frontend/error_dialog.ts
index ccd00f4..5f4b82a 100644
--- a/ui/src/frontend/error_dialog.ts
+++ b/ui/src/frontend/error_dialog.ts
@@ -156,22 +156,22 @@
let shareTraceSection: m.Vnode|null = null;
if (this.traceState !== 'NOT_AVAILABLE') {
shareTraceSection = m(
- 'div',
- m(
- 'label',
- m(`input[type=checkbox]`, {
- checked: this.attachTrace,
- oninput: (ev: InputEvent) => {
- const checked = (ev.target as HTMLInputElement).checked;
- this.onUploadCheckboxChange(checked);
- },
- }),
- this.traceState === 'UPLOADING' ?
- `Uploading trace... ${this.uploadStatus}` :
- 'Tick to share the current trace and help debugging',
- ), // m('label')
- m('div.modal-small',
- `This will upload the trace and attach a link to the bug.
+ 'div',
+ m(
+ 'label',
+ m(`input[type=checkbox]`, {
+ checked: this.attachTrace,
+ oninput: (ev: InputEvent) => {
+ const checked = (ev.target as HTMLInputElement).checked;
+ this.onUploadCheckboxChange(checked);
+ },
+ }),
+ this.traceState === 'UPLOADING' ?
+ `Uploading trace... ${this.uploadStatus}` :
+ 'Tick to share the current trace and help debugging',
+ ), // m('label')
+ m('div.modal-small',
+ `This will upload the trace and attach a link to the bug.
You may leave it unchecked and attach the trace manually to the bug
if preferred.`),
);
@@ -179,21 +179,21 @@
return [
m(
- 'div',
- m('.modal-logs', msg),
- m('span', `Please provide any additional details describing
+ 'div',
+ m('.modal-logs', msg),
+ m('span', `Please provide any additional details describing
how the crash occurred:`),
- m('textarea.modal-textarea', {
- rows: 3,
- maxlength: 1000,
- oninput: (ev: InputEvent) => {
- this.userDescription = (ev.target as HTMLTextAreaElement).value;
- },
- onkeydown: (e: Event) => e.stopPropagation(),
- onkeyup: (e: Event) => e.stopPropagation(),
- }),
- shareTraceSection,
- ),
+ m('textarea.modal-textarea', {
+ rows: 3,
+ maxlength: 1000,
+ oninput: (ev: InputEvent) => {
+ this.userDescription = (ev.target as HTMLTextAreaElement).value;
+ },
+ onkeydown: (e: Event) => e.stopPropagation(),
+ onkeyup: (e: Event) => e.stopPropagation(),
+ }),
+ shareTraceSection,
+ ),
m('footer',
m('button.modal-btn.modal-btn-primary',
{onclick: () => this.fileBug(err)},
@@ -233,7 +233,7 @@
url += '&description=';
if (this.userDescription !== '') {
url += encodeURIComponent(
- 'User description:\n' + this.userDescription + '\n\n');
+ 'User description:\n' + this.userDescription + '\n\n');
}
url += encodeURIComponent(this.errorMessage);
// 8kb is common limit on request size so restrict links to that long:
@@ -253,21 +253,21 @@
showModal({
title: 'Oops! Your WASM trace processor ran out of memory',
content: m(
- 'div',
- m('span',
- 'The in-memory representation of the trace is too big ' +
+ 'div',
+ m('span',
+ 'The in-memory representation of the trace is too big ' +
'for the browser memory limits (typically 2GB per tab).'),
- m('br'),
- m('span',
- 'You can work around this problem by using the trace_processor ' +
+ m('br'),
+ m('span',
+ 'You can work around this problem by using the trace_processor ' +
'native binary as an accelerator for the UI as follows:'),
- m('br'),
- m('br'),
- m('.modal-bash', tpCmd),
- m('br'),
- m('span', 'For details see '),
- m('a', {href: url, target: '_blank'}, url),
- ),
+ m('br'),
+ m('br'),
+ m('.modal-bash', tpCmd),
+ m('br'),
+ m('span', 'For details see '),
+ m('a', {href: url, target: '_blank'}, url),
+ ),
});
}
@@ -275,20 +275,20 @@
showModal({
title: 'Cannot open this file',
content: m(
- 'div',
- m('p',
- 'The file opened doesn\'t look like a Perfetto trace or any ' +
+ 'div',
+ m('p',
+ 'The file opened doesn\'t look like a Perfetto trace or any ' +
'other format recognized by the Perfetto TraceProcessor.'),
- m('p', 'Formats supported:'),
- m(
- 'ul',
- m('li', 'Perfetto protobuf trace'),
- m('li', 'chrome://tracing JSON'),
- m('li', 'Android systrace'),
- m('li', 'Fuchsia trace'),
- m('li', 'Ninja build log'),
- ),
- ),
+ m('p', 'Formats supported:'),
+ m(
+ 'ul',
+ m('li', 'Perfetto protobuf trace'),
+ m('li', 'chrome://tracing JSON'),
+ m('li', 'Android systrace'),
+ m('li', 'Fuchsia trace'),
+ m('li', 'Ninja build log'),
+ ),
+ ),
});
}
@@ -296,15 +296,15 @@
showModal({
title: 'A WebUSB error occurred',
content: m(
- 'div',
- m('span', `Is adb already running on the host? Run this command and
+ 'div',
+ m('span', `Is adb already running on the host? Run this command and
try again.`),
- m('br'),
- m('.modal-bash', '> adb kill-server'),
- m('br'),
- m('span', 'For details see '),
- m('a', {href: 'http://b/159048331', target: '_blank'}, 'b/159048331'),
- ),
+ m('br'),
+ m('.modal-bash', '> adb kill-server'),
+ m('br'),
+ m('span', 'For details see '),
+ m('a', {href: 'http://b/159048331', target: '_blank'}, 'b/159048331'),
+ ),
});
}
@@ -312,30 +312,30 @@
showModal({
title: 'A WebUSB error occurred',
content: m(
- 'div',
- m('span', `Is adb already running on the host? Run this command and
+ 'div',
+ m('span', `Is adb already running on the host? Run this command and
try again.`),
- m('br'),
- m('.modal-bash', '> adb kill-server'),
- m('br'),
- // The statement below covers the following edge case:
- // 1. 'adb server' is running on the device.
- // 2. The user selects the new Android target, so we try to fetch the
- // OS version and do QSS.
- // 3. The error modal is shown.
- // 4. The user runs 'adb kill-server'.
- // At this point we don't have a trigger to try fetching the OS version
- // + QSS again. Therefore, the user will need to refresh the page.
- m('span',
- 'If after running \'adb kill-server\', you don\'t see ' +
+ m('br'),
+ m('.modal-bash', '> adb kill-server'),
+ m('br'),
+ // The statement below covers the following edge case:
+ // 1. 'adb server' is running on the device.
+ // 2. The user selects the new Android target, so we try to fetch the
+ // OS version and do QSS.
+ // 3. The error modal is shown.
+ // 4. The user runs 'adb kill-server'.
+ // At this point we don't have a trigger to try fetching the OS version
+ // + QSS again. Therefore, the user will need to refresh the page.
+ m('span',
+ 'If after running \'adb kill-server\', you don\'t see ' +
'a \'Start Recording\' button on the page and you don\'t see ' +
'\'Allow USB debugging\' on the device, ' +
'you will need to reload this page.'),
- m('br'),
- m('br'),
- m('span', 'For details see '),
- m('a', {href: 'http://b/159048331', target: '_blank'}, 'b/159048331'),
- ),
+ m('br'),
+ m('br'),
+ m('span', 'For details see '),
+ m('a', {href: 'http://b/159048331', target: '_blank'}, 'b/159048331'),
+ ),
});
}
@@ -343,9 +343,9 @@
showModal({
title: 'Connection with the ADB device lost',
content: m(
- 'div',
- m('span', `Please connect the device again to restart the recording.`),
- m('br')),
+ 'div',
+ m('span', `Please connect the device again to restart the recording.`),
+ m('br')),
});
}
@@ -353,7 +353,7 @@
showModal({
title: 'Could not connect to the device',
content: m(
- 'div', m('span', 'Please allow USB debugging on the device.'), m('br')),
+ 'div', m('span', 'Please allow USB debugging on the device.'), m('br')),
});
}
@@ -417,13 +417,13 @@
showModal({
title: 'A TraceProcessor RPC error occurred',
content: m(
- 'div',
- m('p', 'The trace processor RPC sequence ID was broken'),
- m('p', `This can happen when using a HTTP trace processor instance and
+ 'div',
+ m('p', 'The trace processor RPC sequence ID was broken'),
+ m('p', `This can happen when using a HTTP trace processor instance and
either accidentally sharing this between multiple tabs or
restarting the trace processor while still in use by UI.`),
- m('p', `Please refresh this tab and ensure that trace processor is used
+ m('p', `Please refresh this tab and ensure that trace processor is used
at most one tab at a time.`),
- ),
+ ),
});
}
diff --git a/ui/src/frontend/flags_page.ts b/ui/src/frontend/flags_page.ts
index 13f4d5f..67a17c2 100644
--- a/ui/src/frontend/flags_page.ts
+++ b/ui/src/frontend/flags_page.ts
@@ -40,23 +40,23 @@
view(vnode: m.Vnode<SelectWidgetAttrs>) {
const attrs = vnode.attrs;
return m(
- '.flag-widget',
- m('label', attrs.label),
- m(
- 'select',
- {
- onchange: (e: InputEvent) => {
- const value = (e.target as HTMLSelectElement).value;
- attrs.onSelect(value);
- raf.scheduleFullRedraw();
- },
- },
- attrs.options.map((o) => {
- const selected = o.id === attrs.selected;
- return m('option', {value: o.id, selected}, o.name);
- }),
- ),
- m('.description', attrs.description),
+ '.flag-widget',
+ m('label', attrs.label),
+ m(
+ 'select',
+ {
+ onchange: (e: InputEvent) => {
+ const value = (e.target as HTMLSelectElement).value;
+ attrs.onSelect(value);
+ raf.scheduleFullRedraw();
+ },
+ },
+ attrs.options.map((o) => {
+ const selected = o.id === attrs.selected;
+ return m('option', {value: o.id, selected}, o.name);
+ }),
+ ),
+ m('.description', attrs.description),
);
}
}
@@ -80,16 +80,16 @@
selected: flag.overriddenState(),
onSelect: (value: string) => {
switch (value) {
- case OverrideState.TRUE:
- flag.set(true);
- break;
- case OverrideState.FALSE:
- flag.set(false);
- break;
- default:
- case OverrideState.DEFAULT:
- flag.reset();
- break;
+ case OverrideState.TRUE:
+ flag.set(true);
+ break;
+ case OverrideState.FALSE:
+ flag.set(false);
+ break;
+ default:
+ case OverrideState.DEFAULT:
+ flag.reset();
+ break;
}
},
});
@@ -100,43 +100,43 @@
view() {
const needsReload = channelChanged();
return m(
- '.flags-page',
- m(
- '.flags-content',
- m('h1', 'Feature flags'),
- needsReload &&
+ '.flags-page',
+ m(
+ '.flags-content',
+ m('h1', 'Feature flags'),
+ needsReload &&
[
m('h2', 'Please reload for your changes to take effect'),
],
- m(SelectWidget, {
- label: 'Release channel',
- description: [
- 'Which release channel of the UI to use. See ',
- m('a',
- {
- href: RELEASE_PROCESS_URL,
- },
- 'Release Process'),
- ' for more information.',
- ],
- options: [
- {id: 'stable', name: 'Stable (default)'},
- {id: 'canary', name: 'Canary'},
- {id: 'autopush', name: 'Autopush'},
- ],
- selected: getNextChannel(),
- onSelect: (id) => setChannel(id),
- }),
- m('button',
+ m(SelectWidget, {
+ label: 'Release channel',
+ description: [
+ 'Which release channel of the UI to use. See ',
+ m('a',
{
- onclick: () => {
- featureFlags.resetAll();
- raf.scheduleFullRedraw();
- },
+ href: RELEASE_PROCESS_URL,
},
- 'Reset all below'),
+ 'Release Process'),
+ ' for more information.',
+ ],
+ options: [
+ {id: 'stable', name: 'Stable (default)'},
+ {id: 'canary', name: 'Canary'},
+ {id: 'autopush', name: 'Autopush'},
+ ],
+ selected: getNextChannel(),
+ onSelect: (id) => setChannel(id),
+ }),
+ m('button',
+ {
+ onclick: () => {
+ featureFlags.resetAll();
+ raf.scheduleFullRedraw();
+ },
+ },
+ 'Reset all below'),
- featureFlags.allFlags().map((flag) => m(FlagWidget, {flag})),
- ));
+ featureFlags.allFlags().map((flag) => m(FlagWidget, {flag})),
+ ));
},
});
diff --git a/ui/src/frontend/flamegraph.ts b/ui/src/frontend/flamegraph.ts
index 3407405..0bfc287 100644
--- a/ui/src/frontend/flamegraph.ts
+++ b/ui/src/frontend/flamegraph.ts
@@ -112,8 +112,8 @@
// Caller will have to call draw method after updating data to have updated
// graph.
updateDataIfChanged(
- nodeRendering: NodeRendering, flamegraphData: CallsiteInfo[],
- clickedCallsite?: CallsiteInfo) {
+ nodeRendering: NodeRendering, flamegraphData: CallsiteInfo[],
+ clickedCallsite?: CallsiteInfo) {
this.nodeRendering = nodeRendering;
this.clickedCallsite = clickedCallsite;
if (this.flamegraphData === flamegraphData) {
@@ -128,8 +128,8 @@
}
draw(
- ctx: CanvasRenderingContext2D, width: number, height: number, x = 0,
- y = 0, unit = 'B') {
+ ctx: CanvasRenderingContext2D, width: number, height: number, x = 0,
+ y = 0, unit = 'B') {
if (this.flamegraphData === undefined) {
return;
}
@@ -157,11 +157,11 @@
ctx.fillStyle = this.generateColor('root', false, false);
ctx.fillRect(x, currentY, width, NODE_HEIGHT - 1);
const text = cropText(
- `root: ${
- this.displaySize(
- this.totalSize, unit, unit === 'B' ? 1024 : 1000)}`,
- this.labelCharWidth,
- width - 2);
+ `root: ${
+ this.displaySize(
+ this.totalSize, unit, unit === 'B' ? 1024 : 1000)}`,
+ this.labelCharWidth,
+ width - 2);
ctx.fillStyle = 'black';
ctx.fillText(text, x + 5, currentY + (NODE_HEIGHT - 1) / 2);
currentY += NODE_HEIGHT;
@@ -226,10 +226,10 @@
}
ctx.fillStyle = 'black';
ctx.fillText(
- text,
- currentX + labelPaddingPx,
- currentY + (NODE_HEIGHT - 1) / 2,
- maxLabelWidth);
+ text,
+ currentX + labelPaddingPx,
+ currentY + (NODE_HEIGHT - 1) / 2,
+ maxLabelWidth);
// Draw border on the right of node.
ctx.beginPath();
@@ -242,7 +242,7 @@
// start. Map xStartsPerDepth for each depth contains all X start
// coordinates that callsites on that level have.
this.graphData.set(
- `${value.depth};${currentX}`, {callsite: value, width});
+ `${value.depth};${currentX}`, {callsite: value, width});
const xStarts = this.xStartsPerDepth.get(value.depth);
if (xStarts === undefined) {
this.xStartsPerDepth.set(value.depth, [currentX]);
@@ -267,30 +267,30 @@
const lines: string[] = [];
let textWidth = this.addToTooltip(
- this.getCallsiteName(this.hoveredCallsite),
- width - paddingPx,
- ctx,
- lines);
+ this.getCallsiteName(this.hoveredCallsite),
+ width - paddingPx,
+ ctx,
+ lines);
if (this.hoveredCallsite.location != null) {
textWidth = Math.max(
- textWidth,
- this.addToTooltip(
- this.hoveredCallsite.location, width, ctx, lines));
+ textWidth,
+ this.addToTooltip(
+ this.hoveredCallsite.location, width, ctx, lines));
}
textWidth = Math.max(
- textWidth,
- this.addToTooltip(this.hoveredCallsite.mapping, width, ctx, lines));
+ textWidth,
+ this.addToTooltip(this.hoveredCallsite.mapping, width, ctx, lines));
if (this.nodeRendering.totalSize !== undefined) {
const percentage =
this.hoveredCallsite.totalSize / this.totalSize * 100;
const totalSizeText = `${this.nodeRendering.totalSize}: ${
- this.displaySize(
- this.hoveredCallsite.totalSize,
- unit,
- unit === 'B' ? 1024 : 1000)} (${percentage.toFixed(2)}%)`;
+ this.displaySize(
+ this.hoveredCallsite.totalSize,
+ unit,
+ unit === 'B' ? 1024 : 1000)} (${percentage.toFixed(2)}%)`;
textWidth = Math.max(
- textWidth, this.addToTooltip(totalSizeText, width, ctx, lines));
+ textWidth, this.addToTooltip(totalSizeText, width, ctx, lines));
}
if (this.nodeRendering.selfSize !== undefined &&
@@ -298,17 +298,17 @@
const selfPercentage =
this.hoveredCallsite.selfSize / this.totalSize * 100;
const selfSizeText = `${this.nodeRendering.selfSize}: ${
- this.displaySize(
- this.hoveredCallsite.selfSize,
- unit,
- unit === 'B' ? 1024 : 1000)} (${selfPercentage.toFixed(2)}%)`;
+ this.displaySize(
+ this.hoveredCallsite.selfSize,
+ unit,
+ unit === 'B' ? 1024 : 1000)} (${selfPercentage.toFixed(2)}%)`;
textWidth = Math.max(
- textWidth, this.addToTooltip(selfSizeText, width, ctx, lines));
+ textWidth, this.addToTooltip(selfSizeText, width, ctx, lines));
}
// Compute a line height as the bounding box height + 50%:
const heightSample = ctx.measureText(
- 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');
+ 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');
const lineHeight =
Math.round(heightSample.actualBoundingBoxDescent * 1.5);
@@ -333,16 +333,16 @@
for (let i = 0; i < lines.length; i++) {
const line = lines[i];
ctx.fillText(
- line,
- rectXStart + paddingPx,
- rectYStart + paddingPx + i * lineHeight);
+ line,
+ rectXStart + paddingPx,
+ rectYStart + paddingPx + i * lineHeight);
}
}
}
private addToTooltip(
- text: string, width: number, ctx: CanvasRenderingContext2D,
- lines: string[]): number {
+ text: string, width: number, ctx: CanvasRenderingContext2D,
+ lines: string[]): number {
const lineSplitter: LineSplitter =
splitIfTooBig(text, width, ctx.measureText(text).width);
lines.push(...lineSplitter.lines);
@@ -351,7 +351,7 @@
private getCallsiteName(value: CallsiteInfo): string {
return value.name === undefined || value.name === '' ? 'unknown' :
- value.name;
+ value.name;
}
private displaySize(totalSize: number, unit: string, step = 1024): string {
@@ -367,8 +367,8 @@
unitsIndex = unitsIndex > units.length - 1 ? units.length - 1 : unitsIndex;
const result = totalSize / +units[unitsIndex][1];
const resultString = totalSize % +units[unitsIndex][1] === 0 ?
- result.toString() :
- result.toFixed(2);
+ result.toString() :
+ result.toFixed(2);
return `${resultString} ${units[unitsIndex][0]}${unit}`;
}
@@ -422,7 +422,7 @@
getHeight(): number {
return this.flamegraphData.length === 0 ? 0 :
- (this.maxDepth + 2) * NODE_HEIGHT;
+ (this.maxDepth + 2) * NODE_HEIGHT;
}
}
@@ -432,7 +432,7 @@
}
export function splitIfTooBig(
- line: string, width: number, lineWidth: number): LineSplitter {
+ line: string, width: number, lineWidth: number): LineSplitter {
if (line === '') return {lineWidth, lines: []};
const lines: string[] = [];
const charWidth = lineWidth / line.length;
diff --git a/ui/src/frontend/flamegraph_panel.ts b/ui/src/frontend/flamegraph_panel.ts
index eedf71d..a59291d 100644
--- a/ui/src/frontend/flamegraph_panel.ts
+++ b/ui/src/frontend/flamegraph_panel.ts
@@ -80,22 +80,22 @@
this.pids = flamegraphDetails.pids;
if (flamegraphDetails.flamegraph) {
this.flamegraph.updateDataIfChanged(
- this.nodeRendering(), flamegraphDetails.flamegraph);
+ this.nodeRendering(), flamegraphDetails.flamegraph);
}
const height = flamegraphDetails.flamegraph ?
- this.flamegraph.getHeight() + HEADER_HEIGHT :
- 0;
+ this.flamegraph.getHeight() + HEADER_HEIGHT :
+ 0;
return m(
- '.details-panel',
- this.maybeShowModal(flamegraphDetails.graphIncomplete),
- m('.details-panel-heading.flamegraph-profile',
- {onclick: (e: MouseEvent) => e.stopPropagation()},
- [
- m('div.options',
- [
- m('div.title',
- this.getTitle(),
- (this.profileType === ProfileType.MIXED_HEAP_PROFILE) &&
+ '.details-panel',
+ this.maybeShowModal(flamegraphDetails.graphIncomplete),
+ m('.details-panel-heading.flamegraph-profile',
+ {onclick: (e: MouseEvent) => e.stopPropagation()},
+ [
+ m('div.options',
+ [
+ m('div.title',
+ this.getTitle(),
+ (this.profileType === ProfileType.MIXED_HEAP_PROFILE) &&
m(Popup,
{
trigger: m(Icon, {icon: 'warning'}),
@@ -103,28 +103,28 @@
m('',
{style: {width: '300px'}},
'This is a mixed java/native heap profile, free()s are not visualized. To visualize free()s, remove "all_heaps: true" from the config.')),
- ':'),
- this.getViewingOptionButtons(),
- ]),
- m('div.details',
- [
- m('div.selected',
- `Selected function: ${
- toSelectedCallsite(
- flamegraphDetails.expandedCallsite)}`),
- m('div.time',
- `Snapshot time: `,
- m(DurationWidget, {dur: flamegraphDetails.dur})),
- m('input[type=text][placeholder=Focus]', {
- oninput: (e: Event) => {
- const target = (e.target as HTMLInputElement);
- this.focusRegex = target.value;
- this.updateFocusRegexDebounced();
- },
- // Required to stop hot-key handling:
- onkeydown: (e: Event) => e.stopPropagation(),
- }),
- (this.profileType === ProfileType.NATIVE_HEAP_PROFILE ||
+ ':'),
+ this.getViewingOptionButtons(),
+ ]),
+ m('div.details',
+ [
+ m('div.selected',
+ `Selected function: ${
+ toSelectedCallsite(
+ flamegraphDetails.expandedCallsite)}`),
+ m('div.time',
+ `Snapshot time: `,
+ m(DurationWidget, {dur: flamegraphDetails.dur})),
+ m('input[type=text][placeholder=Focus]', {
+ oninput: (e: Event) => {
+ const target = (e.target as HTMLInputElement);
+ this.focusRegex = target.value;
+ this.updateFocusRegexDebounced();
+ },
+ // Required to stop hot-key handling:
+ onkeydown: (e: Event) => e.stopPropagation(),
+ }),
+ (this.profileType === ProfileType.NATIVE_HEAP_PROFILE ||
this.profileType === ProfileType.JAVA_HEAP_SAMPLES) &&
m(Button, {
icon: 'file_download',
@@ -132,27 +132,27 @@
this.downloadPprof();
},
}),
- ]),
- ]),
- m(`canvas[ref=canvas]`, {
- style: `height:${height}px; width:100%`,
- onmousemove: (e: MouseEvent) => {
- const {offsetX, offsetY} = e;
- this.onMouseMove({x: offsetX, y: offsetY});
- },
- onmouseout: () => {
- this.onMouseOut();
- },
- onclick: (e: MouseEvent) => {
- const {offsetX, offsetY} = e;
- this.onMouseClick({x: offsetX, y: offsetY});
- },
- }),
+ ]),
+ ]),
+ m(`canvas[ref=canvas]`, {
+ style: `height:${height}px; width:100%`,
+ onmousemove: (e: MouseEvent) => {
+ const {offsetX, offsetY} = e;
+ this.onMouseMove({x: offsetX, y: offsetY});
+ },
+ onmouseout: () => {
+ this.onMouseOut();
+ },
+ onclick: (e: MouseEvent) => {
+ const {offsetX, offsetY} = e;
+ this.onMouseClick({x: offsetX, y: offsetY});
+ },
+ }),
);
} else {
return m(
- '.details-panel',
- m('.details-panel-heading', m('h2', `Flamegraph Profile`)));
+ '.details-panel',
+ m('.details-panel-heading', m('h2', `Flamegraph Profile`)));
}
}
@@ -186,20 +186,20 @@
private getTitle(): string {
const profileType = this.profileType!;
switch (profileType) {
- case ProfileType.MIXED_HEAP_PROFILE:
- return 'Mixed heap profile';
- case ProfileType.HEAP_PROFILE:
- return 'Heap profile';
- case ProfileType.NATIVE_HEAP_PROFILE:
- return 'Native heap profile';
- case ProfileType.JAVA_HEAP_SAMPLES:
- return 'Java heap samples';
- case ProfileType.JAVA_HEAP_GRAPH:
- return 'Java heap graph';
- case ProfileType.PERF_SAMPLE:
- return 'Profile';
- default:
- throw new Error('unknown type');
+ case ProfileType.MIXED_HEAP_PROFILE:
+ return 'Mixed heap profile';
+ case ProfileType.HEAP_PROFILE:
+ return 'Heap profile';
+ case ProfileType.NATIVE_HEAP_PROFILE:
+ return 'Native heap profile';
+ case ProfileType.JAVA_HEAP_SAMPLES:
+ return 'Java heap samples';
+ case ProfileType.JAVA_HEAP_GRAPH:
+ return 'Java heap graph';
+ case ProfileType.PERF_SAMPLE:
+ return 'Profile';
+ default:
+ throw new Error('unknown type');
}
}
@@ -211,22 +211,22 @@
const viewingOption: FlamegraphStateViewingOption =
globals.state.currentFlamegraphState!.viewingOption;
switch (profileType) {
- case ProfileType.JAVA_HEAP_GRAPH:
- if (viewingOption ===
+ case ProfileType.JAVA_HEAP_GRAPH:
+ if (viewingOption ===
FlamegraphStateViewingOption.OBJECTS_ALLOCATED_NOT_FREED_KEY) {
- return RENDER_OBJ_COUNT;
- } else {
- return RENDER_SELF_AND_TOTAL;
- }
- case ProfileType.MIXED_HEAP_PROFILE:
- case ProfileType.HEAP_PROFILE:
- case ProfileType.NATIVE_HEAP_PROFILE:
- case ProfileType.JAVA_HEAP_SAMPLES:
- case ProfileType.PERF_SAMPLE:
+ return RENDER_OBJ_COUNT;
+ } else {
return RENDER_SELF_AND_TOTAL;
- default:
- const exhaustiveCheck: never = profileType;
- throw new Error(`Unhandled case: ${exhaustiveCheck}`);
+ }
+ case ProfileType.MIXED_HEAP_PROFILE:
+ case ProfileType.HEAP_PROFILE:
+ case ProfileType.NATIVE_HEAP_PROFILE:
+ case ProfileType.JAVA_HEAP_SAMPLES:
+ case ProfileType.PERF_SAMPLE:
+ return RENDER_SELF_AND_TOTAL;
+ default:
+ const exhaustiveCheck: never = profileType;
+ throw new Error(`Unhandled case: ${exhaustiveCheck}`);
}
}
@@ -238,31 +238,31 @@
getViewingOptionButtons(): m.Children {
return m(
- 'div',
- ...FlamegraphDetailsPanel.selectViewingOptions(
- assertExists(this.profileType)));
+ 'div',
+ ...FlamegraphDetailsPanel.selectViewingOptions(
+ assertExists(this.profileType)));
}
downloadPprof() {
const engine = globals.getCurrentEngine();
if (!engine) return;
getCurrentTrace()
- .then((file) => {
- assertTrue(
- this.pids.length === 1,
- 'Native profiles can only contain one pid.');
- convertTraceToPprofAndDownload(file, this.pids[0], this.ts);
- })
- .catch((error) => {
- throw new Error(`Failed to get current trace ${error}`);
- });
+ .then((file) => {
+ assertTrue(
+ this.pids.length === 1,
+ 'Native profiles can only contain one pid.');
+ convertTraceToPprofAndDownload(file, this.pids[0], this.ts);
+ })
+ .catch((error) => {
+ throw new Error(`Failed to get current trace ${error}`);
+ });
}
private changeFlamegraphData() {
const data = globals.flamegraphDetails;
const flamegraphData = data.flamegraph === undefined ? [] : data.flamegraph;
this.flamegraph.updateDataIfChanged(
- this.nodeRendering(), flamegraphData, data.expandedCallsite);
+ this.nodeRendering(), flamegraphData, data.expandedCallsite);
}
oncreate({dom}: m.CVnodeDOM) {
@@ -308,17 +308,17 @@
};
private renderLocalCanvas(
- ctx: CanvasRenderingContext2D, width: number, height: number) {
+ ctx: CanvasRenderingContext2D, width: number, height: number) {
this.changeFlamegraphData();
const current = globals.state.currentFlamegraphState;
if (current === null) return;
const unit = current.viewingOption ===
FlamegraphStateViewingOption
- .SPACE_MEMORY_ALLOCATED_NOT_FREED_KEY ||
+ .SPACE_MEMORY_ALLOCATED_NOT_FREED_KEY ||
current.viewingOption ===
FlamegraphStateViewingOption.ALLOC_SPACE_MEMORY_ALLOCATED_KEY ?
- 'B' :
- '';
+ 'B' :
+ '';
this.flamegraph.draw(ctx, width, height, 0, 0, unit);
}
@@ -348,7 +348,7 @@
}
private static buildButtonComponent(
- viewingOption: FlamegraphStateViewingOption, text: string) {
+ viewingOption: FlamegraphStateViewingOption, text: string) {
const active =
(globals.state.currentFlamegraphState !== null &&
globals.state.currentFlamegraphState.viewingOption === viewingOption);
diff --git a/ui/src/frontend/flow_events_panel.ts b/ui/src/frontend/flow_events_panel.ts
index 7b3a006..2d89758 100644
--- a/ui/src/frontend/flow_events_panel.ts
+++ b/ui/src/frontend/flow_events_panel.ts
@@ -47,8 +47,8 @@
const trackKey = globals.state.trackKeyByTrackId[trackId];
if (trackKey) {
globals.makeSelection(
- Actions.selectChromeSlice({id: sliceId, trackKey, table: 'slice'}),
- {tab: 'bound_flows'});
+ Actions.selectChromeSlice({id: sliceId, trackKey, table: 'slice'}),
+ {tab: 'bound_flows'});
}
};
@@ -87,9 +87,9 @@
const args = {
onclick: () => flowClickHandler(otherEnd.sliceId, otherEnd.trackId),
onmousemove: () => globals.dispatch(
- Actions.setHighlightedSliceId({sliceId: otherEnd.sliceId})),
+ Actions.setHighlightedSliceId({sliceId: otherEnd.sliceId})),
onmouseleave: () =>
- globals.dispatch(Actions.setHighlightedSliceId({sliceId: -1})),
+ globals.dispatch(Actions.setHighlightedSliceId({sliceId: -1})),
};
const data = [
diff --git a/ui/src/frontend/flow_events_renderer.ts b/ui/src/frontend/flow_events_renderer.ts
index 7e555fe..ff0af3c 100644
--- a/ui/src/frontend/flow_events_renderer.ts
+++ b/ui/src/frontend/flow_events_renderer.ts
@@ -74,7 +74,7 @@
}
} else if (exists(panel.trackGroupId)) {
this.groupIdToTrackGroupPanel.set(
- panel.trackGroupId, {panel, yStart, height});
+ panel.trackGroupId, {panel, yStart, height});
}
}
}
@@ -86,7 +86,7 @@
}
private getTrackGroupYCoordinate(
- args: FlowEventsRendererArgs, trackId: number): number|undefined {
+ args: FlowEventsRendererArgs, trackId: number): number|undefined {
const trackGroupId = this.getTrackGroupIdByTrackId(trackId);
if (!trackGroupId) {
return undefined;
@@ -105,8 +105,8 @@
}
private getYConnection(
- args: FlowEventsRendererArgs, trackId: number,
- rect?: SliceRect): {y: number, connection: ConnectionType}|undefined {
+ args: FlowEventsRendererArgs, trackId: number,
+ rect?: SliceRect): {y: number, connection: ConnectionType}|undefined {
if (!rect) {
const y = this.getTrackGroupYCoordinate(args, trackId);
if (y === undefined) {
@@ -134,7 +134,7 @@
return undefined;
}
return trackPanel.getSliceRect?.(
- point.sliceStartTs, point.sliceEndTs, point.depth);
+ point.sliceStartTs, point.sliceEndTs, point.depth);
}
render(ctx: CanvasRenderingContext2D, args: FlowEventsRendererArgs) {
@@ -162,8 +162,8 @@
}
private drawFlow(
- ctx: CanvasRenderingContext2D, args: FlowEventsRendererArgs, flow: Flow,
- hue: number) {
+ ctx: CanvasRenderingContext2D, args: FlowEventsRendererArgs, flow: Flow,
+ hue: number) {
const beginSliceRect = this.getSliceRect(args, flow.begin);
const endSliceRect = this.getSliceRect(args, flow.end);
@@ -191,8 +191,8 @@
// beginning of the slice
// rather from the end to avoid the flow arrow going backwards.
x: this.getXCoordinate(
- flow.flowToDescendant ? flow.begin.sliceStartTs :
- flow.begin.sliceEndTs),
+ flow.flowToDescendant ? flow.begin.sliceStartTs :
+ flow.begin.sliceEndTs),
y: beginYConnection.y,
dir: beginDir,
};
@@ -220,44 +220,44 @@
private getDeltaX(dir: LineDirection, offset: number): number {
switch (dir) {
- case 'LEFT':
- return -offset;
- case 'RIGHT':
- return offset;
- case 'UP':
- return 0;
- case 'DOWN':
- return 0;
- default:
- return 0;
+ case 'LEFT':
+ return -offset;
+ case 'RIGHT':
+ return offset;
+ case 'UP':
+ return 0;
+ case 'DOWN':
+ return 0;
+ default:
+ return 0;
}
}
private getDeltaY(dir: LineDirection, offset: number): number {
switch (dir) {
- case 'LEFT':
- return 0;
- case 'RIGHT':
- return 0;
- case 'UP':
- return -offset;
- case 'DOWN':
- return offset;
- default:
- return 0;
+ case 'LEFT':
+ return 0;
+ case 'RIGHT':
+ return 0;
+ case 'UP':
+ return -offset;
+ case 'DOWN':
+ return offset;
+ default:
+ return 0;
}
}
private drawFlowArrow(
- ctx: CanvasRenderingContext2D,
- begin: {x: number, y: number, dir: LineDirection},
- end: {x: number, y: number, dir: LineDirection}, hue: number,
- intensity: number, width: number) {
+ ctx: CanvasRenderingContext2D,
+ begin: {x: number, y: number, dir: LineDirection},
+ end: {x: number, y: number, dir: LineDirection}, hue: number,
+ intensity: number, width: number) {
const hasArrowHead = Math.abs(begin.x - end.x) > 3 * TRIANGLE_SIZE;
const END_OFFSET =
(((end.dir === 'RIGHT' || end.dir === 'LEFT') && hasArrowHead) ?
- TRIANGLE_SIZE :
- 0);
+ TRIANGLE_SIZE :
+ 0);
const color = `hsl(${hue}, 50%, ${intensity}%)`;
// draw curved line from begin to end (bezier curve)
ctx.strokeStyle = color;
@@ -265,12 +265,12 @@
ctx.beginPath();
ctx.moveTo(begin.x, begin.y);
ctx.bezierCurveTo(
- begin.x - this.getDeltaX(begin.dir, BEZIER_OFFSET),
- begin.y - this.getDeltaY(begin.dir, BEZIER_OFFSET),
- end.x - this.getDeltaX(end.dir, BEZIER_OFFSET + END_OFFSET),
- end.y - this.getDeltaY(end.dir, BEZIER_OFFSET + END_OFFSET),
- end.x - this.getDeltaX(end.dir, END_OFFSET),
- end.y - this.getDeltaY(end.dir, END_OFFSET));
+ begin.x - this.getDeltaX(begin.dir, BEZIER_OFFSET),
+ begin.y - this.getDeltaY(begin.dir, BEZIER_OFFSET),
+ end.x - this.getDeltaX(end.dir, BEZIER_OFFSET + END_OFFSET),
+ end.y - this.getDeltaY(end.dir, BEZIER_OFFSET + END_OFFSET),
+ end.x - this.getDeltaX(end.dir, END_OFFSET),
+ end.y - this.getDeltaY(end.dir, END_OFFSET));
ctx.stroke();
// TODO (andrewbb): probably we should add a parameter 'MarkerType' to be
@@ -299,8 +299,8 @@
}
private drawArrowHead(
- end: {x: number; y: number; dir: LineDirection},
- ctx: CanvasRenderingContext2D, color: string) {
+ end: {x: number; y: number; dir: LineDirection},
+ ctx: CanvasRenderingContext2D, color: string) {
const dx = this.getDeltaX(end.dir, TRIANGLE_SIZE);
const dy = this.getDeltaY(end.dir, TRIANGLE_SIZE);
// draw small triangle
diff --git a/ui/src/frontend/frontend_local_state.ts b/ui/src/frontend/frontend_local_state.ts
index 6394672..2cb1916 100644
--- a/ui/src/frontend/frontend_local_state.ts
+++ b/ui/src/frontend/frontend_local_state.ts
@@ -81,8 +81,8 @@
this.hpTimeSpan =
new HighPrecisionTimeSpan(start, start.addNanos(durationNanos));
this.timeSpan = new TimeSpan(
- this.hpTimeSpan.start.toTime('floor'),
- this.hpTimeSpan.end.toTime('ceil'));
+ this.hpTimeSpan.start.toTime('floor'),
+ this.hpTimeSpan.end.toTime('ceil'));
}
static fromHighPrecisionTimeSpan(span: Span<HighPrecisionTime>): TimeWindow {
@@ -92,7 +92,7 @@
// Pan the window by certain number of seconds
pan(offset: HighPrecisionTime) {
return new TimeWindow(
- this.hpTimeSpan.start.add(offset), this.hpTimeSpan.duration.nanos);
+ this.hpTimeSpan.start.add(offset), this.hpTimeSpan.duration.nanos);
}
// Zoom in or out a bit centered on a specific offset from the root
@@ -118,9 +118,9 @@
createTimeScale(startPx: number, endPx: number): TimeScale {
return new TimeScale(
- this.hpTimeSpan.start,
- this.hpTimeSpan.duration.nanos,
- new PxSpan(startPx, endPx));
+ this.hpTimeSpan.start,
+ this.hpTimeSpan.duration.nanos,
+ new PxSpan(startPx, endPx));
}
get earliest(): time {
@@ -160,14 +160,14 @@
zoomVisibleWindow(ratio: number, centerPoint: number) {
this.visibleWindow = this.visibleWindow.zoom(ratio, centerPoint);
this._timeScale = this.visibleWindow.createTimeScale(
- this._windowSpan.start, this._windowSpan.end);
+ this._windowSpan.start, this._windowSpan.end);
this.kickUpdateLocalState();
}
panVisibleWindow(delta: HighPrecisionTime) {
this.visibleWindow = this.visibleWindow.pan(delta);
this._timeScale = this.visibleWindow.createTimeScale(
- this._windowSpan.start, this._windowSpan.end);
+ this._windowSpan.start, this._windowSpan.end);
this.kickUpdateLocalState();
}
@@ -184,19 +184,19 @@
const visibleStateWasUpdated = previousVisibleState !== this._visibleState;
if (visibleStateWasUpdated) {
this.updateLocalTime(new HighPrecisionTimeSpan(
- HighPrecisionTime.fromTime(this._visibleState.start),
- HighPrecisionTime.fromTime(this._visibleState.end),
- ));
+ HighPrecisionTime.fromTime(this._visibleState.start),
+ HighPrecisionTime.fromTime(this._visibleState.end),
+ ));
}
}
// Set the highlight box to draw
selectArea(
- start: time, end: time,
- tracks = this._selectedArea ? this._selectedArea.tracks : []) {
+ start: time, end: time,
+ tracks = this._selectedArea ? this._selectedArea.tracks : []) {
assertTrue(
- end >= start,
- `Impossible select area: start [${start}] >= end [${end}]`);
+ end >= start,
+ `Impossible select area: start [${start}] >= end [${end}]`);
this._selectedArea = {start, end, tracks};
raf.scheduleFullRedraw();
}
@@ -219,9 +219,9 @@
const start = ts.start.clamp(traceBounds.start, traceBounds.end);
const end = ts.end.clamp(traceBounds.start, traceBounds.end);
this.visibleWindow = TimeWindow.fromHighPrecisionTimeSpan(
- new HighPrecisionTimeSpan(start, end));
+ new HighPrecisionTimeSpan(start, end));
this._timeScale = this.visibleWindow.createTimeScale(
- this._windowSpan.start, this._windowSpan.end);
+ this._windowSpan.start, this._windowSpan.end);
this.updateResolution();
}
diff --git a/ui/src/frontend/ftrace_panel.ts b/ui/src/frontend/ftrace_panel.ts
index a77d31b..148896a 100644
--- a/ui/src/frontend/ftrace_panel.ts
+++ b/ui/src/frontend/ftrace_panel.ts
@@ -56,18 +56,18 @@
view(_: m.CVnode<{}>) {
return m(
- DetailsShell,
+ DetailsShell,
+ {
+ title: this.renderTitle(),
+ buttons: this.renderFilterPanel(),
+ },
+ m(
+ VirtualScrollContainer,
{
- title: this.renderTitle(),
- buttons: this.renderFilterPanel(),
+ onScroll: this.onScroll,
},
- m(
- VirtualScrollContainer,
- {
- onScroll: this.onScroll,
- },
- m('.ftrace-panel', this.renderRows()),
- ),
+ m('.ftrace-panel', this.renderRows()),
+ ),
);
}
@@ -129,28 +129,28 @@
id: name,
name: `${name} (${count})`,
checked: !globals.state.ftraceFilter.excludedNames.some(
- (excluded: string) => excluded === name),
+ (excluded: string) => excluded === name),
};
});
return m(
- PopupMultiSelect,
- {
- label: 'Filter',
- minimal: true,
- icon: 'filter_list_alt',
- popupPosition: PopupPosition.Top,
- options,
- onChange: (diffs: MultiSelectDiff[]) => {
- const excludedNames: StringListPatch[] = diffs.map(
- ({id, checked}) => [checked ? 'remove' : 'add', id],
- );
- globals.dispatchMultiple([
- Actions.updateFtraceFilter({excludedNames}),
- Actions.requestTrackReload({}),
- ]);
- },
+ PopupMultiSelect,
+ {
+ label: 'Filter',
+ minimal: true,
+ icon: 'filter_list_alt',
+ popupPosition: PopupPosition.Top,
+ options,
+ onChange: (diffs: MultiSelectDiff[]) => {
+ const excludedNames: StringListPatch[] = diffs.map(
+ ({id, checked}) => [checked ? 'remove' : 'add', id],
+ );
+ globals.dispatchMultiple([
+ Actions.updateFtraceFilter({excludedNames}),
+ Actions.requestTrackReload({}),
+ ]);
},
+ },
);
}
@@ -160,13 +160,13 @@
const rows: m.Children = [];
rows.push(m(
- `.row`,
- m('.cell.row-header', 'Timestamp'),
- m('.cell.row-header', 'Name'),
- m('.cell.row-header', 'CPU'),
- m('.cell.row-header', 'Process'),
- m('.cell.row-header', 'Args'),
- ));
+ `.row`,
+ m('.cell.row-header', 'Timestamp'),
+ m('.cell.row-header', 'Name'),
+ m('.cell.row-header', 'CPU'),
+ m('.cell.row-header', 'Process'),
+ m('.cell.row-header', 'Args'),
+ ));
if (data) {
const {events, offset, numEvents} = data;
@@ -180,18 +180,18 @@
const color = colorForFtrace(name).base.cssString;
rows.push(m(
- `.row`,
- {
- style: {top: `${(rank + 1.0) * ROW_H}px`},
- onmouseover: this.onRowOver.bind(this, ts),
- onmouseout: this.onRowOut.bind(this),
- },
- m('.cell', timestamp),
- m('.cell', m('span.colour', {style: {background: color}}), name),
- m('.cell', cpu),
- m('.cell', process),
- m('.cell', args),
- ));
+ `.row`,
+ {
+ style: {top: `${(rank + 1.0) * ROW_H}px`},
+ onmouseover: this.onRowOver.bind(this, ts),
+ onmouseout: this.onRowOut.bind(this),
+ },
+ m('.cell', timestamp),
+ m('.cell', m('span.colour', {style: {background: color}}), name),
+ m('.cell', cpu),
+ m('.cell', process),
+ m('.cell', args),
+ ));
}
return m('.rows', {style: {height: `${numEvents * ROW_H}px`}}, rows);
} else {
diff --git a/ui/src/frontend/generic_slice_details_tab.ts b/ui/src/frontend/generic_slice_details_tab.ts
index e7ceb20..e08cae0 100644
--- a/ui/src/frontend/generic_slice_details_tab.ts
+++ b/ui/src/frontend/generic_slice_details_tab.ts
@@ -48,7 +48,7 @@
// and renders it according to the provided config, specifying which columns
// need to be rendered and how.
export class GenericSliceDetailsTab extends
- BottomTab<GenericSliceDetailsTabConfig> {
+ BottomTab<GenericSliceDetailsTabConfig> {
static readonly kind = 'dev.perfetto.GenericSliceDetailsTab';
data: {[key: string]: ColumnType}|undefined;
@@ -62,12 +62,12 @@
super(args);
this.engine
- .query(`select * from ${this.config.sqlTableName} where id = ${
- this.config.id}`)
- .then((queryResult) => {
- this.data = queryResult.firstRow({});
- raf.scheduleFullRedraw();
- });
+ .query(`select * from ${this.config.sqlTableName} where id = ${
+ this.config.id}`)
+ .then((queryResult) => {
+ this.data = queryResult.firstRow({});
+ raf.scheduleFullRedraw();
+ });
}
viewTab() {
@@ -93,28 +93,28 @@
const details = dictToTree(args);
return m(
- DetailsShell,
- {
- title: this.config.title,
- },
+ DetailsShell,
+ {
+ title: this.config.title,
+ },
+ m(
+ GridLayout,
m(
- GridLayout,
- m(
- Section,
- {title: 'Details'},
- m(Tree, details),
- ),
- m(
- Section,
- {title: 'Metadata'},
- m(Tree, [m(TreeNode, {
- left: 'SQL ID',
- right: m(SqlRef, {
- table: this.config.sqlTableName,
- id: this.config.id}),
- })]),
- ),
+ Section,
+ {title: 'Details'},
+ m(Tree, details),
),
+ m(
+ Section,
+ {title: 'Metadata'},
+ m(Tree, [m(TreeNode, {
+ left: 'SQL ID',
+ right: m(SqlRef, {
+ table: this.config.sqlTableName,
+ id: this.config.id}),
+ })]),
+ ),
+ ),
);
}
diff --git a/ui/src/frontend/globals.ts b/ui/src/frontend/globals.ts
index 51e9a9f..fb7b027 100644
--- a/ui/src/frontend/globals.ts
+++ b/ui/src/frontend/globals.ts
@@ -312,8 +312,8 @@
engines = new Map<string, Engine>();
initialize(
- dispatch: Dispatch, router: Router, initialState: State,
- cmdManager: CommandManager) {
+ dispatch: Dispatch, router: Router, initialState: State,
+ cmdManager: CommandManager) {
this._dispatch = dispatch;
this._router = router;
this._store = createStore(initialState);
@@ -321,8 +321,8 @@
this._timeline = new Timeline();
setPerfHooks(
- () => this.state.perfDebug,
- () => this.dispatch(Actions.togglePerfDebug({})));
+ () => this.state.perfDebug,
+ () => this.dispatch(Actions.togglePerfDebug({})));
this._serviceWorkerController = new ServiceWorkerController();
this._testing =
@@ -653,8 +653,8 @@
// the set of selected tracks via toggling per-track checkboxes.
// Fix that.
onSelectionChanged(
- this.state.currentSelection ?? undefined,
- tab === 'current_selection');
+ this.state.currentSelection ?? undefined,
+ tab === 'current_selection');
}
}
@@ -788,19 +788,19 @@
timestampOffset(): time {
const fmt = timestampFormat();
switch (fmt) {
- case TimestampFormat.Timecode:
- case TimestampFormat.Seconds:
- return this.state.traceTime.start;
- case TimestampFormat.Raw:
- case TimestampFormat.RawLocale:
- return Time.ZERO;
- case TimestampFormat.UTC:
- return this.utcOffset;
- case TimestampFormat.TraceTz:
- return this.traceTzOffset;
- default:
- const x: never = fmt;
- throw new Error(`Unsupported format ${x}`);
+ case TimestampFormat.Timecode:
+ case TimestampFormat.Seconds:
+ return this.state.traceTime.start;
+ case TimestampFormat.Raw:
+ case TimestampFormat.RawLocale:
+ return Time.ZERO;
+ case TimestampFormat.UTC:
+ return this.utcOffset;
+ case TimestampFormat.TraceTz:
+ return this.traceTzOffset;
+ default:
+ const x: never = fmt;
+ throw new Error(`Unsupported format ${x}`);
}
}
@@ -816,7 +816,7 @@
if (selection === null) {
return {start, end};
} else if (
- selection.kind === 'SLICE' || selection.kind === 'CHROME_SLICE') {
+ selection.kind === 'SLICE' || selection.kind === 'CHROME_SLICE') {
const slice = this.sliceDetails;
if (slice.ts && slice.dur !== undefined && slice.dur > 0) {
start = slice.ts;
@@ -827,7 +827,7 @@
// a)slice.dur === -1 -> unfinished slice
// b)slice.dur === 0 -> instant event
end = slice.dur === -1n ? Time.add(start, INCOMPLETE_SLICE_DURATION) :
- Time.add(start, INSTANT_FOCUS_DURATION);
+ Time.add(start, INSTANT_FOCUS_DURATION);
}
} else if (selection.kind === 'THREAD_STATE') {
const threadState = this.threadStateDetails;
diff --git a/ui/src/frontend/gridline_helper.ts b/ui/src/frontend/gridline_helper.ts
index 60d959f..c8cd0c3 100644
--- a/ui/src/frontend/gridline_helper.ts
+++ b/ui/src/frontend/gridline_helper.ts
@@ -103,15 +103,15 @@
const array = Array.from(pattern);
return array.map((char) => {
switch (char) {
- case '|':
- return TickType.MAJOR;
- case ':':
- return TickType.MEDIUM;
- case '.':
- return TickType.MINOR;
- default:
- // This is almost certainly a developer/fat-finger error
- throw Error(`Invalid char "${char}" in pattern "${pattern}"`);
+ case '|':
+ return TickType.MAJOR;
+ case ':':
+ return TickType.MEDIUM;
+ case '.':
+ return TickType.MINOR;
+ default:
+ // This is almost certainly a developer/fat-finger error
+ throw Error(`Invalid char "${char}" in pattern "${pattern}"`);
}
});
}
@@ -140,8 +140,8 @@
private _offset: time;
constructor(
- timeSpan: Span<time, duration>, maxMajorTicks: number,
- offset: time = Time.ZERO) {
+ timeSpan: Span<time, duration>, maxMajorTicks: number,
+ offset: time = Time.ZERO) {
assertTrue(timeSpan.duration > 0n, 'timeSpan.duration cannot be lte 0');
assertTrue(maxMajorTicks > 0, 'maxMajorTicks cannot be lte 0');
@@ -165,7 +165,7 @@
let patternIndex = 0;
for (let time = start; time < end;
- time = Time.add(time, stepSize), patternIndex++) {
+ time = Time.add(time, stepSize), patternIndex++) {
if (time >= this._timeSpan.start) {
patternIndex = patternIndex % this._tickPattern.length;
const type = this._tickPattern[patternIndex];
@@ -177,14 +177,14 @@
// Gets the timescale associated with the current visible window.
export function timeScaleForVisibleWindow(
- startPx: number, endPx: number): TimeScale {
+ startPx: number, endPx: number): TimeScale {
return globals.timeline.getTimeScale(startPx, endPx);
}
export function drawGridLines(
- ctx: CanvasRenderingContext2D,
- width: number,
- height: number): void {
+ ctx: CanvasRenderingContext2D,
+ width: number,
+ height: number): void {
ctx.strokeStyle = TRACK_BORDER_COLOR;
ctx.lineWidth = 1;
diff --git a/ui/src/frontend/gridline_helper_unittest.ts b/ui/src/frontend/gridline_helper_unittest.ts
index 989595f..4cd1c71 100644
--- a/ui/src/frontend/gridline_helper_unittest.ts
+++ b/ui/src/frontend/gridline_helper_unittest.ts
@@ -53,7 +53,7 @@
it('can generate ticks when span has an offset', () => {
const tickGen = new TickGenerator(
- new TimeSpan(Time.fromRaw(10n), Time.fromRaw(20n)), 1);
+ new TimeSpan(Time.fromRaw(10n), Time.fromRaw(20n)), 1);
const expected = [
{type: TickType.MAJOR, time: 10n},
{type: TickType.MINOR, time: 11n},
@@ -72,7 +72,7 @@
it('can generate ticks when span is large', () => {
const tickGen = new TickGenerator(
- new TimeSpan(Time.fromRaw(1000000000n), Time.fromRaw(2000000000n)), 1);
+ new TimeSpan(Time.fromRaw(1000000000n), Time.fromRaw(2000000000n)), 1);
const expected = [
{type: TickType.MAJOR, time: 1000000000n},
{type: TickType.MINOR, time: 1100000000n},
diff --git a/ui/src/frontend/help_modal.ts b/ui/src/frontend/help_modal.ts
index 1cf3f76..ceef5a9 100644
--- a/ui/src/frontend/help_modal.ts
+++ b/ui/src/frontend/help_modal.ts
@@ -50,28 +50,28 @@
oninit() {
nativeKeyboardLayoutMap()
- .then((keyMap: KeyboardLayoutMap) => {
- this.keyMap = keyMap;
- raf.scheduleFullRedraw();
- })
- .catch((e) => {
- if (e instanceof NotSupportedError ||
+ .then((keyMap: KeyboardLayoutMap) => {
+ this.keyMap = keyMap;
+ raf.scheduleFullRedraw();
+ })
+ .catch((e) => {
+ if (e instanceof NotSupportedError ||
e.toString().includes('SecurityError')) {
- // Keyboard layout is unavailable. Since showing the keyboard
- // mappings correct for the user's keyboard layout is a nice-to-
- // have, and users with non-QWERTY layouts are usually aware of the
- // fact that the are using non-QWERTY layouts, we resort to showing
- // English QWERTY mappings as a best-effort approach.
- // The alternative would be to show key mappings for all keyboard
- // layouts which is not feasible.
- this.keyMap = new EnglishQwertyKeyboardLayoutMap();
- raf.scheduleFullRedraw();
- } else {
- // Something unexpected happened. Either the browser doesn't conform
- // to the keyboard API spec, or the keyboard API spec has changed!
- throw e;
- }
- });
+ // Keyboard layout is unavailable. Since showing the keyboard
+ // mappings correct for the user's keyboard layout is a nice-to-
+ // have, and users with non-QWERTY layouts are usually aware of the
+ // fact that the are using non-QWERTY layouts, we resort to showing
+ // English QWERTY mappings as a best-effort approach.
+ // The alternative would be to show key mappings for all keyboard
+ // layouts which is not feasible.
+ this.keyMap = new EnglishQwertyKeyboardLayoutMap();
+ raf.scheduleFullRedraw();
+ } else {
+ // Something unexpected happened. Either the browser doesn't conform
+ // to the keyboard API spec, or the keyboard API spec has changed!
+ throw e;
+ }
+ });
}
view(_: m.Vnode): m.Children {
@@ -90,108 +90,108 @@
];
const sidebarInstructions = globals.hideSidebar ?
- [] :
- [m('tr',
- m('td', keycap(ctrlOrCmd), ' + ', keycap('b')),
- m('td', 'Toggle display of sidebar'))];
+ [] :
+ [m('tr',
+ m('td', keycap(ctrlOrCmd), ' + ', keycap('b')),
+ m('td', 'Toggle display of sidebar'))];
return m(
- '.help',
- m('h2', 'Navigation'),
+ '.help',
+ m('h2', 'Navigation'),
+ m(
+ 'table',
m(
- 'table',
- m(
- 'tr',
- m('td',
- this.codeToKeycap(KeyMapping.KEY_ZOOM_IN),
- '/',
- this.codeToKeycap(KeyMapping.KEY_ZOOM_OUT)),
- m('td', 'Zoom in/out'),
- ),
- m(
- 'tr',
- m('td',
- this.codeToKeycap(KeyMapping.KEY_PAN_LEFT),
- '/',
- this.codeToKeycap(KeyMapping.KEY_PAN_RIGHT)),
- m('td', 'Pan left/right'),
- ),
- ),
- m('h2', 'Mouse Controls'),
- m('table',
- m('tr', m('td', 'Click'), m('td', 'Select event')),
- m('tr', m('td', 'Ctrl + Scroll wheel'), m('td', 'Zoom in/out')),
- m('tr', m('td', 'Click + Drag'), m('td', 'Select area')),
- m('tr', m('td', 'Shift + Click + Drag'), m('td', 'Pan left/right'))),
- m('h2', 'Running commands from the viewer page'),
- m('table',
- m('tr',
- m('td', keycap('>'), ' in the (empty) search box'),
- m('td', 'Switch to command mode'))),
- m('h2', 'Making SQL queries from the viewer page'),
- m('table',
- m('tr',
- m('td', keycap(':'), ' in the (empty) search box'),
- m('td', 'Switch to query mode')),
- m('tr', m('td', keycap('Enter')), m('td', 'Execute query')),
- m('tr',
- m('td', keycap('Ctrl'), ' + ', keycap('Enter')),
- m('td',
- 'Execute query and pin output ' +
+ 'tr',
+ m('td',
+ this.codeToKeycap(KeyMapping.KEY_ZOOM_IN),
+ '/',
+ this.codeToKeycap(KeyMapping.KEY_ZOOM_OUT)),
+ m('td', 'Zoom in/out'),
+ ),
+ m(
+ 'tr',
+ m('td',
+ this.codeToKeycap(KeyMapping.KEY_PAN_LEFT),
+ '/',
+ this.codeToKeycap(KeyMapping.KEY_PAN_RIGHT)),
+ m('td', 'Pan left/right'),
+ ),
+ ),
+ m('h2', 'Mouse Controls'),
+ m('table',
+ m('tr', m('td', 'Click'), m('td', 'Select event')),
+ m('tr', m('td', 'Ctrl + Scroll wheel'), m('td', 'Zoom in/out')),
+ m('tr', m('td', 'Click + Drag'), m('td', 'Select area')),
+ m('tr', m('td', 'Shift + Click + Drag'), m('td', 'Pan left/right'))),
+ m('h2', 'Running commands from the viewer page'),
+ m('table',
+ m('tr',
+ m('td', keycap('>'), ' in the (empty) search box'),
+ m('td', 'Switch to command mode'))),
+ m('h2', 'Making SQL queries from the viewer page'),
+ m('table',
+ m('tr',
+ m('td', keycap(':'), ' in the (empty) search box'),
+ m('td', 'Switch to query mode')),
+ m('tr', m('td', keycap('Enter')), m('td', 'Execute query')),
+ m('tr',
+ m('td', keycap('Ctrl'), ' + ', keycap('Enter')),
+ m('td',
+ 'Execute query and pin output ' +
'(output will not be replaced by regular query input)'))),
- ...queryPageInstructions,
- m('h2', 'Other'),
- m(
- 'table',
- m('tr',
- m('td', keycap('f'), ' (with event selected)'),
- m('td', 'Scroll + zoom to current selection')),
- m('tr',
- m('td', keycap('['), '/', keycap(']'), ' (with event selected)'),
- m('td',
- 'Select next/previous slice that is connected by a flow.',
- m('br'),
- 'If there are multiple flows,' +
+ ...queryPageInstructions,
+ m('h2', 'Other'),
+ m(
+ 'table',
+ m('tr',
+ m('td', keycap('f'), ' (with event selected)'),
+ m('td', 'Scroll + zoom to current selection')),
+ m('tr',
+ m('td', keycap('['), '/', keycap(']'), ' (with event selected)'),
+ m('td',
+ 'Select next/previous slice that is connected by a flow.',
+ m('br'),
+ 'If there are multiple flows,' +
'the one that is in focus (bold) is selected')),
- m('tr',
- m('td',
- keycap(ctrlOrCmd),
- ' + ',
- keycap('['),
- '/',
- keycap(']'),
- ' (with event selected)'),
- m('td', 'Switch focus to another flow')),
- m('tr',
- m('td', keycap('m'), ' (with event or area selected)'),
- m('td', 'Mark the area (temporarily)')),
- m('tr',
- m('td',
- keycap('Shift'),
- ' + ',
- keycap('m'),
- ' (with event or area selected)'),
- m('td', 'Mark the area (persistently)')),
- m('tr',
- m('td', keycap(ctrlOrCmd), ' + ', keycap('a')),
- m('td', 'Select all')),
- m('tr',
- m('td',
- keycap(ctrlOrCmd),
- ' + ',
- keycap('Shift'),
- ' + ',
- keycap('p')),
- m('td', 'Open command palette')),
- m('tr',
- m('td', keycap(ctrlOrCmd), ' + ', keycap('o')),
- m('td', 'Run query')),
- m('tr',
- m('td', keycap(ctrlOrCmd), ' + ', keycap('s')),
- m('td', 'Search')),
- ...sidebarInstructions,
- m('tr', m('td', keycap('?')), m('td', 'Show help')),
- ));
+ m('tr',
+ m('td',
+ keycap(ctrlOrCmd),
+ ' + ',
+ keycap('['),
+ '/',
+ keycap(']'),
+ ' (with event selected)'),
+ m('td', 'Switch focus to another flow')),
+ m('tr',
+ m('td', keycap('m'), ' (with event or area selected)'),
+ m('td', 'Mark the area (temporarily)')),
+ m('tr',
+ m('td',
+ keycap('Shift'),
+ ' + ',
+ keycap('m'),
+ ' (with event or area selected)'),
+ m('td', 'Mark the area (persistently)')),
+ m('tr',
+ m('td', keycap(ctrlOrCmd), ' + ', keycap('a')),
+ m('td', 'Select all')),
+ m('tr',
+ m('td',
+ keycap(ctrlOrCmd),
+ ' + ',
+ keycap('Shift'),
+ ' + ',
+ keycap('p')),
+ m('td', 'Open command palette')),
+ m('tr',
+ m('td', keycap(ctrlOrCmd), ' + ', keycap('o')),
+ m('td', 'Run query')),
+ m('tr',
+ m('td', keycap(ctrlOrCmd), ' + ', keycap('s')),
+ m('td', 'Search')),
+ ...sidebarInstructions,
+ m('tr', m('td', keycap('?')), m('td', 'Show help')),
+ ));
}
private codeToKeycap(code: string): m.Children {
diff --git a/ui/src/frontend/home_page.ts b/ui/src/frontend/home_page.ts
index 99a3c03..629ecc0 100644
--- a/ui/src/frontend/home_page.ts
+++ b/ui/src/frontend/home_page.ts
@@ -24,44 +24,44 @@
export class Hints implements m.ClassComponent {
view() {
return m(
- '.home-page-hints',
- m('.tagline', 'New!'),
+ '.home-page-hints',
+ m('.tagline', 'New!'),
+ m(
+ 'ul',
m(
- 'ul',
- m(
- 'li',
- 'Use ',
- m(HotkeyGlyphs, {hotkey: 'W'}),
- m(HotkeyGlyphs, {hotkey: 'A'}),
- m(HotkeyGlyphs, {hotkey: 'S'}),
- m(HotkeyGlyphs, {hotkey: 'D'}),
- ' to navigate the trace.',
- ),
- m('li',
- 'Try the ',
- m(Anchor,
- {
- href:
+ 'li',
+ 'Use ',
+ m(HotkeyGlyphs, {hotkey: 'W'}),
+ m(HotkeyGlyphs, {hotkey: 'A'}),
+ m(HotkeyGlyphs, {hotkey: 'S'}),
+ m(HotkeyGlyphs, {hotkey: 'D'}),
+ ' to navigate the trace.',
+ ),
+ m('li',
+ 'Try the ',
+ m(Anchor,
+ {
+ href:
'https://perfetto.dev/docs/visualization/perfetto-ui#command-palette',
- },
- 'command palette,'),
- ' press ',
- m(HotkeyGlyphs, {hotkey: '!Mod+Shift+P'}),
- '.'),
- m(
- 'li',
- 'Customize the ',
- m(
- Anchor,
- {
- href:
+ },
+ 'command palette,'),
+ ' press ',
+ m(HotkeyGlyphs, {hotkey: '!Mod+Shift+P'}),
+ '.'),
+ m(
+ 'li',
+ 'Customize the ',
+ m(
+ Anchor,
+ {
+ href:
'https://perfetto.dev/docs/visualization/perfetto-ui#changing-the-time-format-and-offset',
- },
- 'time format',
- ),
- '.',
- ),
- ),
+ },
+ 'time format',
+ ),
+ '.',
+ ),
+ ),
);
}
}
@@ -69,32 +69,32 @@
export const HomePage = createPage({
view() {
return m(
- '.page.home-page',
+ '.page.home-page',
+ m(
+ '.home-page-center',
m(
- '.home-page-center',
- m(
- '.home-page-title',
- m(`img.logo[src=${globals.root}assets/logo-3d.png]`),
- 'Perfetto',
- ),
- m(Hints),
- m(
- '.channel-select',
- m('',
- 'Feeling adventurous? Try our bleeding edge Canary version'),
- m(
- 'fieldset',
- mkChan('stable'),
- mkChan('canary'),
- m('.highlight'),
- ),
- m(`.home-page-reload${channelChanged() ? '.show' : ''}`,
- 'You need to reload the page for the changes to have effect'),
- ),
- ),
- m('a.privacy',
- {href: 'https://policies.google.com/privacy', target: '_blank'},
- 'Privacy policy'));
+ '.home-page-title',
+ m(`img.logo[src=${globals.root}assets/logo-3d.png]`),
+ 'Perfetto',
+ ),
+ m(Hints),
+ m(
+ '.channel-select',
+ m('',
+ 'Feeling adventurous? Try our bleeding edge Canary version'),
+ m(
+ 'fieldset',
+ mkChan('stable'),
+ mkChan('canary'),
+ m('.highlight'),
+ ),
+ m(`.home-page-reload${channelChanged() ? '.show' : ''}`,
+ 'You need to reload the page for the changes to have effect'),
+ ),
+ ),
+ m('a.privacy',
+ {href: 'https://policies.google.com/privacy', target: '_blank'},
+ 'Privacy policy'));
},
});
diff --git a/ui/src/frontend/index.ts b/ui/src/frontend/index.ts
index ad21d51..f4f3558 100644
--- a/ui/src/frontend/index.ts
+++ b/ui/src/frontend/index.ts
@@ -261,8 +261,8 @@
// controller's worker can't access chrome.runtime.
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
const extensionPort = window.chrome && chrome.runtime ?
- chrome.runtime.connect(EXTENSION_ID) :
- undefined;
+ chrome.runtime.connect(EXTENSION_ID) :
+ undefined;
setExtensionAvailability(extensionPort !== undefined);
@@ -273,13 +273,13 @@
});
// This forwards the messages from the extension to the controller.
extensionPort.onMessage.addListener(
- (message: object, _port: chrome.runtime.Port) => {
- if (isGetCategoriesResponse(message)) {
- globals.dispatch(Actions.setChromeCategories(message));
- return;
- }
- extensionLocalChannel.port2.postMessage(message);
- });
+ (message: object, _port: chrome.runtime.Port) => {
+ if (isGetCategoriesResponse(message)) {
+ globals.dispatch(Actions.setChromeCategories(message));
+ return;
+ }
+ extensionLocalChannel.port2.postMessage(message);
+ });
}
// This forwards the messages from the controller to the extension
@@ -324,9 +324,9 @@
updateAvailableAdbDevices();
try {
navigator.usb.addEventListener(
- 'connect', () => updateAvailableAdbDevices());
+ 'connect', () => updateAvailableAdbDevices());
navigator.usb.addEventListener(
- 'disconnect', () => updateAvailableAdbDevices());
+ 'disconnect', () => updateAvailableAdbDevices());
} catch (e) {
console.error('WebUSB API not supported');
}
diff --git a/ui/src/frontend/keyboard_event_handler.ts b/ui/src/frontend/keyboard_event_handler.ts
index 386167f..571eef5 100644
--- a/ui/src/frontend/keyboard_event_handler.ts
+++ b/ui/src/frontend/keyboard_event_handler.ts
@@ -138,7 +138,7 @@
}
const boundFlows = globals.connectedFlows.filter(
- (flow) => flow.begin.sliceId === sliceId && direction === 'Forward' ||
+ (flow) => flow.begin.sliceId === sliceId && direction === 'Forward' ||
flow.end.sliceId === sliceId && direction === 'Backward');
if (direction === 'Backward') {
@@ -162,7 +162,7 @@
const sliceId = globals.state.currentSelection.id;
const flowId =
(direction === 'Backward' ? globals.state.focusedFlowIdLeft :
- globals.state.focusedFlowIdRight);
+ globals.state.focusedFlowIdRight);
if (sliceId === -1 || flowId === -1) {
return;
@@ -190,8 +190,8 @@
if (range.start !== -1n && range.end !== -1n &&
globals.state.currentSelection !== null) {
const tracks = globals.state.currentSelection.trackKey ?
- [globals.state.currentSelection.trackKey] :
- [];
+ [globals.state.currentSelection.trackKey] :
+ [];
const area: Area = {start: range.start, end: range.end, tracks};
globals.dispatch(Actions.markArea({area, persistent}));
}
diff --git a/ui/src/frontend/legacy_trace_viewer.ts b/ui/src/frontend/legacy_trace_viewer.ts
index f49fc05..9ba14e0 100644
--- a/ui/src/frontend/legacy_trace_viewer.ts
+++ b/ui/src/frontend/legacy_trace_viewer.ts
@@ -94,7 +94,7 @@
reader.onload = () => {
if (reader.result instanceof ArrayBuffer) {
return openBufferWithLegacyTraceViewer(
- file.name, reader.result, reader.result.byteLength);
+ file.name, reader.result, reader.result.byteLength);
} else {
const str = reader.result as string;
return openBufferWithLegacyTraceViewer(file.name, str, str.length);
@@ -112,7 +112,7 @@
}
export function openBufferWithLegacyTraceViewer(
- name: string, data: ArrayBuffer|string, size: number) {
+ name: string, data: ArrayBuffer|string, size: number) {
if (data instanceof ArrayBuffer) {
assertTrue(size <= data.byteLength);
if (size !== data.byteLength) {
@@ -146,9 +146,9 @@
showModal({
title: 'Open trace in the legacy Catapult Trace Viewer',
content: m(
- 'div',
- m('div', 'You are seeing this interstitial because popups are blocked'),
- m('div', 'Enable popups to skip this dialog next time.')),
+ 'div',
+ m('div', 'You are seeing this interstitial because popups are blocked'),
+ m('div', 'Enable popups to skip this dialog next time.')),
buttons: [{
text: 'Open legacy UI',
primary: true,
diff --git a/ui/src/frontend/logs_filters.ts b/ui/src/frontend/logs_filters.ts
index 35ad04d..b83a62a 100644
--- a/ui/src/frontend/logs_filters.ts
+++ b/ui/src/frontend/logs_filters.ts
@@ -51,17 +51,17 @@
for (let i = IGNORED_STATES; i < attrs.options.length; i++) {
const selected = i === attrs.selectedIndex;
optionComponents.push(
- m('option', {value: i, selected}, attrs.options[i]));
+ m('option', {value: i, selected}, attrs.options[i]));
}
return m(
- Select,
- {
- onchange: (e: Event) => {
- const selectionValue = (e.target as HTMLSelectElement).value;
- attrs.onSelect(Number(selectionValue));
- },
+ Select,
+ {
+ onchange: (e: Event) => {
+ const selectionValue = (e.target as HTMLSelectElement).value;
+ attrs.onSelect(Number(selectionValue));
},
- optionComponents,
+ },
+ optionComponents,
);
}
}
@@ -85,9 +85,9 @@
const tags = vnode.attrs.tags;
return [
tags.map((tag) => m(LogTagChip, {
- name: tag,
- removeTag: this.removeTag.bind(this),
- })),
+ name: tag,
+ removeTag: this.removeTag.bind(this),
+ })),
m(TextInput,
{
placeholder: 'Filter by tag...',
@@ -101,7 +101,7 @@
if (e.key === 'Backspace' && tags.length > 0 &&
htmlElement.value === '') {
globals.dispatch(
- Actions.removeLogTag({tag: tags[tags.length - 1]}));
+ Actions.removeLogTag({tag: tags[tags.length - 1]}));
return;
}
@@ -112,7 +112,7 @@
return;
}
globals.dispatch(
- Actions.addLogTag({tag: htmlElement.value.trim()}));
+ Actions.addLogTag({tag: htmlElement.value.trim()}));
htmlElement.value = '';
},
}),
@@ -123,16 +123,16 @@
class LogTextWidget implements m.ClassComponent {
view() {
return m(
- TextInput, {
- placeholder: 'Search logs...',
- onkeyup: (e: KeyboardEvent) => {
- // We want to use the value of the input field after it has been
- // updated with the latest key (onkeyup).
- const htmlElement = e.target as HTMLInputElement;
- globals.dispatch(
- Actions.updateLogFilterText({textEntry: htmlElement.value}));
- },
- });
+ TextInput, {
+ placeholder: 'Search logs...',
+ onkeyup: (e: KeyboardEvent) => {
+ // We want to use the value of the input field after it has been
+ // updated with the latest key (onkeyup).
+ const htmlElement = e.target as HTMLInputElement;
+ globals.dispatch(
+ Actions.updateLogFilterText({textEntry: htmlElement.value}));
+ },
+ });
}
}
@@ -140,7 +140,7 @@
view({attrs}: m.Vnode<FilterByTextWidgetAttrs>) {
const icon = attrs.hideNonMatching ? 'unfold_less' : 'unfold_more';
const tooltip = attrs.hideNonMatching ? 'Expand all and view highlighted' :
- 'Collapse all';
+ 'Collapse all';
return m(Button, {
icon,
title: tooltip,
diff --git a/ui/src/frontend/logs_panel.ts b/ui/src/frontend/logs_panel.ts
index cd17638..4009e94 100644
--- a/ui/src/frontend/logs_panel.ts
+++ b/ui/src/frontend/logs_panel.ts
@@ -111,15 +111,15 @@
const rows: m.Children = [];
rows.push(
- m(`.row`,
- m('.cell.row-header', 'Timestamp'),
- m('.cell.row-header', 'Level'),
- m('.cell.row-header', 'Tag'),
- hasProcessNames ? m('.cell.with-process.row-header', 'Process name') :
- undefined,
- hasProcessNames ? m('.cell.with-process.row-header', 'Message') :
- m('.cell.no-process.row-header', 'Message'),
- m('br')));
+ m(`.row`,
+ m('.cell.row-header', 'Timestamp'),
+ m('.cell.row-header', 'Level'),
+ m('.cell.row-header', 'Tag'),
+ hasProcessNames ? m('.cell.with-process.row-header', 'Process name') :
+ undefined,
+ hasProcessNames ? m('.cell.with-process.row-header', 'Message') :
+ m('.cell.no-process.row-header', 'Message'),
+ m('br')));
if (this.entries) {
const offset = this.entries.offset;
const timestamps = this.entries.timestamps;
@@ -140,39 +140,39 @@
}
rows.push(
- m(`.row.${prioClass}`,
- {
- 'class': isStale ? 'stale' : '',
- style,
- 'onmouseover': this.onRowOver.bind(this, ts),
- 'onmouseout': this.onRowOut.bind(this),
- },
- m('.cell', m(Timestamp, {ts})),
- m('.cell', priorityLetter || '?'),
- m('.cell', tags[i]),
- hasProcessNames ? m('.cell.with-process', processNames[i]) :
- undefined,
- hasProcessNames ? m('.cell.with-process', messages[i]) :
- m('.cell.no-process', messages[i]),
- m('br')));
+ m(`.row.${prioClass}`,
+ {
+ 'class': isStale ? 'stale' : '',
+ style,
+ 'onmouseover': this.onRowOver.bind(this, ts),
+ 'onmouseout': this.onRowOut.bind(this),
+ },
+ m('.cell', m(Timestamp, {ts})),
+ m('.cell', priorityLetter || '?'),
+ m('.cell', tags[i]),
+ hasProcessNames ? m('.cell.with-process', processNames[i]) :
+ undefined,
+ hasProcessNames ? m('.cell.with-process', messages[i]) :
+ m('.cell.no-process', messages[i]),
+ m('br')));
}
}
// TODO(stevegolton): Add a 'loading' state to DetailsShell, which shows a
// scrolling scrolly bar at the bottom of the banner & map isStale to it
return m(
- DetailsShell,
- {
- title: 'Android Logs',
- description: `[${offset}, ${offset + count}] / ${total}`,
- buttons: m(LogsFilters),
- },
- m(
- VirtualScrollContainer,
- {onScroll: this.onScroll},
- m('.log-panel',
- m('.rows', {style: {height: `${total * ROW_H}px`}}, rows)),
- ),
+ DetailsShell,
+ {
+ title: 'Android Logs',
+ description: `[${offset}, ${offset + count}] / ${total}`,
+ buttons: m(LogsFilters),
+ },
+ m(
+ VirtualScrollContainer,
+ {onScroll: this.onScroll},
+ m('.log-panel',
+ m('.rows', {style: {height: `${total * ROW_H}px`}}, rows)),
+ ),
);
}
}
diff --git a/ui/src/frontend/metrics_page.ts b/ui/src/frontend/metrics_page.ts
index 544def3..c693a22 100644
--- a/ui/src/frontend/metrics_page.ts
+++ b/ui/src/frontend/metrics_page.ts
@@ -56,7 +56,7 @@
}
async function getMetric(
- engine: EngineProxy, metric: string, format: Format): Promise<string> {
+ engine: EngineProxy, metric: string, format: Format): Promise<string> {
const result = await engine.computeMetric([metric], format);
if (result instanceof Uint8Array) {
return `Uint8Array<len=${result.length}>`;
@@ -93,7 +93,7 @@
get visualisations(): MetricVisualisation[] {
return this.plugins.metricVisualisations().filter(
- (v) => v.metric === this.selected);
+ (v) => v.metric === this.selected);
}
set selected(metric: string|undefined) {
@@ -139,23 +139,23 @@
this._result = pending();
this._json = {};
getMetric(this.engine, selected, format)
- .then((result) => {
- if (this._selected === selected && this._format === format) {
- this._result = success(result);
- if (format === 'json') {
- this._json = JSON.parse(result);
- }
+ .then((result) => {
+ if (this._selected === selected && this._format === format) {
+ this._result = success(result);
+ if (format === 'json') {
+ this._json = JSON.parse(result);
}
- })
- .catch((e) => {
- if (this._selected === selected && this._format === format) {
- this._result = error(e);
- this._json = {};
- }
- })
- .finally(() => {
- raf.scheduleFullRedraw();
- });
+ }
+ })
+ .catch((e) => {
+ if (this._selected === selected && this._format === format) {
+ this._result = error(e);
+ this._json = {};
+ }
+ })
+ .finally(() => {
+ raf.scheduleFullRedraw();
+ });
}
raf.scheduleFullRedraw();
}
@@ -188,41 +188,41 @@
view({attrs}: m.CVnode<MetricPickerAttrs>) {
const {controller} = attrs;
return m(
- '.metrics-page-picker',
- m(Select,
- {
- value: controller.selected,
- oninput: (e: Event) => {
- if (!e.target) return;
- controller.selected = (e.target as HTMLSelectElement).value;
- },
+ '.metrics-page-picker',
+ m(Select,
+ {
+ value: controller.selected,
+ oninput: (e: Event) => {
+ if (!e.target) return;
+ controller.selected = (e.target as HTMLSelectElement).value;
},
- controller.metrics.map(
- (metric) =>
- m('option',
- {
- value: metric,
- key: metric,
- },
- metric))),
- m(
- Select,
- {
- oninput: (e: Event) => {
- if (!e.target) return;
- controller.format =
- (e.target as HTMLSelectElement).value as Format;
+ },
+ controller.metrics.map(
+ (metric) =>
+ m('option',
+ {
+ value: metric,
+ key: metric,
},
- },
- FORMATS.map((f) => {
- return m('option', {
- selected: controller.format === f,
- key: f,
- value: f,
- label: f,
- });
- }),
- ),
+ metric))),
+ m(
+ Select,
+ {
+ oninput: (e: Event) => {
+ if (!e.target) return;
+ controller.format =
+ (e.target as HTMLSelectElement).value as Format;
+ },
+ },
+ FORMATS.map((f) => {
+ return m('option', {
+ selected: controller.format === f,
+ key: f,
+ value: f,
+ label: f,
+ });
+ }),
+ ),
);
}
}
@@ -237,13 +237,13 @@
class MetricVizView implements m.ClassComponent<MetricVizViewAttrs> {
view({attrs}: m.CVnode<MetricVizViewAttrs>) {
return m(
- '',
- m(VegaView, {
- spec: attrs.visualisation.spec,
- data: {
- metric: attrs.data,
- },
- }),
+ '',
+ m(VegaView, {
+ spec: attrs.visualisation.spec,
+ data: {
+ metric: attrs.data,
+ },
+ }),
);
}
};
diff --git a/ui/src/frontend/named_slice_track.ts b/ui/src/frontend/named_slice_track.ts
index 746b4c5..de5546a 100644
--- a/ui/src/frontend/named_slice_track.ts
+++ b/ui/src/frontend/named_slice_track.ts
@@ -46,7 +46,7 @@
export abstract class NamedSliceTrack<
T extends NamedSliceTrackTypes = NamedSliceTrackTypes> extends
- BaseSliceTrack<T> {
+ BaseSliceTrack<T> {
constructor(args: NewTrackArgs) {
super(args);
}
diff --git a/ui/src/frontend/notes_panel.ts b/ui/src/frontend/notes_panel.ts
index 4b41a17..f699e46 100644
--- a/ui/src/frontend/notes_panel.ts
+++ b/ui/src/frontend/notes_panel.ts
@@ -69,55 +69,55 @@
get mithril(): m.Children {
const allCollapsed = Object.values(globals.state.trackGroups)
- .every((group) => group.collapsed);
+ .every((group) => group.collapsed);
return m(
- '.notes-panel',
- {
- onclick: (e: MouseEvent) => {
- const {x, y} = currentTargetOffset(e);
- this.onClick(x - TRACK_SHELL_WIDTH, y);
- e.stopPropagation();
- },
- onmousemove: (e: MouseEvent) => {
- this.hoveredX = currentTargetOffset(e).x - TRACK_SHELL_WIDTH;
- raf.scheduleRedraw();
- },
- mouseenter: (e: MouseEvent) => {
- this.hoveredX = currentTargetOffset(e).x - TRACK_SHELL_WIDTH;
- raf.scheduleRedraw();
- },
- onmouseout: () => {
- this.hoveredX = null;
- globals.dispatch(
- Actions.setHoveredNoteTimestamp({ts: Time.INVALID}));
- },
+ '.notes-panel',
+ {
+ onclick: (e: MouseEvent) => {
+ const {x, y} = currentTargetOffset(e);
+ this.onClick(x - TRACK_SHELL_WIDTH, y);
+ e.stopPropagation();
},
- isTraceLoaded() ?
- [
- m('button',
- {
- onclick: (e: Event) => {
- e.preventDefault();
- globals.dispatch(Actions.toggleAllTrackGroups(
- {collapsed: !allCollapsed}));
- },
- },
- m('i.material-icons',
- {title: allCollapsed ? 'Expand all' : 'Collapse all'},
- allCollapsed ? 'unfold_more' : 'unfold_less')),
- m('button',
- {
- onclick: (e: Event) => {
- e.preventDefault();
- globals.dispatch(Actions.clearAllPinnedTracks({}));
- },
- },
- m('i.material-icons',
- {title: 'Clear all pinned tracks'},
- 'clear_all')),
- ] :
- '');
+ onmousemove: (e: MouseEvent) => {
+ this.hoveredX = currentTargetOffset(e).x - TRACK_SHELL_WIDTH;
+ raf.scheduleRedraw();
+ },
+ mouseenter: (e: MouseEvent) => {
+ this.hoveredX = currentTargetOffset(e).x - TRACK_SHELL_WIDTH;
+ raf.scheduleRedraw();
+ },
+ onmouseout: () => {
+ this.hoveredX = null;
+ globals.dispatch(
+ Actions.setHoveredNoteTimestamp({ts: Time.INVALID}));
+ },
+ },
+ isTraceLoaded() ?
+ [
+ m('button',
+ {
+ onclick: (e: Event) => {
+ e.preventDefault();
+ globals.dispatch(Actions.toggleAllTrackGroups(
+ {collapsed: !allCollapsed}));
+ },
+ },
+ m('i.material-icons',
+ {title: allCollapsed ? 'Expand all' : 'Collapse all'},
+ allCollapsed ? 'unfold_more' : 'unfold_less')),
+ m('button',
+ {
+ onclick: (e: Event) => {
+ e.preventDefault();
+ globals.dispatch(Actions.clearAllPinnedTracks({}));
+ },
+ },
+ m('i.material-icons',
+ {title: 'Clear all pinned tracks'},
+ 'clear_all')),
+ ] :
+ '');
}
renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize) {
@@ -174,11 +174,11 @@
if (note.noteType === 'AREA') {
const area = globals.state.areas[note.areaId];
this.drawAreaMarker(
- ctx,
- left,
- Math.floor(visibleTimeScale.timeToPx(area.end) + TRACK_SHELL_WIDTH),
- note.color,
- isSelected);
+ ctx,
+ left,
+ Math.floor(visibleTimeScale.timeToPx(area.end) + TRACK_SHELL_WIDTH),
+ note.color,
+ isSelected);
} else {
this.drawFlag(ctx, left, size.height, note.color, isSelected);
}
@@ -189,7 +189,7 @@
// Add a white semi-transparent background for the text.
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
ctx.fillRect(
- left + FLAG_WIDTH + 2, size.height + 2, measured.width + 2, -12);
+ left + FLAG_WIDTH + 2, size.height + 2, measured.width + 2, -12);
ctx.fillStyle = '#3c4b5d';
ctx.fillText(summary, left + FLAG_WIDTH + 3, size.height + 1);
}
@@ -216,8 +216,8 @@
}
private drawAreaMarker(
- ctx: CanvasRenderingContext2D, x: number, xEnd: number, color: string,
- fill: boolean) {
+ ctx: CanvasRenderingContext2D, x: number, xEnd: number, color: string,
+ fill: boolean) {
ctx.fillStyle = color;
ctx.strokeStyle = color;
const topOffset = 10;
@@ -250,8 +250,8 @@
}
private drawFlag(
- ctx: CanvasRenderingContext2D, x: number, height: number, color: string,
- fill?: boolean) {
+ ctx: CanvasRenderingContext2D, x: number, height: number, color: string,
+ fill?: boolean) {
const prevFont = ctx.font;
const prevBaseline = ctx.textBaseline;
ctx.textBaseline = 'alphabetic';
@@ -280,7 +280,7 @@
if (this.hoveredX !== null && this.mouseOverNote(this.hoveredX, note)) {
if (note.noteType === 'AREA') {
globals.makeSelection(
- Actions.reSelectArea({areaId: note.areaId, noteId: note.id}));
+ Actions.reSelectArea({areaId: note.areaId, noteId: note.id}));
} else {
globals.makeSelection(Actions.selectNote({id: note.id}));
}
@@ -332,41 +332,41 @@
}
const startTime = getStartTimestamp(note);
return m(
- '.notes-editor-panel',
- m('.notes-editor-panel-heading-bar',
- m('.notes-editor-panel-heading',
- `Annotation at `,
- m(Timestamp, {ts: startTime})),
- m('input[type=text]', {
- value: note.text,
- onchange: (e: InputEvent) => {
- const newText = (e.target as HTMLInputElement).value;
- globals.dispatch(Actions.changeNoteText({
- id: this.config.id,
- newText,
- }));
- },
- }),
- m('span.color-change', `Change color: `, m('input[type=color]', {
- value: note.color,
- onchange: (e: Event) => {
- const newColor = (e.target as HTMLInputElement).value;
- globals.dispatch(Actions.changeNoteColor({
- id: this.config.id,
- newColor,
- }));
- },
- })),
- m(Button, {
- label: 'Remove',
- icon: Icons.Delete,
- minimal: true,
- onclick: () => {
- globals.dispatch(Actions.removeNote({id: this.config.id}));
- globals.dispatch(Actions.setCurrentTab({tab: undefined}));
- raf.scheduleFullRedraw();
- },
- })),
+ '.notes-editor-panel',
+ m('.notes-editor-panel-heading-bar',
+ m('.notes-editor-panel-heading',
+ `Annotation at `,
+ m(Timestamp, {ts: startTime})),
+ m('input[type=text]', {
+ value: note.text,
+ onchange: (e: InputEvent) => {
+ const newText = (e.target as HTMLInputElement).value;
+ globals.dispatch(Actions.changeNoteText({
+ id: this.config.id,
+ newText,
+ }));
+ },
+ }),
+ m('span.color-change', `Change color: `, m('input[type=color]', {
+ value: note.color,
+ onchange: (e: Event) => {
+ const newColor = (e.target as HTMLInputElement).value;
+ globals.dispatch(Actions.changeNoteColor({
+ id: this.config.id,
+ newColor,
+ }));
+ },
+ })),
+ m(Button, {
+ label: 'Remove',
+ icon: Icons.Delete,
+ minimal: true,
+ onclick: () => {
+ globals.dispatch(Actions.removeNote({id: this.config.id}));
+ globals.dispatch(Actions.setCurrentTab({tab: undefined}));
+ raf.scheduleFullRedraw();
+ },
+ })),
);
}
}
diff --git a/ui/src/frontend/omnibox.ts b/ui/src/frontend/omnibox.ts
index 067910e..5d809c9 100644
--- a/ui/src/frontend/omnibox.ts
+++ b/ui/src/frontend/omnibox.ts
@@ -49,17 +49,17 @@
view({attrs}: m.Vnode<OmniboxOptionRowAttrs>): void|m.Children {
const {displayName, highlighted, rightContent, label, ...htmlAttrs} = attrs;
return m(
- 'li',
- {
- class: classNames(highlighted && 'pf-highlighted'),
- ...htmlAttrs,
- },
- m(
- 'span.pf-title',
- this.renderTitle(displayName),
- ),
- label && m('span.pf-tag', label),
- rightContent,
+ 'li',
+ {
+ class: classNames(highlighted && 'pf-highlighted'),
+ ...htmlAttrs,
+ },
+ m(
+ 'span.pf-title',
+ this.renderTitle(displayName),
+ ),
+ label && m('span.pf-tag', label),
+ rightContent,
);
}
@@ -171,76 +171,76 @@
} = attrs;
return m(
- Popup,
- {
- onPopupMount: (dom: HTMLElement) => this.popupElement = dom,
- onPopupUnMount: (_dom: HTMLElement) => this.popupElement = undefined,
- isOpen: exists(options),
- showArrow: false,
- matchWidth: true,
- offset: 2,
- trigger: m(
- '.omnibox',
- {
- class: classNames(extraClasses),
- },
- m('input', {
- ref: inputRef,
- value,
- placeholder,
- oninput: (e: Event) => {
- onInput((e.target as HTMLInputElement).value, value);
- },
- onkeydown: (e: KeyboardEvent) => {
- if (e.key === 'Backspace' && value === '') {
- this.close(attrs);
- } else if (e.key === 'Escape') {
- e.preventDefault();
- this.close(attrs);
- }
+ Popup,
+ {
+ onPopupMount: (dom: HTMLElement) => this.popupElement = dom,
+ onPopupUnMount: (_dom: HTMLElement) => this.popupElement = undefined,
+ isOpen: exists(options),
+ showArrow: false,
+ matchWidth: true,
+ offset: 2,
+ trigger: m(
+ '.omnibox',
+ {
+ class: classNames(extraClasses),
+ },
+ m('input', {
+ ref: inputRef,
+ value,
+ placeholder,
+ oninput: (e: Event) => {
+ onInput((e.target as HTMLInputElement).value, value);
+ },
+ onkeydown: (e: KeyboardEvent) => {
+ if (e.key === 'Backspace' && value === '') {
+ this.close(attrs);
+ } else if (e.key === 'Escape') {
+ e.preventDefault();
+ this.close(attrs);
+ }
- if (options) {
- if (e.key === 'ArrowUp') {
- e.preventDefault();
- this.highlightPreviousOption(attrs);
- } else if (e.key === 'ArrowDown') {
- e.preventDefault();
- this.highlightNextOption(attrs);
- } else if (e.key === 'Enter') {
- e.preventDefault();
+ if (options) {
+ if (e.key === 'ArrowUp') {
+ e.preventDefault();
+ this.highlightPreviousOption(attrs);
+ } else if (e.key === 'ArrowDown') {
+ e.preventDefault();
+ this.highlightNextOption(attrs);
+ } else if (e.key === 'Enter') {
+ e.preventDefault();
- const option = options[selectedOptionIndex];
- // Return values from indexing arrays can be undefined.
- // We should enable noUncheckedIndexedAccess in
- // tsconfig.json.
- /* eslint-disable
+ const option = options[selectedOptionIndex];
+ // Return values from indexing arrays can be undefined.
+ // We should enable noUncheckedIndexedAccess in
+ // tsconfig.json.
+ /* eslint-disable
@typescript-eslint/strict-boolean-expressions */
- if (option) {
- /* eslint-enable */
- closeOnSubmit && this.close(attrs);
+ if (option) {
+ /* eslint-enable */
+ closeOnSubmit && this.close(attrs);
- const mod = e.metaKey || e.ctrlKey;
- const shift = e.shiftKey;
- onSubmit(option.key, mod, shift);
- }
- }
- } else {
- if (e.key === 'Enter') {
- e.preventDefault();
-
- closeOnSubmit && this.close(attrs);
-
- const mod = e.metaKey || e.ctrlKey;
- const shift = e.shiftKey;
- onSubmit(value, mod, shift);
- }
+ const mod = e.metaKey || e.ctrlKey;
+ const shift = e.shiftKey;
+ onSubmit(option.key, mod, shift);
}
- },
- }),
- rightContent,
- ),
- },
- options && this.renderDropdown(attrs));
+ }
+ } else {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+
+ closeOnSubmit && this.close(attrs);
+
+ const mod = e.metaKey || e.ctrlKey;
+ const shift = e.shiftKey;
+ onSubmit(value, mod, shift);
+ }
+ }
+ },
+ }),
+ rightContent,
+ ),
+ },
+ options && this.renderDropdown(attrs));
}
private renderDropdown(attrs: OmniboxAttrs): m.Children {
@@ -252,32 +252,32 @@
return m(EmptyState, {header: 'No matching options...'});
} else {
return m(
- '.pf-omnibox-dropdown',
- this.renderOptionsContainer(attrs, options),
- this.renderFooter(),
+ '.pf-omnibox-dropdown',
+ this.renderOptionsContainer(attrs, options),
+ this.renderFooter(),
);
}
}
private renderFooter() {
return m(
- '.pf-omnibox-dropdown-footer',
- m(
- 'section',
- m(KeycapGlyph, {keyValue: 'ArrowUp'}),
- m(KeycapGlyph, {keyValue: 'ArrowDown'}),
- 'to navigate',
- ),
- m(
- 'section',
- m(KeycapGlyph, {keyValue: 'Enter'}),
- 'to use',
- ),
- m(
- 'section',
- m(KeycapGlyph, {keyValue: 'Escape'}),
- 'to dismiss',
- ),
+ '.pf-omnibox-dropdown-footer',
+ m(
+ 'section',
+ m(KeycapGlyph, {keyValue: 'ArrowUp'}),
+ m(KeycapGlyph, {keyValue: 'ArrowDown'}),
+ 'to navigate',
+ ),
+ m(
+ 'section',
+ m(KeycapGlyph, {keyValue: 'Enter'}),
+ 'to use',
+ ),
+ m(
+ 'section',
+ m(KeycapGlyph, {keyValue: 'Escape'}),
+ 'to dismiss',
+ ),
);
}
@@ -305,8 +305,8 @@
});
return m(
- 'ul.pf-omnibox-options-container',
- opts,
+ 'ul.pf-omnibox-options-container',
+ opts,
);
}
diff --git a/ui/src/frontend/overview_timeline_panel.ts b/ui/src/frontend/overview_timeline_panel.ts
index 3e7c357..0accdb8 100644
--- a/ui/src/frontend/overview_timeline_panel.ts
+++ b/ui/src/frontend/overview_timeline_panel.ts
@@ -82,7 +82,7 @@
oncreate(vnode: m.CVnodeDOM) {
this.onupdate(vnode);
(vnode.dom as HTMLElement)
- .addEventListener('mousemove', this.boundOnMouseMove);
+ .addEventListener('mousemove', this.boundOnMouseMove);
}
onremove({dom}: m.CVnodeDOM) {
@@ -91,7 +91,7 @@
this.gesture = undefined;
}
(dom as HTMLElement)
- .removeEventListener('mousemove', this.boundOnMouseMove);
+ .removeEventListener('mousemove', this.boundOnMouseMove);
}
get mithril(): m.Children {
@@ -163,10 +163,10 @@
ctx.fillStyle = OVERVIEW_TIMELINE_NON_VISIBLE_COLOR;
ctx.fillRect(
- TRACK_SHELL_WIDTH - 1,
- headerHeight,
- vizStartPx - TRACK_SHELL_WIDTH,
- tracksHeight);
+ TRACK_SHELL_WIDTH - 1,
+ headerHeight,
+ vizStartPx - TRACK_SHELL_WIDTH,
+ tracksHeight);
ctx.fillRect(vizEndPx, headerHeight, this.width - vizEndPx, tracksHeight);
// Draw brushes.
@@ -178,15 +178,15 @@
const hbarHeight = tracksHeight * 0.4;
// Draw handlebar
ctx.fillRect(
- vizStartPx - Math.floor(hbarWidth / 2) - 1,
- headerHeight,
- hbarWidth,
- hbarHeight);
+ vizStartPx - Math.floor(hbarWidth / 2) - 1,
+ headerHeight,
+ hbarWidth,
+ hbarHeight);
ctx.fillRect(
- vizEndPx - Math.floor(hbarWidth / 2),
- headerHeight,
- hbarWidth,
- hbarHeight);
+ vizEndPx - Math.floor(hbarWidth / 2),
+ headerHeight,
+ hbarWidth,
+ hbarHeight);
}
private onMouseMove(e: MouseEvent) {
@@ -250,31 +250,31 @@
// Print a timestamp in the configured time format
function renderTimestamp(
- ctx: CanvasRenderingContext2D,
- time: time,
- x: number,
- y: number,
- minWidth: number,
- ): void {
+ ctx: CanvasRenderingContext2D,
+ time: time,
+ x: number,
+ y: number,
+ minWidth: number,
+): void {
const fmt = timestampFormat();
switch (fmt) {
- case TimestampFormat.UTC:
- case TimestampFormat.TraceTz:
- case TimestampFormat.Timecode:
- renderTimecode(ctx, time, x, y, minWidth);
- break;
- case TimestampFormat.Raw:
- ctx.fillText(time.toString(), x, y, minWidth);
- break;
- case TimestampFormat.RawLocale:
- ctx.fillText(time.toLocaleString(), x, y, minWidth);
- break;
- case TimestampFormat.Seconds:
- ctx.fillText(Time.formatSeconds(time), x, y, minWidth);
- break;
- default:
- const z: never = fmt;
- throw new Error(`Invalid timestamp ${z}`);
+ case TimestampFormat.UTC:
+ case TimestampFormat.TraceTz:
+ case TimestampFormat.Timecode:
+ renderTimecode(ctx, time, x, y, minWidth);
+ break;
+ case TimestampFormat.Raw:
+ ctx.fillText(time.toString(), x, y, minWidth);
+ break;
+ case TimestampFormat.RawLocale:
+ ctx.fillText(time.toLocaleString(), x, y, minWidth);
+ break;
+ case TimestampFormat.Seconds:
+ ctx.fillText(Time.formatSeconds(time), x, y, minWidth);
+ break;
+ default:
+ const z: never = fmt;
+ throw new Error(`Invalid timestamp ${z}`);
}
}
@@ -282,12 +282,12 @@
// DdHH:MM:SS
// mmm uuu nnn
function renderTimecode(
- ctx: CanvasRenderingContext2D,
- time: time,
- x: number,
- y: number,
- minWidth: number,
- ): void {
+ ctx: CanvasRenderingContext2D,
+ time: time,
+ x: number,
+ y: number,
+ minWidth: number,
+): void {
const timecode = Time.toTimecode(time);
const {dhhmmss} = timecode;
ctx.fillText(dhhmmss, x, y, minWidth);
diff --git a/ui/src/frontend/pan_and_zoom_handler.ts b/ui/src/frontend/pan_and_zoom_handler.ts
index d55b227..4ee2de1 100644
--- a/ui/src/frontend/pan_and_zoom_handler.ts
+++ b/ui/src/frontend/pan_and_zoom_handler.ts
@@ -159,35 +159,35 @@
let dragStartY = -1;
let edit = false;
this.trash.add(new DragGestureHandler(
- this.element,
- (x, y) => {
- if (this.shiftDown) {
- this.onPanned(prevX - x);
- } else {
- this.onSelection(dragStartX, dragStartY, prevX, x, y, edit);
- }
- prevX = x;
- },
- (x, y) => {
- prevX = x;
- dragStartX = x;
- dragStartY = y;
- edit = this.editSelection(x);
- // Set the cursor style based on where the cursor is when the drag
- // starts.
- if (edit) {
- this.element.style.cursor = EDITING_RANGE_CURSOR;
- } else if (!this.shiftDown) {
- this.element.style.cursor = DRAG_CURSOR;
- }
- },
- () => {
- // Reset the cursor now the drag has ended.
- this.element.style.cursor = this.shiftDown ? PAN_CURSOR : DRAG_CURSOR;
- dragStartX = -1;
- dragStartY = -1;
- this.endSelection(edit);
- }));
+ this.element,
+ (x, y) => {
+ if (this.shiftDown) {
+ this.onPanned(prevX - x);
+ } else {
+ this.onSelection(dragStartX, dragStartY, prevX, x, y, edit);
+ }
+ prevX = x;
+ },
+ (x, y) => {
+ prevX = x;
+ dragStartX = x;
+ dragStartY = y;
+ edit = this.editSelection(x);
+ // Set the cursor style based on where the cursor is when the drag
+ // starts.
+ if (edit) {
+ this.element.style.cursor = EDITING_RANGE_CURSOR;
+ } else if (!this.shiftDown) {
+ this.element.style.cursor = DRAG_CURSOR;
+ }
+ },
+ () => {
+ // Reset the cursor now the drag has ended.
+ this.element.style.cursor = this.shiftDown ? PAN_CURSOR : DRAG_CURSOR;
+ dragStartX = -1;
+ dragStartY = -1;
+ this.endSelection(edit);
+ }));
}
diff --git a/ui/src/frontend/panel_container.ts b/ui/src/frontend/panel_container.ts
index 2c456e5..fda96a7 100644
--- a/ui/src/frontend/panel_container.ts
+++ b/ui/src/frontend/panel_container.ts
@@ -159,10 +159,10 @@
// The Y value is given from the top of the pan and zoom region, we want it
// from the top of the panel container. The parent offset corrects that.
const panels = this.getPanelsInRegion(
- visibleTimeScale.timeToPx(area.start),
- visibleTimeScale.timeToPx(area.end),
- globals.timeline.areaY.start + TOPBAR_HEIGHT,
- globals.timeline.areaY.end + TOPBAR_HEIGHT);
+ visibleTimeScale.timeToPx(area.start),
+ visibleTimeScale.timeToPx(area.end),
+ globals.timeline.areaY.start + TOPBAR_HEIGHT,
+ globals.timeline.areaY.end + TOPBAR_HEIGHT);
// Get the track ids from the panels.
const tracks = [];
for (const panel of panels) {
@@ -233,7 +233,7 @@
raf.scheduleRedraw();
};
dom.parentElement!.addEventListener(
- 'scroll', parentOnScroll, {passive: true});
+ 'scroll', parentOnScroll, {passive: true});
this.trash.addCallback(() => {
dom.parentElement!.removeEventListener('scroll', parentOnScroll);
});
@@ -250,11 +250,11 @@
const mithril = node.mithril;
return m(
- `.panel${extraClass}`,
- {key, 'data-key': key},
- perfDebug() ?
- [mithril, m('.debug-panel-border', {key: 'debug-panel-border'})] :
- mithril);
+ `.panel${extraClass}`,
+ {key, 'data-key': key},
+ perfDebug() ?
+ [mithril, m('.debug-panel-border', {key: 'debug-panel-border'})] :
+ mithril);
}
// Render a tree of panels into one vnode. Argument `path` is used to build
@@ -263,12 +263,12 @@
renderTree(node: PanelOrGroup, path: string): m.Vnode {
if (node.kind === 'group') {
return m(
- 'div',
- {key: path},
- this.renderPanel(
- node.header, `${path}-header`, node.collapsed ? '' : '.sticky'),
- ...node.childTracks.map(
- (child, index) => this.renderTree(child, `${path}-${index}`)));
+ 'div',
+ {key: path},
+ this.renderPanel(
+ node.header, `${path}-header`, node.collapsed ? '' : '.sticky'),
+ ...node.childTracks.map(
+ (child, index) => this.renderTree(child, `${path}-${index}`)));
}
return this.renderPanel(node, assertExists(node.key));
}
@@ -277,13 +277,13 @@
this.attrs = attrs;
this.panelByKey.clear();
const children = attrs.panels.map(
- (panel, index) => this.renderTree(panel, `track-tree-${index}`));
+ (panel, index) => this.renderTree(panel, `track-tree-${index}`));
return [
m(
- '.scroll-limiter',
- m('canvas.main-canvas'),
- ),
+ '.scroll-limiter',
+ m('canvas.main-canvas'),
+ ),
m('.panels', children),
];
}
@@ -298,7 +298,7 @@
this.repositionCanvas();
if (this.attrs.kind === 'TRACKS') {
globals.timeline.updateLocalLimits(
- 0, this.parentWidth - TRACK_SHELL_WIDTH);
+ 0, this.parentWidth - TRACK_SHELL_WIDTH);
}
this.redrawCanvas();
}
@@ -306,8 +306,8 @@
private updateCanvasDimensions() {
this.canvasHeight = Math.floor(
- this.attrs.doesScroll ? this.parentHeight * this.canvasOverdrawFactor :
- this.totalPanelHeight);
+ this.attrs.doesScroll ? this.parentHeight * this.canvasOverdrawFactor :
+ this.totalPanelHeight);
const ctx = assertExists(this.ctx);
const canvas = assertExists(ctx.canvas);
canvas.style.height = `${this.canvasHeight}px`;
@@ -419,7 +419,7 @@
const beforeRender = debugNow();
panel.renderCanvas(this.ctx, size);
this.updatePanelStats(
- i, panel, debugNow() - beforeRender, this.ctx, size);
+ i, panel, debugNow() - beforeRender, this.ctx, size);
this.ctx.restore();
panelYStart += panelHeight;
}
@@ -451,8 +451,8 @@
trackFromCurrentContainerSelected = true;
selectedTracksMinY = Math.min(selectedTracksMinY, this.panelInfos[i].y);
selectedTracksMaxY = Math.max(
- selectedTracksMaxY,
- this.panelInfos[i].y + this.panelInfos[i].height);
+ selectedTracksMaxY,
+ this.panelInfos[i].y + this.panelInfos[i].height);
}
}
@@ -475,16 +475,16 @@
Math.floor(this.scrollTop - this.getCanvasOverdrawHeightPerSide());
this.ctx.translate(TRACK_SHELL_WIDTH, -canvasYStart);
this.ctx.strokeRect(
- startX,
- selectedTracksMaxY,
- endX - startX,
- selectedTracksMinY - selectedTracksMaxY);
+ startX,
+ selectedTracksMaxY,
+ endX - startX,
+ selectedTracksMinY - selectedTracksMaxY);
this.ctx.restore();
}
private updatePanelStats(
- panelIndex: number, panel: Panel, renderTime: number,
- ctx: CanvasRenderingContext2D, size: PanelSize) {
+ panelIndex: number, panel: Panel, renderTime: number,
+ ctx: CanvasRenderingContext2D, size: PanelSize) {
if (!perfDebug()) return;
let renderStats = this.panelPerfStats.get(panel);
if (renderStats === undefined) {
@@ -502,7 +502,7 @@
}
private updatePerfStats(
- renderTime: number, totalPanels: number, panelsOnCanvas: number) {
+ renderTime: number, totalPanels: number, panelsOnCanvas: number) {
if (!perfDebug()) return;
this.perfStats.renderStats.addValue(renderTime);
this.perfStats.totalPanels = totalPanels;
diff --git a/ui/src/frontend/pivot_table.ts b/ui/src/frontend/pivot_table.ts
index 156afe3..483ead2 100644
--- a/ui/src/frontend/pivot_table.ts
+++ b/ui/src/frontend/pivot_table.ts
@@ -68,10 +68,10 @@
function drillFilterColumnName(column: TableColumn): string {
switch (column.kind) {
- case 'argument':
- return extractArgumentExpression(column.argument, SqlTables.slice.name);
- case 'regular':
- return `${column.column}`;
+ case 'argument':
+ return extractArgumentExpression(column.argument, SqlTables.slice.name);
+ case 'regular':
+ return `${column.column}`;
}
}
@@ -92,10 +92,10 @@
function readableColumnName(column: TableColumn) {
switch (column.kind) {
- case 'argument':
- return `Argument ${column.argument}`;
- case 'regular':
- return `${column.column}`;
+ case 'argument':
+ return `Argument ${column.argument}`;
+ case 'regular':
+ return `${column.column}`;
}
}
@@ -114,7 +114,7 @@
selected: true,
}));
globals.dispatch(
- Actions.setPivotTableQueryRequested({queryRequested: true}));
+ Actions.setPivotTableQueryRequested({queryRequested: true}));
});
}
@@ -127,30 +127,30 @@
renderDrillDownCell(area: Area, filters: DrillFilter[]) {
return m(
- 'td',
- m('button',
- {
- title: 'All corresponding slices',
- onclick: () => {
- const queryFilters = filters.map(renderDrillFilter);
- if (this.constrainToArea) {
- queryFilters.push(...areaFilters(area));
- }
- addTab({
- kind: SqlTableTab.kind,
- config: {
- table: SqlTables.slice,
- filters: queryFilters,
- },
- });
- },
+ 'td',
+ m('button',
+ {
+ title: 'All corresponding slices',
+ onclick: () => {
+ const queryFilters = filters.map(renderDrillFilter);
+ if (this.constrainToArea) {
+ queryFilters.push(...areaFilters(area));
+ }
+ addTab({
+ kind: SqlTableTab.kind,
+ config: {
+ table: SqlTables.slice,
+ filters: queryFilters,
+ },
+ });
},
- m('i.material-icons', 'arrow_right')));
+ },
+ m('i.material-icons', 'arrow_right')));
}
renderSectionRow(
- area: Area, path: PathItem[], tree: PivotTree,
- result: PivotTableResult): m.Vnode {
+ area: Area, path: PathItem[], tree: PivotTree,
+ result: PivotTableResult): m.Vnode {
const renderedCells = [];
for (let j = 0; j + 1 < path.length; j++) {
renderedCells.push(m('td', m('span.indent', ' '), `${path[j].nextKey}`));
@@ -170,11 +170,11 @@
tree.isCollapsed ? 'expand_more' : 'expand_less'));
renderedCells.push(
- m('td', {colspan}, button, `${path[path.length - 1].nextKey}`));
+ m('td', {colspan}, button, `${path[path.length - 1].nextKey}`));
for (let i = 0; i < result.metadata.aggregationColumns.length; i++) {
const renderedValue = this.renderCell(
- result.metadata.aggregationColumns[i].column, tree.aggregates[i]);
+ result.metadata.aggregationColumns[i].column, tree.aggregates[i]);
renderedCells.push(m('td' + markFirst(i), renderedValue));
}
@@ -201,8 +201,8 @@
}
renderTree(
- area: Area, path: PathItem[], tree: PivotTree, result: PivotTableResult,
- sink: m.Vnode[]) {
+ area: Area, path: PathItem[], tree: PivotTree, result: PivotTableResult,
+ sink: m.Vnode[]) {
if (tree.isCollapsed) {
sink.push(this.renderSectionRow(area, path, tree, result));
return;
@@ -238,12 +238,12 @@
renderedCells.push(m(`td`, value));
}
drillFilters.push(
- {column: result.metadata.pivotColumns[j], value: row[j]});
+ {column: result.metadata.pivotColumns[j], value: row[j]});
}
for (let j = 0; j < result.metadata.aggregationColumns.length; j++) {
const value = row[aggregationIndex(treeDepth, j)];
const renderedValue = this.renderCell(
- result.metadata.aggregationColumns[j].column, value);
+ result.metadata.aggregationColumns[j].column, value);
renderedCells.push(m('td.aggregation' + markFirst(j), renderedValue));
}
@@ -255,14 +255,14 @@
renderTotalsRow(queryResult: PivotTableResult) {
const overallValuesRow =
[m('td.total-values',
- {'colspan': queryResult.metadata.pivotColumns.length},
- m('strong', 'Total values:'))];
+ {'colspan': queryResult.metadata.pivotColumns.length},
+ m('strong', 'Total values:'))];
for (let i = 0; i < queryResult.metadata.aggregationColumns.length; i++) {
overallValuesRow.push(
- m('td' + markFirst(i),
- this.renderCell(
- queryResult.metadata.aggregationColumns[i].column,
- queryResult.tree.aggregates[i])));
+ m('td' + markFirst(i),
+ this.renderCell(
+ queryResult.metadata.aggregationColumns[i].column,
+ queryResult.tree.aggregates[i])));
}
overallValuesRow.push(m('td'));
return m('tr', overallValuesRow);
@@ -274,9 +274,9 @@
text: order === 'DESC' ? 'Highest first' : 'Lowest first',
callback() {
globals.dispatch(
- Actions.setPivotTableSortColumn({aggregationIndex, order}));
+ Actions.setPivotTableSortColumn({aggregationIndex, order}));
globals.dispatch(
- Actions.setPivotTableQueryRequested({queryRequested: true}));
+ Actions.setPivotTableQueryRequested({queryRequested: true}));
},
};
}
@@ -286,20 +286,20 @@
return 'Count';
}
return `${aggregation.aggregationFunction}(${
- readableColumnName(aggregation.column)})`;
+ readableColumnName(aggregation.column)})`;
}
aggregationPopupItem(
- aggregation: Aggregation, index: number,
- nameOverride?: string): PopupMenuItem {
+ aggregation: Aggregation, index: number,
+ nameOverride?: string): PopupMenuItem {
return {
itemType: 'regular',
text: nameOverride ?? readableColumnName(aggregation.column),
callback: () => {
globals.dispatch(
- Actions.addPivotTableAggregation({aggregation, after: index}));
+ Actions.addPivotTableAggregation({aggregation, after: index}));
globals.dispatch(
- Actions.setPivotTableQueryRequested({queryRequested: true}));
+ Actions.setPivotTableQueryRequested({queryRequested: true}));
},
};
}
@@ -310,7 +310,7 @@
for (const column of columns) {
const tableColumn: TableColumn = {kind: 'regular', table, column};
items.push(this.aggregationPopupItem(
- {aggregationFunction: 'SUM', column: tableColumn}, index));
+ {aggregationFunction: 'SUM', column: tableColumn}, index));
}
if (items.length === 0) {
@@ -326,18 +326,18 @@
}
renderAggregationHeaderCell(
- aggregation: Aggregation, index: number,
- removeItem: boolean): ReorderableCell {
+ aggregation: Aggregation, index: number,
+ removeItem: boolean): ReorderableCell {
const popupItems: PopupMenuItem[] = [];
const state = globals.state.nonSerializableState.pivotTable;
if (aggregation.sortDirection === undefined) {
popupItems.push(
- this.sortingItem(index, 'DESC'), this.sortingItem(index, 'ASC'));
+ this.sortingItem(index, 'DESC'), this.sortingItem(index, 'ASC'));
} else {
// Table is already sorted by the same column, return one item with
// opposite direction.
popupItems.push(this.sortingItem(
- index, aggregation.sortDirection === 'DESC' ? 'ASC' : 'DESC'));
+ index, aggregation.sortDirection === 'DESC' ? 'ASC' : 'DESC'));
}
const otherAggs: AggregationFunction[] = ['SUM', 'MAX', 'MIN', 'AVG'];
if (aggregation.aggregationFunction !== 'COUNT') {
@@ -351,9 +351,9 @@
text: otherAgg,
callback() {
globals.dispatch(Actions.setPivotTableAggregationFunction(
- {index, function: otherAgg}));
+ {index, function: otherAgg}));
globals.dispatch(
- Actions.setPivotTableQueryRequested({queryRequested: true}));
+ Actions.setPivotTableQueryRequested({queryRequested: true}));
},
});
}
@@ -366,7 +366,7 @@
callback: () => {
globals.dispatch(Actions.removePivotTableAggregation({index}));
globals.dispatch(
- Actions.setPivotTableQueryRequested({queryRequested: true}));
+ Actions.setPivotTableQueryRequested({queryRequested: true}));
},
});
}
@@ -380,11 +380,11 @@
if (!hasCount) {
popupItems.push(this.aggregationPopupItem(
- COUNT_AGGREGATION, index, 'Add count aggregation'));
+ COUNT_AGGREGATION, index, 'Add count aggregation'));
}
const sliceAggregationsItem = this.aggregationPopupTableGroup(
- SqlTables.slice.name, sliceAggregationColumns, index);
+ SqlTables.slice.name, sliceAggregationColumns, index);
if (sliceAggregationsItem !== undefined) {
popupItems.push(sliceAggregationsItem);
}
@@ -404,8 +404,8 @@
attributeModalHolder: AttributeModalHolder;
renderPivotColumnHeader(
- queryResult: PivotTableResult, pivot: TableColumn,
- selectedPivots: Set<string>): ReorderableCell {
+ queryResult: PivotTableResult, pivot: TableColumn,
+ selectedPivots: Set<string>): ReorderableCell {
const items: PopupMenuItem[] = [{
itemType: 'regular',
text: 'Add argument pivot',
@@ -419,9 +419,9 @@
text: 'Remove',
callback() {
globals.dispatch(Actions.setPivotTablePivotSelected(
- {column: pivot, selected: false}));
+ {column: pivot, selected: false}));
globals.dispatch(
- Actions.setPivotTableQueryRequested({queryRequested: true}));
+ Actions.setPivotTableQueryRequested({queryRequested: true}));
},
});
}
@@ -443,9 +443,9 @@
text: columnName,
callback() {
globals.dispatch(
- Actions.setPivotTablePivotSelected({column, selected: true}));
+ Actions.setPivotTablePivotSelected({column, selected: true}));
globals.dispatch(
- Actions.setPivotTableQueryRequested({queryRequested: true}));
+ Actions.setPivotTableQueryRequested({queryRequested: true}));
},
});
}
@@ -481,68 +481,68 @@
}
this.renderTree(
- globals.state.areas[attrs.selectionArea.areaId],
- [],
- tree,
- state.queryResult,
- renderedRows);
+ globals.state.areas[attrs.selectionArea.areaId],
+ [],
+ tree,
+ state.queryResult,
+ renderedRows);
const selectedPivots =
new Set(this.pivotState.selectedPivots.map(columnKey));
const pivotTableHeaders = state.selectedPivots.map(
- (pivot) =>
- this.renderPivotColumnHeader(queryResult, pivot, selectedPivots));
+ (pivot) =>
+ this.renderPivotColumnHeader(queryResult, pivot, selectedPivots));
const removeItem = state.queryResult.metadata.aggregationColumns.length > 1;
const aggregationTableHeaders =
state.queryResult.metadata.aggregationColumns.map(
- (aggregation, index) => this.renderAggregationHeaderCell(
- aggregation, index, removeItem));
+ (aggregation, index) => this.renderAggregationHeaderCell(
+ aggregation, index, removeItem));
return m(
- 'table.pivot-table',
- m('thead',
- // First row of the table, containing names of pivot and aggregation
- // columns, as well as popup menus to modify the columns. Last cell
- // is empty because of an extra column with "drill down" button for
- // each pivot table row.
- m('tr.header',
- m(ReorderableCellGroup, {
- cells: pivotTableHeaders,
- onReorder: (
- from: number, to: number, direction: DropDirection) => {
- globals.dispatch(
- Actions.changePivotTablePivotOrder({from, to, direction}));
- globals.dispatch(Actions.setPivotTableQueryRequested(
- {queryRequested: true}));
- },
- }),
- m(ReorderableCellGroup, {
- cells: aggregationTableHeaders,
- onReorder:
+ 'table.pivot-table',
+ m('thead',
+ // First row of the table, containing names of pivot and aggregation
+ // columns, as well as popup menus to modify the columns. Last cell
+ // is empty because of an extra column with "drill down" button for
+ // each pivot table row.
+ m('tr.header',
+ m(ReorderableCellGroup, {
+ cells: pivotTableHeaders,
+ onReorder: (
+ from: number, to: number, direction: DropDirection) => {
+ globals.dispatch(
+ Actions.changePivotTablePivotOrder({from, to, direction}));
+ globals.dispatch(Actions.setPivotTableQueryRequested(
+ {queryRequested: true}));
+ },
+ }),
+ m(ReorderableCellGroup, {
+ cells: aggregationTableHeaders,
+ onReorder:
(from: number, to: number, direction: DropDirection) => {
globals.dispatch(Actions.changePivotTableAggregationOrder(
- {from, to, direction}));
+ {from, to, direction}));
globals.dispatch(Actions.setPivotTableQueryRequested(
- {queryRequested: true}));
+ {queryRequested: true}));
},
- }),
- m('td.menu', m(PopupMenuButton, {
- icon: 'menu',
- items: [{
- itemType: 'regular',
- text: state.constrainToArea ?
- 'Query data for the whole timeline' :
- 'Constrain to selected area',
- callback: () => {
- globals.dispatch(Actions.setPivotTableConstrainToArea(
- {constrain: !state.constrainToArea}));
- globals.dispatch(Actions.setPivotTableQueryRequested(
- {queryRequested: true}));
- },
- }],
- })))),
- m('tbody', this.renderTotalsRow(state.queryResult), renderedRows));
+ }),
+ m('td.menu', m(PopupMenuButton, {
+ icon: 'menu',
+ items: [{
+ itemType: 'regular',
+ text: state.constrainToArea ?
+ 'Query data for the whole timeline' :
+ 'Constrain to selected area',
+ callback: () => {
+ globals.dispatch(Actions.setPivotTableConstrainToArea(
+ {constrain: !state.constrainToArea}));
+ globals.dispatch(Actions.setPivotTableQueryRequested(
+ {queryRequested: true}));
+ },
+ }],
+ })))),
+ m('tbody', this.renderTotalsRow(state.queryResult), renderedRows));
}
view({attrs}: m.Vnode<PivotTableAttrs>): m.Children {
diff --git a/ui/src/frontend/pivot_table_argument_popup.ts b/ui/src/frontend/pivot_table_argument_popup.ts
index 9ed56be..db36380 100644
--- a/ui/src/frontend/pivot_table_argument_popup.ts
+++ b/ui/src/frontend/pivot_table_argument_popup.ts
@@ -64,16 +64,16 @@
}
result.push(
- m('div',
- {
- onclick: () => {
- this.setArgument(attrs, option);
- },
+ m('div',
+ {
+ onclick: () => {
+ this.setArgument(attrs, option);
},
- option.substring(0, index),
- // Highlight the matching part with bold font
- m('strong', this.argument),
- option.substring(index + this.argument.length)));
+ },
+ option.substring(0, index),
+ // Highlight the matching part with bold font
+ m('strong', this.argument),
+ option.substring(index + this.argument.length)));
}
return result;
@@ -81,17 +81,17 @@
view({attrs}: m.Vnode<ArgumentPopupArgs>): m.Child {
return m(
- '.name-completion',
- m('input', {
- oncreate: (vnode: m.VnodeDOM) =>
- (vnode.dom as HTMLInputElement).focus(),
- oninput: (e: Event) => {
- const input = e.target as HTMLInputElement;
- this.setArgument(attrs, input.value);
- },
- value: this.argument,
- }),
- m('.arguments-popup-sizer', longestString(attrs.knownArguments)),
- this.renderMatches(attrs));
+ '.name-completion',
+ m('input', {
+ oncreate: (vnode: m.VnodeDOM) =>
+ (vnode.dom as HTMLInputElement).focus(),
+ oninput: (e: Event) => {
+ const input = e.target as HTMLInputElement;
+ this.setArgument(attrs, input.value);
+ },
+ value: this.argument,
+ }),
+ m('.arguments-popup-sizer', longestString(attrs.knownArguments)),
+ this.renderMatches(attrs));
}
}
diff --git a/ui/src/frontend/pivot_table_query_generator.ts b/ui/src/frontend/pivot_table_query_generator.ts
index 8641c11..6259267 100644
--- a/ui/src/frontend/pivot_table_query_generator.ts
+++ b/ui/src/frontend/pivot_table_query_generator.ts
@@ -107,10 +107,10 @@
export function expression(column: TableColumn): string {
switch (column.kind) {
- case 'regular':
- return `${column.table}.${column.column}`;
- case 'argument':
- return extractArgumentExpression(column.argument, SqlTables.slice.name);
+ case 'regular':
+ return `${column.table}.${column.column}`;
+ case 'argument':
+ return extractArgumentExpression(column.argument, SqlTables.slice.name);
}
}
@@ -119,7 +119,7 @@
return 'COUNT()';
}
return `${aggregation.aggregationFunction}(${
- expression(aggregation.column)})`;
+ expression(aggregation.column)})`;
}
export function extractArgumentExpression(argument: string, table?: string) {
@@ -145,8 +145,8 @@
const pivots = state.selectedPivots;
const aggregations = sliceTableAggregations.map(
- (agg, index) =>
- `${aggregationExpression(agg)} as ${aggregationAlias(index)}`);
+ (agg, index) =>
+ `${aggregationExpression(agg)} as ${aggregationAlias(index)}`);
const countIndex = aggregations.length;
// Extra count aggregation, needed in order to compute combined averages.
aggregations.push('COUNT() as hidden_count');
@@ -161,10 +161,10 @@
}
const whereClause = state.constrainToArea ?
- `where ${
- areaFilters(globals.state.areas[state.selectionArea.areaId])
- .join(' and\n')}` :
- '';
+ `where ${
+ areaFilters(globals.state.areas[state.selectionArea.areaId])
+ .join(' and\n')}` :
+ '';
const text = `
INCLUDE PERFETTO MODULE experimental.slices;
diff --git a/ui/src/frontend/pivot_table_types.ts b/ui/src/frontend/pivot_table_types.ts
index d3b779a..3ea5ca1 100644
--- a/ui/src/frontend/pivot_table_types.ts
+++ b/ui/src/frontend/pivot_table_types.ts
@@ -53,21 +53,21 @@
export function tableColumnEquals(t1: TableColumn, t2: TableColumn): boolean {
switch (t1.kind) {
- case 'argument': {
- return t2.kind === 'argument' && t1.argument === t2.argument;
- }
- case 'regular': {
- return t2.kind === 'regular' && t1.table === t2.table &&
+ case 'argument': {
+ return t2.kind === 'argument' && t1.argument === t2.argument;
+ }
+ case 'regular': {
+ return t2.kind === 'regular' && t1.table === t2.table &&
t1.column === t2.column;
- }
+ }
}
}
export function toggleEnabled<T>(
- compare: (fst: T, snd: T) => boolean,
- arr: T[],
- column: T,
- enabled: boolean): void {
+ compare: (fst: T, snd: T) => boolean,
+ arr: T[],
+ column: T,
+ enabled: boolean): void {
if (enabled && arr.find((value) => compare(column, value)) === undefined) {
arr.push(column);
}
@@ -89,9 +89,9 @@
export function aggregationEquals(agg1: Aggregation, agg2: Aggregation) {
return new EqualsBuilder(agg1, agg2)
- .comparePrimitive((agg) => agg.aggregationFunction)
- .compare(tableColumnEquals, (agg) => agg.column)
- .equals();
+ .comparePrimitive((agg) => agg.aggregationFunction)
+ .compare(tableColumnEquals, (agg) => agg.column)
+ .equals();
}
// Used to convert TableColumn to a string in order to store it in a Map, as
@@ -100,12 +100,12 @@
// TableColumn objects mapping to different strings.
export function columnKey(tableColumn: TableColumn): string {
switch (tableColumn.kind) {
- case 'argument': {
- return `argument:${tableColumn.argument}`;
- }
- case 'regular': {
- return `${tableColumn.table}.${tableColumn.column}`;
- }
+ case 'argument': {
+ return `argument:${tableColumn.argument}`;
+ }
+ case 'regular': {
+ return `${tableColumn.table}.${tableColumn.column}`;
+ }
}
}
diff --git a/ui/src/frontend/plugins_page.ts b/ui/src/frontend/plugins_page.ts
index d5f93ad..c75a4a6 100644
--- a/ui/src/frontend/plugins_page.ts
+++ b/ui/src/frontend/plugins_page.ts
@@ -24,37 +24,37 @@
export const PluginsPage = createPage({
view() {
return m(
- '.pf-plugins-page',
- m('h1', 'Plugins'),
- m(
- '.pf-plugins-topbar',
- m(Button, {
- minimal: false,
- label: 'Deactivate All',
- onclick: () => {
- for (const plugin of pluginRegistry.values()) {
- pluginManager.deactivatePlugin(plugin.pluginId);
- }
- raf.scheduleFullRedraw();
- },
- }),
- m(Button, {
- minimal: false,
- label: 'Activate All',
- onclick: () => {
- for (const plugin of pluginRegistry.values()) {
- pluginManager.activatePlugin(plugin.pluginId);
- }
- raf.scheduleFullRedraw();
- },
- }),
- ),
- m(
- '.pf-plugins-grid',
- Array.from(pluginRegistry.values()).map((plugin) => {
- return renderPluginRow(plugin);
- }),
- ));
+ '.pf-plugins-page',
+ m('h1', 'Plugins'),
+ m(
+ '.pf-plugins-topbar',
+ m(Button, {
+ minimal: false,
+ label: 'Deactivate All',
+ onclick: () => {
+ for (const plugin of pluginRegistry.values()) {
+ pluginManager.deactivatePlugin(plugin.pluginId);
+ }
+ raf.scheduleFullRedraw();
+ },
+ }),
+ m(Button, {
+ minimal: false,
+ label: 'Activate All',
+ onclick: () => {
+ for (const plugin of pluginRegistry.values()) {
+ pluginManager.activatePlugin(plugin.pluginId);
+ }
+ raf.scheduleFullRedraw();
+ },
+ }),
+ ),
+ m(
+ '.pf-plugins-grid',
+ Array.from(pluginRegistry.values()).map((plugin) => {
+ return renderPluginRow(plugin);
+ }),
+ ));
},
});
@@ -63,7 +63,7 @@
return [
plugin.pluginId,
isActive ? m('.pf-tag.pf-active', 'Active') :
- m('.pf-tag.pf-inactive', 'Inactive'),
+ m('.pf-tag.pf-inactive', 'Inactive'),
m(Button, {
label: isActive ? 'Deactivate' : 'Activate',
onclick: () => {
diff --git a/ui/src/frontend/popup_menu.ts b/ui/src/frontend/popup_menu.ts
index 6d45e3f..6cb9829 100644
--- a/ui/src/frontend/popup_menu.ts
+++ b/ui/src/frontend/popup_menu.ts
@@ -27,7 +27,7 @@
// Helper function for simplifying defining menus.
export function menuItem(
- text: string, action: () => void): RegularPopupMenuItem {
+ text: string, action: () => void): RegularPopupMenuItem {
return {
itemType: 'regular',
text,
@@ -108,12 +108,12 @@
// sorted. (Optional because column might be unsorted)
export function popupMenuIcon(sortDirection?: SortDirection) {
switch (sortDirection) {
- case undefined:
- return 'more_horiz';
- case 'DESC':
- return 'arrow_drop_down';
- case 'ASC':
- return 'arrow_drop_up';
+ case undefined:
+ return 'more_horiz';
+ case 'DESC':
+ return 'arrow_drop_down';
+ case 'ASC':
+ return 'arrow_drop_up';
}
}
@@ -134,54 +134,54 @@
renderItem(item: PopupMenuItem): m.Child {
switch (item.itemType) {
- case 'regular':
- return m(
- 'button.open-menu',
- {
- onclick: () => {
- item.callback();
- // Hide the menu item after the action has been invoked
- this.setVisible(false);
- },
+ case 'regular':
+ return m(
+ 'button.open-menu',
+ {
+ onclick: () => {
+ item.callback();
+ // Hide the menu item after the action has been invoked
+ this.setVisible(false);
+ },
+ },
+ item.text);
+ case 'group':
+ const isExpanded = this.expandedGroups.has(item.itemId);
+ return m(
+ 'div',
+ m('button.open-menu.disallow-selection',
+ {
+ onclick: () => {
+ if (this.expandedGroups.has(item.itemId)) {
+ this.expandedGroups.delete(item.itemId);
+ } else {
+ this.expandedGroups.add(item.itemId);
+ }
+ raf.scheduleFullRedraw();
},
- item.text);
- case 'group':
- const isExpanded = this.expandedGroups.has(item.itemId);
- return m(
- 'div',
- m('button.open-menu.disallow-selection',
- {
- onclick: () => {
- if (this.expandedGroups.has(item.itemId)) {
- this.expandedGroups.delete(item.itemId);
- } else {
- this.expandedGroups.add(item.itemId);
- }
- raf.scheduleFullRedraw();
- },
- },
- // Show text with up/down arrow, depending on expanded state.
- item.text + (isExpanded ? ' \u25B2' : ' \u25BC')),
- isExpanded ? m('div.nested-menu',
- item.children.map((item) => this.renderItem(item))) :
- null);
+ },
+ // Show text with up/down arrow, depending on expanded state.
+ item.text + (isExpanded ? ' \u25B2' : ' \u25BC')),
+ isExpanded ? m('div.nested-menu',
+ item.children.map((item) => this.renderItem(item))) :
+ null);
}
}
view(vnode: m.Vnode<PopupMenuButtonAttrs, this>) {
return m(
- '.dropdown',
- m(
- '.dropdown-button',
- {
- onclick: () => {
- this.setVisible(!this.popupShown);
- },
- },
- vnode.children,
- m('i.material-icons', vnode.attrs.icon),
- ),
- m(this.popupShown ? '.popup-menu.opened' : '.popup-menu.closed',
- vnode.attrs.items.map((item) => this.renderItem(item))));
+ '.dropdown',
+ m(
+ '.dropdown-button',
+ {
+ onclick: () => {
+ this.setVisible(!this.popupShown);
+ },
+ },
+ vnode.children,
+ m('i.material-icons', vnode.attrs.icon),
+ ),
+ m(this.popupShown ? '.popup-menu.opened' : '.popup-menu.closed',
+ vnode.attrs.items.map((item) => this.renderItem(item))));
}
}
diff --git a/ui/src/frontend/post_message_handler.ts b/ui/src/frontend/post_message_handler.ts
index 0e6907e..94a9622 100644
--- a/ui/src/frontend/post_message_handler.ts
+++ b/ui/src/frontend/post_message_handler.ts
@@ -164,7 +164,7 @@
postedTrace = {title: 'External trace', buffer: messageEvent.data};
} else {
console.warn(
- 'Unknown postMessage() event received. If you are trying to open a ' +
+ 'Unknown postMessage() event received. If you are trying to open a ' +
'trace via postMessage(), this is a bug in your code. If not, this ' +
'could be due to some Chrome extension.');
console.log('origin:', messageEvent.origin, 'data:', messageEvent.data);
@@ -240,7 +240,7 @@
const _maxScrollToRangeAttempts = 20;
async function scrollToTimeRange(
- postedScrollToRange: PostedScrollToRange, maxAttempts?: number) {
+ postedScrollToRange: PostedScrollToRange, maxAttempts?: number) {
const ready = isTraceViewerReady();
if (!ready) {
if (maxAttempts === undefined) {
@@ -253,9 +253,9 @@
setTimeout(scrollToTimeRange, 200, postedScrollToRange, maxAttempts + 1);
} else {
focusHorizontalRange(
- postedScrollToRange.timeStart,
- postedScrollToRange.timeEnd,
- postedScrollToRange.viewPercentage);
+ postedScrollToRange.timeStart,
+ postedScrollToRange.timeEnd,
+ postedScrollToRange.viewPercentage);
}
}
diff --git a/ui/src/frontend/publish.ts b/ui/src/frontend/publish.ts
index 749faa5..fac2350 100644
--- a/ui/src/frontend/publish.ts
+++ b/ui/src/frontend/publish.ts
@@ -43,7 +43,7 @@
import {findCurrentSelection} from './keyboard_event_handler';
export function publishOverviewData(
- data: {[key: string]: QuantizedLoad|QuantizedLoad[]}) {
+ data: {[key: string]: QuantizedLoad|QuantizedLoad[]}) {
for (const [key, value] of Object.entries(data)) {
if (!globals.overviewStore.has(key)) {
globals.overviewStore.set(key, []);
@@ -109,7 +109,7 @@
}
export function publishRealtimeOffset(
- offset: time, utcOffset: time, traceTzOffset: time) {
+ offset: time, utcOffset: time, traceTzOffset: time) {
globals.realtimeOffset = offset;
globals.utcOffset = utcOffset;
globals.traceTzOffset = traceTzOffset;
@@ -117,7 +117,7 @@
}
export function publishConversionJobStatusUpdate(
- job: ConversionJobStatusUpdate) {
+ job: ConversionJobStatusUpdate) {
globals.setConversionJobStatus(job.jobName, job.jobStatus);
globals.publishRedraw();
}
@@ -160,7 +160,7 @@
}
export function publishAggregateData(
- args: {data: AggregateData, kind: string}) {
+ args: {data: AggregateData, kind: string}) {
globals.setAggregateData(args.kind, args.data);
if (!isEmptyData(args.data)) {
globals.dispatch(Actions.setCurrentTab({tab: args.data.tabName}));
diff --git a/ui/src/frontend/query_history.ts b/ui/src/frontend/query_history.ts
index 4bc3480..15b37c7 100644
--- a/ui/src/frontend/query_history.ts
+++ b/ui/src/frontend/query_history.ts
@@ -48,11 +48,11 @@
arr.push({index: i, entry, runQuery, setQuery});
}
return m(
- '.query-history',
- m('header.overview',
- `Query history (${queryHistoryStorage.data.length} queries)`),
- starred.map((attrs) => m(HistoryItemComponent, attrs)),
- unstarred.map((attrs) => m(HistoryItemComponent, attrs)));
+ '.query-history',
+ m('header.overview',
+ `Query history (${queryHistoryStorage.data.length} queries)`),
+ starred.map((attrs) => m(HistoryItemComponent, attrs)),
+ unstarred.map((attrs) => m(HistoryItemComponent, attrs)));
}
}
@@ -68,38 +68,38 @@
view(vnode: m.Vnode<HistoryItemComponentAttrs>): m.Child {
const query = vnode.attrs.entry.query;
return m(
- '.history-item',
- m('.history-item-buttons',
- m(
- 'button',
- {
- onclick: () => {
- queryHistoryStorage.setStarred(
- vnode.attrs.index, !vnode.attrs.entry.starred);
- raf.scheduleFullRedraw();
- },
- },
- m(Icon, {icon: Icons.Star, filled: vnode.attrs.entry.starred}),
- ),
- m('button',
- {
- onclick: () => vnode.attrs.setQuery(query),
+ '.history-item',
+ m('.history-item-buttons',
+ m(
+ 'button',
+ {
+ onclick: () => {
+ queryHistoryStorage.setStarred(
+ vnode.attrs.index, !vnode.attrs.entry.starred);
+ raf.scheduleFullRedraw();
},
- m(Icon, {icon: 'edit'})),
- m('button',
- {
- onclick: () => vnode.attrs.runQuery(query),
+ },
+ m(Icon, {icon: Icons.Star, filled: vnode.attrs.entry.starred}),
+ ),
+ m('button',
+ {
+ onclick: () => vnode.attrs.setQuery(query),
+ },
+ m(Icon, {icon: 'edit'})),
+ m('button',
+ {
+ onclick: () => vnode.attrs.runQuery(query),
+ },
+ m(Icon, {icon: 'play_arrow'})),
+ m('button',
+ {
+ onclick: () => {
+ queryHistoryStorage.remove(vnode.attrs.index);
+ raf.scheduleFullRedraw();
},
- m(Icon, {icon: 'play_arrow'})),
- m('button',
- {
- onclick: () => {
- queryHistoryStorage.remove(vnode.attrs.index);
- raf.scheduleFullRedraw();
- },
- },
- m(Icon, {icon: 'delete'}))),
- m('pre', query));
+ },
+ m(Icon, {icon: 'delete'}))),
+ m('pre', query));
}
}
diff --git a/ui/src/frontend/query_page.ts b/ui/src/frontend/query_page.ts
index d4a3c23..98a4881 100644
--- a/ui/src/frontend/query_page.ts
+++ b/ui/src/frontend/query_page.ts
@@ -51,24 +51,24 @@
const engine = getEngine();
if (engine) {
runQuery(undoCommonChatAppReplacements(query), engine)
- .then((resp: QueryResponse) => {
- addTab({
- kind: QueryResultTab.kind,
- tag: 'analyze_page_query',
- config: {
- query: query,
- title: 'Standalone Query',
- prefetchedResponse: resp,
- },
- });
- // We might have started to execute another query. Ignore it in that
- // case.
- if (state.executedQuery !== query) {
- return;
- }
- state.queryResult = resp;
- raf.scheduleFullRedraw();
+ .then((resp: QueryResponse) => {
+ addTab({
+ kind: QueryResultTab.kind,
+ tag: 'analyze_page_query',
+ config: {
+ query: query,
+ title: 'Standalone Query',
+ prefetchedResponse: resp,
+ },
});
+ // We might have started to execute another query. Ignore it in that
+ // case.
+ if (state.executedQuery !== query) {
+ return;
+ }
+ state.queryResult = resp;
+ raf.scheduleFullRedraw();
+ });
}
raf.scheduleDelayedFullRedraw();
}
@@ -123,26 +123,26 @@
export const QueryPage = createPage({
view() {
return m(
- '.query-page',
- m(Callout, 'Enter query and press Cmd/Ctrl + Enter'),
- m(QueryInput),
- state.executedQuery === undefined ? null : m(QueryTable, {
- query: state.executedQuery,
- resp: state.queryResult,
- onClose: () => {
- state.executedQuery = undefined;
- state.queryResult = undefined;
- raf.scheduleFullRedraw();
- },
- fillParent: false,
- }),
- m(QueryHistoryComponent, {
- runQuery: runManualQuery,
- setQuery: (q: string) => {
- state.enteredText = q;
- state.generation++;
- raf.scheduleFullRedraw();
- },
- }));
+ '.query-page',
+ m(Callout, 'Enter query and press Cmd/Ctrl + Enter'),
+ m(QueryInput),
+ state.executedQuery === undefined ? null : m(QueryTable, {
+ query: state.executedQuery,
+ resp: state.queryResult,
+ onClose: () => {
+ state.executedQuery = undefined;
+ state.queryResult = undefined;
+ raf.scheduleFullRedraw();
+ },
+ fillParent: false,
+ }),
+ m(QueryHistoryComponent, {
+ runQuery: runManualQuery,
+ setQuery: (q: string) => {
+ state.enteredText = q;
+ state.generation++;
+ raf.scheduleFullRedraw();
+ },
+ }));
},
});
diff --git a/ui/src/frontend/query_result_tab.ts b/ui/src/frontend/query_result_tab.ts
index eb51c6e..2f0c903 100644
--- a/ui/src/frontend/query_result_tab.ts
+++ b/ui/src/frontend/query_result_tab.ts
@@ -112,19 +112,19 @@
onClose: () => closeTab(this.uuid),
contextButtons: [
this.sqlViewName === undefined ?
- null :
- m(PopupMenu2,
- {
- trigger: m(Button, {label: 'Show debug track', minimal: true}),
- popupPosition: PopupPosition.Top,
+ null :
+ m(PopupMenu2,
+ {
+ trigger: m(Button, {label: 'Show debug track', minimal: true}),
+ popupPosition: PopupPosition.Top,
+ },
+ m(AddDebugTrackMenu, {
+ dataSource: {
+ sqlSource: `select * from ${this.sqlViewName}`,
+ columns: assertExists(this.queryResponse).columns,
},
- m(AddDebugTrackMenu, {
- dataSource: {
- sqlSource: `select * from ${this.sqlViewName}`,
- columns: assertExists(this.queryResponse).columns,
- },
- engine: this.engine,
- })),
+ engine: this.engine,
+ })),
],
});
}
@@ -141,7 +141,7 @@
this.queryResponse && this.queryResponse.error === undefined;
const sqlQuery = hasValidQueryResponse ?
this.queryResponse!.lastStatementSql :
- this.config.query;
+ this.config.query;
try {
const createViewResult =
await this.engine.query(`create view ${viewId} as ${sqlQuery}`);
diff --git a/ui/src/frontend/query_table.ts b/ui/src/frontend/query_table.ts
index 2e675a3..26e188e 100644
--- a/ui/src/frontend/query_table.ts
+++ b/ui/src/frontend/query_table.ts
@@ -105,16 +105,16 @@
if (Router.parseUrl(window.location.href).page === '/viewer' &&
isSliceish(row)) {
return m(
- 'tr',
- {
- onclick: () => this.highlightSlice(row, globals.state.currentTab),
- // TODO(altimin): Consider improving the logic here (e.g. delay?) to
- // account for cases when dblclick fires late.
- ondblclick: () => this.highlightSlice(row),
- clickable: true,
- title: 'Go to slice',
- },
- cells);
+ 'tr',
+ {
+ onclick: () => this.highlightSlice(row, globals.state.currentTab),
+ // TODO(altimin): Consider improving the logic here (e.g. delay?) to
+ // account for cases when dblclick fires late.
+ ondblclick: () => this.highlightSlice(row),
+ clickable: true,
+ title: 'Go to slice',
+ },
+ cells);
} else {
return m('tr', cells);
}
@@ -130,11 +130,11 @@
private renderBlob(name: string, value: Uint8Array) {
return m(
- Anchor,
- {
- onclick: () => downloadData(`${name}.blob`, value),
- },
- `Blob (${value.length} bytes)`);
+ Anchor,
+ {
+ onclick: () => downloadData(`${name}.blob`, value),
+ },
+ `Blob (${value.length} bytes)`);
}
private highlightSlice(row: Row&Sliceish, nextTab?: string) {
@@ -189,7 +189,7 @@
return m('.query-error', `SQL error: ${resp.error}`);
} else {
return m(
- 'table.pf-query-table', m('thead', tableHeader), m('tbody', rows));
+ 'table.pf-query-table', m('thead', tableHeader), m('tbody', rows));
}
}
}
@@ -213,14 +213,14 @@
} = attrs;
return m(
- DetailsShell,
- {
- title: this.renderTitle(resp),
- description: query,
- buttons: this.renderButtons(query, onClose, contextButtons, resp),
- fillParent,
- },
- resp && this.renderTableContent(resp),
+ DetailsShell,
+ {
+ title: this.renderTitle(resp),
+ description: query,
+ buttons: this.renderButtons(query, onClose, contextButtons, resp),
+ fillParent,
+ },
+ resp && this.renderTableContent(resp),
);
}
@@ -233,8 +233,8 @@
}
renderButtons(
- query: string, onClose: () => void, contextButtons: m.Child[],
- resp?: QueryResponse) {
+ query: string, onClose: () => void, contextButtons: m.Child[],
+ resp?: QueryResponse) {
return [
contextButtons,
m(Button, {
@@ -261,18 +261,18 @@
renderTableContent(resp: QueryResponse) {
return m(
- '.pf-query-panel',
- resp.statementWithOutputCount > 1 &&
+ '.pf-query-panel',
+ resp.statementWithOutputCount > 1 &&
m('.pf-query-warning',
m(
- Callout,
- {icon: 'warning'},
- `${resp.statementWithOutputCount} out of ${
- resp.statementCount} `,
- 'statements returned a result. ',
- 'Only the results for the last statement are displayed.',
- )),
- m(QueryTableContent, {resp}),
+ Callout,
+ {icon: 'warning'},
+ `${resp.statementWithOutputCount} out of ${
+ resp.statementCount} `,
+ 'statements returned a result. ',
+ 'Only the results for the last statement are displayed.',
+ )),
+ m(QueryTableContent, {resp}),
);
}
}
diff --git a/ui/src/frontend/record_config.ts b/ui/src/frontend/record_config.ts
index b01f0db..2660637 100644
--- a/ui/src/frontend/record_config.ts
+++ b/ui/src/frontend/record_config.ts
@@ -38,8 +38,8 @@
private _save() {
window.localStorage.setItem(
- LOCAL_STORAGE_RECORD_CONFIGS_KEY,
- JSON.stringify(this.recordConfigs.map((x) => x.result)));
+ LOCAL_STORAGE_RECORD_CONFIGS_KEY,
+ JSON.stringify(this.recordConfigs.map((x) => x.result)));
}
save(recordConfig: RecordConfig, title?: string): void {
@@ -125,12 +125,12 @@
for (let i = 0; i < parsedConfigsLocalStorage.length; ++i) {
try {
validConfigLocalStorage.push(runValidator(
- namedRecordConfigValidator, parsedConfigsLocalStorage[i]));
+ namedRecordConfigValidator, parsedConfigsLocalStorage[i]));
} catch {
// Parsing failed with unrecoverable error (e.g. title or key are
// missing), ignore the result.
console.log(
- 'Validation of saved record config has failed: ' +
+ 'Validation of saved record config has failed: ' +
JSON.stringify(parsedConfigsLocalStorage[i]));
}
}
@@ -183,7 +183,7 @@
save(newConfig: RecordConfig) {
window.localStorage.setItem(
- LOCAL_STORAGE_AUTOSAVE_CONFIG_KEY, JSON.stringify(newConfig));
+ LOCAL_STORAGE_AUTOSAVE_CONFIG_KEY, JSON.stringify(newConfig));
this.config = newConfig;
this.hasSavedConfig = true;
}
@@ -213,7 +213,7 @@
save(newTargetOS: string) {
window.localStorage.setItem(
- LOCAL_STORAGE_RECORD_TARGET_OS_KEY, newTargetOS);
+ LOCAL_STORAGE_RECORD_TARGET_OS_KEY, newTargetOS);
this.recordTargetOS = newTargetOS;
}
}
diff --git a/ui/src/frontend/record_page.ts b/ui/src/frontend/record_page.ts
index dc1a130..ad35d17 100644
--- a/ui/src/frontend/record_page.ts
+++ b/ui/src/frontend/record_page.ts
@@ -82,14 +82,14 @@
function RecordHeader() {
return m(
- '.record-header',
- m('.top-part',
- m('.target-and-status',
- RecordingPlatformSelection(),
- RecordingStatusLabel(),
- ErrorLabel()),
- recordingButtons()),
- RecordingNotes());
+ '.record-header',
+ m('.top-part',
+ m('.target-and-status',
+ RecordingPlatformSelection(),
+ RecordingStatusLabel(),
+ ErrorLabel()),
+ recordingButtons()),
+ RecordingNotes());
}
function RecordingPlatformSelection() {
@@ -107,38 +107,38 @@
}
const selectedIndex = isAdbTarget(recordingTarget) ?
- targets.findIndex((node) => node.attrs.value === recordingTarget.serial) :
- targets.findIndex((node) => node.attrs.value === recordingTarget.os);
+ targets.findIndex((node) => node.attrs.value === recordingTarget.serial) :
+ targets.findIndex((node) => node.attrs.value === recordingTarget.os);
return m(
- '.target',
- m(
- 'label',
- 'Target platform:',
- m('select',
- {
- selectedIndex,
- onchange: (e: Event) => {
- onTargetChange((e.target as HTMLSelectElement).value);
- },
- onupdate: (select) => {
- // Work around mithril bug
- // (https://github.com/MithrilJS/mithril.js/issues/2107): We may
- // update the select's options while also changing the
- // selectedIndex at the same time. The update of selectedIndex
- // may be applied before the new options are added to the select
- // element. Because the new selectedIndex may be outside of the
- // select's options at that time, we have to reselect the
- // correct index here after any new children were added.
- (select.dom as HTMLSelectElement).selectedIndex = selectedIndex;
- },
- },
- ...targets),
- ),
- m('.chip',
- {onclick: addAndroidDevice},
- m('button', 'Add ADB Device'),
- m('i.material-icons', 'add')));
+ '.target',
+ m(
+ 'label',
+ 'Target platform:',
+ m('select',
+ {
+ selectedIndex,
+ onchange: (e: Event) => {
+ onTargetChange((e.target as HTMLSelectElement).value);
+ },
+ onupdate: (select) => {
+ // Work around mithril bug
+ // (https://github.com/MithrilJS/mithril.js/issues/2107): We may
+ // update the select's options while also changing the
+ // selectedIndex at the same time. The update of selectedIndex
+ // may be applied before the new options are added to the select
+ // element. Because the new selectedIndex may be outside of the
+ // select's options at that time, we have to reselect the
+ // correct index here after any new children were added.
+ (select.dom as HTMLSelectElement).selectedIndex = selectedIndex;
+ },
+ },
+ ...targets),
+ ),
+ m('.chip',
+ {onclick: addAndroidDevice},
+ m('button', 'Add ADB Device'),
+ m('i.material-icons', 'add')));
}
// |target| can be the TargetOs or the android serial.
@@ -159,45 +159,45 @@
function Instructions(cssClass: string) {
return m(
- `.record-section.instructions${cssClass}`,
- m('header', 'Recording command'),
- PERSIST_CONFIG_FLAG.get() ?
- m('button.permalinkconfig',
- {
- onclick: () => {
- globals.dispatch(
- Actions.createPermalink({isRecordingConfig: true}));
- },
- },
- 'Share recording settings') :
- null,
- RecordingSnippet(),
- BufferUsageProgressBar(),
- m('.buttons', StopCancelButtons()),
- recordingLog());
+ `.record-section.instructions${cssClass}`,
+ m('header', 'Recording command'),
+ PERSIST_CONFIG_FLAG.get() ?
+ m('button.permalinkconfig',
+ {
+ onclick: () => {
+ globals.dispatch(
+ Actions.createPermalink({isRecordingConfig: true}));
+ },
+ },
+ 'Share recording settings') :
+ null,
+ RecordingSnippet(),
+ BufferUsageProgressBar(),
+ m('.buttons', StopCancelButtons()),
+ recordingLog());
}
export function loadedConfigEqual(
- cfg1: LoadedConfig, cfg2: LoadedConfig): boolean {
+ cfg1: LoadedConfig, cfg2: LoadedConfig): boolean {
return cfg1.type === 'NAMED' && cfg2.type === 'NAMED' ?
- cfg1.name === cfg2.name :
- cfg1.type === cfg2.type;
+ cfg1.name === cfg2.name :
+ cfg1.type === cfg2.type;
}
export function loadConfigButton(
- config: RecordConfig, configType: LoadedConfig): m.Vnode {
+ config: RecordConfig, configType: LoadedConfig): m.Vnode {
return m(
- 'button',
- {
- class: 'config-button',
- title: 'Apply configuration settings',
- disabled: loadedConfigEqual(configType, globals.state.lastLoadedConfig),
- onclick: () => {
- globals.dispatch(Actions.setRecordConfig({config, configType}));
- raf.scheduleFullRedraw();
- },
+ 'button',
+ {
+ class: 'config-button',
+ title: 'Apply configuration settings',
+ disabled: loadedConfigEqual(configType, globals.state.lastLoadedConfig),
+ onclick: () => {
+ globals.dispatch(Actions.setRecordConfig({config, configType}));
+ raf.scheduleFullRedraw();
},
- m('i.material-icons', 'file_upload'));
+ },
+ m('i.material-icons', 'file_upload'));
}
export function displayRecordConfigs() {
@@ -219,7 +219,7 @@
title: 'Overwrite configuration with current settings',
onclick: () => {
if (confirm(`Overwrite config "${
- item.title}" with current settings?`)) {
+ item.title}" with current settings?`)) {
recordConfigStore.overwrite(globals.state.recordConfig, item.key);
globals.dispatch(Actions.setRecordConfig({
config: item.config,
@@ -252,11 +252,11 @@
if (errorItems.length > 0) {
configs.push(
- m('.parsing-errors',
- 'One or more errors have been found while loading configuration "' +
+ m('.parsing-errors',
+ 'One or more errors have been found while loading configuration "' +
item.title + '". Loading is possible, but make sure to check ' +
'the settings afterwards.',
- m('ul', errorItems)));
+ m('ul', errorItems)));
}
}
return configs;
@@ -278,51 +278,51 @@
export function Configurations(cssClass: string) {
const canSave = recordConfigStore.canSave(ConfigTitleState.getTitle());
return m(
- `.record-section${cssClass}`,
- m('header', 'Save and load configurations'),
- m('.input-config',
- [
- m('input', {
- value: ConfigTitleState.title,
- placeholder: 'Title for config',
- oninput() {
- ConfigTitleState.setTitle(this.value);
+ `.record-section${cssClass}`,
+ m('header', 'Save and load configurations'),
+ m('.input-config',
+ [
+ m('input', {
+ value: ConfigTitleState.title,
+ placeholder: 'Title for config',
+ oninput() {
+ ConfigTitleState.setTitle(this.value);
+ raf.scheduleFullRedraw();
+ },
+ }),
+ m('button',
+ {
+ class: 'config-button',
+ disabled: !canSave,
+ title: canSave ? 'Save current config' :
+ 'Duplicate name, saving disabled',
+ onclick: () => {
+ recordConfigStore.save(
+ globals.state.recordConfig, ConfigTitleState.getTitle());
raf.scheduleFullRedraw();
+ ConfigTitleState.clearTitle();
},
- }),
- m('button',
- {
- class: 'config-button',
- disabled: !canSave,
- title: canSave ? 'Save current config' :
- 'Duplicate name, saving disabled',
- onclick: () => {
- recordConfigStore.save(
- globals.state.recordConfig, ConfigTitleState.getTitle());
- raf.scheduleFullRedraw();
- ConfigTitleState.clearTitle();
- },
- },
- m('i.material-icons', 'save')),
- m('button',
- {
- class: 'config-button',
- title: 'Clear current configuration',
- onclick: () => {
- if (confirm(
- 'Current configuration will be cleared. ' +
+ },
+ m('i.material-icons', 'save')),
+ m('button',
+ {
+ class: 'config-button',
+ title: 'Clear current configuration',
+ onclick: () => {
+ if (confirm(
+ 'Current configuration will be cleared. ' +
'Are you sure?')) {
- globals.dispatch(Actions.setRecordConfig({
- config: createEmptyRecordConfig(),
- configType: {type: 'NONE'},
- }));
- raf.scheduleFullRedraw();
- }
- },
+ globals.dispatch(Actions.setRecordConfig({
+ config: createEmptyRecordConfig(),
+ configType: {type: 'NONE'},
+ }));
+ raf.scheduleFullRedraw();
+ }
},
- m('i.material-icons', 'delete_forever')),
- ]),
- displayRecordConfigs());
+ },
+ m('i.material-icons', 'delete_forever')),
+ ]),
+ displayRecordConfigs());
}
function BufferUsageProgressBar() {
@@ -333,9 +333,9 @@
if (bufferUsage === 0) return [];
return m(
- 'label',
- 'Buffer usage: ',
- m('progress', {max: 100, value: bufferUsage * 100}));
+ 'label',
+ 'Buffer usage: ',
+ m('progress', {max: 100, value: bufferUsage * 100}));
}
function RecordingNotes() {
@@ -386,12 +386,12 @@
` to get started with tracing on Linux.`);
const msgLongTraces = m(
- '.note',
- `Recording in long trace mode through the UI is not supported. Please copy
+ '.note',
+ `Recording in long trace mode through the UI is not supported. Please copy
the command and `,
- m('a',
- {href: cmdlineUrl, target: '_blank'},
- `collect the trace using ADB.`));
+ m('a',
+ {href: cmdlineUrl, target: '_blank'},
+ `collect the trace using ADB.`));
const msgZeroProbes =
m('.note',
@@ -406,24 +406,24 @@
notes.push(msgRecordingNotSupported);
}
switch (globals.state.recordingTarget.os) {
- case 'Q':
- break;
- case 'P':
- notes.push(m('.note', msgFeatNotSupported, msgSideload));
- break;
- case 'O':
- notes.push(m('.note', msgPerfettoNotSupported, msgSideload));
- break;
- case 'L':
- notes.push(msgLinux);
- break;
- case 'C':
- if (!globals.state.extensionInstalled) notes.push(msgChrome);
- break;
- case 'CrOS':
- if (!globals.state.extensionInstalled) notes.push(msgChrome);
- break;
- default:
+ case 'Q':
+ break;
+ case 'P':
+ notes.push(m('.note', msgFeatNotSupported, msgSideload));
+ break;
+ case 'O':
+ notes.push(m('.note', msgPerfettoNotSupported, msgSideload));
+ break;
+ case 'L':
+ notes.push(msgLinux);
+ break;
+ case 'C':
+ if (!globals.state.extensionInstalled) notes.push(msgChrome);
+ break;
+ case 'CrOS':
+ if (!globals.state.extensionInstalled) notes.push(msgChrome);
+ break;
+ default:
}
if (globals.state.recordConfig.mode === 'LONG_TRACE') {
notes.unshift(msgLongTraces);
@@ -439,11 +439,11 @@
if (isChromeTarget(target)) {
return globals.state.extensionInstalled &&
!globals.state.recordingInProgress ?
- m('div',
- m('label',
- `To trace Chrome from the Perfetto UI you just have to press
+ m('div',
+ m('label',
+ `To trace Chrome from the Perfetto UI you just have to press
'Start Recording'.`)) :
- [];
+ [];
}
return m(CodeSnippet, {text: getRecordCommand(target)});
}
@@ -589,7 +589,7 @@
});
export async function updateAvailableAdbDevices(
- preferredDeviceSerial?: string) {
+ preferredDeviceSerial?: string) {
const devices = await new AdbOverWebUsb().getPairedDevices();
let recordingTarget: AdbRecordingTarget|undefined = undefined;
@@ -613,22 +613,22 @@
});
globals.dispatch(
- Actions.setAvailableAdbDevices({devices: availableAdbDevices}));
+ Actions.setAvailableAdbDevices({devices: availableAdbDevices}));
selectAndroidDeviceIfAvailable(availableAdbDevices, recordingTarget);
raf.scheduleFullRedraw();
return availableAdbDevices;
}
function selectAndroidDeviceIfAvailable(
- availableAdbDevices: AdbRecordingTarget[],
- recordingTarget?: RecordingTarget) {
+ availableAdbDevices: AdbRecordingTarget[],
+ recordingTarget?: RecordingTarget) {
if (!recordingTarget) {
recordingTarget = globals.state.recordingTarget;
}
const deviceConnected = isAdbTarget(recordingTarget);
const connectedDeviceDisconnected = deviceConnected &&
availableAdbDevices.find(
- (e) => e.serial ===
+ (e) => e.serial ===
(recordingTarget as AdbRecordingTarget).serial) === undefined;
if (availableAdbDevices.length) {
@@ -648,7 +648,7 @@
// target to the default one.
if (connectedDeviceDisconnected) {
globals.dispatch(
- Actions.setRecordingTarget({target: getDefaultRecordingTargets()[0]}));
+ Actions.setRecordingTarget({target: getDefaultRecordingTargets()[0]}));
}
}
@@ -711,48 +711,48 @@
probes.push(chromeProbe);
} else {
probes.push(
- cpuProbe,
- gpuProbe,
- powerProbe,
- memoryProbe,
- androidProbe,
- chromeProbe,
- tracePerfProbe,
- advancedProbe);
+ cpuProbe,
+ gpuProbe,
+ powerProbe,
+ memoryProbe,
+ androidProbe,
+ chromeProbe,
+ tracePerfProbe,
+ advancedProbe);
}
return m(
- '.record-menu',
- {
- class: recInProgress ? 'disabled' : '',
- onclick: () => raf.scheduleFullRedraw(),
- },
- m('header', 'Trace config'),
- m('ul',
- m('a[href="#!/record/buffers"]',
- m(`li${routePage === 'buffers' ? '.active' : ''}`,
- m('i.material-icons', 'tune'),
- m('.title', 'Recording settings'),
- m('.sub', 'Buffer mode, size and duration'))),
- m('a[href="#!/record/instructions"]',
- m(`li${routePage === 'instructions' ? '.active' : ''}`,
- m('i.material-icons-filled.rec', 'fiber_manual_record'),
- m('.title', 'Recording command'),
- m('.sub', 'Manually record trace'))),
- PERSIST_CONFIG_FLAG.get() ?
- m('a[href="#!/record/config"]',
- {
- onclick: () => {
- recordConfigStore.reloadFromLocalStorage();
- },
- },
- m(`li${routePage === 'config' ? '.active' : ''}`,
- m('i.material-icons', 'save'),
- m('.title', 'Saved configs'),
- m('.sub', 'Manage local configs'))) :
- null),
- m('header', 'Probes'),
- m('ul', probes));
+ '.record-menu',
+ {
+ class: recInProgress ? 'disabled' : '',
+ onclick: () => raf.scheduleFullRedraw(),
+ },
+ m('header', 'Trace config'),
+ m('ul',
+ m('a[href="#!/record/buffers"]',
+ m(`li${routePage === 'buffers' ? '.active' : ''}`,
+ m('i.material-icons', 'tune'),
+ m('.title', 'Recording settings'),
+ m('.sub', 'Buffer mode, size and duration'))),
+ m('a[href="#!/record/instructions"]',
+ m(`li${routePage === 'instructions' ? '.active' : ''}`,
+ m('i.material-icons-filled.rec', 'fiber_manual_record'),
+ m('.title', 'Recording command'),
+ m('.sub', 'Manually record trace'))),
+ PERSIST_CONFIG_FLAG.get() ?
+ m('a[href="#!/record/config"]',
+ {
+ onclick: () => {
+ recordConfigStore.reloadFromLocalStorage();
+ },
+ },
+ m(`li${routePage === 'config' ? '.active' : ''}`,
+ m('i.material-icons', 'save'),
+ m('.title', 'Saved configs'),
+ m('.sub', 'Manage local configs'))) :
+ null),
+ m('header', 'Probes'),
+ m('ul', probes));
}
export function maybeGetActiveCss(routePage: string, section: string): string {
@@ -798,10 +798,10 @@
}
return m(
- '.record-page',
- globals.state.recordingInProgress ? m('.hider') : [],
- m('.record-container',
- RecordHeader(),
- m('.record-container-content', recordMenu(routePage), pages)));
+ '.record-page',
+ globals.state.recordingInProgress ? m('.hider') : [],
+ m('.record-container',
+ RecordHeader(),
+ m('.record-container-content', recordMenu(routePage), pages)));
},
});
diff --git a/ui/src/frontend/record_page_v2.ts b/ui/src/frontend/record_page_v2.ts
index bb07083..ccce1c1 100644
--- a/ui/src/frontend/record_page_v2.ts
+++ b/ui/src/frontend/record_page_v2.ts
@@ -93,11 +93,11 @@
return undefined;
}
return m(
- '.record-header',
- m('.top-part',
- m('.target-and-status', platformSelection, statusLabel),
- buttons),
- notes);
+ '.record-header',
+ m('.top-part',
+ m('.target-and-status', platformSelection, statusLabel),
+ buttons),
+ notes);
}
function RecordingPlatformSelection() {
@@ -105,12 +105,12 @@
if (controller.getState() >= RecordingState.RECORDING) return undefined;
return m(
- '.target',
- m('.chip',
- {onclick: () => showAddNewTargetModal(controller)},
- m('button', 'Add new recording target'),
- m('i.material-icons', 'add')),
- targetSelection());
+ '.target',
+ m('.chip',
+ {onclick: () => showAddNewTargetModal(controller)},
+ m('button', 'Add new recording target'),
+ m('i.material-icons', 'add')),
+ targetSelection());
}
export function targetSelection(): m.Vnode|undefined {
@@ -135,27 +135,27 @@
}
return m(
- 'label',
- 'Target platform:',
- m('select',
- {
- selectedIndex,
- onchange: (e: Event) => {
- controller.onTargetSelection((e.target as HTMLSelectElement).value);
- },
- onupdate: (select) => {
- // Work around mithril bug
- // (https://github.com/MithrilJS/mithril.js/issues/2107): We may
- // update the select's options while also changing the
- // selectedIndex at the same time. The update of selectedIndex
- // may be applied before the new options are added to the select
- // element. Because the new selectedIndex may be outside of the
- // select's options at that time, we have to reselect the
- // correct index here after any new children were added.
- (select.dom as HTMLSelectElement).selectedIndex = selectedIndex;
- },
+ 'label',
+ 'Target platform:',
+ m('select',
+ {
+ selectedIndex,
+ onchange: (e: Event) => {
+ controller.onTargetSelection((e.target as HTMLSelectElement).value);
},
- ...targetNames),
+ onupdate: (select) => {
+ // Work around mithril bug
+ // (https://github.com/MithrilJS/mithril.js/issues/2107): We may
+ // update the select's options while also changing the
+ // selectedIndex at the same time. The update of selectedIndex
+ // may be applied before the new options are added to the select
+ // element. Because the new selectedIndex may be outside of the
+ // select's options at that time, we have to reselect the
+ // correct index here after any new children were added.
+ (select.dom as HTMLSelectElement).selectedIndex = selectedIndex;
+ },
+ },
+ ...targetNames),
);
}
@@ -176,21 +176,21 @@
const targetInfo = assertExists(controller.getTargetInfo());
return m(
- `.record-section.instructions${cssClass}`,
- m('header', 'Recording command'),
- (PERSIST_CONFIG_FLAG.get()) ?
- m('button.permalinkconfig',
- {
- onclick: () => {
- globals.dispatch(
- Actions.createPermalink({isRecordingConfig: true}));
- },
- },
- 'Share recording settings') :
- null,
- RecordingSnippet(targetInfo),
- BufferUsageProgressBar(),
- m('.buttons', StopCancelButtons()));
+ `.record-section.instructions${cssClass}`,
+ m('header', 'Recording command'),
+ (PERSIST_CONFIG_FLAG.get()) ?
+ m('button.permalinkconfig',
+ {
+ onclick: () => {
+ globals.dispatch(
+ Actions.createPermalink({isRecordingConfig: true}));
+ },
+ },
+ 'Share recording settings') :
+ null,
+ RecordingSnippet(targetInfo),
+ BufferUsageProgressBar(),
+ m('.buttons', StopCancelButtons()));
}
function BufferUsageProgressBar() {
@@ -206,9 +206,9 @@
if (bufferUsage === 0) return undefined;
return m(
- 'label',
- 'Buffer usage: ',
- m('progress', {max: 100, value: bufferUsage * 100}));
+ 'label',
+ 'Buffer usage: ',
+ m('progress', {max: 100, value: bufferUsage * 100}));
}
function RecordingNotes() {
@@ -230,8 +230,8 @@
the device.`);
const msgPerfettoNotSupported = m(
- 'span',
- `Perfetto is not supported natively before Android P. Therefore, Perfetto
+ 'span',
+ `Perfetto is not supported natively before Android P. Therefore, Perfetto
will sideload the latest version onto the device.`);
const msgLinux =
@@ -241,19 +241,19 @@
` to get started with tracing on Linux.`);
const msgLongTraces = m(
- '.note',
- `Recording in long trace mode through the UI is not supported. Please copy
+ '.note',
+ `Recording in long trace mode through the UI is not supported. Please copy
the command and `,
- m('a',
- {href: cmdlineUrl, target: '_blank'},
- `collect the trace using ADB.`));
+ m('a',
+ {href: cmdlineUrl, target: '_blank'},
+ `collect the trace using ADB.`));
if (!recordConfigUtils
- .fetchLatestRecordCommand(globals.state.recordConfig, targetInfo)
- .hasDataSources) {
+ .fetchLatestRecordCommand(globals.state.recordConfig, targetInfo)
+ .hasDataSources) {
notes.push(
- m('.note',
- 'It looks like you didn\'t add any probes. ' +
+ m('.note',
+ 'It looks like you didn\'t add any probes. ' +
'Please add at least one to get a non-empty trace.'));
}
@@ -262,29 +262,29 @@
// Special case for rendering the link to the Chrome extension.
const parts = recordingProblem.split(EXTENSION_URL);
notes.push(
- m('.note',
- parts[0],
- m('a', {href: EXTENSION_URL, target: '_blank'}, EXTENSION_NAME),
- parts[1]));
+ m('.note',
+ parts[0],
+ m('a', {href: EXTENSION_URL, target: '_blank'}, EXTENSION_NAME),
+ parts[1]));
}
});
switch (targetInfo.targetType) {
- case 'LINUX':
- notes.push(msgLinux);
- break;
- case 'ANDROID': {
- const androidApiLevel = targetInfo.androidApiLevel;
- if (androidApiLevel === 28) {
- notes.push(m('.note', msgFeatNotSupported));
- /* eslint-disable @typescript-eslint/strict-boolean-expressions */
- } else if (androidApiLevel && androidApiLevel <= 27) {
- /* eslint-enable */
- notes.push(m('.note', msgPerfettoNotSupported));
- }
- break;
+ case 'LINUX':
+ notes.push(msgLinux);
+ break;
+ case 'ANDROID': {
+ const androidApiLevel = targetInfo.androidApiLevel;
+ if (androidApiLevel === 28) {
+ notes.push(m('.note', msgFeatNotSupported));
+ /* eslint-disable @typescript-eslint/strict-boolean-expressions */
+ } else if (androidApiLevel && androidApiLevel <= 27) {
+ /* eslint-enable */
+ notes.push(m('.note', msgPerfettoNotSupported));
}
- default:
+ break;
+ }
+ default:
}
if (globals.state.recordConfig.mode === 'LONG_TRACE') {
@@ -303,8 +303,8 @@
return undefined;
}
return m(
- 'div',
- m('label', `To trace Chrome from the Perfetto UI you just have to press
+ 'div',
+ m('label', `To trace Chrome from the Perfetto UI you just have to press
'${START_RECORDING_MESSAGE}'.`));
}
return m(CodeSnippet, {text: getRecordCommand(targetInfo)});
@@ -312,7 +312,7 @@
function getRecordCommand(targetInfo: TargetInfo): string {
const recordCommand = recordConfigUtils.fetchLatestRecordCommand(
- globals.state.recordConfig, targetInfo);
+ globals.state.recordConfig, targetInfo);
const pbBase64 = recordCommand?.configProtoBase64 ?? '';
const pbtx = recordCommand?.configProtoText ?? '';
@@ -324,7 +324,7 @@
cmd += 'adb shell "perfetto -c - -o /data/misc/perfetto-traces/trace"\n';
} else {
cmd += targetInfo.targetType === 'ANDROID' ? 'adb shell perfetto \\\n' :
- 'perfetto \\\n';
+ 'perfetto \\\n';
cmd += ' -c - --txt \\\n';
cmd += ' -o /data/misc/perfetto-traces/trace \\\n';
cmd += '<<EOF\n\n';
@@ -344,20 +344,20 @@
const targetInfo = assertExists(controller.getTargetInfo());
const hasDataSources =
recordConfigUtils
- .fetchLatestRecordCommand(globals.state.recordConfig, targetInfo)
- .hasDataSources;
+ .fetchLatestRecordCommand(globals.state.recordConfig, targetInfo)
+ .hasDataSources;
if (!hasDataSources) {
return undefined;
}
return m(
- '.button',
- m('button',
- {
- class: 'selected',
- onclick: () => controller.onStartRecordingPressed(),
- },
- START_RECORDING_MESSAGE));
+ '.button',
+ m('button',
+ {
+ class: 'selected',
+ onclick: () => controller.onStartRecordingPressed(),
+ },
+ START_RECORDING_MESSAGE));
}
function StopCancelButtons() {
@@ -434,50 +434,50 @@
probes.push(chromeProbe);
} else {
probes.push(
- cpuProbe,
- gpuProbe,
- powerProbe,
- memoryProbe,
- androidProbe,
- chromeProbe,
- tracePerfProbe,
- advancedProbe);
+ cpuProbe,
+ gpuProbe,
+ powerProbe,
+ memoryProbe,
+ androidProbe,
+ chromeProbe,
+ tracePerfProbe,
+ advancedProbe);
}
return m(
- '.record-menu',
- {
- class: controller.getState() > RecordingState.TARGET_INFO_DISPLAYED ?
- 'disabled' :
- '',
- onclick: () => raf.scheduleFullRedraw(),
- },
- m('header', 'Trace config'),
- m('ul',
- m('a[href="#!/record/buffers"]',
- m(`li${routePage === 'buffers' ? '.active' : ''}`,
- m('i.material-icons', 'tune'),
- m('.title', 'Recording settings'),
- m('.sub', 'Buffer mode, size and duration'))),
- m('a[href="#!/record/instructions"]',
- m(`li${routePage === 'instructions' ? '.active' : ''}`,
- m('i.material-icons-filled.rec', 'fiber_manual_record'),
- m('.title', 'Recording command'),
- m('.sub', 'Manually record trace'))),
- PERSIST_CONFIG_FLAG.get() ?
- m('a[href="#!/record/config"]',
- {
- onclick: () => {
- recordConfigStore.reloadFromLocalStorage();
- },
- },
- m(`li${routePage === 'config' ? '.active' : ''}`,
- m('i.material-icons', 'save'),
- m('.title', 'Saved configs'),
- m('.sub', 'Manage local configs'))) :
- null),
- m('header', 'Probes'),
- m('ul', probes));
+ '.record-menu',
+ {
+ class: controller.getState() > RecordingState.TARGET_INFO_DISPLAYED ?
+ 'disabled' :
+ '',
+ onclick: () => raf.scheduleFullRedraw(),
+ },
+ m('header', 'Trace config'),
+ m('ul',
+ m('a[href="#!/record/buffers"]',
+ m(`li${routePage === 'buffers' ? '.active' : ''}`,
+ m('i.material-icons', 'tune'),
+ m('.title', 'Recording settings'),
+ m('.sub', 'Buffer mode, size and duration'))),
+ m('a[href="#!/record/instructions"]',
+ m(`li${routePage === 'instructions' ? '.active' : ''}`,
+ m('i.material-icons-filled.rec', 'fiber_manual_record'),
+ m('.title', 'Recording command'),
+ m('.sub', 'Manually record trace'))),
+ PERSIST_CONFIG_FLAG.get() ?
+ m('a[href="#!/record/config"]',
+ {
+ onclick: () => {
+ recordConfigStore.reloadFromLocalStorage();
+ },
+ },
+ m(`li${routePage === 'config' ? '.active' : ''}`,
+ m('i.material-icons', 'save'),
+ m('.title', 'Saved configs'),
+ m('.sub', 'Manage local configs'))) :
+ null),
+ m('header', 'Probes'),
+ m('ul', probes));
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -488,19 +488,19 @@
return m('.record-container', components);
} else if (controller.getState() <= RecordingState.ASK_TO_FORCE_P1) {
components.push(
- m('.full-centered',
- 'Can not access the device without resetting the ' +
+ m('.full-centered',
+ 'Can not access the device without resetting the ' +
`connection. Please refresh the page, then click ` +
`'${FORCE_RESET_MESSAGE}.'`));
return m('.record-container', components);
} else if (controller.getState() === RecordingState.AUTH_P1) {
components.push(
- m('.full-centered', 'Please allow USB debugging on the device.'));
+ m('.full-centered', 'Please allow USB debugging on the device.'));
return m('.record-container', components);
} else if (
- controller.getState() === RecordingState.WAITING_FOR_TRACE_DISPLAY) {
+ controller.getState() === RecordingState.WAITING_FOR_TRACE_DISPLAY) {
components.push(
- m('.full-centered', 'Waiting for the trace to be collected.'));
+ m('.full-centered', 'Waiting for the trace to be collected.'));
return m('.record-container', components);
}
@@ -549,10 +549,10 @@
view({attrs}: m.Vnode<PageAttrs>) {
return m(
- '.record-page',
- controller.getState() > RecordingState.TARGET_INFO_DISPLAYED ?
- m('.hider') :
- [],
- getRecordContainer(attrs.subpage));
+ '.record-page',
+ controller.getState() > RecordingState.TARGET_INFO_DISPLAYED ?
+ m('.hider') :
+ [],
+ getRecordContainer(attrs.subpage));
},
});
diff --git a/ui/src/frontend/record_widgets.ts b/ui/src/frontend/record_widgets.ts
index 5eb59c5..a25448f 100644
--- a/ui/src/frontend/record_widgets.ts
+++ b/ui/src/frontend/record_widgets.ts
@@ -40,10 +40,10 @@
class DocsChip implements m.ClassComponent<DocsChipAttrs> {
view({attrs}: m.CVnode<DocsChipAttrs>) {
return m(
- 'a.inline-chip',
- {href: attrs.href, title: 'Open docs in new tab', target: '_blank'},
- m('i.material-icons', 'info'),
- ' Docs');
+ 'a.inline-chip',
+ {href: attrs.href, title: 'Open docs in new tab', target: '_blank'},
+ m('i.material-icons', 'info'),
+ ' Docs');
}
}
@@ -72,22 +72,22 @@
const enabled = attrs.isEnabled(globals.state.recordConfig);
return m(
- `.probe${attrs.compact ? '.compact' : ''}${enabled ? '.enabled' : ''}`,
- attrs.img && m('img', {
- src: `${globals.root}assets/${attrs.img}`,
- onclick: () => onToggle(!enabled),
+ `.probe${attrs.compact ? '.compact' : ''}${enabled ? '.enabled' : ''}`,
+ attrs.img && m('img', {
+ src: `${globals.root}assets/${attrs.img}`,
+ onclick: () => onToggle(!enabled),
+ }),
+ m('label',
+ m(`input[type=checkbox]`, {
+ checked: enabled,
+ oninput: (e: InputEvent) => {
+ onToggle((e.target as HTMLInputElement).checked);
+ },
}),
- m('label',
- m(`input[type=checkbox]`, {
- checked: enabled,
- oninput: (e: InputEvent) => {
- onToggle((e.target as HTMLInputElement).checked);
- },
- }),
- m('span', attrs.title)),
- attrs.compact ?
- '' :
- m('div', m('div', attrs.descr), m('.probe-config', children)));
+ m('span', attrs.title)),
+ attrs.compact ?
+ '' :
+ m('div', m('div', attrs.descr), m('.probe-config', children)));
}
}
@@ -130,16 +130,16 @@
const enabled = attrs.isEnabled(globals.state.recordConfig);
return m(
- `.toggle${enabled ? '.enabled' : ''}${attrs.cssClass || ''}`,
- m('label',
- m(`input[type=checkbox]`, {
- checked: enabled,
- oninput: (e: InputEvent) => {
- onToggle((e.target as HTMLInputElement).checked);
- },
- }),
- m('span', attrs.title)),
- m('.descr', attrs.descr));
+ `.toggle${enabled ? '.enabled' : ''}${attrs.cssClass || ''}`,
+ m('label',
+ m(`input[type=checkbox]`, {
+ checked: enabled,
+ oninput: (e: InputEvent) => {
+ onToggle((e.target as HTMLInputElement).checked);
+ },
+ }),
+ m('span', attrs.title)),
+ m('.descr', attrs.descr));
}
}
@@ -222,18 +222,18 @@
};
}
return m(
- '.slider' + (attrs.cssClass || ''),
- m('header', attrs.title),
- description ? m('header.descr', attrs.description) : '',
- attrs.icon !== undefined ? m('i.material-icons', attrs.icon) : [],
- m(`input[id="${id}"][type=range][min=0][max=${maxIdx}][value=${idx}]`, {
- disabled,
- oninput: (e: InputEvent) => {
- this.onSliderChange(attrs, +(e.target as HTMLInputElement).value);
- },
- }),
- m(`input.spinner[min=${min}][for=${id}]`, spinnerCfg),
- m('.unit', attrs.unit));
+ '.slider' + (attrs.cssClass || ''),
+ m('header', attrs.title),
+ description ? m('header.descr', attrs.description) : '',
+ attrs.icon !== undefined ? m('i.material-icons', attrs.icon) : [],
+ m(`input[id="${id}"][type=range][min=0][max=${maxIdx}][value=${idx}]`, {
+ disabled,
+ oninput: (e: InputEvent) => {
+ this.onSliderChange(attrs, +(e.target as HTMLInputElement).value);
+ },
+ }),
+ m(`input.spinner[min=${min}][for=${id}]`, spinnerCfg),
+ m('.unit', attrs.unit));
}
}
@@ -290,15 +290,15 @@
}
const label = `${attrs.title} ${numSelected ? `(${numSelected})` : ''}`;
return m(
- `select.dropdown${attrs.cssClass || ''}[multiple=multiple]`,
- {
- onblur: (e: Event) => this.resetScroll(e.target as HTMLSelectElement),
- onmouseleave: (e: Event) =>
- this.resetScroll(e.target as HTMLSelectElement),
- oninput: (e: Event) => this.onChange(attrs, e),
- oncreate: (vnode) => this.resetScroll(vnode.dom as HTMLSelectElement),
- },
- m('optgroup', {label}, options));
+ `select.dropdown${attrs.cssClass || ''}[multiple=multiple]`,
+ {
+ onblur: (e: Event) => this.resetScroll(e.target as HTMLSelectElement),
+ onmouseleave: (e: Event) =>
+ this.resetScroll(e.target as HTMLSelectElement),
+ oninput: (e: Event) => this.onChange(attrs, e),
+ oncreate: (vnode) => this.resetScroll(vnode.dom as HTMLSelectElement),
+ },
+ m('optgroup', {label}, options));
}
}
@@ -326,16 +326,16 @@
view({attrs}: m.CVnode<TextareaAttrs>) {
return m(
- '.textarea-holder',
- m('header',
- attrs.title,
- attrs.docsLink && [' ', m(DocsChip, {href: attrs.docsLink})]),
- m(`textarea.extra-input${attrs.cssClass || ''}`, {
- onchange: (e: Event) =>
- this.onChange(attrs, e.target as HTMLTextAreaElement),
- placeholder: attrs.placeholder,
- value: attrs.get(globals.state.recordConfig),
- }));
+ '.textarea-holder',
+ m('header',
+ attrs.title,
+ attrs.docsLink && [' ', m(DocsChip, {href: attrs.docsLink})]),
+ m(`textarea.extra-input${attrs.cssClass || ''}`, {
+ onchange: (e: Event) =>
+ this.onChange(attrs, e.target as HTMLTextAreaElement),
+ placeholder: attrs.placeholder,
+ value: attrs.get(globals.state.recordConfig),
+ }));
}
}
@@ -351,14 +351,14 @@
export class CodeSnippet implements m.ClassComponent<CodeSnippetAttrs> {
view({attrs}: m.CVnode<CodeSnippetAttrs>) {
return m(
- '.code-snippet',
- m('button',
- {
- title: 'Copy to clipboard',
- onclick: () => copyToClipboard(attrs.text),
- },
- m('i.material-icons', 'assignment')),
- m('code', attrs.text),
+ '.code-snippet',
+ m('button',
+ {
+ title: 'Copy to clipboard',
+ onclick: () => copyToClipboard(attrs.text),
+ },
+ m('i.material-icons', 'assignment')),
+ m('code', attrs.text),
);
}
}
@@ -377,7 +377,7 @@
export class CategoriesCheckboxList implements
m.ClassComponent<CategoriesCheckboxListParams> {
updateValue(
- attrs: CategoriesCheckboxListParams, value: string, enabled: boolean) {
+ attrs: CategoriesCheckboxListParams, value: string, enabled: boolean) {
const traceCfg = produce(globals.state.recordConfig, (draft) => {
const values = attrs.get(draft);
const index = values.indexOf(value);
@@ -394,45 +394,45 @@
view({attrs}: m.CVnode<CategoriesCheckboxListParams>) {
const enabled = new Set(attrs.get(globals.state.recordConfig));
return m(
- '.categories-list',
- m('h3',
- attrs.title,
- m('button.config-button',
- {
- onclick: () => {
- const config = produce(globals.state.recordConfig, (draft) => {
- attrs.set(draft, Array.from(attrs.categories.keys()));
- });
- globals.dispatch(Actions.setRecordConfig({config}));
- },
+ '.categories-list',
+ m('h3',
+ attrs.title,
+ m('button.config-button',
+ {
+ onclick: () => {
+ const config = produce(globals.state.recordConfig, (draft) => {
+ attrs.set(draft, Array.from(attrs.categories.keys()));
+ });
+ globals.dispatch(Actions.setRecordConfig({config}));
},
- 'All'),
- m('button.config-button',
- {
- onclick: () => {
- const config = produce(globals.state.recordConfig, (draft) => {
- attrs.set(draft, []);
- });
- globals.dispatch(Actions.setRecordConfig({config}));
- },
+ },
+ 'All'),
+ m('button.config-button',
+ {
+ onclick: () => {
+ const config = produce(globals.state.recordConfig, (draft) => {
+ attrs.set(draft, []);
+ });
+ globals.dispatch(Actions.setRecordConfig({config}));
},
- 'None')),
- m('ul.checkboxes',
- Array.from(attrs.categories.entries()).map(([key, value]) => {
- const id = `category-checkbox-${key}`;
- return m(
- 'label',
- {'for': id},
- m('li',
- m('input[type=checkbox]', {
- id,
- checked: enabled.has(key),
- onclick: (e: InputEvent) => {
- const target = e.target as HTMLInputElement;
- this.updateValue(attrs, key, target.checked);
- },
- }),
- value));
- })));
+ },
+ 'None')),
+ m('ul.checkboxes',
+ Array.from(attrs.categories.entries()).map(([key, value]) => {
+ const id = `category-checkbox-${key}`;
+ return m(
+ 'label',
+ {'for': id},
+ m('li',
+ m('input[type=checkbox]', {
+ id,
+ checked: enabled.has(key),
+ onclick: (e: InputEvent) => {
+ const target = e.target as HTMLInputElement;
+ this.updateValue(attrs, key, target.checked);
+ },
+ }),
+ value));
+ })));
}
}
diff --git a/ui/src/frontend/recording/advanced_settings.ts b/ui/src/frontend/recording/advanced_settings.ts
index f493948..937b7ba 100644
--- a/ui/src/frontend/recording/advanced_settings.ts
+++ b/ui/src/frontend/recording/advanced_settings.ts
@@ -53,8 +53,8 @@
m.ClassComponent<RecordingSectionAttrs> {
view({attrs}: m.CVnode<RecordingSectionAttrs>) {
return m(
- `.record-section${attrs.cssClass}`,
- m(Probe,
+ `.record-section${attrs.cssClass}`,
+ m(Probe,
{
title: 'Advanced ftrace config',
img: 'rec_ftrace.png',
diff --git a/ui/src/frontend/recording/android_settings.ts b/ui/src/frontend/recording/android_settings.ts
index 767ef11..63d2575 100644
--- a/ui/src/frontend/recording/android_settings.ts
+++ b/ui/src/frontend/recording/android_settings.ts
@@ -119,8 +119,8 @@
}
return m(
- `.record-section${attrs.cssClass}`,
- m(Probe,
+ `.record-section${attrs.cssClass}`,
+ m(Probe,
{
title: 'Atrace userspace annotations',
img: 'rec_atrace.png',
@@ -143,7 +143,7 @@
isEnabled: (cfg) => cfg.allAtraceApps,
} as ToggleAttrs),
m(AtraceAppsList)),
- m(Probe,
+ m(Probe,
{
title: 'Event log (logcat)',
img: 'rec_logcat.png',
@@ -159,23 +159,23 @@
set: (cfg, val) => cfg.androidLogBuffers = val,
get: (cfg) => cfg.androidLogBuffers,
} as DropdownAttrs)),
- m(Probe, {
- title: 'Frame timeline',
- img: 'rec_frame_timeline.png',
- descr: `Records expected/actual frame timings from surface_flinger.
+ m(Probe, {
+ title: 'Frame timeline',
+ img: 'rec_frame_timeline.png',
+ descr: `Records expected/actual frame timings from surface_flinger.
Requires Android 12 (S) or above.`,
- setEnabled: (cfg, val) => cfg.androidFrameTimeline = val,
- isEnabled: (cfg) => cfg.androidFrameTimeline,
- } as ProbeAttrs),
- m(Probe, {
- title: 'Game intervention list',
- img: '',
- descr: `List game modes and interventions.
+ setEnabled: (cfg, val) => cfg.androidFrameTimeline = val,
+ isEnabled: (cfg) => cfg.androidFrameTimeline,
+ } as ProbeAttrs),
+ m(Probe, {
+ title: 'Game intervention list',
+ img: '',
+ descr: `List game modes and interventions.
Requires Android 13 (T) or above.`,
- setEnabled: (cfg, val) => cfg.androidGameInterventionList = val,
- isEnabled: (cfg) => cfg.androidGameInterventionList,
- } as ProbeAttrs),
- m(Probe,
+ setEnabled: (cfg, val) => cfg.androidGameInterventionList = val,
+ isEnabled: (cfg) => cfg.androidGameInterventionList,
+ } as ProbeAttrs),
+ m(Probe,
{
title: 'Network Tracing',
img: '',
diff --git a/ui/src/frontend/recording/chrome_settings.ts b/ui/src/frontend/recording/chrome_settings.ts
index 8047c28..1614374 100644
--- a/ui/src/frontend/recording/chrome_settings.ts
+++ b/ui/src/frontend/recording/chrome_settings.ts
@@ -48,7 +48,7 @@
m.ClassComponent<RecordingSectionAttrs> {
private defaultCategoryOptions: MultiSelectOption[]|undefined = undefined;
private disabledByDefaultCategoryOptions: MultiSelectOption[]|undefined =
- undefined;
+ undefined;
static updateValue(attrs: CategoryGetter, diffs: MultiSelectDiff[]) {
const traceCfg = produce(globals.state.recordConfig, (draft) => {
@@ -101,7 +101,7 @@
checked: checked,
});
} else if (
- !cat.startsWith(disabledPrefix) &&
+ !cat.startsWith(disabledPrefix) &&
this.defaultCategoryOptions !== undefined) {
this.defaultCategoryOptions.push({
id: cat,
@@ -113,122 +113,122 @@
}
return m(
- 'div.chrome-categories',
+ 'div.chrome-categories',
+ m(
+ Section,
+ {title: 'Additional Categories'},
m(
- Section,
- {title: 'Additional Categories'},
- m(
- MultiSelect,
- {
- options: this.defaultCategoryOptions,
- repeatCheckedItemsAtTop: false,
- fixedSize: false,
- onChange: (diffs: MultiSelectDiff[]) => {
- diffs.forEach(({id, checked}) => {
- if (this.defaultCategoryOptions === undefined) {
- return;
- }
- for (const option of this.defaultCategoryOptions) {
- if (option.id == id) {
- option.checked = checked;
- }
- }
- });
- ChromeCategoriesSelection.updateValue(
- categoryConfigGetter, diffs);
- },
- },
- )),
+ MultiSelect,
+ {
+ options: this.defaultCategoryOptions,
+ repeatCheckedItemsAtTop: false,
+ fixedSize: false,
+ onChange: (diffs: MultiSelectDiff[]) => {
+ diffs.forEach(({id, checked}) => {
+ if (this.defaultCategoryOptions === undefined) {
+ return;
+ }
+ for (const option of this.defaultCategoryOptions) {
+ if (option.id == id) {
+ option.checked = checked;
+ }
+ }
+ });
+ ChromeCategoriesSelection.updateValue(
+ categoryConfigGetter, diffs);
+ },
+ },
+ )),
+ m(
+ Section,
+ {title: 'High Overhead Categories'},
m(
- Section,
- {title: 'High Overhead Categories'},
- m(
- MultiSelect,
- {
- options: this.disabledByDefaultCategoryOptions,
- repeatCheckedItemsAtTop: false,
- fixedSize: false,
- onChange: (diffs: MultiSelectDiff[]) => {
- diffs.forEach(({id, checked}) => {
- if (this.disabledByDefaultCategoryOptions === undefined) {
- return;
- }
- for (const option of this
- .disabledByDefaultCategoryOptions) {
- if (option.id == id) {
- option.checked = checked;
- }
- }
- });
- ChromeCategoriesSelection.updateValue(
- categoryConfigGetter, diffs);
- },
- },
- )));
+ MultiSelect,
+ {
+ options: this.disabledByDefaultCategoryOptions,
+ repeatCheckedItemsAtTop: false,
+ fixedSize: false,
+ onChange: (diffs: MultiSelectDiff[]) => {
+ diffs.forEach(({id, checked}) => {
+ if (this.disabledByDefaultCategoryOptions === undefined) {
+ return;
+ }
+ for (const option of this
+ .disabledByDefaultCategoryOptions) {
+ if (option.id == id) {
+ option.checked = checked;
+ }
+ }
+ });
+ ChromeCategoriesSelection.updateValue(
+ categoryConfigGetter, diffs);
+ },
+ },
+ )));
}
}
export class ChromeSettings implements m.ClassComponent<RecordingSectionAttrs> {
view({attrs}: m.CVnode<RecordingSectionAttrs>) {
return m(
- `.record-section${attrs.cssClass}`,
- CompactProbe({
- title: 'Task scheduling',
- setEnabled: (cfg, val) => cfg.taskScheduling = val,
- isEnabled: (cfg) => cfg.taskScheduling,
- }),
- CompactProbe({
- title: 'IPC flows',
- setEnabled: (cfg, val) => cfg.ipcFlows = val,
- isEnabled: (cfg) => cfg.ipcFlows,
- }),
- CompactProbe({
- title: 'Javascript execution',
- setEnabled: (cfg, val) => cfg.jsExecution = val,
- isEnabled: (cfg) => cfg.jsExecution,
- }),
- CompactProbe({
- title: 'Web content rendering, layout and compositing',
- setEnabled: (cfg, val) => cfg.webContentRendering = val,
- isEnabled: (cfg) => cfg.webContentRendering,
- }),
- CompactProbe({
- title: 'UI rendering & surface compositing',
- setEnabled: (cfg, val) => cfg.uiRendering = val,
- isEnabled: (cfg) => cfg.uiRendering,
- }),
- CompactProbe({
- title: 'Input events',
- setEnabled: (cfg, val) => cfg.inputEvents = val,
- isEnabled: (cfg) => cfg.inputEvents,
- }),
- CompactProbe({
- title: 'Navigation & Loading',
- setEnabled: (cfg, val) => cfg.navigationAndLoading = val,
- isEnabled: (cfg) => cfg.navigationAndLoading,
- }),
- CompactProbe({
- title: 'Chrome Logs',
- setEnabled: (cfg, val) => cfg.chromeLogs = val,
- isEnabled: (cfg) => cfg.chromeLogs,
- }),
- CompactProbe({
- title: 'Audio',
- setEnabled: (cfg, val) => cfg.audio = val,
- isEnabled: (cfg) => cfg.audio,
- }),
- CompactProbe({
- title: 'Video',
- setEnabled: (cfg, val) => cfg.video = val,
- isEnabled: (cfg) => cfg.video,
- }),
- m(Toggle, {
- title: 'Remove untyped and sensitive data like URLs from the trace',
- descr: 'Not recommended unless you intend to share the trace' +
+ `.record-section${attrs.cssClass}`,
+ CompactProbe({
+ title: 'Task scheduling',
+ setEnabled: (cfg, val) => cfg.taskScheduling = val,
+ isEnabled: (cfg) => cfg.taskScheduling,
+ }),
+ CompactProbe({
+ title: 'IPC flows',
+ setEnabled: (cfg, val) => cfg.ipcFlows = val,
+ isEnabled: (cfg) => cfg.ipcFlows,
+ }),
+ CompactProbe({
+ title: 'Javascript execution',
+ setEnabled: (cfg, val) => cfg.jsExecution = val,
+ isEnabled: (cfg) => cfg.jsExecution,
+ }),
+ CompactProbe({
+ title: 'Web content rendering, layout and compositing',
+ setEnabled: (cfg, val) => cfg.webContentRendering = val,
+ isEnabled: (cfg) => cfg.webContentRendering,
+ }),
+ CompactProbe({
+ title: 'UI rendering & surface compositing',
+ setEnabled: (cfg, val) => cfg.uiRendering = val,
+ isEnabled: (cfg) => cfg.uiRendering,
+ }),
+ CompactProbe({
+ title: 'Input events',
+ setEnabled: (cfg, val) => cfg.inputEvents = val,
+ isEnabled: (cfg) => cfg.inputEvents,
+ }),
+ CompactProbe({
+ title: 'Navigation & Loading',
+ setEnabled: (cfg, val) => cfg.navigationAndLoading = val,
+ isEnabled: (cfg) => cfg.navigationAndLoading,
+ }),
+ CompactProbe({
+ title: 'Chrome Logs',
+ setEnabled: (cfg, val) => cfg.chromeLogs = val,
+ isEnabled: (cfg) => cfg.chromeLogs,
+ }),
+ CompactProbe({
+ title: 'Audio',
+ setEnabled: (cfg, val) => cfg.audio = val,
+ isEnabled: (cfg) => cfg.audio,
+ }),
+ CompactProbe({
+ title: 'Video',
+ setEnabled: (cfg, val) => cfg.video = val,
+ isEnabled: (cfg) => cfg.video,
+ }),
+ m(Toggle, {
+ title: 'Remove untyped and sensitive data like URLs from the trace',
+ descr: 'Not recommended unless you intend to share the trace' +
' with third-parties.',
- setEnabled: (cfg, val) => cfg.chromePrivacyFiltering = val,
- isEnabled: (cfg) => cfg.chromePrivacyFiltering,
- } as ToggleAttrs),
- m(ChromeCategoriesSelection, attrs));
+ setEnabled: (cfg, val) => cfg.chromePrivacyFiltering = val,
+ isEnabled: (cfg) => cfg.chromePrivacyFiltering,
+ } as ToggleAttrs),
+ m(ChromeCategoriesSelection, attrs));
}
}
diff --git a/ui/src/frontend/recording/cpu_settings.ts b/ui/src/frontend/recording/cpu_settings.ts
index df14dad..50944ce 100644
--- a/ui/src/frontend/recording/cpu_settings.ts
+++ b/ui/src/frontend/recording/cpu_settings.ts
@@ -20,8 +20,8 @@
export class CpuSettings implements m.ClassComponent<RecordingSectionAttrs> {
view({attrs}: m.CVnode<RecordingSectionAttrs>) {
return m(
- `.record-section${attrs.cssClass}`,
- m(Probe,
+ `.record-section${attrs.cssClass}`,
+ m(Probe,
{
title: 'Coarse CPU usage counter',
img: 'rec_cpu_coarse.png',
@@ -38,14 +38,14 @@
set: (cfg, val) => cfg.cpuCoarsePollMs = val,
get: (cfg) => cfg.cpuCoarsePollMs,
} as SliderAttrs)),
- m(Probe, {
- title: 'Scheduling details',
- img: 'rec_cpu_fine.png',
- descr: 'Enables high-detailed tracking of scheduling events',
- setEnabled: (cfg, val) => cfg.cpuSched = val,
- isEnabled: (cfg) => cfg.cpuSched,
- } as ProbeAttrs),
- m(Probe,
+ m(Probe, {
+ title: 'Scheduling details',
+ img: 'rec_cpu_fine.png',
+ descr: 'Enables high-detailed tracking of scheduling events',
+ setEnabled: (cfg, val) => cfg.cpuSched = val,
+ isEnabled: (cfg) => cfg.cpuSched,
+ } as ProbeAttrs),
+ m(Probe,
{
title: 'CPU frequency and idle states',
img: 'rec_cpu_freq.png',
@@ -62,13 +62,13 @@
set: (cfg, val) => cfg.cpuFreqPollMs = val,
get: (cfg) => cfg.cpuFreqPollMs,
} as SliderAttrs)),
- m(Probe, {
- title: 'Syscalls',
- img: 'rec_syscalls.png',
- descr: `Tracks the enter and exit of all syscalls. On Android
+ m(Probe, {
+ title: 'Syscalls',
+ img: 'rec_syscalls.png',
+ descr: `Tracks the enter and exit of all syscalls. On Android
requires a userdebug or eng build.`,
- setEnabled: (cfg, val) => cfg.cpuSyscall = val,
- isEnabled: (cfg) => cfg.cpuSyscall,
- } as ProbeAttrs));
+ setEnabled: (cfg, val) => cfg.cpuSyscall = val,
+ isEnabled: (cfg) => cfg.cpuSyscall,
+ } as ProbeAttrs));
}
}
diff --git a/ui/src/frontend/recording/gpu_settings.ts b/ui/src/frontend/recording/gpu_settings.ts
index c3b1ae1..a253b63 100644
--- a/ui/src/frontend/recording/gpu_settings.ts
+++ b/ui/src/frontend/recording/gpu_settings.ts
@@ -20,30 +20,30 @@
export class GpuSettings implements m.ClassComponent<RecordingSectionAttrs> {
view({attrs}: m.CVnode<RecordingSectionAttrs>) {
return m(
- `.record-section${attrs.cssClass}`,
- m(Probe, {
- title: 'GPU frequency',
- img: 'rec_cpu_freq.png',
- descr: 'Records gpu frequency via ftrace',
- setEnabled: (cfg, val) => cfg.gpuFreq = val,
- isEnabled: (cfg) => cfg.gpuFreq,
- } as ProbeAttrs),
- m(Probe, {
- title: 'GPU memory',
- img: 'rec_gpu_mem_total.png',
- descr:
+ `.record-section${attrs.cssClass}`,
+ m(Probe, {
+ title: 'GPU frequency',
+ img: 'rec_cpu_freq.png',
+ descr: 'Records gpu frequency via ftrace',
+ setEnabled: (cfg, val) => cfg.gpuFreq = val,
+ isEnabled: (cfg) => cfg.gpuFreq,
+ } as ProbeAttrs),
+ m(Probe, {
+ title: 'GPU memory',
+ img: 'rec_gpu_mem_total.png',
+ descr:
`Allows to track per process and global total GPU memory usages.
(Available on recent Android 12+ kernels)`,
- setEnabled: (cfg, val) => cfg.gpuMemTotal = val,
- isEnabled: (cfg) => cfg.gpuMemTotal,
- } as ProbeAttrs),
- m(Probe, {
- title: 'GPU work period',
- img: 'rec_cpu_voltage.png',
- descr: `Allows to track per package GPU work.
+ setEnabled: (cfg, val) => cfg.gpuMemTotal = val,
+ isEnabled: (cfg) => cfg.gpuMemTotal,
+ } as ProbeAttrs),
+ m(Probe, {
+ title: 'GPU work period',
+ img: 'rec_cpu_voltage.png',
+ descr: `Allows to track per package GPU work.
(Available on recent Android 14+ kernels)`,
- setEnabled: (cfg, val) => cfg.gpuWorkPeriod = val,
- isEnabled: (cfg) => cfg.gpuWorkPeriod,
- } as ProbeAttrs));
+ setEnabled: (cfg, val) => cfg.gpuWorkPeriod = val,
+ isEnabled: (cfg) => cfg.gpuWorkPeriod,
+ } as ProbeAttrs));
}
}
diff --git a/ui/src/frontend/recording/linux_perf_settings.ts b/ui/src/frontend/recording/linux_perf_settings.ts
index 55538f7..ad2a33c 100644
--- a/ui/src/frontend/recording/linux_perf_settings.ts
+++ b/ui/src/frontend/recording/linux_perf_settings.ts
@@ -40,9 +40,9 @@
config = {targets: []} as LinuxPerfConfiguration;
view({attrs}: m.CVnode<RecordingSectionAttrs>) {
return m(
- `.record-section${attrs.cssClass}`,
- m(
- Probe,
+ `.record-section${attrs.cssClass}`,
+ m(
+ Probe,
{
title: 'Callstack sampling',
img: 'rec_profiling.png',
@@ -67,6 +67,6 @@
},
get: (cfg) => cfg.targetCmdLine.join('\n'),
} as TextareaAttrs),
- ));
+ ));
}
}
diff --git a/ui/src/frontend/recording/memory_settings.ts b/ui/src/frontend/recording/memory_settings.ts
index 97c2bd1..3cd1c24 100644
--- a/ui/src/frontend/recording/memory_settings.ts
+++ b/ui/src/frontend/recording/memory_settings.ts
@@ -65,85 +65,85 @@
];
return m(
- `.${attrs.cssClass}`,
- m(Textarea, {
- title: 'Names or pids of the processes to track (required)',
- docsLink:
+ `.${attrs.cssClass}`,
+ m(Textarea, {
+ title: 'Names or pids of the processes to track (required)',
+ docsLink:
'https://perfetto.dev/docs/data-sources/native-heap-profiler#heapprofd-targets',
- placeholder: 'One per line, e.g.:\n' +
+ placeholder: 'One per line, e.g.:\n' +
'system_server\n' +
'com.google.android.apps.photos\n' +
'1503',
- set: (cfg, val) => cfg.hpProcesses = val,
- get: (cfg) => cfg.hpProcesses,
- } as TextareaAttrs),
- m(Slider, {
- title: 'Sampling interval',
- cssClass: '.thin',
- values: [
- /* eslint-disable no-multi-spaces */
- 0, 1, 2, 4, 8, 16, 32, 64,
- 128, 256, 512, 1024, 2048, 4096, 8192, 16384,
- 32768, 65536, 131072, 262144, 524288, 1048576,
- /* eslint-enable no-multi-spaces */
- ],
- unit: 'B',
- min: 0,
- set: (cfg, val) => cfg.hpSamplingIntervalBytes = val,
- get: (cfg) => cfg.hpSamplingIntervalBytes,
- } as SliderAttrs),
- m(Slider, {
- title: 'Continuous dumps interval ',
- description: 'Time between following dumps (0 = disabled)',
- cssClass: '.thin',
- values: valuesForMS,
- unit: 'ms',
- min: 0,
- set: (cfg, val) => {
- cfg.hpContinuousDumpsInterval = val;
- },
- get: (cfg) => cfg.hpContinuousDumpsInterval,
- } as SliderAttrs),
- m(Slider, {
- title: 'Continuous dumps phase',
- description: 'Time before first dump',
- cssClass: `.thin${
- globals.state.recordConfig.hpContinuousDumpsInterval === 0 ?
- '.greyed-out' :
- ''}`,
- values: valuesForMS,
- unit: 'ms',
- min: 0,
- disabled: globals.state.recordConfig.hpContinuousDumpsInterval === 0,
- set: (cfg, val) => cfg.hpContinuousDumpsPhase = val,
- get: (cfg) => cfg.hpContinuousDumpsPhase,
- } as SliderAttrs),
- m(Slider, {
- title: `Shared memory buffer`,
- cssClass: '.thin',
- values: valuesForShMemBuff.filter(
- (value) => value === 0 || value >= 8192 && value % 4096 === 0),
- unit: 'B',
- min: 0,
- set: (cfg, val) => cfg.hpSharedMemoryBuffer = val,
- get: (cfg) => cfg.hpSharedMemoryBuffer,
- } as SliderAttrs),
- m(Toggle, {
- title: 'Block client',
- cssClass: '.thin',
- descr: `Slow down target application if profiler cannot keep up.`,
- setEnabled: (cfg, val) => cfg.hpBlockClient = val,
- isEnabled: (cfg) => cfg.hpBlockClient,
- } as ToggleAttrs),
- m(Toggle, {
- title: 'All custom allocators (Q+)',
- cssClass: '.thin',
- descr: `If the target application exposes custom allocators, also
+ set: (cfg, val) => cfg.hpProcesses = val,
+ get: (cfg) => cfg.hpProcesses,
+ } as TextareaAttrs),
+ m(Slider, {
+ title: 'Sampling interval',
+ cssClass: '.thin',
+ values: [
+ /* eslint-disable no-multi-spaces */
+ 0, 1, 2, 4, 8, 16, 32, 64,
+ 128, 256, 512, 1024, 2048, 4096, 8192, 16384,
+ 32768, 65536, 131072, 262144, 524288, 1048576,
+ /* eslint-enable no-multi-spaces */
+ ],
+ unit: 'B',
+ min: 0,
+ set: (cfg, val) => cfg.hpSamplingIntervalBytes = val,
+ get: (cfg) => cfg.hpSamplingIntervalBytes,
+ } as SliderAttrs),
+ m(Slider, {
+ title: 'Continuous dumps interval ',
+ description: 'Time between following dumps (0 = disabled)',
+ cssClass: '.thin',
+ values: valuesForMS,
+ unit: 'ms',
+ min: 0,
+ set: (cfg, val) => {
+ cfg.hpContinuousDumpsInterval = val;
+ },
+ get: (cfg) => cfg.hpContinuousDumpsInterval,
+ } as SliderAttrs),
+ m(Slider, {
+ title: 'Continuous dumps phase',
+ description: 'Time before first dump',
+ cssClass: `.thin${
+ globals.state.recordConfig.hpContinuousDumpsInterval === 0 ?
+ '.greyed-out' :
+ ''}`,
+ values: valuesForMS,
+ unit: 'ms',
+ min: 0,
+ disabled: globals.state.recordConfig.hpContinuousDumpsInterval === 0,
+ set: (cfg, val) => cfg.hpContinuousDumpsPhase = val,
+ get: (cfg) => cfg.hpContinuousDumpsPhase,
+ } as SliderAttrs),
+ m(Slider, {
+ title: `Shared memory buffer`,
+ cssClass: '.thin',
+ values: valuesForShMemBuff.filter(
+ (value) => value === 0 || value >= 8192 && value % 4096 === 0),
+ unit: 'B',
+ min: 0,
+ set: (cfg, val) => cfg.hpSharedMemoryBuffer = val,
+ get: (cfg) => cfg.hpSharedMemoryBuffer,
+ } as SliderAttrs),
+ m(Toggle, {
+ title: 'Block client',
+ cssClass: '.thin',
+ descr: `Slow down target application if profiler cannot keep up.`,
+ setEnabled: (cfg, val) => cfg.hpBlockClient = val,
+ isEnabled: (cfg) => cfg.hpBlockClient,
+ } as ToggleAttrs),
+ m(Toggle, {
+ title: 'All custom allocators (Q+)',
+ cssClass: '.thin',
+ descr: `If the target application exposes custom allocators, also
sample from those.`,
- setEnabled: (cfg, val) => cfg.hpAllHeaps = val,
- isEnabled: (cfg) => cfg.hpAllHeaps,
- } as ToggleAttrs),
- // TODO(hjd): Add advanced options.
+ setEnabled: (cfg, val) => cfg.hpAllHeaps = val,
+ isEnabled: (cfg) => cfg.hpAllHeaps,
+ } as ToggleAttrs),
+ // TODO(hjd): Add advanced options.
);
}
}
@@ -163,41 +163,41 @@
];
return m(
- `.${attrs.cssClass}`,
- m(Textarea, {
- title: 'Names or pids of the processes to track (required)',
- placeholder: 'One per line, e.g.:\n' +
+ `.${attrs.cssClass}`,
+ m(Textarea, {
+ title: 'Names or pids of the processes to track (required)',
+ placeholder: 'One per line, e.g.:\n' +
'com.android.vending\n' +
'1503',
- set: (cfg, val) => cfg.jpProcesses = val,
- get: (cfg) => cfg.jpProcesses,
- } as TextareaAttrs),
- m(Slider, {
- title: 'Continuous dumps interval ',
- description: 'Time between following dumps (0 = disabled)',
- cssClass: '.thin',
- values: valuesForMS,
- unit: 'ms',
- min: 0,
- set: (cfg, val) => {
- cfg.jpContinuousDumpsInterval = val;
- },
- get: (cfg) => cfg.jpContinuousDumpsInterval,
- } as SliderAttrs),
- m(Slider, {
- title: 'Continuous dumps phase',
- description: 'Time before first dump',
- cssClass: `.thin${
- globals.state.recordConfig.jpContinuousDumpsInterval === 0 ?
- '.greyed-out' :
- ''}`,
- values: valuesForMS,
- unit: 'ms',
- min: 0,
- disabled: globals.state.recordConfig.jpContinuousDumpsInterval === 0,
- set: (cfg, val) => cfg.jpContinuousDumpsPhase = val,
- get: (cfg) => cfg.jpContinuousDumpsPhase,
- } as SliderAttrs),
+ set: (cfg, val) => cfg.jpProcesses = val,
+ get: (cfg) => cfg.jpProcesses,
+ } as TextareaAttrs),
+ m(Slider, {
+ title: 'Continuous dumps interval ',
+ description: 'Time between following dumps (0 = disabled)',
+ cssClass: '.thin',
+ values: valuesForMS,
+ unit: 'ms',
+ min: 0,
+ set: (cfg, val) => {
+ cfg.jpContinuousDumpsInterval = val;
+ },
+ get: (cfg) => cfg.jpContinuousDumpsInterval,
+ } as SliderAttrs),
+ m(Slider, {
+ title: 'Continuous dumps phase',
+ description: 'Time before first dump',
+ cssClass: `.thin${
+ globals.state.recordConfig.jpContinuousDumpsInterval === 0 ?
+ '.greyed-out' :
+ ''}`,
+ values: valuesForMS,
+ unit: 'ms',
+ min: 0,
+ disabled: globals.state.recordConfig.jpContinuousDumpsInterval === 0,
+ set: (cfg, val) => cfg.jpContinuousDumpsPhase = val,
+ get: (cfg) => cfg.jpContinuousDumpsPhase,
+ } as SliderAttrs),
);
}
}
@@ -219,8 +219,8 @@
}
}
return m(
- `.record-section${attrs.cssClass}`,
- m(Probe,
+ `.record-section${attrs.cssClass}`,
+ m(Probe,
{
title: 'Native heap profiling',
img: 'rec_native_heap_profiler.png',
@@ -230,7 +230,7 @@
isEnabled: (cfg) => cfg.heapProfiling,
} as ProbeAttrs,
m(HeapSettings, attrs)),
- m(Probe,
+ m(Probe,
{
title: 'Java heap dumps',
img: 'rec_java_heap_dump.png',
@@ -240,7 +240,7 @@
isEnabled: (cfg) => cfg.javaHeapDump,
} as ProbeAttrs,
m(JavaHeapDumpSettings, attrs)),
- m(Probe,
+ m(Probe,
{
title: 'Kernel meminfo',
img: 'rec_meminfo.png',
@@ -263,25 +263,25 @@
set: (cfg, val) => cfg.meminfoCounters = val,
get: (cfg) => cfg.meminfoCounters,
} as DropdownAttrs)),
- m(Probe, {
- title: 'High-frequency memory events',
- img: 'rec_mem_hifreq.png',
- descr: `Allows to track short memory spikes and transitories through
+ m(Probe, {
+ title: 'High-frequency memory events',
+ img: 'rec_mem_hifreq.png',
+ descr: `Allows to track short memory spikes and transitories through
ftrace's mm_event, rss_stat and ion events. Available only
on recent Android Q+ kernels`,
- setEnabled: (cfg, val) => cfg.memHiFreq = val,
- isEnabled: (cfg) => cfg.memHiFreq,
- } as ProbeAttrs),
- m(Probe, {
- title: 'Low memory killer',
- img: 'rec_lmk.png',
- descr: `Record LMK events. Works both with the old in-kernel LMK
+ setEnabled: (cfg, val) => cfg.memHiFreq = val,
+ isEnabled: (cfg) => cfg.memHiFreq,
+ } as ProbeAttrs),
+ m(Probe, {
+ title: 'Low memory killer',
+ img: 'rec_lmk.png',
+ descr: `Record LMK events. Works both with the old in-kernel LMK
and the newer userspace lmkd. It also tracks OOM score
adjustments.`,
- setEnabled: (cfg, val) => cfg.memLmk = val,
- isEnabled: (cfg) => cfg.memLmk,
- } as ProbeAttrs),
- m(Probe,
+ setEnabled: (cfg, val) => cfg.memLmk = val,
+ isEnabled: (cfg) => cfg.memLmk,
+ } as ProbeAttrs),
+ m(Probe,
{
title: 'Per process stats',
img: 'rec_ps_stats.png',
@@ -299,7 +299,7 @@
set: (cfg, val) => cfg.procStatsPeriodMs = val,
get: (cfg) => cfg.procStatsPeriodMs,
} as SliderAttrs)),
- m(Probe,
+ m(Probe,
{
title: 'Virtual memory stats',
img: 'rec_vmstat.png',
diff --git a/ui/src/frontend/recording/power_settings.ts b/ui/src/frontend/recording/power_settings.ts
index a502bc6..f313072 100644
--- a/ui/src/frontend/recording/power_settings.ts
+++ b/ui/src/frontend/recording/power_settings.ts
@@ -23,26 +23,26 @@
const DOC_URL = 'https://perfetto.dev/docs/data-sources/battery-counters';
const descr =
[m('div',
- m('span', `Polls charge counters and instantaneous power draw from
+ m('span', `Polls charge counters and instantaneous power draw from
the battery power management IC and the power rails from
the PowerStats HAL (`),
- m('a', {href: DOC_URL, target: '_blank'}, 'see docs for more'),
- m('span', ')'))];
+ m('a', {href: DOC_URL, target: '_blank'}, 'see docs for more'),
+ m('span', ')'))];
if (globals.isInternalUser) {
descr.push(m(
- 'div',
- m('span', 'Googlers: See '),
- m('a',
- {href: 'http://go/power-rails-internal-doc', target: '_blank'},
- 'this doc'),
- m('span',
- ` for instructions on how to change the default rail selection
+ 'div',
+ m('span', 'Googlers: See '),
+ m('a',
+ {href: 'http://go/power-rails-internal-doc', target: '_blank'},
+ 'this doc'),
+ m('span',
+ ` for instructions on how to change the default rail selection
on internal devices.`),
- ));
+ ));
}
return m(
- `.record-section${attrs.cssClass}`,
- m(Probe,
+ `.record-section${attrs.cssClass}`,
+ m(Probe,
{
title: 'Battery drain & power rails',
img: 'rec_battery_counters.png',
@@ -58,12 +58,12 @@
set: (cfg, val) => cfg.batteryDrainPollMs = val,
get: (cfg) => cfg.batteryDrainPollMs,
} as SliderAttrs)),
- m(Probe, {
- title: 'Board voltages & frequencies',
- img: 'rec_board_voltage.png',
- descr: 'Tracks voltage and frequency changes from board sensors',
- setEnabled: (cfg, val) => cfg.boardSensors = val,
- isEnabled: (cfg) => cfg.boardSensors,
- } as ProbeAttrs));
+ m(Probe, {
+ title: 'Board voltages & frequencies',
+ img: 'rec_board_voltage.png',
+ descr: 'Tracks voltage and frequency changes from board sensors',
+ setEnabled: (cfg, val) => cfg.boardSensors = val,
+ isEnabled: (cfg) => cfg.boardSensors,
+ } as ProbeAttrs));
}
}
diff --git a/ui/src/frontend/recording/recording_multiple_choice.ts b/ui/src/frontend/recording/recording_multiple_choice.ts
index 550079e..e24de04 100644
--- a/ui/src/frontend/recording/recording_multiple_choice.ts
+++ b/ui/src/frontend/recording/recording_multiple_choice.ts
@@ -38,8 +38,8 @@
private selectedIndex: number = -1;
targetSelection(
- targets: RecordingTargetV2[],
- controller: RecordingPageController): m.Vnode|undefined {
+ targets: RecordingTargetV2[],
+ controller: RecordingPageController): m.Vnode|undefined {
const targetInfo = controller.getTargetInfo();
const targetNames = [];
this.selectedIndex = -1;
@@ -53,30 +53,30 @@
const selectedIndex = this.selectedIndex;
return m(
- 'label',
- m('select',
- {
- selectedIndex,
- onchange: (e: Event) => {
- controller.onTargetSelection(
- (e.target as HTMLSelectElement).value);
- },
- onupdate: (select) => {
- // Work around mithril bug
- // (https://github.com/MithrilJS/mithril.js/issues/2107): We
- // may update the select's options while also changing the
- // selectedIndex at the same time. The update of selectedIndex
- // may be applied before the new options are added to the
- // select element. Because the new selectedIndex may be
- // outside of the select's options at that time, we have to
- // reselect the correct index here after any new children were
- // added.
- (select.dom as HTMLSelectElement).selectedIndex =
- this.selectedIndex;
- },
- ...{size: targets.length, multiple: 'multiple'},
+ 'label',
+ m('select',
+ {
+ selectedIndex,
+ onchange: (e: Event) => {
+ controller.onTargetSelection(
+ (e.target as HTMLSelectElement).value);
},
- ...targetNames),
+ onupdate: (select) => {
+ // Work around mithril bug
+ // (https://github.com/MithrilJS/mithril.js/issues/2107): We
+ // may update the select's options while also changing the
+ // selectedIndex at the same time. The update of selectedIndex
+ // may be applied before the new options are added to the
+ // select element. Because the new selectedIndex may be
+ // outside of the select's options at that time, we have to
+ // reselect the correct index here after any new children were
+ // added.
+ (select.dom as HTMLSelectElement).selectedIndex =
+ this.selectedIndex;
+ },
+ ...{size: targets.length, multiple: 'multiple'},
+ },
+ ...targetNames),
);
}
diff --git a/ui/src/frontend/recording/recording_settings.ts b/ui/src/frontend/recording/recording_settings.ts
index 07d99f6..5ea1c1d 100644
--- a/ui/src/frontend/recording/recording_settings.ts
+++ b/ui/src/frontend/recording/recording_settings.ts
@@ -44,55 +44,55 @@
},
};
return m(
- `label${cfg.mode === mode ? '.selected' : ''}`,
- m(`input[type=radio][name=rec_mode]`, checkboxArgs),
- m(`img[src=${globals.root}assets/${img}]`),
- m('span', title));
+ `label${cfg.mode === mode ? '.selected' : ''}`,
+ m(`input[type=radio][name=rec_mode]`, checkboxArgs),
+ m(`img[src=${globals.root}assets/${img}]`),
+ m('span', title));
};
return m(
- `.record-section${attrs.cssClass}`,
- m('header', 'Recording mode'),
- m('.record-mode',
- recButton('STOP_WHEN_FULL', 'Stop when full', 'rec_one_shot.png'),
- recButton('RING_BUFFER', 'Ring buffer', 'rec_ring_buf.png'),
- recButton('LONG_TRACE', 'Long trace', 'rec_long_trace.png')),
+ `.record-section${attrs.cssClass}`,
+ m('header', 'Recording mode'),
+ m('.record-mode',
+ recButton('STOP_WHEN_FULL', 'Stop when full', 'rec_one_shot.png'),
+ recButton('RING_BUFFER', 'Ring buffer', 'rec_ring_buf.png'),
+ recButton('LONG_TRACE', 'Long trace', 'rec_long_trace.png')),
- m(Slider, {
- title: 'In-memory buffer size',
- icon: '360',
- values: [4, 8, 16, 32, 64, 128, 256, 512],
- unit: 'MB',
- set: (cfg, val) => cfg.bufferSizeMb = val,
- get: (cfg) => cfg.bufferSizeMb,
- } as SliderAttrs),
+ m(Slider, {
+ title: 'In-memory buffer size',
+ icon: '360',
+ values: [4, 8, 16, 32, 64, 128, 256, 512],
+ unit: 'MB',
+ set: (cfg, val) => cfg.bufferSizeMb = val,
+ get: (cfg) => cfg.bufferSizeMb,
+ } as SliderAttrs),
- m(Slider, {
- title: 'Max duration',
- icon: 'timer',
- values: [S(10), S(15), S(30), S(60), M(5), M(30), H(1), H(6), H(12)],
- isTime: true,
- unit: 'h:m:s',
- set: (cfg, val) => cfg.durationMs = val,
- get: (cfg) => cfg.durationMs,
- } as SliderAttrs),
- m(Slider, {
- title: 'Max file size',
- icon: 'save',
- cssClass: cfg.mode !== 'LONG_TRACE' ? '.hide' : '',
- values: [5, 25, 50, 100, 500, 1000, 1000 * 5, 1000 * 10],
- unit: 'MB',
- set: (cfg, val) => cfg.maxFileSizeMb = val,
- get: (cfg) => cfg.maxFileSizeMb,
- } as SliderAttrs),
- m(Slider, {
- title: 'Flush on disk every',
- cssClass: cfg.mode !== 'LONG_TRACE' ? '.hide' : '',
- icon: 'av_timer',
- values: [100, 250, 500, 1000, 2500, 5000],
- unit: 'ms',
- set: (cfg, val) => cfg.fileWritePeriodMs = val,
- get: (cfg) => cfg.fileWritePeriodMs || 0,
- } as SliderAttrs));
+ m(Slider, {
+ title: 'Max duration',
+ icon: 'timer',
+ values: [S(10), S(15), S(30), S(60), M(5), M(30), H(1), H(6), H(12)],
+ isTime: true,
+ unit: 'h:m:s',
+ set: (cfg, val) => cfg.durationMs = val,
+ get: (cfg) => cfg.durationMs,
+ } as SliderAttrs),
+ m(Slider, {
+ title: 'Max file size',
+ icon: 'save',
+ cssClass: cfg.mode !== 'LONG_TRACE' ? '.hide' : '',
+ values: [5, 25, 50, 100, 500, 1000, 1000 * 5, 1000 * 10],
+ unit: 'MB',
+ set: (cfg, val) => cfg.maxFileSizeMb = val,
+ get: (cfg) => cfg.maxFileSizeMb,
+ } as SliderAttrs),
+ m(Slider, {
+ title: 'Flush on disk every',
+ cssClass: cfg.mode !== 'LONG_TRACE' ? '.hide' : '',
+ icon: 'av_timer',
+ values: [100, 250, 500, 1000, 2500, 5000],
+ unit: 'ms',
+ set: (cfg, val) => cfg.fileWritePeriodMs = val,
+ get: (cfg) => cfg.fileWritePeriodMs || 0,
+ } as SliderAttrs));
}
}
diff --git a/ui/src/frontend/recording/reset_interface_modal.ts b/ui/src/frontend/recording/reset_interface_modal.ts
index 15d22bb..d67ae18 100644
--- a/ui/src/frontend/recording/reset_interface_modal.ts
+++ b/ui/src/frontend/recording/reset_interface_modal.ts
@@ -19,22 +19,22 @@
import {FORCE_RESET_MESSAGE} from './recording_ui_utils';
export function couldNotClaimInterface(
- onReset: () => Promise<void>, onCancel: () => void) {
+ onReset: () => Promise<void>, onCancel: () => void) {
let hasPressedAButton = false;
showModal({
title: 'Could not claim the USB interface',
content: m(
- 'div',
- m('text',
- 'This can happen if you have the Android Debug Bridge ' +
+ 'div',
+ m('text',
+ 'This can happen if you have the Android Debug Bridge ' +
'(adb) running on your workstation or any other tool which is ' +
'taking exclusive access of the USB interface.'),
- m('br'),
- m('br'),
- m('text.small-font',
- 'Resetting will cause the ADB server to disconnect and ' +
+ m('br'),
+ m('br'),
+ m('text.small-font',
+ 'Resetting will cause the ADB server to disconnect and ' +
'will try to reassign the interface to the current browser.'),
- ),
+ ),
buttons: [
{
text: FORCE_RESET_MESSAGE,
diff --git a/ui/src/frontend/recording/reset_target_modal.ts b/ui/src/frontend/recording/reset_target_modal.ts
index 32b94d9..e5d1a9f 100644
--- a/ui/src/frontend/recording/reset_target_modal.ts
+++ b/ui/src/frontend/recording/reset_target_modal.ts
@@ -52,69 +52,69 @@
title: 'Add new recording target',
key: RECORDING_MODAL_DIALOG_KEY,
content: () => m(
- '.record-modal',
- m('text', 'Select platform:'),
- assembleWebusbSection(controller),
- m('.line'),
- assembleWebsocketSection(controller),
- m('.line'),
- assembleChromeSection(controller),
- ),
+ '.record-modal',
+ m('text', 'Select platform:'),
+ assembleWebusbSection(controller),
+ m('.line'),
+ assembleWebsocketSection(controller),
+ m('.line'),
+ assembleChromeSection(controller),
+ ),
});
}
function assembleWebusbSection(
- recordingPageController: RecordingPageController): m.Vnode {
+ recordingPageController: RecordingPageController): m.Vnode {
return m(
- '.record-modal-section',
- m('.logo-wrapping', m('i.material-icons', 'usb')),
- m('.record-modal-description',
- m('h3', 'Android device over WebUSB'),
- m('text',
- 'Android developers: this option cannot co-operate ' +
+ '.record-modal-section',
+ m('.logo-wrapping', m('i.material-icons', 'usb')),
+ m('.record-modal-description',
+ m('h3', 'Android device over WebUSB'),
+ m('text',
+ 'Android developers: this option cannot co-operate ' +
'with the adb host on your machine. Only one entity between ' +
'the browser and adb can control the USB endpoint. If adb is ' +
'running, you will be prompted to re-assign the device to the ' +
'browser. Use the websocket option below to use both ' +
'simultaneously.'),
- m('.record-modal-button',
- {
- onclick: () => {
- closeModal(RECORDING_MODAL_DIALOG_KEY);
- recordingPageController.addAndroidDevice();
- },
+ m('.record-modal-button',
+ {
+ onclick: () => {
+ closeModal(RECORDING_MODAL_DIALOG_KEY);
+ recordingPageController.addAndroidDevice();
},
- 'Connect new WebUSB driver')));
+ },
+ 'Connect new WebUSB driver')));
}
function assembleWebsocketSection(
- recordingPageController: RecordingPageController): m.Vnode {
+ recordingPageController: RecordingPageController): m.Vnode {
const websocketComponents = [];
websocketComponents.push(
- m('h3', 'Android / Linux / MacOS device via Websocket'));
+ m('h3', 'Android / Linux / MacOS device via Websocket'));
websocketComponents.push(
- m('text',
- 'This option assumes that the adb server is already ' +
+ m('text',
+ 'This option assumes that the adb server is already ' +
'running on your machine.'),
- m('.record-modal-command', m(CodeSnippet, {
- text: RUN_WEBSOCKET_CMD,
- })));
+ m('.record-modal-command', m(CodeSnippet, {
+ text: RUN_WEBSOCKET_CMD,
+ })));
websocketComponents.push(m(
- '.record-modal-command',
- m('text', 'Websocket bridge address: '),
- m('input[type=text]', {
- value: websocketMenuController.getPath(),
- oninput() {
- websocketMenuController.setPath(this.value);
- },
- }),
- m('.record-modal-logo-button',
- {
- onclick: () => websocketMenuController.onPathChange(),
- },
- m('i.material-icons', 'refresh')),
- ));
+ '.record-modal-command',
+ m('text', 'Websocket bridge address: '),
+ m('input[type=text]', {
+ value: websocketMenuController.getPath(),
+ oninput() {
+ websocketMenuController.setPath(this.value);
+ },
+ }),
+ m('.record-modal-logo-button',
+ {
+ onclick: () => websocketMenuController.onPathChange(),
+ },
+ m('i.material-icons', 'refresh')),
+ ));
websocketComponents.push(m(RecordingMultipleChoice, {
controller: recordingPageController,
@@ -122,13 +122,13 @@
}));
return m(
- '.record-modal-section',
- m('.logo-wrapping', m('i.material-icons', 'settings_ethernet')),
- m('.record-modal-description', ...websocketComponents));
+ '.record-modal-section',
+ m('.logo-wrapping', m('i.material-icons', 'settings_ethernet')),
+ m('.record-modal-description', ...websocketComponents));
}
function assembleChromeSection(
- recordingPageController: RecordingPageController): m.Vnode|undefined {
+ recordingPageController: RecordingPageController): m.Vnode|undefined {
if (!targetFactoryRegistry.has(CHROME_TARGET_FACTORY)) {
return undefined;
}
@@ -141,10 +141,10 @@
if (!chromeFactory.isExtensionInstalled) {
chromeComponents.push(
- m('text',
- 'Install the extension ',
- m('a', {href: EXTENSION_URL, target: '_blank'}, 'from this link '),
- 'and refresh the page.'));
+ m('text',
+ 'Install the extension ',
+ m('a', {href: EXTENSION_URL, target: '_blank'}, 'from this link '),
+ 'and refresh the page.'));
} else {
chromeComponents.push(m(RecordingMultipleChoice, {
controller: recordingPageController,
@@ -153,9 +153,9 @@
}
return m(
- '.record-modal-section',
- m('.logo-wrapping', m('i.material-icons', 'web')),
- m('.record-modal-description', ...chromeComponents));
+ '.record-modal-section',
+ m('.logo-wrapping', m('i.material-icons', 'web')),
+ m('.record-modal-description', ...chromeComponents));
}
const websocketMenuController = new WebsocketMenuController();
diff --git a/ui/src/frontend/reorderable_cells.ts b/ui/src/frontend/reorderable_cells.ts
index 77f9760..3b227ad 100644
--- a/ui/src/frontend/reorderable_cells.ts
+++ b/ui/src/frontend/reorderable_cells.ts
@@ -58,91 +58,91 @@
}
if (this.draggingTo === index) {
return this.dropDirection === 'left' ? 'highlight-left' :
- 'highlight-right';
+ 'highlight-right';
}
return '';
}
view(vnode: m.Vnode<ReorderableCellGroupAttrs>): m.Children {
return vnode.attrs.cells.map(
- (cell, index) => m(
- `td.reorderable-cell${cell.extraClass ?? ''}`,
- {
- draggable: 'draggable',
- class: this.getClassForIndex(index),
- ondragstart: (e: DragEvent) => {
- this.draggingFrom = index;
- if (e.dataTransfer !== null) {
- e.dataTransfer.setDragImage(placeholderElement, 0, 0);
- }
+ (cell, index) => m(
+ `td.reorderable-cell${cell.extraClass ?? ''}`,
+ {
+ draggable: 'draggable',
+ class: this.getClassForIndex(index),
+ ondragstart: (e: DragEvent) => {
+ this.draggingFrom = index;
+ if (e.dataTransfer !== null) {
+ e.dataTransfer.setDragImage(placeholderElement, 0, 0);
+ }
- raf.scheduleFullRedraw();
- },
- ondragover: (e: DragEvent) => {
- let target = e.target as HTMLElement;
- if (this.draggingFrom === index || this.draggingFrom === -1) {
- // Don't do anything when hovering on the same cell that's
- // been dragged, or when dragging something other than the
- // cell from the same group
- return;
- }
+ raf.scheduleFullRedraw();
+ },
+ ondragover: (e: DragEvent) => {
+ let target = e.target as HTMLElement;
+ if (this.draggingFrom === index || this.draggingFrom === -1) {
+ // Don't do anything when hovering on the same cell that's
+ // been dragged, or when dragging something other than the
+ // cell from the same group
+ return;
+ }
- while (target.tagName.toLowerCase() !== 'td' &&
+ while (target.tagName.toLowerCase() !== 'td' &&
target.parentElement !== null) {
- target = target.parentElement;
- }
+ target = target.parentElement;
+ }
- // When hovering over cell on the right half, the cell will be
- // moved to the right of it, vice versa for the left side. This
- // is done such that it's possible to put dragged cell to every
- // possible position.
- const offset = e.clientX - target.getBoundingClientRect().x;
- const newDropDirection =
+ // When hovering over cell on the right half, the cell will be
+ // moved to the right of it, vice versa for the left side. This
+ // is done such that it's possible to put dragged cell to every
+ // possible position.
+ const offset = e.clientX - target.getBoundingClientRect().x;
+ const newDropDirection =
(offset > target.clientWidth / 2) ? 'right' : 'left';
- const redraw = (newDropDirection !== this.dropDirection) ||
+ const redraw = (newDropDirection !== this.dropDirection) ||
(index !== this.draggingTo);
- this.dropDirection = newDropDirection;
- this.draggingTo = index;
+ this.dropDirection = newDropDirection;
+ this.draggingTo = index;
- if (redraw) {
- raf.scheduleFullRedraw();
- }
- },
- ondragenter: (e: DragEvent) => {
- this.enterCounters[index]++;
+ if (redraw) {
+ raf.scheduleFullRedraw();
+ }
+ },
+ ondragenter: (e: DragEvent) => {
+ this.enterCounters[index]++;
- if (this.enterCounters[index] === 1 &&
+ if (this.enterCounters[index] === 1 &&
e.dataTransfer !== null) {
- e.dataTransfer.dropEffect = 'move';
- }
- },
- ondragleave: (e: DragEvent) => {
- this.enterCounters[index]--;
- if (this.draggingFrom === -1 || this.enterCounters[index] > 0) {
- return;
- }
+ e.dataTransfer.dropEffect = 'move';
+ }
+ },
+ ondragleave: (e: DragEvent) => {
+ this.enterCounters[index]--;
+ if (this.draggingFrom === -1 || this.enterCounters[index] > 0) {
+ return;
+ }
- if (e.dataTransfer !== null) {
- e.dataTransfer.dropEffect = 'none';
- }
+ if (e.dataTransfer !== null) {
+ e.dataTransfer.dropEffect = 'none';
+ }
- this.draggingTo = -1;
- raf.scheduleFullRedraw();
- },
- ondragend: () => {
- if (this.draggingTo !== this.draggingFrom &&
+ this.draggingTo = -1;
+ raf.scheduleFullRedraw();
+ },
+ ondragend: () => {
+ if (this.draggingTo !== this.draggingFrom &&
this.draggingTo !== -1) {
- vnode.attrs.onReorder(
- this.draggingFrom, this.draggingTo, this.dropDirection);
- }
+ vnode.attrs.onReorder(
+ this.draggingFrom, this.draggingTo, this.dropDirection);
+ }
- this.draggingFrom = -1;
- this.draggingTo = -1;
- raf.scheduleFullRedraw();
- },
- },
- cell.content));
+ this.draggingFrom = -1;
+ this.draggingTo = -1;
+ raf.scheduleFullRedraw();
+ },
+ },
+ cell.content));
}
oncreate(vnode: m.VnodeDOM<ReorderableCellGroupAttrs, this>) {
diff --git a/ui/src/frontend/rpc_http_dialog.ts b/ui/src/frontend/rpc_http_dialog.ts
index 6964e42..7e03fdf 100644
--- a/ui/src/frontend/rpc_http_dialog.ts
+++ b/ui/src/frontend/rpc_http_dialog.ts
@@ -103,14 +103,14 @@
content:
m('.modal-pre',
MSG_TOO_OLD.replace('$tpVersion', tpStatus.humanReadableVersion)
- .replace('$tpApi', `${tpStatus.apiVersion}`)),
+ .replace('$tpApi', `${tpStatus.apiVersion}`)),
buttons: [
{
text: 'Use builtin Wasm',
primary: true,
action: () => {
globals.dispatch(
- Actions.setNewEngineMode({mode: 'FORCE_BUILTIN_WASM'}));
+ Actions.setNewEngineMode({mode: 'FORCE_BUILTIN_WASM'}));
},
},
{
@@ -145,7 +145,7 @@
text: 'NO, Use builtin Wasm',
action: () => {
globals.dispatch(
- Actions.setNewEngineMode({mode: 'FORCE_BUILTIN_WASM'}));
+ Actions.setNewEngineMode({mode: 'FORCE_BUILTIN_WASM'}));
},
},
],
diff --git a/ui/src/frontend/scroll_helper.ts b/ui/src/frontend/scroll_helper.ts
index 4df9b14..ec95d36 100644
--- a/ui/src/frontend/scroll_helper.ts
+++ b/ui/src/frontend/scroll_helper.ts
@@ -33,7 +33,7 @@
const halfDuration = visibleWindow.duration.divide(2);
const newStart = time.sub(halfDuration);
const newWindow = new HighPrecisionTimeSpan(
- newStart, newStart.add(visibleWindow.duration));
+ newStart, newStart.add(visibleWindow.duration));
globals.timeline.updateVisibleTime(newWindow);
}
}
@@ -51,7 +51,7 @@
// to cover 1/5 of the viewport.
// - Otherwise, preserve the zoom range.
export function focusHorizontalRange(
- start: time, end: time, viewPercentage?: number) {
+ start: time, end: time, viewPercentage?: number) {
const visible = globals.timeline.visibleWindowTime;
const trace = globals.stateTraceTime();
const select = HighPrecisionTimeSpan.fromTime(start, end);
@@ -59,7 +59,7 @@
if (viewPercentage !== undefined) {
if (viewPercentage <= 0.0 || viewPercentage > 1.0) {
console.warn(
- 'Invalid value for [viewPercentage]. ' +
+ 'Invalid value for [viewPercentage]. ' +
'Value must be between 0.0 (exclusive) and 1.0 (inclusive).',
);
// Default to 50%.
@@ -109,7 +109,7 @@
// track is nested inside a track group, scroll to that track group instead.
// If |openGroup| then open the track group and scroll to the track.
export function verticalScrollToTrack(
- trackKey: string|number, openGroup = false) {
+ trackKey: string|number, openGroup = false) {
const trackKeyString = `${trackKey}`;
const track = document.querySelector('#track_' + trackKeyString);
@@ -146,7 +146,7 @@
// Scroll vertically and horizontally to reach track (|trackKey|) at |ts|.
export function scrollToTrackAndTs(
- trackKey: string|number|undefined, ts: time, openGroup = false) {
+ trackKey: string|number|undefined, ts: time, openGroup = false) {
if (trackKey !== undefined) {
verticalScrollToTrack(trackKey, openGroup);
}
@@ -155,7 +155,7 @@
// Scroll vertically and horizontally to a track and time range
export function reveal(
- trackKey: string|number, start: time, end: time, openGroup = false) {
+ trackKey: string|number, start: time, end: time, openGroup = false) {
verticalScrollToTrack(trackKey, openGroup);
focusHorizontalRange(start, end);
}
diff --git a/ui/src/frontend/search_handler.ts b/ui/src/frontend/search_handler.ts
index 76dd4bf..60a4067 100644
--- a/ui/src/frontend/search_handler.ts
+++ b/ui/src/frontend/search_handler.ts
@@ -86,21 +86,21 @@
if (source === 'cpu') {
globals.makeSelection(
- Actions.selectSlice({id: currentId, trackKey, scroll: true}),
- {clearSearch: false},
+ Actions.selectSlice({id: currentId, trackKey, scroll: true}),
+ {clearSearch: false},
);
} else if (source === 'log') {
globals.makeSelection(
- Actions.selectLog({id: currentId, trackKey, scroll: true}),
- {clearSearch: false},
+ Actions.selectLog({id: currentId, trackKey, scroll: true}),
+ {clearSearch: false},
);
} else {
// Search results only include slices from the slice table for now.
// When we include annotations we need to pass the correct table.
globals.makeSelection(
- Actions.selectChromeSlice(
- {id: currentId, trackKey, table: 'slice', scroll: true}),
- {clearSearch: false},
+ Actions.selectChromeSlice(
+ {id: currentId, trackKey, table: 'slice', scroll: true}),
+ {clearSearch: false},
);
}
}
diff --git a/ui/src/frontend/sidebar.ts b/ui/src/frontend/sidebar.ts
index 2c0fe46..196c5ee 100644
--- a/ui/src/frontend/sidebar.ts
+++ b/ui/src/frontend/sidebar.ts
@@ -286,7 +286,7 @@
function getFileElement(): HTMLInputElement {
return assertExists(
- document.querySelector<HTMLInputElement>('input[type=file]'));
+ document.querySelector<HTMLInputElement>('input[type=file]'));
}
function popupFileSelectionDialog(e: Event) {
@@ -344,12 +344,12 @@
globals.logging.logEvent('Trace Actions', 'Open current trace in legacy UI');
if (!isTraceLoaded()) return;
getCurrentTrace()
- .then((file) => {
- openInOldUIWithSizeCheck(file);
- })
- .catch((error) => {
- throw new Error(`Failed to get current trace ${error}`);
- });
+ .then((file) => {
+ openInOldUIWithSizeCheck(file);
+ })
+ .catch((error) => {
+ throw new Error(`Failed to get current trace ${error}`);
+ });
}
function convertTraceToSystrace(e: Event) {
@@ -358,12 +358,12 @@
globals.logging.logEvent('Trace Actions', 'Convert to .systrace');
if (!isTraceLoaded()) return;
getCurrentTrace()
- .then((file) => {
- convertTraceToSystraceAndDownload(file);
- })
- .catch((error) => {
- throw new Error(`Failed to get current trace ${error}`);
- });
+ .then((file) => {
+ convertTraceToSystraceAndDownload(file);
+ })
+ .catch((error) => {
+ throw new Error(`Failed to get current trace ${error}`);
+ });
}
function convertTraceToJson(e: Event) {
@@ -372,12 +372,12 @@
globals.logging.logEvent('Trace Actions', 'Convert to .json');
if (!isTraceLoaded()) return;
getCurrentTrace()
- .then((file) => {
- convertTraceToJsonAndDownload(file);
- })
- .catch((error) => {
- throw new Error(`Failed to get current trace ${error}`);
- });
+ .then((file) => {
+ convertTraceToJsonAndDownload(file);
+ })
+ .catch((error) => {
+ throw new Error(`Failed to get current trace ${error}`);
+ });
}
export function isTraceLoaded(): boolean {
@@ -667,10 +667,10 @@
}
return m(
- `.dbg-info-square${cssClass}`,
- {title},
- m('div', label),
- m('div', `${failed ? 'FAIL' : globals.numQueuedQueries}`));
+ `.dbg-info-square${cssClass}`,
+ {title},
+ m('div', label),
+ m('div', `${failed ? 'FAIL' : globals.numQueuedQueries}`));
},
};
@@ -708,23 +708,23 @@
showModal({
title: 'Disable service worker?',
content: m(
- 'div',
- m('p', `If you continue the service worker will be disabled until
+ 'div',
+ m('p', `If you continue the service worker will be disabled until
manually re-enabled.`),
- m('p', `All future requests will be served from the network and the
+ m('p', `All future requests will be served from the network and the
UI won't be available offline.`),
- m('p', `You should do this only if you are debugging the UI
+ m('p', `You should do this only if you are debugging the UI
or if you are experiencing caching-related problems.`),
- m('p', `Disabling will cause a refresh of the UI, the current state
+ m('p', `Disabling will cause a refresh of the UI, the current state
will be lost.`),
- ),
+ ),
buttons: [
{
text: 'Disable and reload',
primary: true,
action: () => {
globals.serviceWorkerController.setBypass(true).then(
- () => location.reload());
+ () => location.reload());
},
},
{text: 'Cancel'},
@@ -733,29 +733,29 @@
};
return m(
- `.dbg-info-square${cssClass}`,
- {title, ondblclick: toggle},
- m('div', 'SW'),
- m('div', label));
+ `.dbg-info-square${cssClass}`,
+ {title, ondblclick: toggle},
+ m('div', 'SW'),
+ m('div', label));
},
};
const SidebarFooter: m.Component = {
view() {
return m(
- '.sidebar-footer',
- m(EngineRPCWidget),
- m(ServiceWorkerWidget),
- m(
- '.version',
- m('a',
- {
- href: `${GITILES_URL}/+/${SCM_REVISION}/ui`,
- title: `Channel: ${getCurrentChannel()}`,
- target: '_blank',
- },
- `${VERSION.substr(0, 11)}`),
- ),
+ '.sidebar-footer',
+ m(EngineRPCWidget),
+ m(ServiceWorkerWidget),
+ m(
+ '.version',
+ m('a',
+ {
+ href: `${GITILES_URL}/+/${SCM_REVISION}/ui`,
+ title: `Channel: ${getCurrentChannel()}`,
+ target: '_blank',
+ },
+ `${VERSION.substr(0, 11)}`),
+ ),
);
},
};
@@ -763,13 +763,13 @@
class HiringBanner implements m.ClassComponent {
view() {
return m(
- '.hiring-banner',
- m('a',
- {
- href: 'http://go/perfetto-open-roles',
- target: '_blank',
- },
- 'We\'re hiring!'));
+ '.hiring-banner',
+ m('a',
+ {
+ href: 'http://go/perfetto-open-roles',
+ target: '_blank',
+ },
+ 'We\'re hiring!'));
}
}
@@ -827,7 +827,7 @@
};
}
vdomItems.push(m(
- 'li', m(`a${css}`, attrs, m('i.material-icons', item.i), item.t)));
+ 'li', m(`a${css}`, attrs, m('i.material-icons', item.i), item.t)));
}
if (section.appendOpenedTraceTitle) {
const engine = globals.state.engine;
@@ -835,28 +835,28 @@
let traceTitle = '';
let traceUrl = '';
switch (engine.source.type) {
- case 'FILE':
- // Split on both \ and / (because C:\Windows\paths\are\like\this).
- traceTitle = engine.source.file.name.split(/[/\\]/).pop()!;
- const fileSizeMB = Math.ceil(engine.source.file.size / 1e6);
- traceTitle += ` (${fileSizeMB} MB)`;
- break;
- case 'URL':
- traceUrl = engine.source.url;
- traceTitle = traceUrl.split('/').pop()!;
- break;
- case 'ARRAY_BUFFER':
- traceTitle = engine.source.title;
- traceUrl = engine.source.url || '';
- const arrayBufferSizeMB =
+ case 'FILE':
+ // Split on both \ and / (because C:\Windows\paths\are\like\this).
+ traceTitle = engine.source.file.name.split(/[/\\]/).pop()!;
+ const fileSizeMB = Math.ceil(engine.source.file.size / 1e6);
+ traceTitle += ` (${fileSizeMB} MB)`;
+ break;
+ case 'URL':
+ traceUrl = engine.source.url;
+ traceTitle = traceUrl.split('/').pop()!;
+ break;
+ case 'ARRAY_BUFFER':
+ traceTitle = engine.source.title;
+ traceUrl = engine.source.url || '';
+ const arrayBufferSizeMB =
Math.ceil(engine.source.buffer.byteLength / 1e6);
- traceTitle += ` (${arrayBufferSizeMB} MB)`;
- break;
- case 'HTTP_RPC':
- traceTitle = 'External trace (RPC)';
- break;
- default:
- break;
+ traceTitle += ` (${arrayBufferSizeMB} MB)`;
+ break;
+ case 'HTTP_RPC':
+ traceTitle = 'External trace (RPC)';
+ break;
+ default:
+ break;
}
if (traceTitle !== '') {
const tabTitle = `${traceTitle} - Perfetto UI`;
@@ -868,59 +868,59 @@
}
}
vdomSections.push(
- m(`section${section.expanded ? '.expanded' : ''}`,
- m('.section-header',
- {
- onclick: () => {
- section.expanded = !section.expanded;
- raf.scheduleFullRedraw();
- },
+ m(`section${section.expanded ? '.expanded' : ''}`,
+ m('.section-header',
+ {
+ onclick: () => {
+ section.expanded = !section.expanded;
+ raf.scheduleFullRedraw();
},
- m('h1', {title: section.summary}, section.title),
- m('h2', section.summary)),
- m('.section-content', m('ul', vdomItems))));
+ },
+ m('h1', {title: section.summary}, section.title),
+ m('h2', section.summary)),
+ m('.section-content', m('ul', vdomItems))));
}
return m(
- 'nav.sidebar',
- {
- class: globals.state.sidebarVisible ? 'show-sidebar' : 'hide-sidebar',
- // 150 here matches --sidebar-timing in the css.
- // TODO(hjd): Should link to the CSS variable.
- ontransitionstart: (e: TransitionEvent) => {
- if (e.target !== e.currentTarget) return;
- this._redrawWhileAnimating.start(150);
- },
- ontransitionend: (e: TransitionEvent) => {
- if (e.target !== e.currentTarget) return;
- this._redrawWhileAnimating.stop();
- },
+ 'nav.sidebar',
+ {
+ class: globals.state.sidebarVisible ? 'show-sidebar' : 'hide-sidebar',
+ // 150 here matches --sidebar-timing in the css.
+ // TODO(hjd): Should link to the CSS variable.
+ ontransitionstart: (e: TransitionEvent) => {
+ if (e.target !== e.currentTarget) return;
+ this._redrawWhileAnimating.start(150);
},
- shouldShowHiringBanner() ? m(HiringBanner) : null,
+ ontransitionend: (e: TransitionEvent) => {
+ if (e.target !== e.currentTarget) return;
+ this._redrawWhileAnimating.stop();
+ },
+ },
+ shouldShowHiringBanner() ? m(HiringBanner) : null,
+ m(
+ `header.${getCurrentChannel()}`,
+ m(`img[src=${globals.root}assets/brand.png].brand`),
+ m('button.sidebar-button',
+ {
+ onclick: () => {
+ globals.commandManager.runCommand(
+ 'dev.perfetto.CoreCommands#ToggleLeftSidebar');
+ },
+ },
+ m('i.material-icons',
+ {
+ title: globals.state.sidebarVisible ? 'Hide menu' :
+ 'Show menu',
+ },
+ 'menu')),
+ ),
+ m('input.trace_file[type=file]',
+ {onchange: onInputElementFileSelectionChanged}),
+ m('.sidebar-scroll',
m(
- `header.${getCurrentChannel()}`,
- m(`img[src=${globals.root}assets/brand.png].brand`),
- m('button.sidebar-button',
- {
- onclick: () => {
- globals.commandManager.runCommand(
- 'dev.perfetto.CoreCommands#ToggleLeftSidebar');
- },
- },
- m('i.material-icons',
- {
- title: globals.state.sidebarVisible ? 'Hide menu' :
- 'Show menu',
- },
- 'menu')),
- ),
- m('input.trace_file[type=file]',
- {onchange: onInputElementFileSelectionChanged}),
- m('.sidebar-scroll',
- m(
- '.sidebar-scroll-container',
- ...vdomSections,
- m(SidebarFooter),
- )),
+ '.sidebar-scroll-container',
+ ...vdomSections,
+ m(SidebarFooter),
+ )),
);
}
}
diff --git a/ui/src/frontend/slice_args.ts b/ui/src/frontend/slice_args.ts
index 2dd028f..e206f41 100644
--- a/ui/src/frontend/slice_args.ts
+++ b/ui/src/frontend/slice_args.ts
@@ -53,7 +53,7 @@
}
function renderArgTreeNodes(
- engine: EngineProxy, args: ArgNode<Arg>[]): m.Children {
+ engine: EngineProxy, args: ArgNode<Arg>[]): m.Children {
return args.map((arg) => {
const {key, value, children} = arg;
if (children && children.length === 1) {
@@ -66,57 +66,57 @@
return renderArgTreeNodes(engine, [compositeArg]);
} else {
return m(
- TreeNode,
- {
- left: renderArgKey(engine, stringifyKey(key), value),
- right: exists(value) && renderArgValue(value),
- summary: children && renderSummary(children),
- },
- children && renderArgTreeNodes(engine, children),
+ TreeNode,
+ {
+ left: renderArgKey(engine, stringifyKey(key), value),
+ right: exists(value) && renderArgValue(value),
+ summary: children && renderSummary(children),
+ },
+ children && renderArgTreeNodes(engine, children),
);
}
});
}
function renderArgKey(
- engine: EngineProxy, key: string, value?: Arg): m.Children {
+ engine: EngineProxy, key: string, value?: Arg): m.Children {
if (value === undefined) {
return key;
} else {
const {key: fullKey, displayValue} = value;
return m(
- PopupMenu2,
- {trigger: m(Anchor, {icon: Icons.ContextMenu}, key)},
- m(MenuItem, {
- label: 'Copy full key',
- icon: 'content_copy',
- onclick: () => navigator.clipboard.writeText(fullKey),
- }),
- m(MenuItem, {
- label: 'Find slices with same arg value',
- icon: 'search',
- onclick: () => {
- addTab({
- kind: SqlTableTab.kind,
- config: {
- table: SqlTables.slice,
- filters: [{
- type: 'arg_filter',
- argSetIdColumn: 'arg_set_id',
- argName: fullKey,
- op: `= ${sqliteString(displayValue)}`,
- }],
- },
- });
- },
- }),
- m(MenuItem, {
- label: 'Visualise argument values',
- icon: 'query_stats',
- onclick: () => {
- addVisualisedArg(engine, fullKey);
- },
- }),
+ PopupMenu2,
+ {trigger: m(Anchor, {icon: Icons.ContextMenu}, key)},
+ m(MenuItem, {
+ label: 'Copy full key',
+ icon: 'content_copy',
+ onclick: () => navigator.clipboard.writeText(fullKey),
+ }),
+ m(MenuItem, {
+ label: 'Find slices with same arg value',
+ icon: 'search',
+ onclick: () => {
+ addTab({
+ kind: SqlTableTab.kind,
+ config: {
+ table: SqlTables.slice,
+ filters: [{
+ type: 'arg_filter',
+ argSetIdColumn: 'arg_set_id',
+ argName: fullKey,
+ op: `= ${sqliteString(displayValue)}`,
+ }],
+ },
+ });
+ },
+ }),
+ m(MenuItem, {
+ label: 'Visualise argument values',
+ icon: 'query_stats',
+ onclick: () => {
+ addVisualisedArg(engine, fullKey);
+ },
+ }),
);
}
}
@@ -179,8 +179,8 @@
trackGroup: track.trackGroup,
name: argName,
trackSortKey: utid === undefined ?
- track.trackSortKey :
- {utid, priority: InThreadTrackSortKey.VISUALISED_ARGS_TRACK},
+ track.trackSortKey :
+ {utid, priority: InThreadTrackSortKey.VISUALISED_ARGS_TRACK},
params,
uri: VISUALISED_ARGS_SLICE_TRACK_URI,
});
@@ -212,14 +212,14 @@
function stringifyKey(...key: Key[]): string {
return key
- .map((element, index) => {
- if (typeof element === 'number') {
- return `[${element}]`;
- } else {
- return (index === 0 ? '' : '.') + element;
- }
- })
- .join('');
+ .map((element, index) => {
+ if (typeof element === 'number') {
+ return `[${element}]`;
+ } else {
+ return (index === 0 ? '' : '.') + element;
+ }
+ })
+ .join('');
}
function isWebLink(value: unknown): value is string {
diff --git a/ui/src/frontend/slice_details.ts b/ui/src/frontend/slice_details.ts
index 310d55c..282ecc8 100644
--- a/ui/src/frontend/slice_details.ts
+++ b/ui/src/frontend/slice_details.ts
@@ -49,84 +49,84 @@
// Renders a widget storing all of the generic details for a slice from the
// slice table.
export function renderDetails(
- slice: SliceDetails, durationBreakdown?: BreakdownByThreadState) {
+ slice: SliceDetails, durationBreakdown?: BreakdownByThreadState) {
return m(
- Section,
- {title: 'Details'},
- m(
- Tree,
- m(TreeNode, {
- left: 'Name',
- right: m(
- PopupMenu2,
- {
- trigger: m(Anchor, slice.name),
+ Section,
+ {title: 'Details'},
+ m(
+ Tree,
+ m(TreeNode, {
+ left: 'Name',
+ right: m(
+ PopupMenu2,
+ {
+ trigger: m(Anchor, slice.name),
+ },
+ m(MenuItem, {
+ label: 'Slices with the same name',
+ onclick: () => {
+ addTab({
+ kind: SqlTableTab.kind,
+ config: {
+ table: SqlTables.slice,
+ displayName: 'slice',
+ filters: [`name = ${sqliteString(slice.name)}`],
},
- m(MenuItem, {
- label: 'Slices with the same name',
- onclick: () => {
- addTab({
- kind: SqlTableTab.kind,
- config: {
- table: SqlTables.slice,
- displayName: 'slice',
- filters: [`name = ${sqliteString(slice.name)}`],
- },
- });
- },
- }),
- ),
+ });
+ },
}),
- m(TreeNode, {
- left: 'Category',
- right: !slice.category || slice.category === '[NULL]' ?
- 'N/A' :
- slice.category,
- }),
- m(TreeNode, {
- left: 'Start time',
- right: m(Timestamp, {ts: slice.ts}),
- }),
- exists(slice.absTime) &&
+ ),
+ }),
+ m(TreeNode, {
+ left: 'Category',
+ right: !slice.category || slice.category === '[NULL]' ?
+ 'N/A' :
+ slice.category,
+ }),
+ m(TreeNode, {
+ left: 'Start time',
+ right: m(Timestamp, {ts: slice.ts}),
+ }),
+ exists(slice.absTime) &&
m(TreeNode, {left: 'Absolute Time', right: slice.absTime}),
- m(
- TreeNode,
- {
- left: 'Duration',
- right: computeDuration(slice.ts, slice.dur),
- },
- exists(durationBreakdown) && slice.dur > 0 &&
+ m(
+ TreeNode,
+ {
+ left: 'Duration',
+ right: computeDuration(slice.ts, slice.dur),
+ },
+ exists(durationBreakdown) && slice.dur > 0 &&
m(BreakdownByThreadStateTreeNode, {
data: durationBreakdown,
dur: slice.dur,
}),
- ),
- renderThreadDuration(slice),
- slice.thread && m(TreeNode, {
- left: 'Thread',
- right: getThreadName(slice.thread),
- }),
- slice.process && m(TreeNode, {
- left: 'Process',
- right: getProcessName(slice.process),
- }),
- slice.process && exists(slice.process.uid) && m(TreeNode, {
- left: 'User ID',
- right: slice.process.uid,
- }),
- slice.process && slice.process.packageName && m(TreeNode, {
- left: 'Package name',
- right: slice.process.packageName,
- }),
- slice.process && exists(slice.process.versionCode) && m(TreeNode, {
- left: 'Version code',
- right: slice.process.versionCode,
- }),
- m(TreeNode, {
- left: 'SQL ID',
- right: m(SqlRef, {table: 'slice', id: slice.id}),
- }),
- ));
+ ),
+ renderThreadDuration(slice),
+ slice.thread && m(TreeNode, {
+ left: 'Thread',
+ right: getThreadName(slice.thread),
+ }),
+ slice.process && m(TreeNode, {
+ left: 'Process',
+ right: getProcessName(slice.process),
+ }),
+ slice.process && exists(slice.process.uid) && m(TreeNode, {
+ left: 'User ID',
+ right: slice.process.uid,
+ }),
+ slice.process && slice.process.packageName && m(TreeNode, {
+ left: 'Package name',
+ right: slice.process.packageName,
+ }),
+ slice.process && exists(slice.process.versionCode) && m(TreeNode, {
+ left: 'Version code',
+ right: slice.process.versionCode,
+ }),
+ m(TreeNode, {
+ left: 'SQL ID',
+ right: m(SqlRef, {table: 'slice', id: slice.id}),
+ }),
+ ));
}
function renderThreadDuration(sliceInfo: SliceDetails) {
diff --git a/ui/src/frontend/slice_details_panel.ts b/ui/src/frontend/slice_details_panel.ts
index 9825456..cdd4e4a 100644
--- a/ui/src/frontend/slice_details_panel.ts
+++ b/ui/src/frontend/slice_details_panel.ts
@@ -38,16 +38,16 @@
const threadInfo = globals.threads.get(sliceInfo.utid);
return m(
- DetailsShell,
- {
- title: 'CPU Sched Slice',
- description: this.renderDescription(sliceInfo),
- },
- m(
- GridLayout,
- this.renderDetails(sliceInfo, threadInfo),
- this.renderSchedLatencyInfo(sliceInfo),
- ),
+ DetailsShell,
+ {
+ title: 'CPU Sched Slice',
+ description: this.renderDescription(sliceInfo),
+ },
+ m(
+ GridLayout,
+ this.renderDetails(sliceInfo, threadInfo),
+ this.renderSchedLatencyInfo(sliceInfo),
+ ),
);
}
@@ -64,16 +64,16 @@
return null;
}
return m(
- Section,
- {title: 'Scheduling Latency'},
- m(
- '.slice-details-latency-panel',
- m('img.slice-details-image', {
- src: `${globals.root}assets/scheduling_latency.png`,
- }),
- this.renderWakeupText(sliceInfo),
- this.renderDisplayLatencyText(sliceInfo),
- ),
+ Section,
+ {title: 'Scheduling Latency'},
+ m(
+ '.slice-details-latency-panel',
+ m('img.slice-details-image', {
+ src: `${globals.root}assets/scheduling_latency.png`,
+ }),
+ this.renderWakeupText(sliceInfo),
+ this.renderDisplayLatencyText(sliceInfo),
+ ),
);
}
@@ -86,13 +86,13 @@
return null;
}
return m(
- '.slice-details-wakeup-text',
- m('',
- `Wakeup @ `,
- m(Timestamp, {ts: sliceInfo.wakeupTs!}),
- ` on CPU ${sliceInfo.wakerCpu} by`),
- m('', `P: ${threadInfo.procName} [${threadInfo.pid}]`),
- m('', `T: ${threadInfo.threadName} [${threadInfo.tid}]`),
+ '.slice-details-wakeup-text',
+ m('',
+ `Wakeup @ `,
+ m(Timestamp, {ts: sliceInfo.wakeupTs!}),
+ ` on CPU ${sliceInfo.wakerCpu} by`),
+ m('', `P: ${threadInfo.procName} [${threadInfo.pid}]`),
+ m('', `T: ${threadInfo.threadName} [${threadInfo.tid}]`),
);
}
@@ -103,10 +103,10 @@
const latency = sliceInfo.ts - sliceInfo.wakeupTs;
return m(
- '.slice-details-latency-text',
- m('', `Scheduling latency: `, m(DurationWidget, {dur: latency})),
- m('.text-detail',
- `This is the interval from when the task became eligible to run
+ '.slice-details-latency-text',
+ m('', `Scheduling latency: `, m(DurationWidget, {dur: latency})),
+ m('.text-detail',
+ `This is the interval from when the task became eligible to run
(e.g. because of notifying a wait queue it was suspended on) to
when it started running.`),
);
@@ -188,9 +188,9 @@
];
return m(
- Section,
- {title: 'Details'},
- m(Tree, treeNodes),
+ Section,
+ {title: 'Details'},
+ m(Tree, treeNodes),
);
}
}
diff --git a/ui/src/frontend/slice_track.ts b/ui/src/frontend/slice_track.ts
index f358e43..a182e04 100644
--- a/ui/src/frontend/slice_track.ts
+++ b/ui/src/frontend/slice_track.ts
@@ -98,12 +98,12 @@
// If the cached trace slices don't fully cover the visible time range,
// show a gray rectangle with a "Loading..." label.
checkerboardExcept(
- ctx,
- this.getHeight(),
- 0,
- size.width,
- visibleTimeScale.timeToPx(data.start),
- visibleTimeScale.timeToPx(data.end),
+ ctx,
+ this.getHeight(),
+ 0,
+ size.width,
+ visibleTimeScale.timeToPx(data.start),
+ visibleTimeScale.timeToPx(data.end),
);
ctx.textAlign = 'center';
@@ -187,7 +187,7 @@
ctx.beginPath();
ctx.lineWidth = 3;
ctx.strokeRect(
- -HALF_CHEVRON_WIDTH_PX, 0, CHEVRON_WIDTH_PX, SLICE_HEIGHT);
+ -HALF_CHEVRON_WIDTH_PX, 0, CHEVRON_WIDTH_PX, SLICE_HEIGHT);
ctx.closePath();
// Draw inner chevron as interior
@@ -207,14 +207,14 @@
if (isIncomplete && rect.width > SLICE_HEIGHT / 4) {
drawIncompleteSlice(
- ctx,
- rect.left,
- rect.top,
- rect.width,
- SLICE_HEIGHT,
- !CROP_INCOMPLETE_SLICE_FLAG.get());
+ ctx,
+ rect.left,
+ rect.top,
+ rect.width,
+ SLICE_HEIGHT,
+ !CROP_INCOMPLETE_SLICE_FLAG.get());
} else if (
- data.cpuTimeRatio !== undefined && data.cpuTimeRatio[i] < 1 - 1e-9) {
+ data.cpuTimeRatio !== undefined && data.cpuTimeRatio[i] < 1 - 1e-9) {
// We draw two rectangles, representing the ratio between wall time and
// time spent on cpu.
const cpuTimeRatio = data.cpuTimeRatio![i];
@@ -223,10 +223,10 @@
ctx.fillRect(rect.left, rect.top, rect.width, SLICE_HEIGHT);
ctx.fillStyle = '#FFFFFF50';
ctx.fillRect(
- rect.left + firstPartWidth,
- rect.top,
- secondPartWidth,
- SLICE_HEIGHT);
+ rect.left + firstPartWidth,
+ rect.top,
+ secondPartWidth,
+ SLICE_HEIGHT);
} else {
ctx.fillRect(rect.left, rect.top, rect.width, SLICE_HEIGHT);
}
@@ -238,7 +238,7 @@
ctx.beginPath();
ctx.lineWidth = 3;
ctx.strokeRect(
- rect.left, rect.top - 1.5, rect.width, SLICE_HEIGHT + 3);
+ rect.left, rect.top - 1.5, rect.width, SLICE_HEIGHT + 3);
ctx.closePath();
};
}
@@ -310,7 +310,7 @@
if (CROP_INCOMPLETE_SLICE_FLAG.get()) {
const widthTime =
visibleTimeScale.pxDeltaToDuration(INCOMPLETE_SLICE_WIDTH_PX)
- .toTime();
+ .toTime();
end = Time.add(start, widthTime);
}
diff --git a/ui/src/frontend/sql/args.ts b/ui/src/frontend/sql/args.ts
index 9cb4267..b7b2469 100644
--- a/ui/src/frontend/sql/args.ts
+++ b/ui/src/frontend/sql/args.ts
@@ -39,7 +39,7 @@
}
export async function getArgs(
- engine: EngineProxy, argSetId: ArgSetId): Promise<Arg[]> {
+ engine: EngineProxy, argSetId: ArgSetId): Promise<Arg[]> {
const query = await engine.query(`
SELECT
id,
@@ -88,23 +88,23 @@
realValue: number|null
}): ArgValue {
switch (valueType) {
- case 'int':
- case 'uint':
- return value.intValue;
- case 'pointer':
- return value.intValue === null ? null :
- `0x${value.intValue.toString(16)}`;
- case 'string':
- return value.stringValue;
- case 'bool':
- // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
- return !!value.intValue;
- case 'real':
- return value.realValue;
- case 'null':
- return null;
- default:
- const x: number = valueType;
- throw new Error(`Unable to process arg of type ${x}`);
+ case 'int':
+ case 'uint':
+ return value.intValue;
+ case 'pointer':
+ return value.intValue === null ? null :
+ `0x${value.intValue.toString(16)}`;
+ case 'string':
+ return value.stringValue;
+ case 'bool':
+ // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+ return !!value.intValue;
+ case 'real':
+ return value.realValue;
+ case 'null':
+ return null;
+ default:
+ const x: number = valueType;
+ throw new Error(`Unable to process arg of type ${x}`);
}
}
diff --git a/ui/src/frontend/sql/details/details.ts b/ui/src/frontend/sql/details/details.ts
index 49e0b0d..fea0328 100644
--- a/ui/src/frontend/sql/details/details.ts
+++ b/ui/src/frontend/sql/details/details.ts
@@ -83,10 +83,10 @@
export function Dict(args: {data: {[key: string]: ValueDesc}}&
ContainerParams): DictSchema {
return new DictSchema(
- args.data,
- {
- skipIfEmpty: args.skipIfEmpty,
- },
+ args.data,
+ {
+ skipIfEmpty: args.skipIfEmpty,
+ },
);
}
@@ -125,8 +125,8 @@
// |ts|, |dur|, |utid| - SQL expressions (e.g. column names) for the
// timestamp, duration and unique thread id.
export function ThreadInterval(
- ts: string, dur: string, utid: string,
- args?: ScalarValueParams): ThreadIntervalSchema {
+ ts: string, dur: string, utid: string,
+ args?: ScalarValueParams): ThreadIntervalSchema {
return new ThreadIntervalSchema(ts, dur, utid, args);
}
@@ -189,7 +189,7 @@
this.resolvedSchema = {
kind: 'dict',
data: Object.fromEntries(Object.entries(schema).map(
- ([key, value]) => [key, resolve(value, this.dataController)])),
+ ([key, value]) => [key, resolve(value, this.dataController)])),
};
this.dataController.fetch();
}
@@ -205,11 +205,11 @@
const nodes = [];
for (const [key, value] of Object.entries(this.resolvedSchema.data)) {
nodes.push(renderValue(
- this.engine,
- key,
- value,
- this.dataController.data,
- this.dataController.sqlIdRefRenderers));
+ this.engine,
+ key,
+ value,
+ this.dataController.data,
+ this.dataController.sqlIdRefRenderers));
}
nodes.push(m(TreeNode, {
left: 'SQL ID',
@@ -247,9 +247,9 @@
// Type-safe helper to create a SqlIdRefRenderer, which ensures that the
// type returned from the fetch is the same type that renderer takes.
export function createSqlIdRefRenderer<Data extends {}>(
- fetch: (engine: EngineProxy, id: bigint) => Promise<Data>,
- render: (data: Data) => RenderedValue,
- ): SqlIdRefRenderer {
+ fetch: (engine: EngineProxy, id: bigint) => Promise<Data>,
+ render: (data: Data) => RenderedValue,
+): SqlIdRefRenderer {
return {fetch, render: render as (data: {}) => RenderedValue};
}
@@ -406,9 +406,9 @@
argSetExpressions: this.argSets.map((index) => this.expressions[index]),
argSets: [],
sqlIdRefs: this.sqlIdRefs.map((ref) => ({
- tableName: ref.tableName,
- idExpression: this.expressions[ref.id],
- })),
+ tableName: ref.tableName,
+ idExpression: this.expressions[ref.id],
+ })),
sqlIdRefData: [],
};
@@ -420,9 +420,9 @@
(await this.engine.query(`
SELECT
${
- this.expressions
- .map((value, index) => `${value} as ${label(index)}`)
- .join(',\n')}
+ this.expressions
+ .map((value, index) => `${value} as ${label(index)}`)
+ .join(',\n')}
FROM ${this.sqlTable}
WHERE id = ${this.id}
`)).firstRow({});
@@ -437,8 +437,8 @@
data.argSets.push([]);
} else if (typeof argSetId !== 'number') {
data.argSets.push(new Err(`Incorrect type for arg set ${
- data.argSetExpressions[argSetIndex]}: expected a number, got ${
- typeof argSetId} instead}`));
+ data.argSetExpressions[argSetIndex]}: expected a number, got ${
+ typeof argSetId} instead}`));
} else {
data.argSets.push(await getArgs(this.engine, asArgSetId(argSetId)));
}
@@ -454,14 +454,14 @@
const id = data.values[ref.id];
if (typeof id !== 'bigint') {
data.sqlIdRefData.push(new Err(`Incorrect type for SQL reference ${
- data.valueExpressions[ref.id]}: expected a bigint, got ${
- typeof id} instead}`));
+ data.valueExpressions[ref.id]}: expected a bigint, got ${
+ typeof id} instead}`));
continue;
}
const refData = await renderer.fetch(this.engine, id);
if (refData === undefined) {
data.sqlIdRefData.push(new Err(`Failed to fetch the data with id ${
- id} for table ${ref.tableName}`));
+ id} for table ${ref.tableName}`));
continue;
}
data.sqlIdRefData.push({data: refData, id});
@@ -563,162 +563,162 @@
return {
kind: 'dict',
data: Object.fromEntries(
- Object.entries(schema.data)
- .map(([key, value]) => [key, resolve(value, data)])),
+ Object.entries(schema.data)
+ .map(([key, value]) => [key, resolve(value, data)])),
...schema.params,
};
}
return {
kind: 'dict',
data: Object.fromEntries(Object.entries(schema).map(
- ([key, value]) => [key, resolve(value, data)])),
+ ([key, value]) => [key, resolve(value, data)])),
};
}
// Generate the vdom for a given value using the fetched `data`.
function renderValue(
- engine: EngineProxy,
- key: string,
- value: ResolvedValue,
- data: Data,
- sqlIdRefRenderers: {[table: string]: SqlIdRefRenderer}): m.Children {
+ engine: EngineProxy,
+ key: string,
+ value: ResolvedValue,
+ data: Data,
+ sqlIdRefRenderers: {[table: string]: SqlIdRefRenderer}): m.Children {
switch (value.kind) {
- case 'value':
- if (data.values[value.source] === null && value.skipIfNull) return null;
- return m(TreeNode, {
- left: key,
- right: sqlValueToString(data.values[value.source]),
- });
- case 'url': {
- const url = data.values[value.source];
- let rhs: m.Child;
- if (url === null) {
- if (value.skipIfNull) return null;
- rhs = m('i', 'NULL');
- } else if (typeof url !== 'string') {
- rhs = renderError(`Incorrect type for URL ${
- data.valueExpressions[value.source]}: expected string, got ${
- typeof (url)}`);
- } else {
- rhs =
+ case 'value':
+ if (data.values[value.source] === null && value.skipIfNull) return null;
+ return m(TreeNode, {
+ left: key,
+ right: sqlValueToString(data.values[value.source]),
+ });
+ case 'url': {
+ const url = data.values[value.source];
+ let rhs: m.Child;
+ if (url === null) {
+ if (value.skipIfNull) return null;
+ rhs = m('i', 'NULL');
+ } else if (typeof url !== 'string') {
+ rhs = renderError(`Incorrect type for URL ${
+ data.valueExpressions[value.source]}: expected string, got ${
+ typeof (url)}`);
+ } else {
+ rhs =
m(Anchor, {href: url, target: '_blank', icon: 'open_in_new'}, url);
+ }
+ return m(TreeNode, {
+ left: key,
+ right: rhs,
+ });
+ }
+ case 'timestamp': {
+ const ts = data.values[value.source];
+ let rhs: m.Child;
+ if (ts === null) {
+ if (value.skipIfNull) return null;
+ rhs = m('i', 'NULL');
+ } else if (typeof ts !== 'bigint') {
+ rhs = renderError(`Incorrect type for timestamp ${
+ data.valueExpressions[value.source]}: expected bigint, got ${
+ typeof (ts)}`);
+ } else {
+ rhs = m(TimestampWidget, {
+ ts: Time.fromRaw(ts),
+ });
+ }
+ return m(TreeNode, {
+ left: key,
+ right: rhs,
+ });
+ }
+ case 'duration': {
+ const dur = data.values[value.source];
+ return m(TreeNode, {
+ left: key,
+ right: typeof (dur) === 'bigint' && m(DurationWidget, {
+ dur,
+ }),
+ });
+ }
+ case 'interval':
+ case 'thread_interval': {
+ const dur = data.values[value.dur];
+ return m(TreeNode, {
+ left: key,
+ right: typeof (dur) === 'bigint' && m(DurationWidget, {
+ dur,
+ }),
+ });
+ }
+ case 'sql_id_ref':
+ const ref = data.sqlIdRefs[value.ref];
+ const refData = data.sqlIdRefData[value.ref];
+ let rhs: m.Children;
+ let children: m.Children;
+ if (refData instanceof Err) {
+ rhs = renderError(refData.message);
+ } else {
+ const renderer = sqlIdRefRenderers[ref.tableName];
+ if (renderer === undefined) {
+ rhs = renderError(`Unknown table ${ref.tableName} (${ref.tableName}[${
+ refData.id}])`);
+ } else {
+ const rendered = renderer.render(refData.data);
+ rhs = rendered.value;
+ children = rendered.children;
}
- return m(TreeNode, {
+ }
+ return m(
+ TreeNode,
+ {
left: key,
right: rhs,
- });
+ },
+ children);
+ case 'arg_set_id':
+ const args = data.argSets[value.source];
+ if (args instanceof Err) {
+ return renderError(args.message);
}
- case 'timestamp': {
- const ts = data.values[value.source];
- let rhs: m.Child;
- if (ts === null) {
- if (value.skipIfNull) return null;
- rhs = m('i', 'NULL');
- } else if (typeof ts !== 'bigint') {
- rhs = renderError(`Incorrect type for timestamp ${
- data.valueExpressions[value.source]}: expected bigint, got ${
- typeof (ts)}`);
- } else {
- rhs = m(TimestampWidget, {
- ts: Time.fromRaw(ts),
- });
- }
- return m(TreeNode, {
- left: key,
- right: rhs,
- });
- }
- case 'duration': {
- const dur = data.values[value.source];
- return m(TreeNode, {
- left: key,
- right: typeof (dur) === 'bigint' && m(DurationWidget, {
- dur,
- }),
- });
- }
- case 'interval':
- case 'thread_interval': {
- const dur = data.values[value.dur];
- return m(TreeNode, {
- left: key,
- right: typeof (dur) === 'bigint' && m(DurationWidget, {
- dur,
- }),
- });
- }
- case 'sql_id_ref':
- const ref = data.sqlIdRefs[value.ref];
- const refData = data.sqlIdRefData[value.ref];
- let rhs: m.Children;
- let children: m.Children;
- if (refData instanceof Err) {
- rhs = renderError(refData.message);
- } else {
- const renderer = sqlIdRefRenderers[ref.tableName];
- if (renderer === undefined) {
- rhs = renderError(`Unknown table ${ref.tableName} (${ref.tableName}[${
- refData.id}])`);
- } else {
- const rendered = renderer.render(refData.data);
- rhs = rendered.value;
- children = rendered.children;
- }
- }
- return m(
- TreeNode,
- {
- left: key,
- right: rhs,
- },
- children);
- case 'arg_set_id':
- const args = data.argSets[value.source];
- if (args instanceof Err) {
- return renderError(args.message);
- }
- return hasArgs(args) &&
+ return hasArgs(args) &&
m(TreeNode,
{
left: key,
},
renderArguments(engine, args));
- case 'array': {
- const children: m.Children[] = [];
- for (const child of value.data) {
- const renderedChild = renderValue(
- engine, `[${children.length}]`, child, data, sqlIdRefRenderers);
- if (exists(renderedChild)) {
- children.push(renderedChild);
- }
+ case 'array': {
+ const children: m.Children[] = [];
+ for (const child of value.data) {
+ const renderedChild = renderValue(
+ engine, `[${children.length}]`, child, data, sqlIdRefRenderers);
+ if (exists(renderedChild)) {
+ children.push(renderedChild);
}
- if (children.length === 0 && value.skipIfEmpty) {
- return null;
- }
- return m(
- TreeNode,
- {
- left: key,
- },
- children);
}
- case 'dict': {
- const children: m.Children[] = [];
- for (const [key, val] of Object.entries(value.data)) {
- const child = renderValue(engine, key, val, data, sqlIdRefRenderers);
- if (exists(child)) {
- children.push(child);
- }
- }
- if (children.length === 0 && value.skipIfEmpty) {
- return null;
- }
- return m(
- TreeNode,
- {
- left: key,
- },
- children);
+ if (children.length === 0 && value.skipIfEmpty) {
+ return null;
}
+ return m(
+ TreeNode,
+ {
+ left: key,
+ },
+ children);
+ }
+ case 'dict': {
+ const children: m.Children[] = [];
+ for (const [key, val] of Object.entries(value.data)) {
+ const child = renderValue(engine, key, val, data, sqlIdRefRenderers);
+ if (exists(child)) {
+ children.push(child);
+ }
+ }
+ if (children.length === 0 && value.skipIfEmpty) {
+ return null;
+ }
+ return m(
+ TreeNode,
+ {
+ left: key,
+ },
+ children);
+ }
}
}
diff --git a/ui/src/frontend/sql/details/well_known_types.ts b/ui/src/frontend/sql/details/well_known_types.ts
index c887923..8e25c72 100644
--- a/ui/src/frontend/sql/details/well_known_types.ts
+++ b/ui/src/frontend/sql/details/well_known_types.ts
@@ -23,9 +23,9 @@
export const wellKnownTypes: {[key: string]: SqlIdRefRenderer} = {
'process': createSqlIdRefRenderer<ProcessInfo>(
- async (engine, id) => await getProcessInfo(engine, asUpid(Number(id))),
- (data: ProcessInfo) => ({
- value: renderProcessRef(data),
- }),
- ),
+ async (engine, id) => await getProcessInfo(engine, asUpid(Number(id))),
+ (data: ProcessInfo) => ({
+ value: renderProcessRef(data),
+ }),
+ ),
};
diff --git a/ui/src/frontend/sql/slice.ts b/ui/src/frontend/sql/slice.ts
index 53ba041..da1b09e 100644
--- a/ui/src/frontend/sql/slice.ts
+++ b/ui/src/frontend/sql/slice.ts
@@ -90,8 +90,8 @@
FROM ${columnInfo.leafTrackTable}
WHERE id = ${sqlTrackId};
`)).firstRow({
- utid: NUM,
- }).utid;
+ utid: NUM,
+ }).utid;
result.utid = asUtid(utid);
} else if (hasUpid) {
const upid = (await engine.query(`
@@ -99,15 +99,15 @@
FROM ${columnInfo.leafTrackTable}
WHERE id = ${sqlTrackId};
`)).firstRow({
- upid: NUM,
- }).upid;
+ upid: NUM,
+ }).upid;
result.upid = asUpid(upid);
}
return result;
}
async function getSliceFromConstraints(
- engine: EngineProxy, constraints: SQLConstraints): Promise<SliceDetails[]> {
+ engine: EngineProxy, constraints: SQLConstraints): Promise<SliceDetails[]> {
const query = await engine.query(`
SELECT
id,
@@ -142,8 +142,8 @@
const thread: ThreadInfo|undefined =
utid === undefined ? undefined : await getThreadInfo(engine, utid);
const process: ProcessInfo|undefined = thread !== undefined ?
- thread.process :
- (upid === undefined ? undefined : await getProcessInfo(engine, upid));
+ thread.process :
+ (upid === undefined ? undefined : await getProcessInfo(engine, upid));
result.push({
id: asSliceSqlId(it.id),
@@ -164,7 +164,7 @@
}
export async function getSlice(
- engine: EngineProxy, id: SliceSqlId): Promise<SliceDetails|undefined> {
+ engine: EngineProxy, id: SliceSqlId): Promise<SliceDetails|undefined> {
const result = await getSliceFromConstraints(engine, {
filters: [`id=${id}`],
});
@@ -194,25 +194,25 @@
view(vnode: m.Vnode<SliceRefAttrs>) {
const switchTab = vnode.attrs.switchToCurrentSelectionTab ?? true;
return m(
- Anchor,
- {
- icon: Icons.UpdateSelection,
- onclick: () => {
- const trackKey =
+ Anchor,
+ {
+ icon: Icons.UpdateSelection,
+ onclick: () => {
+ const trackKey =
globals.state.trackKeyByTrackId[vnode.attrs.sqlTrackId];
- if (trackKey === undefined) return;
- verticalScrollToTrack(trackKey, true);
- // Clamp duration to 1 - i.e. for instant events
- const dur = BigintMath.max(1n, vnode.attrs.dur);
- focusHorizontalRange(
- vnode.attrs.ts, Time.fromRaw(vnode.attrs.ts + dur));
- globals.makeSelection(
- Actions.selectChromeSlice(
- {id: vnode.attrs.id, trackKey, table: 'slice'}),
- {tab: switchTab ? 'current_selection' : null});
- },
+ if (trackKey === undefined) return;
+ verticalScrollToTrack(trackKey, true);
+ // Clamp duration to 1 - i.e. for instant events
+ const dur = BigintMath.max(1n, vnode.attrs.dur);
+ focusHorizontalRange(
+ vnode.attrs.ts, Time.fromRaw(vnode.attrs.ts + dur));
+ globals.makeSelection(
+ Actions.selectChromeSlice(
+ {id: vnode.attrs.id, trackKey, table: 'slice'}),
+ {tab: switchTab ? 'current_selection' : null});
},
- vnode.attrs.name);
+ },
+ vnode.attrs.name);
}
}
diff --git a/ui/src/frontend/sql/thread_state.ts b/ui/src/frontend/sql/thread_state.ts
index e6c28d0..2274c15 100644
--- a/ui/src/frontend/sql/thread_state.ts
+++ b/ui/src/frontend/sql/thread_state.ts
@@ -67,7 +67,7 @@
// Compute a breakdown of thread states for a given thread for a given time
// interval.
export async function breakDownIntervalByThreadState(
- engine: EngineProxy, range: TimeSpan, utid: Utid):
+ engine: EngineProxy, range: TimeSpan, utid: Utid):
Promise<BreakdownByThreadState> {
// TODO(altimin): this probably should share some code with pivot tables when
// we actually get some pivot tables we like.
@@ -82,7 +82,7 @@
blocked_function as blockedFunction,
dur
FROM thread_state_summary_for_interval(${range.start}, ${range.duration}, ${
- utid});
+ utid});
`);
const it = query.iter({
state: STR,
@@ -115,23 +115,23 @@
function renderChildren(node: Node, totalDur: duration): m.Child[] {
const res = Array.from(node.children.entries())
- .map(([name, child]) => renderNode(child, name, totalDur));
+ .map(([name, child]) => renderNode(child, name, totalDur));
return res;
}
function renderNode(node: Node, name: string, totalDur: duration): m.Child {
const durPercent = 100. * Number(node.dur) / Number(totalDur);
return m(
- TreeNode,
- {
- left: name,
- right: [
- m(DurationWidget, {dur: node.dur}),
- ` (${durPercent.toFixed(2)}%)`,
- ],
- startsCollapsed: node.startsCollapsed,
- },
- renderChildren(node, totalDur));
+ TreeNode,
+ {
+ left: name,
+ right: [
+ m(DurationWidget, {dur: node.dur}),
+ ` (${durPercent.toFixed(2)}%)`,
+ ],
+ startsCollapsed: node.startsCollapsed,
+ },
+ renderChildren(node, totalDur));
}
interface BreakdownByThreadStateTreeNodeAttrs {
diff --git a/ui/src/frontend/sql_table/column.ts b/ui/src/frontend/sql_table/column.ts
index 133c5fb..47c3b70 100644
--- a/ui/src/frontend/sql_table/column.ts
+++ b/ui/src/frontend/sql_table/column.ts
@@ -47,7 +47,7 @@
}
export function argColumn(
- tableName: string, c: ArgSetIdColumn, argName: string): Column {
+ tableName: string, c: ArgSetIdColumn, argName: string): Column {
const escape = (name: string) => name.replace(/[^A-Za-z0-9]/g, '_');
return {
expression: `extract_arg(${tableName}.${c.name}, ${sqliteString(argName)})`,
diff --git a/ui/src/frontend/sql_table/column_unittest.ts b/ui/src/frontend/sql_table/column_unittest.ts
index 849eb03..44012c0 100644
--- a/ui/src/frontend/sql_table/column_unittest.ts
+++ b/ui/src/frontend/sql_table/column_unittest.ts
@@ -73,11 +73,11 @@
});
expect(argColumn('slice', table.columns[3] as ArgSetIdColumn, 'foo.bar'))
- .toEqual({
- expression: 'extract_arg(slice.arg_set_id, \'foo.bar\')',
- alias: '_arg_arg_set_id_foo_bar',
- title: 'Arg foo.bar',
- });
+ .toEqual({
+ expression: 'extract_arg(slice.arg_set_id, \'foo.bar\')',
+ alias: '_arg_arg_set_id_foo_bar',
+ title: 'Arg foo.bar',
+ });
});
function formatSqlProjectionsForColumn(c: Column): string {
@@ -86,7 +86,7 @@
test('sqlProjections', () => {
const format = (c: SqlTableColumn) =>
- formatSqlProjectionsForColumn(columnFromSqlTableColumn(c));
+ formatSqlProjectionsForColumn(columnFromSqlTableColumn(c));
expect(format(table.columns[0])).toEqual('id as id');
expect(format(table.columns[1])).toEqual('name as name');
diff --git a/ui/src/frontend/sql_table/render_cell.ts b/ui/src/frontend/sql_table/render_cell.ts
index c73d986..26f0be4 100644
--- a/ui/src/frontend/sql_table/render_cell.ts
+++ b/ui/src/frontend/sql_table/render_cell.ts
@@ -37,7 +37,7 @@
// column type.
function filterOptionMenuItem(
- label: string, filter: string, state: SqlTableState): m.Child {
+ label: string, filter: string, state: SqlTableState): m.Child {
return m(MenuItem, {
label,
onclick: () => {
@@ -47,7 +47,7 @@
}
function getStandardFilters(
- c: Column, value: SqlValue, state: SqlTableState): m.Child[] {
+ c: Column, value: SqlValue, state: SqlTableState): m.Child[] {
if (value === null) {
return [
filterOptionMenuItem('is null', `${c.expression} is null`, state),
@@ -57,22 +57,22 @@
if (isString(value)) {
return [
filterOptionMenuItem(
- 'equals to', `${c.expression} = ${sqliteString(value)}`, state),
+ 'equals to', `${c.expression} = ${sqliteString(value)}`, state),
filterOptionMenuItem(
- 'not equals to', `${c.expression} != ${sqliteString(value)}`, state),
+ 'not equals to', `${c.expression} != ${sqliteString(value)}`, state),
];
}
if (typeof value === 'bigint' || typeof value === 'number') {
return [
filterOptionMenuItem('equals to', `${c.expression} = ${value}`, state),
filterOptionMenuItem(
- 'not equals to', `${c.expression} != ${value}`, state),
+ 'not equals to', `${c.expression} != ${value}`, state),
filterOptionMenuItem('greater than', `${c.expression} > ${value}`, state),
filterOptionMenuItem(
- 'greater or equals than', `${c.expression} >= ${value}`, state),
+ 'greater or equals than', `${c.expression} >= ${value}`, state),
filterOptionMenuItem('less than', `${c.expression} < ${value}`, state),
filterOptionMenuItem(
- 'less or equals than', `${c.expression} <= ${value}`, state),
+ 'less or equals than', `${c.expression} <= ${value}`, state),
];
}
return [];
@@ -101,7 +101,7 @@
}
function getContextMenuItems(
- column: Column, row: Row, state: SqlTableState): m.Child[] {
+ column: Column, row: Row, state: SqlTableState): m.Child[] {
const result: m.Child[] = [];
const value = row[column.alias];
@@ -112,27 +112,27 @@
const filters = getStandardFilters(column, value, state);
if (filters.length > 0) {
result.push(
- m(MenuItem, {label: 'Add filter', icon: Icons.Filter}, ...filters));
+ m(MenuItem, {label: 'Add filter', icon: Icons.Filter}, ...filters));
}
return result;
}
function renderStandardColumn(
- column: Column, row: Row, state: SqlTableState): m.Children {
+ column: Column, row: Row, state: SqlTableState): m.Children {
const displayValue = display(column, row);
const contextMenuItems: m.Child[] = getContextMenuItems(column, row, state);
return m(
- PopupMenu2,
- {
- trigger: m(Anchor, displayValue),
- },
- ...contextMenuItems,
+ PopupMenu2,
+ {
+ trigger: m(Anchor, displayValue),
+ },
+ ...contextMenuItems,
);
}
function renderTimestampColumn(
- column: Column, row: Row, state: SqlTableState): m.Children {
+ column: Column, row: Row, state: SqlTableState): m.Children {
const value = row[column.alias];
if (typeof value !== 'bigint') {
return renderStandardColumn(column, row, state);
@@ -145,7 +145,7 @@
}
function renderDurationColumn(
- column: Column, row: Row, state: SqlTableState): m.Children {
+ column: Column, row: Row, state: SqlTableState): m.Children {
const value = row[column.alias];
if (typeof value !== 'bigint') {
return renderStandardColumn(column, row, state);
@@ -158,8 +158,8 @@
}
function renderSliceIdColumn(
- column: {alias: string, display: SliceIdDisplayConfig},
- row: Row): m.Children {
+ column: {alias: string, display: SliceIdDisplayConfig},
+ row: Row): m.Children {
const config = column.display;
const id = row[column.alias];
const ts = row[config.ts];
@@ -167,10 +167,10 @@
const trackId = row[config.trackId];
const columnNotFoundError = (type: string, name: string) =>
- renderError(`${type} column ${name} not found`);
+ renderError(`${type} column ${name} not found`);
const wrongTypeError = (type: string, name: string, value: SqlValue) =>
- renderError(`Wrong type for ${type} column ${name}: bigint expected, ${
- typeof value} found`);
+ renderError(`Wrong type for ${type} column ${name}: bigint expected, ${
+ typeof value} found`);
if (typeof id !== 'bigint') return sqlValueToString(id);
if (ts === undefined) return columnNotFoundError('Timestamp', config.ts);
@@ -195,17 +195,17 @@
}
export function renderCell(
- column: Column, row: Row, state: SqlTableState): m.Children {
+ column: Column, row: Row, state: SqlTableState): m.Children {
if (column.display) {
switch (column.display?.type) {
- case 'slice_id':
- return renderSliceIdColumn(
- {alias: column.alias, display: column.display}, row);
- case 'timestamp':
- return renderTimestampColumn(column, row, state);
- case 'duration':
- case 'thread_duration':
- return renderDurationColumn(column, row, state);
+ case 'slice_id':
+ return renderSliceIdColumn(
+ {alias: column.alias, display: column.display}, row);
+ case 'timestamp':
+ return renderTimestampColumn(column, row, state);
+ case 'duration':
+ case 'thread_duration':
+ return renderDurationColumn(column, row, state);
}
}
return renderStandardColumn(column, row, state);
diff --git a/ui/src/frontend/sql_table/state.ts b/ui/src/frontend/sql_table/state.ts
index e6d9e4c..4772a09 100644
--- a/ui/src/frontend/sql_table/state.ts
+++ b/ui/src/frontend/sql_table/state.ts
@@ -93,8 +93,8 @@
private rowCount?: RowCount;
constructor(
- engine: EngineProxy, table: SqlTableDescription, filters?: Filter[],
- imports?: string[]) {
+ engine: EngineProxy, table: SqlTableDescription, filters?: Filter[],
+ imports?: string[]) {
this.engine_ = engine;
this.table_ = table;
this.additionalImports = imports || [];
@@ -146,7 +146,7 @@
AND display_value ${filter.op}
`;
result.joins!.push(`JOIN ${cteName} ON ${cteName}.arg_set_id = ${
- this.table.name}.${filter.argSetIdColumn}`);
+ this.table.name}.${filter.argSetIdColumn}`);
}
}
return result;
@@ -155,8 +155,8 @@
private getSQLImports() {
const tableImports = this.table.imports || [];
return [...tableImports, ...this.additionalImports]
- .map((i) => `INCLUDE PERFETTO MODULE ${i};`)
- .join('\n');
+ .map((i) => `INCLUDE PERFETTO MODULE ${i};`)
+ .join('\n');
}
private getCountRowsSQLQuery(): string {
@@ -175,12 +175,12 @@
buildSqlSelectStatement(): {
selectStatement: string,
columns: string[],
- } {
+ } {
const projections = this.getSQLProjections();
const orderBy = this.orderBy.map((c) => ({
- fieldName: c.column.alias,
- direction: c.direction,
- }));
+ fieldName: c.column.alias,
+ direction: c.direction,
+ }));
const constraints = this.getQueryConstraints();
constraints.orderBy = orderBy;
const statement = `
diff --git a/ui/src/frontend/sql_table/state_unittest.ts b/ui/src/frontend/sql_table/state_unittest.ts
index d080619..2876b40 100644
--- a/ui/src/frontend/sql_table/state_unittest.ts
+++ b/ui/src/frontend/sql_table/state_unittest.ts
@@ -154,5 +154,5 @@
// Check the generated SQL statement.
expect(normalize(state.buildSqlSelectStatement().selectStatement))
- .toBe('SELECT id as id, name as name FROM table');
+ .toBe('SELECT id as id, name as name FROM table');
});
diff --git a/ui/src/frontend/sql_table/tab.ts b/ui/src/frontend/sql_table/tab.ts
index 5795b39..bd704cd 100644
--- a/ui/src/frontend/sql_table/tab.ts
+++ b/ui/src/frontend/sql_table/tab.ts
@@ -84,27 +84,27 @@
}));
return m(
- DetailsShell,
- {
- title: 'Table',
- description: this.getDisplayName(),
- buttons: [
- ...navigation,
- addDebugTrack,
- m(Button, {
- label: 'Copy SQL query',
- onclick: () =>
- copyToClipboard(this.state.getNonPaginatedSQLQuery()),
- }),
- m(Button, {
- label: 'Close',
- onclick: () => this.close(),
- }),
- ],
- },
- m(SqlTable, {
- state: this.state,
- }));
+ DetailsShell,
+ {
+ title: 'Table',
+ description: this.getDisplayName(),
+ buttons: [
+ ...navigation,
+ addDebugTrack,
+ m(Button, {
+ label: 'Copy SQL query',
+ onclick: () =>
+ copyToClipboard(this.state.getNonPaginatedSQLQuery()),
+ }),
+ m(Button, {
+ label: 'Close',
+ onclick: () => this.close(),
+ }),
+ ],
+ },
+ m(SqlTable, {
+ state: this.state,
+ }));
}
getTitle(): string {
diff --git a/ui/src/frontend/sql_table/table.ts b/ui/src/frontend/sql_table/table.ts
index d6de8e3..96c4a48 100644
--- a/ui/src/frontend/sql_table/table.ts
+++ b/ui/src/frontend/sql_table/table.ts
@@ -78,27 +78,27 @@
if (existingColumns.has(column.name)) continue;
if (isArgSetIdColumn(column)) {
result.push(
- m(MenuItem,
- {
- label: column.name,
+ m(MenuItem,
+ {
+ label: column.name,
+ },
+ m(ArgumentSelector, {
+ engine: this.engine,
+ argSetId: column,
+ tableName: this.table.name,
+ constraints: this.state.getQueryConstraints(),
+ alreadySelectedColumns: existingColumns,
+ onArgumentSelected: (argument: string) => {
+ addColumn(argColumn(this.table.name, column, argument));
},
- m(ArgumentSelector, {
- engine: this.engine,
- argSetId: column,
- tableName: this.table.name,
- constraints: this.state.getQueryConstraints(),
- alreadySelectedColumns: existingColumns,
- onArgumentSelected: (argument: string) => {
- addColumn(argColumn(this.table.name, column, argument));
- },
- })));
+ })));
continue;
}
result.push(m(MenuItem, {
label: column.name,
onclick: () => addColumn(
- columnFromSqlTableColumn(column),
- ),
+ columnFromSqlTableColumn(column),
+ ),
}));
}
return result;
@@ -107,43 +107,43 @@
renderColumnHeader(column: Column, index: number) {
const sorted = this.state.isSortedBy(column);
const icon = sorted === 'ASC' ?
- Icons.SortedAsc :
- sorted === 'DESC' ? Icons.SortedDesc : Icons.ContextMenu;
+ Icons.SortedAsc :
+ sorted === 'DESC' ? Icons.SortedDesc : Icons.ContextMenu;
return m(
- PopupMenu2,
- {
- trigger: m(Anchor, {icon}, column.title),
+ PopupMenu2,
+ {
+ trigger: m(Anchor, {icon}, column.title),
+ },
+ sorted !== 'DESC' && m(MenuItem, {
+ label: 'Sort: highest first',
+ icon: Icons.SortedDesc,
+ onclick: () => {
+ this.state.sortBy({column, direction: 'DESC'});
},
- sorted !== 'DESC' && m(MenuItem, {
- label: 'Sort: highest first',
- icon: Icons.SortedDesc,
- onclick: () => {
- this.state.sortBy({column, direction: 'DESC'});
- },
- }),
- sorted !== 'ASC' && m(MenuItem, {
- label: 'Sort: lowest first',
- icon: Icons.SortedAsc,
- onclick: () => {
- this.state.sortBy({column, direction: 'ASC'});
- },
- }),
- sorted !== undefined && m(MenuItem, {
- label: 'Unsort',
- icon: Icons.Close,
- onclick: () => this.state.unsort(),
- }),
- this.state.getSelectedColumns().length > 1 && m(MenuItem, {
- label: 'Hide',
- icon: Icons.Hide,
- onclick: () => this.state.hideColumnAtIndex(index),
- }),
- m(MenuDivider),
- m(MenuItem,
- {label: 'Add column', icon: Icons.AddColumn},
- this.renderAddColumnOptions((column) => {
- this.state.addColumn(column, index);
- })),
+ }),
+ sorted !== 'ASC' && m(MenuItem, {
+ label: 'Sort: lowest first',
+ icon: Icons.SortedAsc,
+ onclick: () => {
+ this.state.sortBy({column, direction: 'ASC'});
+ },
+ }),
+ sorted !== undefined && m(MenuItem, {
+ label: 'Unsort',
+ icon: Icons.Close,
+ onclick: () => this.state.unsort(),
+ }),
+ this.state.getSelectedColumns().length > 1 && m(MenuItem, {
+ label: 'Hide',
+ icon: Icons.Hide,
+ onclick: () => this.state.hideColumnAtIndex(index),
+ }),
+ m(MenuDivider),
+ m(MenuItem,
+ {label: 'Add column', icon: Icons.AddColumn},
+ this.renderAddColumnOptions((column) => {
+ this.state.addColumn(column, index);
+ })),
);
}
@@ -155,10 +155,10 @@
m(BasicTable, {
data: rows,
columns: this.state.getSelectedColumns().map(
- (column, i) => ({
- title: this.renderColumnHeader(column, i),
- render: (row: Row) => renderCell(column, row, this.state),
- })),
+ (column, i) => ({
+ title: this.renderColumnHeader(column, i),
+ render: (row: Row) => renderCell(column, row, this.state),
+ })),
}),
this.state.isLoading() && m(Spinner),
this.state.getQueryError() !== undefined &&
diff --git a/ui/src/frontend/sql_table/table_description.ts b/ui/src/frontend/sql_table/table_description.ts
index 78b36d9..de5054e 100644
--- a/ui/src/frontend/sql_table/table_description.ts
+++ b/ui/src/frontend/sql_table/table_description.ts
@@ -68,10 +68,10 @@
// Additional columns needed to display the given column.
export function dependendentColumns(display?: DisplayConfig): string[] {
switch (display?.type) {
- case 'slice_id':
- return [display.ts, display.dur, display.trackId];
- default:
- return [];
+ case 'slice_id':
+ return [display.ts, display.dur, display.trackId];
+ default:
+ return [];
}
}
diff --git a/ui/src/frontend/sql_utils.ts b/ui/src/frontend/sql_utils.ts
index cab939e..7b32baa 100644
--- a/ui/src/frontend/sql_utils.ts
+++ b/ui/src/frontend/sql_utils.ts
@@ -42,7 +42,7 @@
export function constraintsToQueryPrefix(c: SQLConstraints): string {
const ctes = Object.entries(c.commonTableExpressions ?? {})
- .filter(([_, value]) => isDefined(value));
+ .filter(([_, value]) => isDefined(value));
if (ctes.length === 0) return '';
const cteStatements = ctes.map(([name, query]) => `${name} AS (${query})`);
return `WITH ${cteStatements.join(',\n')}`;
@@ -110,15 +110,15 @@
}
export async function getTableRowCount(
- engine: EngineProxy, tableName: string): Promise<number|undefined> {
+ engine: EngineProxy, tableName: string): Promise<number|undefined> {
const result =
await engine.query(`SELECT COUNT() as count FROM ${tableName}`);
if (result.numRows() === 0) {
return undefined;
}
return result
- .firstRow({
- count: NUM,
- })
- .count;
+ .firstRow({
+ count: NUM,
+ })
+ .count;
}
diff --git a/ui/src/frontend/sql_utils_unittest.ts b/ui/src/frontend/sql_utils_unittest.ts
index 1cc8459..99dc2a8 100644
--- a/ui/src/frontend/sql_utils_unittest.ts
+++ b/ui/src/frontend/sql_utils_unittest.ts
@@ -36,8 +36,8 @@
'foo2': 'select * from bar2',
},
})))
- .toEqual(
- 'WITH foo1 AS (select * from bar1), foo2 AS (select * from bar2)');
+ .toEqual(
+ 'WITH foo1 AS (select * from bar1), foo2 AS (select * from bar2)');
});
test('constraintsToQuerySuffix: where', () => {
diff --git a/ui/src/frontend/store.ts b/ui/src/frontend/store.ts
index 44fc400..bb58f84 100644
--- a/ui/src/frontend/store.ts
+++ b/ui/src/frontend/store.ts
@@ -211,8 +211,8 @@
} else {
this.parentState = parentState;
return this.cachedState = produce(this.cachedState, () => {
- return this.migrate(parentState);
- });
+ return this.migrate(parentState);
+ });
}
}
diff --git a/ui/src/frontend/store_unittest.ts b/ui/src/frontend/store_unittest.ts
index 02d886a..dce284d 100644
--- a/ui/src/frontend/store_unittest.ts
+++ b/ui/src/frontend/store_unittest.ts
@@ -271,29 +271,29 @@
});
it('check subscriber only called once when edits made to undefined root path',
- () => {
- const store = createStore(initialState);
- const value: Foo = {
- counter: 123,
- nested: {
- value: 456,
- },
- };
+ () => {
+ const store = createStore(initialState);
+ const value: Foo = {
+ counter: 123,
+ nested: {
+ value: 456,
+ },
+ };
- const callback = jest.fn();
+ const callback = jest.fn();
- // This target node is missing - baz doesn't exist in State
- const subStore = store.createSubStore<Foo>(['baz', 'quux'], () => value);
- subStore.subscribe(callback);
+ // This target node is missing - baz doesn't exist in State
+ const subStore = store.createSubStore<Foo>(['baz', 'quux'], () => value);
+ subStore.subscribe(callback);
- // Edits should work just fine, but the root store will not be modified.
- subStore.edit((draft) => {
- draft.counter += 1;
- });
+ // Edits should work just fine, but the root store will not be modified.
+ subStore.edit((draft) => {
+ draft.counter += 1;
+ });
- expect(callback).toHaveBeenCalledTimes(1);
- expect(callback).toHaveBeenCalledWith(subStore, value);
- });
+ expect(callback).toHaveBeenCalledTimes(1);
+ expect(callback).toHaveBeenCalledWith(subStore, value);
+ });
it('notifies subscribers even when path doesn\'t exist in root store', () => {
const store = createStore(initialState);
@@ -376,22 +376,22 @@
// TODO(stevegolton): See if we can get this working, regardless of migrate
// function implementation.
it.skip(
- 'unrelated state refs are still equal when modified from root store',
- () => {
- const store = createStore(initialState);
- const subStore = store.createSubStore<Foo>(['foo'], migrateFoo);
- const before = subStore.state;
+ 'unrelated state refs are still equal when modified from root store',
+ () => {
+ const store = createStore(initialState);
+ const subStore = store.createSubStore<Foo>(['foo'], migrateFoo);
+ const before = subStore.state;
- // Check that unrelated state is still the same even though subtree is
- // modified from the root store
- store.edit((draft) => {
- draft.foo.counter = 1234;
- });
-
- expect(before.nested).toBe(subStore.state.nested);
- expect(subStore.state.counter).toBe(1234);
+ // Check that unrelated state is still the same even though subtree is
+ // modified from the root store
+ store.edit((draft) => {
+ draft.foo.counter = 1234;
});
+ expect(before.nested).toBe(subStore.state.nested);
+ expect(subStore.state.counter).toBe(1234);
+ });
+
it('works when underlying state is undefined', () => {
interface RootState {
dict: {[key: string]: unknown}
diff --git a/ui/src/frontend/tab_panel.ts b/ui/src/frontend/tab_panel.ts
index ff39471..87146b0 100644
--- a/ui/src/frontend/tab_panel.ts
+++ b/ui/src/frontend/tab_panel.ts
@@ -63,13 +63,13 @@
const tabDropdownEntries =
globals.tabManager.tabs.filter((tab) => tab.isEphemeral === false)
- .map(({content, uri}): TabDropdownEntry => {
- return {
- key: uri,
- title: content.getTitle(),
- onClick: () => globals.dispatch(Actions.showTab({uri})),
- };
- });
+ .map(({content, uri}): TabDropdownEntry => {
+ return {
+ key: uri,
+ title: content.getTitle(),
+ onClick: () => globals.dispatch(Actions.showTab({uri})),
+ };
+ });
return [
m(DragHandle, {
@@ -84,15 +84,15 @@
onTabClose: (key) => globals.dispatch(Actions.hideTab({uri: key})),
}),
m(
- '.details-panel-container',
- {
- style: {height: `${this.detailsHeight}px`},
- },
- tabs.map(({key, content}) => {
- const active = key === globals.state.tabs.currentTab;
- return m(Gate, {open: active}, content);
- }),
- ),
+ '.details-panel-container',
+ {
+ style: {height: `${this.detailsHeight}px`},
+ },
+ tabs.map(({key, content}) => {
+ const active = key === globals.state.tabs.currentTab;
+ return m(Gate, {open: active}, content);
+ }),
+ ),
];
}
diff --git a/ui/src/frontend/tables/table.ts b/ui/src/frontend/tables/table.ts
index eb12883..e6f124c 100644
--- a/ui/src/frontend/tables/table.ts
+++ b/ui/src/frontend/tables/table.ts
@@ -54,8 +54,8 @@
ordering?: ComparisonFn<T>;
constructor(
- name: string, render: (row: T) => m.Child,
- attrs?: ColumnDescriptorAttrs<T>) {
+ name: string, render: (row: T) => m.Child,
+ attrs?: ColumnDescriptorAttrs<T>) {
this.name = name;
this.render = render;
this.id = attrs?.columnId === undefined ? name : attrs.columnId;
@@ -78,19 +78,19 @@
}
export function numberColumn<T>(
- name: string, getter: (t: T) => number, contextMenu?: PopupMenuItem[]):
+ name: string, getter: (t: T) => number, contextMenu?: PopupMenuItem[]):
ColumnDescriptor<T> {
return new ColumnDescriptor<T>(name, getter, {contextMenu, sortKey: getter});
}
export function stringColumn<T>(
- name: string, getter: (t: T) => string, contextMenu?: PopupMenuItem[]):
+ name: string, getter: (t: T) => string, contextMenu?: PopupMenuItem[]):
ColumnDescriptor<T> {
return new ColumnDescriptor<T>(name, getter, {contextMenu, sortKey: getter});
}
export function widgetColumn<T>(
- name: string, getter: (t: T) => m.Child): ColumnDescriptor<T> {
+ name: string, getter: (t: T) => m.Child): ColumnDescriptor<T> {
return new ColumnDescriptor<T>(name, getter);
}
@@ -145,8 +145,8 @@
reorder(info: SortingInfo<T>) {
this._sortingInfo = info;
this.permutation.sort(withDirection(
- comparingBy((index: number) => this.data[index], info.ordering),
- info.direction));
+ comparingBy((index: number) => this.data[index], info.ordering),
+ info.direction));
raf.scheduleFullRedraw();
}
}
@@ -157,9 +157,9 @@
}
function directionOnIndex(
- columnId: string,
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- info?: SortingInfo<any>): SortDirection|undefined {
+ columnId: string,
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ info?: SortingInfo<any>): SortDirection|undefined {
if (info === undefined) {
return undefined;
}
@@ -169,8 +169,8 @@
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export class Table implements m.ClassComponent<TableAttrs<any>> {
renderColumnHeader(
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- vnode: m.Vnode<TableAttrs<any>>, column: ColumnDescriptor<any>): m.Child {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ vnode: m.Vnode<TableAttrs<any>>, column: ColumnDescriptor<any>): m.Child {
let currDirection: SortDirection|undefined = undefined;
let items = column.contextMenu;
@@ -181,7 +181,7 @@
if (currDirection !== 'ASC') {
newItems.push(menuItem('Sort ascending', () => {
vnode.attrs.data.reorder(
- {columnId: column.id, direction: 'ASC', ordering});
+ {columnId: column.id, direction: 'ASC', ordering});
}));
}
if (currDirection !== 'DESC') {
@@ -205,10 +205,10 @@
}
return m(
- 'td', column.name, items === undefined ? null : m(PopupMenuButton, {
- icon: popupMenuIcon(currDirection),
- items,
- }));
+ 'td', column.name, items === undefined ? null : m(PopupMenuButton, {
+ icon: popupMenuIcon(currDirection),
+ items,
+ }));
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -233,14 +233,14 @@
const attrs = vnode.attrs;
return m(
- 'table.generic-table',
- m('thead',
- m('tr.header',
- attrs.columns.map(
- (column) => this.renderColumnHeader(vnode, column)))),
- attrs.data.items().map(
- (row) =>
- m('tr',
- attrs.columns.map((column) => m('td', column.render(row))))));
+ 'table.generic-table',
+ m('thead',
+ m('tr.header',
+ attrs.columns.map(
+ (column) => this.renderColumnHeader(vnode, column)))),
+ attrs.data.items().map(
+ (row) =>
+ m('tr',
+ attrs.columns.map((column) => m('td', column.render(row))))));
}
}
diff --git a/ui/src/frontend/thread_and_process_info.ts b/ui/src/frontend/thread_and_process_info.ts
index 06e6c82..fd60fb8 100644
--- a/ui/src/frontend/thread_and_process_info.ts
+++ b/ui/src/frontend/thread_and_process_info.ts
@@ -43,7 +43,7 @@
}
export async function getProcessInfo(
- engine: EngineProxy, upid: Upid): Promise<ProcessInfo> {
+ engine: EngineProxy, upid: Upid): Promise<ProcessInfo> {
const it = (await engine.query(`
SELECT pid, name, uid FROM process WHERE upid = ${upid};
`)).iter({pid: NUM, name: STR_NULL, uid: NUM_NULL});
@@ -95,25 +95,25 @@
export function renderProcessRef(info: ProcessInfo): m.Children {
const name = info.name;
return m(
- PopupMenu2,
- {
- trigger: m(Anchor, getProcessName(info)),
- },
- exists(name) && m(MenuItem, {
- icon: Icons.Copy,
- label: 'Copy process name',
- onclick: () => copyToClipboard(name),
- }),
- exists(info.pid) && m(MenuItem, {
- icon: Icons.Copy,
- label: 'Copy pid',
- onclick: () => copyToClipboard(`${info.pid}`),
- }),
- m(MenuItem, {
- icon: Icons.Copy,
- label: 'Copy upid',
- onclick: () => copyToClipboard(`${info.upid}`),
- }));
+ PopupMenu2,
+ {
+ trigger: m(Anchor, getProcessName(info)),
+ },
+ exists(name) && m(MenuItem, {
+ icon: Icons.Copy,
+ label: 'Copy process name',
+ onclick: () => copyToClipboard(name),
+ }),
+ exists(info.pid) && m(MenuItem, {
+ icon: Icons.Copy,
+ label: 'Copy pid',
+ onclick: () => copyToClipboard(`${info.pid}`),
+ }),
+ m(MenuItem, {
+ icon: Icons.Copy,
+ label: 'Copy upid',
+ onclick: () => copyToClipboard(`${info.upid}`),
+ }));
}
export function getProcessName(info?: ProcessInfo): string|undefined {
@@ -128,7 +128,7 @@
}
export async function getThreadInfo(
- engine: EngineProxy, utid: Utid): Promise<ThreadInfo> {
+ engine: EngineProxy, utid: Utid): Promise<ThreadInfo> {
const it = (await engine.query(`
SELECT tid, name, upid
FROM thread
diff --git a/ui/src/frontend/thread_state.ts b/ui/src/frontend/thread_state.ts
index 82e8a8e..c3c89de 100644
--- a/ui/src/frontend/thread_state.ts
+++ b/ui/src/frontend/thread_state.ts
@@ -72,7 +72,7 @@
// Gets a list of thread state objects from Trace Processor with given
// constraints.
export async function getThreadStateFromConstraints(
- engine: EngineProxy, constraints: SQLConstraints): Promise<ThreadState[]> {
+ engine: EngineProxy, constraints: SQLConstraints): Promise<ThreadState[]> {
const query = await engine.query(`
SELECT
thread_state.id as threadStateSqlId,
@@ -123,14 +123,14 @@
blockedFunction: it.blockedFunction || undefined,
thread: await getThreadInfo(engine, asUtid(it.utid)),
wakerThread: wakerUtid ? await getThreadInfo(engine, wakerUtid) :
- undefined,
+ undefined,
});
}
return result;
}
export async function getThreadState(
- engine: EngineProxy, id: number): Promise<ThreadState|undefined> {
+ engine: EngineProxy, id: number): Promise<ThreadState|undefined> {
const result = await getThreadStateFromConstraints(engine, {
filters: [`id=${id}`],
});
@@ -175,32 +175,32 @@
export class ThreadStateRef implements m.ClassComponent<ThreadStateRefAttrs> {
view(vnode: m.Vnode<ThreadStateRefAttrs>) {
return m(
- Anchor,
- {
- icon: Icons.UpdateSelection,
- onclick: () => {
- let trackKey: string|number|undefined;
- for (const track of Object.values(globals.state.tracks)) {
- const trackDesc = pluginManager.resolveTrackInfo(track.uri);
- if (trackDesc && trackDesc.kind === THREAD_STATE_TRACK_KIND &&
+ Anchor,
+ {
+ icon: Icons.UpdateSelection,
+ onclick: () => {
+ let trackKey: string|number|undefined;
+ for (const track of Object.values(globals.state.tracks)) {
+ const trackDesc = pluginManager.resolveTrackInfo(track.uri);
+ if (trackDesc && trackDesc.kind === THREAD_STATE_TRACK_KIND &&
trackDesc.utid === vnode.attrs.utid) {
- trackKey = track.key;
- }
+ trackKey = track.key;
}
+ }
- /* eslint-disable @typescript-eslint/strict-boolean-expressions */
- if (trackKey) {
- /* eslint-enable */
- globals.makeSelection(Actions.selectThreadState({
- id: vnode.attrs.id,
- trackKey: trackKey.toString(),
- }));
+ /* eslint-disable @typescript-eslint/strict-boolean-expressions */
+ if (trackKey) {
+ /* eslint-enable */
+ globals.makeSelection(Actions.selectThreadState({
+ id: vnode.attrs.id,
+ trackKey: trackKey.toString(),
+ }));
- scrollToTrackAndTs(trackKey, vnode.attrs.ts, true);
- }
- },
+ scrollToTrackAndTs(trackKey, vnode.attrs.ts, true);
+ }
},
- vnode.attrs.name ?? `Thread State ${vnode.attrs.id}`,
+ },
+ vnode.attrs.name ?? `Thread State ${vnode.attrs.id}`,
);
}
}
diff --git a/ui/src/frontend/thread_state_tab.ts b/ui/src/frontend/thread_state_tab.ts
index da96c65..221c409 100644
--- a/ui/src/frontend/thread_state_tab.ts
+++ b/ui/src/frontend/thread_state_tab.ts
@@ -128,17 +128,17 @@
// TODO(altimin/stevegolton): Differentiate between "Current Selection" and
// "Pinned" views in DetailsShell.
return m(
- DetailsShell,
- {title: 'Thread State', description: this.renderLoadingText()},
- m(GridLayout,
- m(
- Section,
- {title: 'Details'},
- this.state && this.renderTree(this.state),
- ),
- m(Section,
- {title: 'Related thread states'},
- this.renderRelatedThreadStates())),
+ DetailsShell,
+ {title: 'Thread State', description: this.renderLoadingText()},
+ m(GridLayout,
+ m(
+ Section,
+ {title: 'Details'},
+ this.state && this.renderTree(this.state),
+ ),
+ m(Section,
+ {title: 'Related thread states'},
+ this.renderRelatedThreadStates())),
);
}
@@ -157,40 +157,40 @@
const thread = state.thread;
const process = state.thread?.process;
return m(
- Tree,
- m(TreeNode, {
- left: 'Start time',
- right: m(Timestamp, {ts: state.ts}),
- }),
- m(TreeNode, {
- left: 'Duration',
- right: m(DurationWidget, {dur: state.dur}),
- }),
- m(TreeNode, {
- left: 'State',
- right: this.renderState(
- state.state, state.cpu, state.schedSqlId, state.ts),
- }),
- state.blockedFunction && m(TreeNode, {
- left: 'Blocked function',
- right: state.blockedFunction,
- }),
- process && m(TreeNode, {
- left: 'Process',
- right: getProcessName(process),
- }),
- thread && m(TreeNode, {left: 'Thread', right: getThreadName(thread)}),
- state.wakerThread && this.renderWakerThread(state.wakerThread),
- m(TreeNode, {
- left: 'SQL ID',
- right: m(SqlRef, {table: 'thread_state', id: state.threadStateSqlId}),
- }),
+ Tree,
+ m(TreeNode, {
+ left: 'Start time',
+ right: m(Timestamp, {ts: state.ts}),
+ }),
+ m(TreeNode, {
+ left: 'Duration',
+ right: m(DurationWidget, {dur: state.dur}),
+ }),
+ m(TreeNode, {
+ left: 'State',
+ right: this.renderState(
+ state.state, state.cpu, state.schedSqlId, state.ts),
+ }),
+ state.blockedFunction && m(TreeNode, {
+ left: 'Blocked function',
+ right: state.blockedFunction,
+ }),
+ process && m(TreeNode, {
+ left: 'Process',
+ right: getProcessName(process),
+ }),
+ thread && m(TreeNode, {left: 'Thread', right: getThreadName(thread)}),
+ state.wakerThread && this.renderWakerThread(state.wakerThread),
+ m(TreeNode, {
+ left: 'SQL ID',
+ right: m(SqlRef, {table: 'thread_state', id: state.threadStateSqlId}),
+ }),
);
}
private renderState(
- state: string, cpu: number|undefined, id: SchedSqlId|undefined,
- ts: time): m.Children {
+ state: string, cpu: number|undefined, id: SchedSqlId|undefined,
+ ts: time): m.Children {
if (!state) {
return null;
}
@@ -198,22 +198,22 @@
return state;
}
return m(
- Anchor,
- {
- title: 'Go to CPU slice',
- icon: 'call_made',
- onclick: () => goToSchedSlice(cpu, id, ts),
- },
- `${state} on CPU ${cpu}`);
+ Anchor,
+ {
+ title: 'Go to CPU slice',
+ icon: 'call_made',
+ onclick: () => goToSchedSlice(cpu, id, ts),
+ },
+ `${state} on CPU ${cpu}`);
}
private renderWakerThread(wakerThread: ThreadInfo) {
return m(
- TreeNode,
- {left: 'Waker'},
- m(TreeNode,
- {left: 'Process', right: getProcessName(wakerThread.process)}),
- m(TreeNode, {left: 'Thread', right: getThreadName(wakerThread)}),
+ TreeNode,
+ {left: 'Waker'},
+ m(TreeNode,
+ {left: 'Process', right: getProcessName(wakerThread.process)}),
+ m(TreeNode, {left: 'Thread', right: getThreadName(wakerThread)}),
);
}
@@ -252,50 +252,50 @@
];
const nameForNextOrPrev = (state: ThreadState) =>
- `${state.state} for ${renderDuration(state.dur)}`;
+ `${state.state} for ${renderDuration(state.dur)}`;
return [m(
- Tree,
- this.relatedStates.waker && m(TreeNode, {
- left: 'Waker',
- right: renderRef(
- this.relatedStates.waker,
- getFullThreadName(this.relatedStates.waker.thread)),
- }),
- this.relatedStates.prev && m(TreeNode, {
- left: 'Previous state',
- right: renderRef(
- this.relatedStates.prev,
- nameForNextOrPrev(this.relatedStates.prev)),
- }),
- this.relatedStates.next && m(TreeNode, {
- left: 'Next state',
- right: renderRef(
- this.relatedStates.next,
- nameForNextOrPrev(this.relatedStates.next)),
- }),
- this.relatedStates.wakee && this.relatedStates.wakee.length > 0 &&
+ Tree,
+ this.relatedStates.waker && m(TreeNode, {
+ left: 'Waker',
+ right: renderRef(
+ this.relatedStates.waker,
+ getFullThreadName(this.relatedStates.waker.thread)),
+ }),
+ this.relatedStates.prev && m(TreeNode, {
+ left: 'Previous state',
+ right: renderRef(
+ this.relatedStates.prev,
+ nameForNextOrPrev(this.relatedStates.prev)),
+ }),
+ this.relatedStates.next && m(TreeNode, {
+ left: 'Next state',
+ right: renderRef(
+ this.relatedStates.next,
+ nameForNextOrPrev(this.relatedStates.next)),
+ }),
+ this.relatedStates.wakee && this.relatedStates.wakee.length > 0 &&
m(TreeNode,
{
left: 'Woken threads',
},
this.relatedStates.wakee.map((state) => m(TreeNode, ({
- left: m(Timestamp, {
- ts: state.ts,
- display: [
- 'Start+',
- m(DurationWidget, {dur: Time.sub(state.ts, startTs)}),
- ],
- }),
- right: renderRef(state, getFullThreadName(state.thread)),
- })))),
- ), m(Button,
- {
- label: 'Critical path lite',
- onclick: () => runQuery(`INCLUDE PERFETTO MODULE experimental.thread_executing_span;`, this.engine)
- .then(() => addDebugSliceTrack(
- this.engine,
- {
- sqlSource:
+ left: m(Timestamp, {
+ ts: state.ts,
+ display: [
+ 'Start+',
+ m(DurationWidget, {dur: Time.sub(state.ts, startTs)}),
+ ],
+ }),
+ right: renderRef(state, getFullThreadName(state.thread)),
+ })))),
+ ), m(Button,
+ {
+ label: 'Critical path lite',
+ onclick: () => runQuery(`INCLUDE PERFETTO MODULE experimental.thread_executing_span;`, this.engine)
+ .then(() => addDebugSliceTrack(
+ this.engine,
+ {
+ sqlSource:
`
SELECT
cr.id,
@@ -314,20 +314,20 @@
JOIN thread USING(utid)
JOIN process USING(upid)
`,
- columns: sliceLiteColumnNames,
- },
- `${this.state?.thread?.name}`,
- sliceLiteColumns,
- sliceLiteColumnNames)),
+ columns: sliceLiteColumnNames,
+ },
+ `${this.state?.thread?.name}`,
+ sliceLiteColumns,
+ sliceLiteColumnNames)),
},
- ), m(Button,
- {
- label: 'Critical path',
- onclick: () => runQuery(`INCLUDE PERFETTO MODULE experimental.thread_executing_span;`, this.engine)
- .then(() => addDebugSliceTrack(
- this.engine,
- {
- sqlSource:
+ ), m(Button,
+ {
+ label: 'Critical path',
+ onclick: () => runQuery(`INCLUDE PERFETTO MODULE experimental.thread_executing_span;`, this.engine)
+ .then(() => addDebugSliceTrack(
+ this.engine,
+ {
+ sqlSource:
`
SELECT cr.id, cr.utid, cr.ts, cr.dur, cr.name, cr.table_name
FROM
@@ -337,13 +337,13 @@
trace_bounds.end_ts - trace_bounds.start_ts) cr,
trace_bounds WHERE name IS NOT NULL
`,
- columns: sliceColumnNames,
- },
- `${this.state?.thread?.name}`,
- sliceColumns,
- sliceColumnNames)),
+ columns: sliceColumnNames,
+ },
+ `${this.state?.thread?.name}`,
+ sliceColumns,
+ sliceColumnNames)),
},
- )];
+ )];
}
diff --git a/ui/src/frontend/tickmark_panel.ts b/ui/src/frontend/tickmark_panel.ts
index 2ac5e4e..7600d05 100644
--- a/ui/src/frontend/tickmark_panel.ts
+++ b/ui/src/frontend/tickmark_panel.ts
@@ -77,10 +77,10 @@
const rectEnd = visibleTimeScale.timeToPx(tEnd) + TRACK_SHELL_WIDTH;
ctx.fillStyle = '#ffe263';
ctx.fillRect(
- Math.floor(rectStart),
- 0,
- Math.ceil(rectEnd - rectStart),
- size.height);
+ Math.floor(rectStart),
+ 0,
+ Math.ceil(rectEnd - rectStart),
+ size.height);
}
const index = globals.state.searchIndex;
if (index !== -1 && index < globals.currentSearchResults.tsStarts.length) {
diff --git a/ui/src/frontend/time_axis_panel.ts b/ui/src/frontend/time_axis_panel.ts
index 87fc75f..43e7244 100644
--- a/ui/src/frontend/time_axis_panel.ts
+++ b/ui/src/frontend/time_axis_panel.ts
@@ -51,26 +51,26 @@
const offset = globals.timestampOffset();
switch (timestampFormat()) {
- case TimestampFormat.Raw:
- case TimestampFormat.RawLocale:
- break;
- case TimestampFormat.Seconds:
- case TimestampFormat.Timecode:
- const width = renderTimestamp(ctx, offset, 6, 10, MIN_PX_PER_STEP);
- ctx.fillText('+', 6 + width + 2, 10, 6);
- break;
- case TimestampFormat.UTC:
- const offsetDate =
+ case TimestampFormat.Raw:
+ case TimestampFormat.RawLocale:
+ break;
+ case TimestampFormat.Seconds:
+ case TimestampFormat.Timecode:
+ const width = renderTimestamp(ctx, offset, 6, 10, MIN_PX_PER_STEP);
+ ctx.fillText('+', 6 + width + 2, 10, 6);
+ break;
+ case TimestampFormat.UTC:
+ const offsetDate =
Time.toDate(globals.utcOffset, globals.realtimeOffset);
- const dateStr = toISODateOnly(offsetDate);
- ctx.fillText(`UTC ${dateStr}`, 6, 10);
- break;
- case TimestampFormat.TraceTz:
- const offsetTzDate =
+ const dateStr = toISODateOnly(offsetDate);
+ ctx.fillText(`UTC ${dateStr}`, 6, 10);
+ break;
+ case TimestampFormat.TraceTz:
+ const offsetTzDate =
Time.toDate(globals.traceTzOffset, globals.realtimeOffset);
- const dateTzStr = toISODateOnly(offsetTzDate);
- ctx.fillText(dateTzStr, 6, 10);
- break;
+ const dateTzStr = toISODateOnly(offsetTzDate);
+ ctx.fillText(dateTzStr, 6, 10);
+ break;
}
ctx.save();
@@ -100,37 +100,37 @@
}
function renderTimestamp(
- ctx: CanvasRenderingContext2D,
- time: time,
- x: number,
- y: number,
- minWidth: number,
+ ctx: CanvasRenderingContext2D,
+ time: time,
+ x: number,
+ y: number,
+ minWidth: number,
) {
const fmt = timestampFormat();
switch (fmt) {
- case TimestampFormat.UTC:
- case TimestampFormat.TraceTz:
- case TimestampFormat.Timecode:
- return renderTimecode(ctx, time, x, y, minWidth);
- case TimestampFormat.Raw:
- return renderRawTimestamp(ctx, time.toString(), x, y, minWidth);
- case TimestampFormat.RawLocale:
- return renderRawTimestamp(ctx, time.toLocaleString(), x, y, minWidth);
- case TimestampFormat.Seconds:
- return renderRawTimestamp(ctx, Time.formatSeconds(time), x, y, minWidth);
- default:
- const z: never = fmt;
- throw new Error(`Invalid timestamp ${z}`);
+ case TimestampFormat.UTC:
+ case TimestampFormat.TraceTz:
+ case TimestampFormat.Timecode:
+ return renderTimecode(ctx, time, x, y, minWidth);
+ case TimestampFormat.Raw:
+ return renderRawTimestamp(ctx, time.toString(), x, y, minWidth);
+ case TimestampFormat.RawLocale:
+ return renderRawTimestamp(ctx, time.toLocaleString(), x, y, minWidth);
+ case TimestampFormat.Seconds:
+ return renderRawTimestamp(ctx, Time.formatSeconds(time), x, y, minWidth);
+ default:
+ const z: never = fmt;
+ throw new Error(`Invalid timestamp ${z}`);
}
}
// Print a time on the canvas in raw format.
function renderRawTimestamp(
- ctx: CanvasRenderingContext2D,
- time: string,
- x: number,
- y: number,
- minWidth: number,
+ ctx: CanvasRenderingContext2D,
+ time: string,
+ x: number,
+ y: number,
+ minWidth: number,
) {
ctx.font = '11px Roboto Condensed';
ctx.fillText(time, x, y, minWidth);
@@ -142,12 +142,12 @@
// mmm uuu nnn
// Returns the resultant width of the timecode.
function renderTimecode(
- ctx: CanvasRenderingContext2D,
- time: time,
- x: number,
- y: number,
- minWidth: number,
- ): number {
+ ctx: CanvasRenderingContext2D,
+ time: time,
+ x: number,
+ y: number,
+ minWidth: number,
+): number {
const timecode = Time.toTimecode(time);
ctx.font = '11px Roboto Condensed';
diff --git a/ui/src/frontend/time_selection_panel.ts b/ui/src/frontend/time_selection_panel.ts
index cca5062..67358b3 100644
--- a/ui/src/frontend/time_selection_panel.ts
+++ b/ui/src/frontend/time_selection_panel.ts
@@ -53,7 +53,7 @@
// The |bounds| bounding box gives the visible region, this is used to adjust
// the positioning of the label to ensure it is on screen.
function drawHBar(
- ctx: CanvasRenderingContext2D, target: BBox, bounds: BBox, label: string) {
+ ctx: CanvasRenderingContext2D, target: BBox, bounds: BBox, label: string) {
ctx.fillStyle = FOREGROUND_COLOR;
const xLeft = Math.floor(target.x);
@@ -103,7 +103,7 @@
}
function drawIBar(
- ctx: CanvasRenderingContext2D, xPos: number, bounds: BBox, label: string) {
+ ctx: CanvasRenderingContext2D, xPos: number, bounds: BBox, label: string) {
if (xPos < bounds.x) return;
ctx.fillStyle = FOREGROUND_COLOR;
@@ -189,7 +189,7 @@
if (note.noteType === 'AREA' && !noteIsSelected) {
const selectedArea = globals.state.areas[note.areaId];
this.renderSpan(
- ctx, size, new TimeSpan(selectedArea.start, selectedArea.end));
+ ctx, size, new TimeSpan(selectedArea.start, selectedArea.end));
}
}
@@ -205,22 +205,22 @@
}
renderSpan(
- ctx: CanvasRenderingContext2D, size: PanelSize,
- span: Span<time, duration>) {
+ ctx: CanvasRenderingContext2D, size: PanelSize,
+ span: Span<time, duration>) {
const {visibleTimeScale} = globals.timeline;
const xLeft = visibleTimeScale.timeToPx(span.start);
const xRight = visibleTimeScale.timeToPx(span.end);
const label = renderDuration(span.duration);
drawHBar(
- ctx,
- {
- x: TRACK_SHELL_WIDTH + xLeft,
- y: 0,
- width: xRight - xLeft,
- height: size.height,
- },
- this.bounds(size),
- label);
+ ctx,
+ {
+ x: TRACK_SHELL_WIDTH + xLeft,
+ y: 0,
+ width: xRight - xLeft,
+ height: size.height,
+ },
+ this.bounds(size),
+ label);
}
private bounds(size: PanelSize): BBox {
@@ -236,19 +236,19 @@
function stringifyTimestamp(time: time): string {
const fmt = timestampFormat();
switch (fmt) {
- case TimestampFormat.UTC:
- case TimestampFormat.TraceTz:
- case TimestampFormat.Timecode:
- const THIN_SPACE = '\u2009';
- return Time.toTimecode(time).toString(THIN_SPACE);
- case TimestampFormat.Raw:
- return time.toString();
- case TimestampFormat.RawLocale:
- return time.toLocaleString();
- case TimestampFormat.Seconds:
- return Time.formatSeconds(time);
- default:
- const z: never = fmt;
- throw new Error(`Invalid timestamp ${z}`);
+ case TimestampFormat.UTC:
+ case TimestampFormat.TraceTz:
+ case TimestampFormat.Timecode:
+ const THIN_SPACE = '\u2009';
+ return Time.toTimecode(time).toString(THIN_SPACE);
+ case TimestampFormat.Raw:
+ return time.toString();
+ case TimestampFormat.RawLocale:
+ return time.toLocaleString();
+ case TimestampFormat.Seconds:
+ return Time.formatSeconds(time);
+ default:
+ const z: never = fmt;
+ throw new Error(`Invalid timestamp ${z}`);
}
}
diff --git a/ui/src/frontend/topbar.ts b/ui/src/frontend/topbar.ts
index 073ed18..b5a3f84 100644
--- a/ui/src/frontend/topbar.ts
+++ b/ui/src/frontend/topbar.ts
@@ -32,7 +32,7 @@
private isLoading(): boolean {
const engine = globals.getCurrentEngine();
return (
- (engine && !engine.ready) || globals.numQueuedQueries > 0 ||
+ (engine && !engine.ready) || globals.numQueuedQueries > 0 ||
taskTracker.hasPendingTasks());
}
}
@@ -40,16 +40,16 @@
class NewVersionNotification implements m.ClassComponent {
view() {
return m(
- '.new-version-toast',
- `Updated to ${VERSION} and ready for offline use!`,
- m('button.notification-btn.preferred',
- {
- onclick: () => {
- globals.newVersionAvailable = false;
- raf.scheduleFullRedraw();
- },
+ '.new-version-toast',
+ `Updated to ${VERSION} and ready for offline use!`,
+ m('button.notification-btn.preferred',
+ {
+ onclick: () => {
+ globals.newVersionAvailable = false;
+ raf.scheduleFullRedraw();
},
- 'Dismiss'),
+ },
+ 'Dismiss'),
);
}
}
@@ -65,19 +65,19 @@
return;
}
return m(
- '.helpful-hint',
- m('.hint-text',
- 'Are you trying to pan? Use the WASD keys or hold shift to click ' +
+ '.helpful-hint',
+ m('.hint-text',
+ 'Are you trying to pan? Use the WASD keys or hold shift to click ' +
'and drag. Press \'?\' for more help.'),
- m('button.hint-dismiss-button',
- {
- onclick: () => {
- globals.showPanningHint = false;
- localStorage.setItem(DISMISSED_PANNING_HINT_KEY, 'true');
- raf.scheduleFullRedraw();
- },
+ m('button.hint-dismiss-button',
+ {
+ onclick: () => {
+ globals.showPanningHint = false;
+ localStorage.setItem(DISMISSED_PANNING_HINT_KEY, 'true');
+ raf.scheduleFullRedraw();
},
- 'Dismiss'),
+ },
+ 'Dismiss'),
);
}
}
@@ -91,16 +91,16 @@
const errors = globals.traceErrors;
if (!Boolean(errors) && !globals.metricError || mode === 'COMMAND') return;
const message = Boolean(errors) ?
- `${errors} import or data loss errors detected.` :
- `Metric error detected.`;
+ `${errors} import or data loss errors detected.` :
+ `Metric error detected.`;
return m(
- 'a.error',
- {href: '#!/info'},
- m('i.material-icons',
- {
- title: message + ` Click for more info.`,
- },
- 'announcement'));
+ 'a.error',
+ {href: '#!/info'},
+ m('i.material-icons',
+ {
+ title: message + ` Click for more info.`,
+ },
+ 'announcement'));
}
}
@@ -112,11 +112,11 @@
view({attrs}: m.Vnode<TopbarAttrs>) {
const {omnibox} = attrs;
return m(
- '.topbar',
- {class: globals.state.sidebarVisible ? '' : 'hide-sidebar'},
- globals.newVersionAvailable ? m(NewVersionNotification) : omnibox,
- m(Progress),
- m(HelpPanningNotification),
- m(TraceErrorIcon));
+ '.topbar',
+ {class: globals.state.sidebarVisible ? '' : 'hide-sidebar'},
+ globals.newVersionAvailable ? m(NewVersionNotification) : omnibox,
+ m(Progress),
+ m(HelpPanningNotification),
+ m(TraceErrorIcon));
}
}
diff --git a/ui/src/frontend/trace_attrs.ts b/ui/src/frontend/trace_attrs.ts
index e658e53..444e60c 100644
--- a/ui/src/frontend/trace_attrs.ts
+++ b/ui/src/frontend/trace_attrs.ts
@@ -48,7 +48,7 @@
if (!isShareable()) {
const msg =
[m('p',
- 'This trace was opened by an external site and as such cannot ' +
+ 'This trace was opened by an external site and as such cannot ' +
'be re-shared preserving the UI state.')];
if (traceUrl) {
msg.push(m('p', 'By using the URL below you can open this trace again.'));
@@ -66,7 +66,7 @@
if (!isShareable() || !isTraceLoaded()) return;
const result = confirm(
- `Upload UI state and generate a permalink. ` +
+ `Upload UI state and generate a permalink. ` +
`The trace will be accessible by anybody with the permalink.`);
if (result) {
globals.logging.logEvent('Trace Actions', 'Create permalink');
diff --git a/ui/src/frontend/trace_converter.ts b/ui/src/frontend/trace_converter.ts
index fb0bc12..71940a7 100644
--- a/ui/src/frontend/trace_converter.ts
+++ b/ui/src/frontend/trace_converter.ts
@@ -108,7 +108,7 @@
}
export function convertTraceToPprofAndDownload(
- trace: Blob, pid: number, ts: time) {
+ trace: Blob, pid: number, ts: time) {
makeWorkerAndPost({
kind: 'ConvertTraceToPprof',
trace,
diff --git a/ui/src/frontend/trace_info_page.ts b/ui/src/frontend/trace_info_page.ts
index 867af72..1f737fd 100644
--- a/ui/src/frontend/trace_info_page.ts
+++ b/ui/src/frontend/trace_info_page.ts
@@ -75,23 +75,23 @@
}
const idx = row.idx !== '' ? `[${row.idx}]` : '';
tableRows.push(m(
- 'tr',
- m('td.name', {title: row.description}, `${row.name}${idx}`, help),
- m('td', `${row.value}`),
- m('td', `${row.severity} (${row.source})`),
- ));
+ 'tr',
+ m('td.name', {title: row.description}, `${row.name}${idx}`, help),
+ m('td', `${row.value}`),
+ m('td', `${row.severity} (${row.source})`),
+ ));
}
return m(
- `section${attrs.cssClass}`,
- m('h2', attrs.title),
- m('h3', attrs.subTitle),
- m(
- 'table',
- m('thead',
- m('tr', m('td', 'Name'), m('td', 'Value'), m('td', 'Type'))),
- m('tbody', tableRows),
- ),
+ `section${attrs.cssClass}`,
+ m('h2', attrs.title),
+ m('h3', attrs.subTitle),
+ m(
+ 'table',
+ m('thead',
+ m('tr', m('td', 'Name'), m('td', 'Value'), m('td', 'Type'))),
+ m('tbody', tableRows),
+ ),
);
}
}
@@ -100,10 +100,10 @@
view() {
if (!globals.metricError) return;
return m(
- `section.errors`,
- m('h2', `Metric Errors`),
- m('h3', `One or more metrics were not computed successfully:`),
- m('div.metric-error', globals.metricError));
+ `section.errors`,
+ m('h2', `Metric Errors`),
+ m('h3', `One or more metrics were not computed successfully:`),
+ m('div.metric-error', globals.metricError));
}
}
@@ -148,20 +148,20 @@
const tableRows = [];
for (const row of resp.rows) {
tableRows.push(m(
- 'tr',
- m('td.name', `${row.name}`),
- m('td', `${row.value}`),
- ));
+ 'tr',
+ m('td.name', `${row.name}`),
+ m('td', `${row.value}`),
+ ));
}
return m(
- 'section',
- m('h2', 'System info and metadata'),
- m(
- 'table',
- m('thead', m('tr', m('td', 'Name'), m('td', 'Value'))),
- m('tbody', tableRows),
- ),
+ 'section',
+ m('h2', 'System info and metadata'),
+ m(
+ 'table',
+ m('thead', m('tr', m('td', 'Name'), m('td', 'Value'))),
+ m('tbody', tableRows),
+ ),
);
}
}
@@ -213,7 +213,7 @@
if (row.standard_mode_supported) {
standardInterventions =
`angle=${row.standard_mode_use_angle},downscale=${
- row.standard_mode_downscale},fps=${row.standard_mode_fps}`;
+ row.standard_mode_downscale},fps=${row.standard_mode_fps}`;
} else {
standardInterventions = 'Not supported';
}
@@ -221,7 +221,7 @@
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
if (row.perf_mode_supported) {
perfInterventions = `angle=${row.perf_mode_use_angle},downscale=${
- row.perf_mode_downscale},fps=${row.perf_mode_fps}`;
+ row.perf_mode_downscale},fps=${row.perf_mode_fps}`;
} else {
perfInterventions = 'Not supported';
}
@@ -229,7 +229,7 @@
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
if (row.battery_mode_supported) {
batteryInterventions = `angle=${row.battery_mode_use_angle},downscale=${
- row.battery_mode_downscale},fps=${row.battery_mode_fps}`;
+ row.battery_mode_downscale},fps=${row.battery_mode_fps}`;
} else {
batteryInterventions = 'Not supported';
}
@@ -243,31 +243,31 @@
row.current_mode = 'Battery';
}
tableRows.push(m(
- 'tr',
- m('td.name', `${row.package_name}`),
- m('td', `${row.current_mode}`),
- m('td', standardInterventions),
- m('td', perfInterventions),
- m('td', batteryInterventions),
- ));
+ 'tr',
+ m('td.name', `${row.package_name}`),
+ m('td', `${row.current_mode}`),
+ m('td', standardInterventions),
+ m('td', perfInterventions),
+ m('td', batteryInterventions),
+ ));
}
return m(
- 'section',
- m('h2', 'Game Intervention List'),
- m(
- 'table',
- m('thead',
- m(
- 'tr',
- m('td', 'Name'),
- m('td', 'Current mode'),
- m('td', 'Standard mode interventions'),
- m('td', 'Performance mode interventions'),
- m('td', 'Battery mode interventions'),
- )),
- m('tbody', tableRows),
- ),
+ 'section',
+ m('h2', 'Game Intervention List'),
+ m(
+ 'table',
+ m('thead',
+ m(
+ 'tr',
+ m('td', 'Name'),
+ m('td', 'Current mode'),
+ m('td', 'Standard mode interventions'),
+ m('td', 'Performance mode interventions'),
+ m('td', 'Battery mode interventions'),
+ )),
+ m('tbody', tableRows),
+ ),
);
}
}
@@ -298,29 +298,29 @@
const tableRows = [];
for (const row of resp.rows) {
tableRows.push(m(
- 'tr',
- m('td.name', `${row.package_name}`),
- m('td', `${row.version_code}`),
- /* eslint-disable @typescript-eslint/strict-boolean-expressions */
- m('td',
- `${row.debuggable ? 'debuggable' : ''} ${
- row.profileable_from_shell ? 'profileable' : ''}`),
- /* eslint-enable */
- ));
+ 'tr',
+ m('td.name', `${row.package_name}`),
+ m('td', `${row.version_code}`),
+ /* eslint-disable @typescript-eslint/strict-boolean-expressions */
+ m('td',
+ `${row.debuggable ? 'debuggable' : ''} ${
+ row.profileable_from_shell ? 'profileable' : ''}`),
+ /* eslint-enable */
+ ));
}
return m(
- 'section',
- m('h2', 'Package list'),
- m(
- 'table',
- m('thead',
- m('tr',
- m('td', 'Name'),
- m('td', 'Version code'),
- m('td', 'Flags'))),
- m('tbody', tableRows),
- ),
+ 'section',
+ m('h2', 'Package list'),
+ m(
+ 'table',
+ m('thead',
+ m('tr',
+ m('td', 'Name'),
+ m('td', 'Version code'),
+ m('td', 'Flags'))),
+ m('tbody', tableRows),
+ ),
);
}
}
@@ -328,41 +328,41 @@
export const TraceInfoPage = createPage({
view() {
return m(
- '.trace-info-page',
- m(MetricErrors),
- m(StatsSection, {
- queryId: 'info_errors',
- title: 'Import errors',
- cssClass: '.errors',
- subTitle:
+ '.trace-info-page',
+ m(MetricErrors),
+ m(StatsSection, {
+ queryId: 'info_errors',
+ title: 'Import errors',
+ cssClass: '.errors',
+ subTitle:
`The following errors have been encountered while importing the
trace. These errors are usually non-fatal but indicate that one
or more tracks might be missing or showing erroneous data.`,
- sqlConstraints: `severity = 'error' and value > 0`,
+ sqlConstraints: `severity = 'error' and value > 0`,
- }),
- m(StatsSection, {
- queryId: 'info_data_losses',
- title: 'Data losses',
- cssClass: '.errors',
- subTitle:
+ }),
+ m(StatsSection, {
+ queryId: 'info_data_losses',
+ title: 'Data losses',
+ cssClass: '.errors',
+ subTitle:
`These counters are collected at trace recording time. The trace
data for one or more data sources was dropped and hence some
track contents will be incomplete.`,
- sqlConstraints: `severity = 'data_loss' and value > 0`,
- }),
- m(TraceMetadata),
- m(PackageList),
- m(AndroidGameInterventionList),
- m(StatsSection, {
- queryId: 'info_all',
- title: 'Debugging stats',
- cssClass: '',
- subTitle: `Debugging statistics such as trace buffer usage and metrics
+ sqlConstraints: `severity = 'data_loss' and value > 0`,
+ }),
+ m(TraceMetadata),
+ m(PackageList),
+ m(AndroidGameInterventionList),
+ m(StatsSection, {
+ queryId: 'info_all',
+ title: 'Debugging stats',
+ cssClass: '',
+ subTitle: `Debugging statistics such as trace buffer usage and metrics
coming from the TraceProcessor importer stages.`,
- sqlConstraints: '',
+ sqlConstraints: '',
- }),
+ }),
);
},
});
diff --git a/ui/src/frontend/trace_url_handler.ts b/ui/src/frontend/trace_url_handler.ts
index 721e4d3..98577aa 100644
--- a/ui/src/frontend/trace_url_handler.ts
+++ b/ui/src/frontend/trace_url_handler.ts
@@ -132,23 +132,23 @@
const navigateToOldTraceUuid = () => {
Router.navigate(
- `#!/viewer?local_cache_key=${globals.state.traceUuid || ''}`);
+ `#!/viewer?local_cache_key=${globals.state.traceUuid || ''}`);
};
if (!maybeTrace) {
showModal({
title: 'Could not find the trace in the cache storage',
content: m(
- 'div',
- m('p',
- 'You are trying to load a cached trace by setting the ' +
+ 'div',
+ m('p',
+ 'You are trying to load a cached trace by setting the ' +
'?local_cache_key argument in the URL.'),
- m('p', 'Unfortunately the trace wasn\'t in the cache storage.'),
- m('p',
- 'This can happen if a tab was discarded and wasn\'t opened ' +
+ m('p', 'Unfortunately the trace wasn\'t in the cache storage.'),
+ m('p',
+ 'This can happen if a tab was discarded and wasn\'t opened ' +
'for too long, or if you just mis-pasted the URL.'),
- m('pre', `Trace UUID: ${traceUuid}`),
- ),
+ m('pre', `Trace UUID: ${traceUuid}`),
+ ),
});
navigateToOldTraceUuid();
return;
@@ -171,18 +171,18 @@
await showModal({
title: 'You are about to load a different trace and reset the UI state',
content: m(
- 'div',
- m('p',
- 'You are seeing this because you either pasted a URL with ' +
+ 'div',
+ m('p',
+ 'You are seeing this because you either pasted a URL with ' +
'a different ?local_cache_key=xxx argument or because you hit ' +
'the history back/fwd button and reached a different trace.'),
- m('p',
- 'If you continue another trace will be loaded and the UI ' +
+ m('p',
+ 'If you continue another trace will be loaded and the UI ' +
'state will be cleared.'),
- m('pre',
- `Old trace: ${globals.state.traceUuid || '<no trace>'}\n` +
+ m('pre',
+ `Old trace: ${globals.state.traceUuid || '<no trace>'}\n` +
`New trace: ${traceUuid}`),
- ),
+ ),
buttons: [
{
text: 'Continue',
@@ -216,13 +216,13 @@
// when users click on share we don't fail the re-fetch().
const fileName = url.split('/').pop() || 'local_trace.pftrace';
const request = fetch(url)
- .then((response) => response.blob())
- .then((blob) => {
- globals.dispatch(Actions.openTraceFromFile({
- file: new File([blob], fileName),
- }));
- })
- .catch((e) => alert(`Could not load local trace ${e}`));
+ .then((response) => response.blob())
+ .then((blob) => {
+ globals.dispatch(Actions.openTraceFromFile({
+ file: new File([blob], fileName),
+ }));
+ })
+ .catch((e) => alert(`Could not load local trace ${e}`));
taskTracker.trackPromise(request, 'Downloading local trace');
} else {
globals.dispatch(Actions.openTraceFromUrl({url}));
@@ -232,16 +232,16 @@
function openTraceFromAndroidBugTool() {
// TODO(hjd): Unify updateStatus and TaskTracker
globals.dispatch(Actions.updateStatus(
- {msg: 'Loading trace from ABT extension', timestamp: Date.now() / 1000}));
+ {msg: 'Loading trace from ABT extension', timestamp: Date.now() / 1000}));
const loadInfo = loadAndroidBugToolInfo();
taskTracker.trackPromise(loadInfo, 'Loading trace from ABT extension');
loadInfo
- .then((info) => {
- globals.dispatch(Actions.openTraceFromFile({
- file: info.file,
- }));
- })
- .catch((e) => {
- console.error(e);
- });
+ .then((info) => {
+ globals.dispatch(Actions.openTraceFromFile({
+ file: info.file,
+ }));
+ })
+ .catch((e) => {
+ console.error(e);
+ });
}
diff --git a/ui/src/frontend/track_cache.ts b/ui/src/frontend/track_cache.ts
index 63d0939..09ddf41 100644
--- a/ui/src/frontend/track_cache.ts
+++ b/ui/src/frontend/track_cache.ts
@@ -67,7 +67,7 @@
}
private constructor(
- startNs: time, endNs: time, bucketNs: duration, windowSizePx: number) {
+ startNs: time, endNs: time, bucketNs: duration, windowSizePx: number) {
this.start = startNs;
this.end = endNs;
this.bucketSize = bucketNs;
diff --git a/ui/src/frontend/track_cache_unittest.ts b/ui/src/frontend/track_cache_unittest.ts
index b3a273e..2be853b 100644
--- a/ui/src/frontend/track_cache_unittest.ts
+++ b/ui/src/frontend/track_cache_unittest.ts
@@ -32,19 +32,19 @@
test('cache', () => {
const key1 = (CacheKey.create(Time.fromRaw(1000n), Time.fromRaw(1100n), 100))
- .normalize();
+ .normalize();
const key2 = (CacheKey.create(Time.fromRaw(2000n), Time.fromRaw(2100n), 100))
- .normalize();
+ .normalize();
const key3 = (CacheKey.create(Time.fromRaw(3000n), Time.fromRaw(3100n), 100))
- .normalize();
+ .normalize();
const key4 = (CacheKey.create(Time.fromRaw(4000n), Time.fromRaw(4100n), 100))
- .normalize();
+ .normalize();
const key5 = (CacheKey.create(Time.fromRaw(5000n), Time.fromRaw(5100n), 100))
- .normalize();
+ .normalize();
const key6 = (CacheKey.create(Time.fromRaw(6000n), Time.fromRaw(6100n), 100))
- .normalize();
+ .normalize();
const key7 = (CacheKey.create(Time.fromRaw(7000n), Time.fromRaw(7100n), 100))
- .normalize();
+ .normalize();
const cache = new TrackCache<string>(5);
cache.insert(key1, 'v1');
diff --git a/ui/src/frontend/track_group_panel.ts b/ui/src/frontend/track_group_panel.ts
index 2b39cb7..818eeb1 100644
--- a/ui/src/frontend/track_group_panel.ts
+++ b/ui/src/frontend/track_group_panel.ts
@@ -95,7 +95,7 @@
trackGroup.tracks.every((id) => selectedArea.tracks.includes(id))) {
checkBox = Icons.Checkbox;
} else if (
- selectedArea.tracks.includes(trackGroupId) ||
+ selectedArea.tracks.includes(trackGroupId) ||
trackGroup.tracks.some((id) => selectedArea.tracks.includes(id))) {
checkBox = Icons.IndeterminateCheckbox;
}
@@ -107,51 +107,51 @@
}
return m(
- `.track-group-panel[collapsed=${collapsed}]`,
+ `.track-group-panel[collapsed=${collapsed}]`,
+ {
+ id: 'track_' + trackGroupId,
+ oncreate: () => this.onupdate(),
+ onupdate: () => this.onupdate(),
+ },
+ m(`.shell`,
{
- id: 'track_' + trackGroupId,
- oncreate: () => this.onupdate(),
- onupdate: () => this.onupdate(),
- },
- m(`.shell`,
- {
- onclick: (e: MouseEvent) => {
- globals.dispatch(Actions.toggleTrackGroupCollapsed({
- trackGroupId,
- })),
- e.stopPropagation();
- },
- class: `${highlightClass}`,
+ onclick: (e: MouseEvent) => {
+ globals.dispatch(Actions.toggleTrackGroupCollapsed({
+ trackGroupId,
+ })),
+ e.stopPropagation();
},
+ class: `${highlightClass}`,
+ },
- m('.fold-button',
- m('i.material-icons',
- collapsed ? Icons.ExpandDown : Icons.ExpandUp)),
- m('.title-wrapper',
- m(
- 'h1.track-title',
- {title: name},
- name,
- renderChips(tags),
- ),
- (collapsed && child !== null) ? m('h2.track-subtitle', child) :
- null),
- selection && selection.kind === 'AREA' ?
- m('i.material-icons.track-button',
- {
- onclick: (e: MouseEvent) => {
- globals.dispatch(Actions.toggleTrackSelection(
- {id: trackGroupId, isTrackGroup: true}));
- e.stopPropagation();
- },
- },
- checkBox) :
- ''),
+ m('.fold-button',
+ m('i.material-icons',
+ collapsed ? Icons.ExpandDown : Icons.ExpandUp)),
+ m('.title-wrapper',
+ m(
+ 'h1.track-title',
+ {title: name},
+ name,
+ renderChips(tags),
+ ),
+ (collapsed && child !== null) ? m('h2.track-subtitle', child) :
+ null),
+ selection && selection.kind === 'AREA' ?
+ m('i.material-icons.track-button',
+ {
+ onclick: (e: MouseEvent) => {
+ globals.dispatch(Actions.toggleTrackSelection(
+ {id: trackGroupId, isTrackGroup: true}));
+ e.stopPropagation();
+ },
+ },
+ checkBox) :
+ ''),
- trackFSM ? m(TrackContent,
- {track: trackFSM.track},
- (!collapsed && child !== null) ? m('span', child) : null) :
- null);
+ trackFSM ? m(TrackContent,
+ {track: trackFSM.track},
+ (!collapsed && child !== null) ? m('span', child) : null) :
+ null);
}
private onupdate() {
@@ -169,10 +169,10 @@
if (selectedArea.tracks.includes(this.trackGroupId)) {
ctx.fillStyle = 'rgba(131, 152, 230, 0.3)';
ctx.fillRect(
- visibleTimeScale.timeToPx(selectedArea.start) + TRACK_SHELL_WIDTH,
- 0,
- visibleTimeScale.durationToPx(selectedAreaDuration),
- size.height);
+ visibleTimeScale.timeToPx(selectedArea.start) + TRACK_SHELL_WIDTH,
+ 0,
+ visibleTimeScale.durationToPx(selectedAreaDuration),
+ size.height);
}
}
@@ -190,9 +190,9 @@
this.highlightIfTrackSelected(ctx, size);
drawGridLines(
- ctx,
- size.width,
- size.height);
+ ctx,
+ size.width,
+ size.height);
ctx.save();
ctx.translate(TRACK_SHELL_WIDTH, 0);
@@ -209,30 +209,30 @@
// Draw vertical line when hovering on the notes panel.
if (globals.state.hoveredNoteTimestamp !== -1n) {
drawVerticalLineAtTime(
- ctx,
- visibleTimeScale,
- globals.state.hoveredNoteTimestamp,
- size.height,
- `#aaa`);
+ ctx,
+ visibleTimeScale,
+ globals.state.hoveredNoteTimestamp,
+ size.height,
+ `#aaa`);
}
if (globals.state.hoverCursorTimestamp !== -1n) {
drawVerticalLineAtTime(
- ctx,
- visibleTimeScale,
- globals.state.hoverCursorTimestamp,
- size.height,
- `#344596`);
+ ctx,
+ visibleTimeScale,
+ globals.state.hoverCursorTimestamp,
+ size.height,
+ `#344596`);
}
if (globals.state.currentSelection !== null) {
if (globals.state.currentSelection.kind === 'SLICE' &&
globals.sliceDetails.wakeupTs !== undefined) {
drawVerticalLineAtTime(
- ctx,
- visibleTimeScale,
- globals.sliceDetails.wakeupTs,
- size.height,
- `black`);
+ ctx,
+ visibleTimeScale,
+ globals.sliceDetails.wakeupTs,
+ size.height,
+ `black`);
}
}
// All marked areas should have semi-transparent vertical lines
@@ -242,22 +242,22 @@
const transparentNoteColor =
'rgba(' + hex.rgb(note.color.substr(1)).toString() + ', 0.65)';
drawVerticalLineAtTime(
- ctx,
- visibleTimeScale,
- globals.state.areas[note.areaId].start,
- size.height,
- transparentNoteColor,
- 1);
+ ctx,
+ visibleTimeScale,
+ globals.state.areas[note.areaId].start,
+ size.height,
+ transparentNoteColor,
+ 1);
drawVerticalLineAtTime(
- ctx,
- visibleTimeScale,
- globals.state.areas[note.areaId].end,
- size.height,
- transparentNoteColor,
- 1);
+ ctx,
+ visibleTimeScale,
+ globals.state.areas[note.areaId].end,
+ size.height,
+ transparentNoteColor,
+ 1);
} else if (note.noteType === 'DEFAULT') {
drawVerticalLineAtTime(
- ctx, visibleTimeScale, note.timestamp, size.height, note.color);
+ ctx, visibleTimeScale, note.timestamp, size.height, note.color);
}
}
}
diff --git a/ui/src/frontend/track_panel.ts b/ui/src/frontend/track_panel.ts
index 099875f..5c9651c 100644
--- a/ui/src/frontend/track_panel.ts
+++ b/ui/src/frontend/track_panel.ts
@@ -109,54 +109,54 @@
const dragClass = this.dragging ? `drag` : '';
const dropClass = this.dropping ? `drop-${this.dropping}` : '';
return m(
- `.track-shell[draggable=true]`,
+ `.track-shell[draggable=true]`,
+ {
+ class: `${highlightClass} ${dragClass} ${dropClass}`,
+ ondragstart: (e: DragEvent) => this.ondragstart(e, attrs.trackKey),
+ ondragend: this.ondragend.bind(this),
+ ondragover: this.ondragover.bind(this),
+ ondragleave: this.ondragleave.bind(this),
+ ondrop: (e: DragEvent) => this.ondrop(e, attrs.trackKey),
+ },
+ m(
+ 'h1',
{
- class: `${highlightClass} ${dragClass} ${dropClass}`,
- ondragstart: (e: DragEvent) => this.ondragstart(e, attrs.trackKey),
- ondragend: this.ondragend.bind(this),
- ondragover: this.ondragover.bind(this),
- ondragleave: this.ondragleave.bind(this),
- ondrop: (e: DragEvent) => this.ondrop(e, attrs.trackKey),
+ title: attrs.title,
+ style: {
+ 'font-size': getTitleSize(attrs.title),
+ },
},
- m(
- 'h1',
- {
- title: attrs.title,
- style: {
- 'font-size': getTitleSize(attrs.title),
- },
- },
- attrs.title,
- renderChips(attrs.tags),
- ),
- m('.track-buttons',
- attrs.buttons,
- m(TrackButton, {
- action: () => {
- globals.dispatch(
- Actions.toggleTrackPinned({trackKey: attrs.trackKey}));
- },
- i: Icons.Pin,
- filledIcon: isPinned(attrs.trackKey),
- tooltip: isPinned(attrs.trackKey) ? 'Unpin' : 'Pin to top',
- showButton: isPinned(attrs.trackKey),
- fullHeight: true,
- }),
- globals.state.currentSelection !== null &&
+ attrs.title,
+ renderChips(attrs.tags),
+ ),
+ m('.track-buttons',
+ attrs.buttons,
+ m(TrackButton, {
+ action: () => {
+ globals.dispatch(
+ Actions.toggleTrackPinned({trackKey: attrs.trackKey}));
+ },
+ i: Icons.Pin,
+ filledIcon: isPinned(attrs.trackKey),
+ tooltip: isPinned(attrs.trackKey) ? 'Unpin' : 'Pin to top',
+ showButton: isPinned(attrs.trackKey),
+ fullHeight: true,
+ }),
+ globals.state.currentSelection !== null &&
globals.state.currentSelection.kind === 'AREA' ?
- m(TrackButton, {
- action: (e: MouseEvent) => {
- globals.dispatch(Actions.toggleTrackSelection(
- {id: attrs.trackKey, isTrackGroup: false}));
- e.stopPropagation();
- },
- i: isSelected(attrs.trackKey) ? Icons.Checkbox :
- Icons.BlankCheckbox,
- tooltip: isSelected(attrs.trackKey) ? 'Remove track' :
- 'Add track to selection',
- showButton: true,
- }) :
- ''));
+ m(TrackButton, {
+ action: (e: MouseEvent) => {
+ globals.dispatch(Actions.toggleTrackSelection(
+ {id: attrs.trackKey, isTrackGroup: false}));
+ e.stopPropagation();
+ },
+ i: isSelected(attrs.trackKey) ? Icons.Checkbox :
+ Icons.BlankCheckbox,
+ tooltip: isSelected(attrs.trackKey) ? 'Remove track' :
+ 'Add track to selection',
+ showButton: true,
+ }) :
+ ''));
}
ondragstart(e: DragEvent, trackKey: string) {
@@ -220,50 +220,50 @@
view(node: m.CVnode<TrackContentAttrs>) {
const attrs = node.attrs;
return m(
- '.track-content',
- {
- onmousemove: (e: MouseEvent) => {
- attrs.track.onMouseMove?.(currentTargetOffset(e));
- raf.scheduleRedraw();
- },
- onmouseout: () => {
- attrs.track.onMouseOut?.();
- raf.scheduleRedraw();
- },
- onmousedown: (e: MouseEvent) => {
- const {x, y} = currentTargetOffset(e);
- this.mouseDownX = x;
- this.mouseDownY = y;
- },
- onmouseup: (e: MouseEvent) => {
- if (this.mouseDownX === undefined ||
- this.mouseDownY === undefined) {
- return;
- }
- const {x, y} = currentTargetOffset(e);
- if (Math.abs(x - this.mouseDownX) > 1 ||
- Math.abs(y - this.mouseDownY) > 1) {
- this.selectionOccurred = true;
- }
- this.mouseDownX = undefined;
- this.mouseDownY = undefined;
- },
- onclick: (e: MouseEvent) => {
- // This click event occurs after any selection mouse up/drag events
- // so we have to look if the mouse moved during this click to know
- // if a selection occurred.
- if (this.selectionOccurred) {
- this.selectionOccurred = false;
- return;
- }
- // Returns true if something was selected, so stop propagation.
- if (attrs.track.onMouseClick?.(currentTargetOffset(e))) {
- e.stopPropagation();
- }
- raf.scheduleRedraw();
- },
+ '.track-content',
+ {
+ onmousemove: (e: MouseEvent) => {
+ attrs.track.onMouseMove?.(currentTargetOffset(e));
+ raf.scheduleRedraw();
},
- node.children);
+ onmouseout: () => {
+ attrs.track.onMouseOut?.();
+ raf.scheduleRedraw();
+ },
+ onmousedown: (e: MouseEvent) => {
+ const {x, y} = currentTargetOffset(e);
+ this.mouseDownX = x;
+ this.mouseDownY = y;
+ },
+ onmouseup: (e: MouseEvent) => {
+ if (this.mouseDownX === undefined ||
+ this.mouseDownY === undefined) {
+ return;
+ }
+ const {x, y} = currentTargetOffset(e);
+ if (Math.abs(x - this.mouseDownX) > 1 ||
+ Math.abs(y - this.mouseDownY) > 1) {
+ this.selectionOccurred = true;
+ }
+ this.mouseDownX = undefined;
+ this.mouseDownY = undefined;
+ },
+ onclick: (e: MouseEvent) => {
+ // This click event occurs after any selection mouse up/drag events
+ // so we have to look if the mouse moved during this click to know
+ // if a selection occurred.
+ if (this.selectionOccurred) {
+ this.selectionOccurred = false;
+ return;
+ }
+ // Returns true if something was selected, so stop propagation.
+ if (attrs.track.onMouseClick?.(currentTargetOffset(e))) {
+ e.stopPropagation();
+ }
+ raf.scheduleRedraw();
+ },
+ },
+ node.children);
}
}
@@ -282,22 +282,22 @@
// max height in common.scss so we should read it from CSS to avoid
// them going out of sync.
return m(
- '.track',
- {
- style: {
- height: `${Math.max(18, attrs.heightPx ?? 0)}px`,
- },
- id: 'track_' + attrs.trackKey,
+ '.track',
+ {
+ style: {
+ height: `${Math.max(18, attrs.heightPx ?? 0)}px`,
},
- [
- m(TrackShell, {
- buttons: attrs.buttons,
- title: attrs.title,
- trackKey: attrs.trackKey,
- tags: attrs.tags,
- }),
- attrs.track && m(TrackContent, {track: attrs.track}),
- ]);
+ id: 'track_' + attrs.trackKey,
+ },
+ [
+ m(TrackShell, {
+ buttons: attrs.buttons,
+ title: attrs.title,
+ trackKey: attrs.trackKey,
+ tags: attrs.tags,
+ }),
+ attrs.track && m(TrackContent, {track: attrs.track}),
+ ]);
}
oncreate(vnode: m.VnodeDOM<TrackComponentAttrs>) {
@@ -325,18 +325,18 @@
export class TrackButton implements m.ClassComponent<TrackButtonAttrs> {
view({attrs}: m.CVnode<TrackButtonAttrs>) {
return m(
- 'i.track-button',
- {
- class: [
- (attrs.showButton ? 'show' : ''),
- (attrs.fullHeight ? 'full-height' : ''),
- (attrs.filledIcon ? 'material-icons-filled' : 'material-icons'),
- ].filter(Boolean)
- .join(' '),
- onclick: attrs.action,
- title: attrs.tooltip,
- },
- attrs.i);
+ 'i.track-button',
+ {
+ class: [
+ (attrs.showButton ? 'show' : ''),
+ (attrs.fullHeight ? 'full-height' : ''),
+ (attrs.filledIcon ? 'material-icons-filled' : 'material-icons'),
+ ].filter(Boolean)
+ .join(' '),
+ onclick: attrs.action,
+ title: attrs.tooltip,
+ },
+ attrs.i);
}
}
@@ -395,10 +395,10 @@
if (selectedArea.tracks.includes(this.attrs.trackKey)) {
ctx.fillStyle = SELECTION_FILL_COLOR;
ctx.fillRect(
- visibleTimeScale.timeToPx(selectedArea.start) + TRACK_SHELL_WIDTH,
- 0,
- visibleTimeScale.durationToPx(selectedAreaDuration),
- size.height);
+ visibleTimeScale.timeToPx(selectedArea.start) + TRACK_SHELL_WIDTH,
+ 0,
+ visibleTimeScale.durationToPx(selectedAreaDuration),
+ size.height);
}
}
@@ -406,9 +406,9 @@
ctx.save();
drawGridLines(
- ctx,
- size.width,
- size.height);
+ ctx,
+ size.width,
+ size.height);
ctx.translate(TRACK_SHELL_WIDTH, 0);
if (this.attrs.trackFSM !== undefined) {
@@ -426,30 +426,30 @@
// Draw vertical line when hovering on the notes panel.
if (globals.state.hoveredNoteTimestamp !== -1n) {
drawVerticalLineAtTime(
- ctx,
- visibleTimeScale,
- globals.state.hoveredNoteTimestamp,
- size.height,
- `#aaa`);
+ ctx,
+ visibleTimeScale,
+ globals.state.hoveredNoteTimestamp,
+ size.height,
+ `#aaa`);
}
if (globals.state.hoverCursorTimestamp !== -1n) {
drawVerticalLineAtTime(
- ctx,
- visibleTimeScale,
- globals.state.hoverCursorTimestamp,
- size.height,
- `#344596`);
+ ctx,
+ visibleTimeScale,
+ globals.state.hoverCursorTimestamp,
+ size.height,
+ `#344596`);
}
if (globals.state.currentSelection !== null) {
if (globals.state.currentSelection.kind === 'SLICE' &&
globals.sliceDetails.wakeupTs !== undefined) {
drawVerticalLineAtTime(
- ctx,
- visibleTimeScale,
- globals.sliceDetails.wakeupTs,
- size.height,
- `black`);
+ ctx,
+ visibleTimeScale,
+ globals.sliceDetails.wakeupTs,
+ size.height,
+ `black`);
}
}
// All marked areas should have semi-transparent vertical lines
@@ -459,22 +459,22 @@
const transparentNoteColor =
'rgba(' + hex.rgb(note.color.substr(1)).toString() + ', 0.65)';
drawVerticalLineAtTime(
- ctx,
- visibleTimeScale,
- globals.state.areas[note.areaId].start,
- size.height,
- transparentNoteColor,
- 1);
+ ctx,
+ visibleTimeScale,
+ globals.state.areas[note.areaId].start,
+ size.height,
+ transparentNoteColor,
+ 1);
drawVerticalLineAtTime(
- ctx,
- visibleTimeScale,
- globals.state.areas[note.areaId].end,
- size.height,
- transparentNoteColor,
- 1);
+ ctx,
+ visibleTimeScale,
+ globals.state.areas[note.areaId].end,
+ size.height,
+ transparentNoteColor,
+ 1);
} else if (note.noteType === 'DEFAULT') {
drawVerticalLineAtTime(
- ctx, visibleTimeScale, note.timestamp, size.height, note.color);
+ ctx, visibleTimeScale, note.timestamp, size.height, note.color);
}
}
}
diff --git a/ui/src/frontend/value.ts b/ui/src/frontend/value.ts
index 7e6688d..db9b859 100644
--- a/ui/src/frontend/value.ts
+++ b/ui/src/frontend/value.ts
@@ -66,7 +66,7 @@
// This function accepts and filters out nulls as values in the passed
// dictionary (useful for simplifying the code to render optional values).
export function dict(
- items: {[name: string]: Value|null}, params?: ValueParams): Dict {
+ items: {[name: string]: Value|null}, params?: ValueParams): Dict {
const result: {[name: string]: Value} = {};
for (const [name, value] of Object.entries(items)) {
if (value !== null) {
@@ -137,7 +137,7 @@
icon: 'arrow_drop_down',
items: value.contextMenu,
}) :
- null,
+ null,
];
if (isArray(value)) {
const nodes = value.items.map((value: Value, index: number) => {
@@ -156,12 +156,12 @@
return null;
}
return m(
- 'i.material-icons.grey',
- {
- onclick: button.action,
- title: button.hoverText,
- },
- button.icon ? button.icon : 'call_made');
+ 'i.material-icons.grey',
+ {
+ onclick: button.action,
+ title: button.hoverText,
+ },
+ button.icon ? button.icon : 'call_made');
};
if (value.kind === 'STRING') {
const right = [
diff --git a/ui/src/frontend/vertical_line_helper.ts b/ui/src/frontend/vertical_line_helper.ts
index 1dc926b..8aaa8ab 100644
--- a/ui/src/frontend/vertical_line_helper.ts
+++ b/ui/src/frontend/vertical_line_helper.ts
@@ -18,29 +18,29 @@
import {TimeScale} from './time_scale';
export function drawVerticalLineAtTime(
- ctx: CanvasRenderingContext2D,
- timeScale: TimeScale,
- time: time,
- height: number,
- color: string,
- lineWidth = 2) {
+ ctx: CanvasRenderingContext2D,
+ timeScale: TimeScale,
+ time: time,
+ height: number,
+ color: string,
+ lineWidth = 2) {
const xPos = TRACK_SHELL_WIDTH + Math.floor(timeScale.timeToPx(time));
drawVerticalLine(ctx, xPos, height, color, lineWidth);
}
function drawVerticalLine(ctx: CanvasRenderingContext2D,
- xPos: number,
- height: number,
- color: string,
- lineWidth = 2) {
- ctx.beginPath();
- ctx.strokeStyle = color;
- const prevLineWidth = ctx.lineWidth;
- ctx.lineWidth = lineWidth;
- ctx.moveTo(xPos, 0);
- ctx.lineTo(xPos, height);
- ctx.stroke();
- ctx.closePath();
- ctx.lineWidth = prevLineWidth;
+ xPos: number,
+ height: number,
+ color: string,
+ lineWidth = 2) {
+ ctx.beginPath();
+ ctx.strokeStyle = color;
+ const prevLineWidth = ctx.lineWidth;
+ ctx.lineWidth = lineWidth;
+ ctx.moveTo(xPos, 0);
+ ctx.lineTo(xPos, height);
+ ctx.stroke();
+ ctx.closePath();
+ ctx.lineWidth = prevLineWidth;
}
diff --git a/ui/src/frontend/viewer_page.ts b/ui/src/frontend/viewer_page.ts
index f6fd302..0d43f98 100644
--- a/ui/src/frontend/viewer_page.ts
+++ b/ui/src/frontend/viewer_page.ts
@@ -63,8 +63,8 @@
// If frontend selectedArea exists then we are in the process of editing the
// time range and need to use that value instead.
const area = globals.timeline.selectedArea ?
- globals.timeline.selectedArea :
- globals.state.areas[selection.areaId];
+ globals.timeline.selectedArea :
+ globals.state.areas[selection.areaId];
const {visibleTimeScale} = globals.timeline;
const start = visibleTimeScale.timeToPx(area.start);
const end = visibleTimeScale.timeToPx(area.end);
@@ -103,7 +103,7 @@
const updateDimensions = () => {
const rect = vnode.dom.getBoundingClientRect();
timeline.updateLocalLimits(
- 0, rect.width - TRACK_SHELL_WIDTH - getScrollbarWidth());
+ 0, rect.width - TRACK_SHELL_WIDTH - getScrollbarWidth());
};
updateDimensions();
@@ -148,12 +148,12 @@
return onTimeRangeBoundary(currentPx) !== null;
},
onSelection: (
- dragStartX: number,
- dragStartY: number,
- prevX: number,
- currentX: number,
- currentY: number,
- editing: boolean) => {
+ dragStartX: number,
+ dragStartY: number,
+ prevX: number,
+ currentX: number,
+ currentY: number,
+ editing: boolean) => {
const traceTime = globals.state.traceTime;
const {visibleTimeScale} = timeline;
this.keepCurrentSelection = true;
@@ -161,11 +161,11 @@
const selection = globals.state.currentSelection;
if (selection !== null && selection.kind === 'AREA') {
const area = globals.timeline.selectedArea ?
- globals.timeline.selectedArea :
- globals.state.areas[selection.areaId];
+ globals.timeline.selectedArea :
+ globals.state.areas[selection.areaId];
let newTime =
visibleTimeScale.pxToHpTime(currentX - TRACK_SHELL_WIDTH)
- .toTime();
+ .toTime();
// Have to check again for when one boundary crosses over the other.
const curBoundary = onTimeRangeBoundary(prevX);
if (curBoundary == null) return;
@@ -181,9 +181,9 @@
// When editing the time range we always use the saved tracks,
// since these will not change.
timeline.selectArea(
- Time.max(Time.min(keepTime, newTime), traceTime.start),
- Time.min(Time.max(keepTime, newTime), traceTime.end),
- globals.state.areas[selection.areaId].tracks);
+ Time.max(Time.min(keepTime, newTime), traceTime.start),
+ Time.min(Time.max(keepTime, newTime), traceTime.end),
+ globals.state.areas[selection.areaId].tracks);
}
} else {
let startPx = Math.min(dragStartX, currentX) - TRACK_SHELL_WIDTH;
@@ -193,8 +193,8 @@
startPx = clamp(startPx, pxSpan.start, pxSpan.end);
endPx = clamp(endPx, pxSpan.start, pxSpan.end);
timeline.selectArea(
- visibleTimeScale.pxToHpTime(startPx).toTime('floor'),
- visibleTimeScale.pxToHpTime(endPx).toTime('ceil'),
+ visibleTimeScale.pxToHpTime(startPx).toTime('floor'),
+ visibleTimeScale.pxToHpTime(endPx).toTime('ceil'),
);
timeline.areaY.start = dragStartY;
timeline.areaY.end = currentY;
@@ -212,7 +212,7 @@
const selection = globals.state.currentSelection;
if (selection !== null && selection.kind === 'AREA' && area) {
globals.dispatch(
- Actions.editArea({area, areaId: selection.areaId}));
+ Actions.editArea({area, areaId: selection.areaId}));
}
} else if (area) {
globals.makeSelection(Actions.selectArea({area}));
@@ -291,46 +291,46 @@
}
const result = m(
- '.page',
- m('.split-panel',
- m('.pan-and-zoom-content',
- {
- onclick: () => {
- // We don't want to deselect when panning/drag selecting.
- if (this.keepCurrentSelection) {
- this.keepCurrentSelection = false;
- return;
- }
- globals.makeSelection(Actions.deselect({}));
- },
+ '.page',
+ m('.split-panel',
+ m('.pan-and-zoom-content',
+ {
+ onclick: () => {
+ // We don't want to deselect when panning/drag selecting.
+ if (this.keepCurrentSelection) {
+ this.keepCurrentSelection = false;
+ return;
+ }
+ globals.makeSelection(Actions.deselect({}));
},
- m('.pinned-panel-container', m(PanelContainer, {
- doesScroll: false,
- panels: [
- ...overviewPanel,
- this.timeAxisPanel,
- this.timeSelectionPanel,
- this.notesPanel,
- this.tickmarkPanel,
- ...globals.state.pinnedTracks.map((key) => {
- const trackBundle = this.resolveTrack(key);
- return new TrackPanel({
- key,
- trackKey: key,
- title: trackBundle.title,
- tags: trackBundle.tags,
- trackFSM: trackBundle.trackFSM,
- });
- }),
- ],
- kind: 'OVERVIEW',
- })),
- m('.scrolling-panel-container', m(PanelContainer, {
- doesScroll: true,
- panels: scrollingPanels,
- kind: 'TRACKS',
- })))),
- this.renderTabPanel());
+ },
+ m('.pinned-panel-container', m(PanelContainer, {
+ doesScroll: false,
+ panels: [
+ ...overviewPanel,
+ this.timeAxisPanel,
+ this.timeSelectionPanel,
+ this.notesPanel,
+ this.tickmarkPanel,
+ ...globals.state.pinnedTracks.map((key) => {
+ const trackBundle = this.resolveTrack(key);
+ return new TrackPanel({
+ key,
+ trackKey: key,
+ title: trackBundle.title,
+ tags: trackBundle.tags,
+ trackFSM: trackBundle.trackFSM,
+ });
+ }),
+ ],
+ kind: 'OVERVIEW',
+ })),
+ m('.scrolling-panel-container', m(PanelContainer, {
+ doesScroll: true,
+ panels: scrollingPanels,
+ kind: 'TRACKS',
+ })))),
+ this.renderTabPanel());
this.trackCache.flushOldTracks();
return result;
diff --git a/ui/src/frontend/viz_page.ts b/ui/src/frontend/viz_page.ts
index e6d019e..29f158c 100644
--- a/ui/src/frontend/viz_page.ts
+++ b/ui/src/frontend/viz_page.ts
@@ -42,18 +42,18 @@
view() {
return m(
- '.viz-page',
- m(VegaView, {
- spec: SPEC,
- engine: ENGINE,
- data: {},
- }),
- m(Editor, {
- onUpdate: (text: string) => {
- SPEC = text;
- raf.scheduleFullRedraw();
- },
- }),
+ '.viz-page',
+ m(VegaView, {
+ spec: SPEC,
+ engine: ENGINE,
+ data: {},
+ }),
+ m(Editor, {
+ onUpdate: (text: string) => {
+ SPEC = text;
+ raf.scheduleFullRedraw();
+ },
+ }),
);
},
});
diff --git a/ui/src/frontend/widgets/duration.ts b/ui/src/frontend/widgets/duration.ts
index 884f3e7..11405e1 100644
--- a/ui/src/frontend/widgets/duration.ts
+++ b/ui/src/frontend/widgets/duration.ts
@@ -39,49 +39,49 @@
view({attrs}: m.Vnode<DurationWidgetAttrs>) {
const {dur} = attrs;
return m(
- PopupMenu2,
- {
- trigger: m(Anchor, renderDuration(dur)),
+ PopupMenu2,
+ {
+ trigger: m(Anchor, renderDuration(dur)),
+ },
+ m(MenuItem, {
+ icon: Icons.Copy,
+ label: `Copy raw value`,
+ onclick: () => {
+ copyToClipboard(dur.toString());
},
- m(MenuItem, {
- icon: Icons.Copy,
- label: `Copy raw value`,
- onclick: () => {
- copyToClipboard(dur.toString());
- },
- }),
- m(
- MenuItem,
- {
- label: 'Set time format',
- },
- menuItemForFormat(TimestampFormat.Timecode, 'Timecode'),
- menuItemForFormat(TimestampFormat.UTC, 'Realtime (UTC)'),
- menuItemForFormat(TimestampFormat.TraceTz, 'Realtime (Trace TZ)'),
- menuItemForFormat(TimestampFormat.Seconds, 'Seconds'),
- menuItemForFormat(TimestampFormat.Raw, 'Raw'),
- menuItemForFormat(
- TimestampFormat.RawLocale,
- 'Raw (with locale-specific formatting)'),
- ),
- m(
- MenuItem,
- {
- label: 'Duration precision',
- disabled: !durationPrecisionHasEffect(),
- title: 'Not configurable with current time format',
- },
- menuItemForPrecision(DurationPrecision.Full, 'Full'),
- menuItemForPrecision(
- DurationPrecision.HumanReadable, 'Human readable'),
- ),
- attrs.extraMenuItems ? [m(MenuDivider), attrs.extraMenuItems] : null,
+ }),
+ m(
+ MenuItem,
+ {
+ label: 'Set time format',
+ },
+ menuItemForFormat(TimestampFormat.Timecode, 'Timecode'),
+ menuItemForFormat(TimestampFormat.UTC, 'Realtime (UTC)'),
+ menuItemForFormat(TimestampFormat.TraceTz, 'Realtime (Trace TZ)'),
+ menuItemForFormat(TimestampFormat.Seconds, 'Seconds'),
+ menuItemForFormat(TimestampFormat.Raw, 'Raw'),
+ menuItemForFormat(
+ TimestampFormat.RawLocale,
+ 'Raw (with locale-specific formatting)'),
+ ),
+ m(
+ MenuItem,
+ {
+ label: 'Duration precision',
+ disabled: !durationPrecisionHasEffect(),
+ title: 'Not configurable with current time format',
+ },
+ menuItemForPrecision(DurationPrecision.Full, 'Full'),
+ menuItemForPrecision(
+ DurationPrecision.HumanReadable, 'Human readable'),
+ ),
+ attrs.extraMenuItems ? [m(MenuDivider), attrs.extraMenuItems] : null,
);
}
}
function menuItemForPrecision(
- value: DurationPrecision, label: string): m.Children {
+ value: DurationPrecision, label: string): m.Children {
return m(MenuItem, {
label,
active: value === durationPrecision(),
@@ -94,12 +94,12 @@
function durationPrecisionHasEffect(): boolean {
switch (timestampFormat()) {
- case TimestampFormat.Timecode:
- case TimestampFormat.UTC:
- case TimestampFormat.TraceTz:
- return true;
- default:
- return false;
+ case TimestampFormat.Timecode:
+ case TimestampFormat.UTC:
+ case TimestampFormat.TraceTz:
+ return true;
+ default:
+ return false;
}
}
@@ -107,31 +107,31 @@
export function renderDuration(dur: duration): string {
const fmt = timestampFormat();
switch (fmt) {
- case TimestampFormat.UTC:
- case TimestampFormat.TraceTz:
- case TimestampFormat.Timecode:
- return renderFormattedDuration(dur);
- case TimestampFormat.Raw:
- return dur.toString();
- case TimestampFormat.RawLocale:
- return dur.toLocaleString();
- case TimestampFormat.Seconds:
- return Duration.formatSeconds(dur);
- default:
- const x: never = fmt;
- throw new Error(`Invalid format ${x}`);
+ case TimestampFormat.UTC:
+ case TimestampFormat.TraceTz:
+ case TimestampFormat.Timecode:
+ return renderFormattedDuration(dur);
+ case TimestampFormat.Raw:
+ return dur.toString();
+ case TimestampFormat.RawLocale:
+ return dur.toLocaleString();
+ case TimestampFormat.Seconds:
+ return Duration.formatSeconds(dur);
+ default:
+ const x: never = fmt;
+ throw new Error(`Invalid format ${x}`);
}
}
function renderFormattedDuration(dur: duration): string {
const fmt = durationPrecision();
switch (fmt) {
- case DurationPrecision.HumanReadable:
- return Duration.humanise(dur);
- case DurationPrecision.Full:
- return Duration.format(dur);
- default:
- const x: never = fmt;
- throw new Error(`Invalid format ${x}`);
+ case DurationPrecision.HumanReadable:
+ return Duration.humanise(dur);
+ case DurationPrecision.Full:
+ return Duration.format(dur);
+ default:
+ const x: never = fmt;
+ throw new Error(`Invalid format ${x}`);
}
}
diff --git a/ui/src/frontend/widgets/timestamp.ts b/ui/src/frontend/widgets/timestamp.ts
index e73ae88..ac9572f 100644
--- a/ui/src/frontend/widgets/timestamp.ts
+++ b/ui/src/frontend/widgets/timestamp.ts
@@ -44,9 +44,9 @@
view({attrs}: m.Vnode<TimestampAttrs>) {
const {ts} = attrs;
return m(
- PopupMenu2,
- {
- trigger:
+ PopupMenu2,
+ {
+ trigger:
m(Anchor,
{
onmouseover: () => {
@@ -54,39 +54,39 @@
},
onmouseout: () => {
globals.dispatch(
- Actions.setHoverCursorTimestamp({ts: Time.INVALID}));
+ Actions.setHoverCursorTimestamp({ts: Time.INVALID}));
},
},
attrs.display ?? renderTimestamp(ts)),
+ },
+ m(MenuItem, {
+ icon: Icons.Copy,
+ label: `Copy raw value`,
+ onclick: () => {
+ copyToClipboard(ts.toString());
},
- m(MenuItem, {
- icon: Icons.Copy,
- label: `Copy raw value`,
- onclick: () => {
- copyToClipboard(ts.toString());
- },
- }),
- m(
- MenuItem,
- {
- label: 'Time format',
- },
- menuItemForFormat(TimestampFormat.Timecode, 'Timecode'),
- menuItemForFormat(TimestampFormat.UTC, 'Realtime (UTC)'),
- menuItemForFormat(TimestampFormat.TraceTz, 'Realtime (Trace TZ)'),
- menuItemForFormat(TimestampFormat.Seconds, 'Seconds'),
- menuItemForFormat(TimestampFormat.Raw, 'Raw'),
- menuItemForFormat(
- TimestampFormat.RawLocale,
- 'Raw (with locale-specific formatting)'),
- ),
- attrs.extraMenuItems ? [m(MenuDivider), attrs.extraMenuItems] : null,
+ }),
+ m(
+ MenuItem,
+ {
+ label: 'Time format',
+ },
+ menuItemForFormat(TimestampFormat.Timecode, 'Timecode'),
+ menuItemForFormat(TimestampFormat.UTC, 'Realtime (UTC)'),
+ menuItemForFormat(TimestampFormat.TraceTz, 'Realtime (Trace TZ)'),
+ menuItemForFormat(TimestampFormat.Seconds, 'Seconds'),
+ menuItemForFormat(TimestampFormat.Raw, 'Raw'),
+ menuItemForFormat(
+ TimestampFormat.RawLocale,
+ 'Raw (with locale-specific formatting)'),
+ ),
+ attrs.extraMenuItems ? [m(MenuDivider), attrs.extraMenuItems] : null,
);
}
}
export function menuItemForFormat(
- value: TimestampFormat, label: string): m.Children {
+ value: TimestampFormat, label: string): m.Children {
return m(MenuItem, {
label,
active: value === timestampFormat(),
@@ -101,30 +101,30 @@
const fmt = timestampFormat();
const domainTime = globals.toDomainTime(time);
switch (fmt) {
- case TimestampFormat.UTC:
- case TimestampFormat.TraceTz:
- case TimestampFormat.Timecode:
- return renderTimecode(domainTime);
- case TimestampFormat.Raw:
- return domainTime.toString();
- case TimestampFormat.RawLocale:
- return domainTime.toLocaleString();
- case TimestampFormat.Seconds:
- return Time.formatSeconds(domainTime);
- default:
- const x: never = fmt;
- throw new Error(`Invalid timestamp ${x}`);
+ case TimestampFormat.UTC:
+ case TimestampFormat.TraceTz:
+ case TimestampFormat.Timecode:
+ return renderTimecode(domainTime);
+ case TimestampFormat.Raw:
+ return domainTime.toString();
+ case TimestampFormat.RawLocale:
+ return domainTime.toLocaleString();
+ case TimestampFormat.Seconds:
+ return Time.formatSeconds(domainTime);
+ default:
+ const x: never = fmt;
+ throw new Error(`Invalid timestamp ${x}`);
}
}
export function renderTimecode(time: time): m.Children {
const {dhhmmss, millis, micros, nanos} = Time.toTimecode(time);
return m(
- 'span.pf-timecode',
- m('span.pf-timecode-hms', dhhmmss),
- '.',
- m('span.pf-timecode-millis', millis),
- m('span.pf-timecode-micros', micros),
- m('span.pf-timecode-nanos', nanos),
+ 'span.pf-timecode',
+ m('span.pf-timecode-hms', dhhmmss),
+ '.',
+ m('span.pf-timecode-millis', millis),
+ m('span.pf-timecode-micros', micros),
+ m('span.pf-timecode-nanos', nanos),
);
}
diff --git a/ui/src/frontend/widgets_page.ts b/ui/src/frontend/widgets_page.ts
index 86d3a67..1244612 100644
--- a/ui/src/frontend/widgets_page.ts
+++ b/ui/src/frontend/widgets_page.ts
@@ -210,29 +210,29 @@
function getExampleSpec(example: SpecExample): string {
switch (example) {
- case SpecExample.BarChart:
- return SPEC_BAR_CHART;
- case SpecExample.BarChartLite:
- return SPEC_BAR_CHART_LITE;
- case SpecExample.Broken:
- return SPEC_BROKEN;
- default:
- const exhaustiveCheck: never = example;
- throw new Error(`Unhandled case: ${exhaustiveCheck}`);
+ case SpecExample.BarChart:
+ return SPEC_BAR_CHART;
+ case SpecExample.BarChartLite:
+ return SPEC_BAR_CHART_LITE;
+ case SpecExample.Broken:
+ return SPEC_BROKEN;
+ default:
+ const exhaustiveCheck: never = example;
+ throw new Error(`Unhandled case: ${exhaustiveCheck}`);
}
}
function getExampleData(example: DataExample) {
switch (example) {
- case DataExample.English:
- return DATA_ENGLISH_LETTER_FREQUENCY;
- case DataExample.Polish:
- return DATA_POLISH_LETTER_FREQUENCY;
- case DataExample.Empty:
- return DATA_EMPTY;
- default:
- const exhaustiveCheck: never = example;
- throw new Error(`Unhandled case: ${exhaustiveCheck}`);
+ case DataExample.English:
+ return DATA_ENGLISH_LETTER_FREQUENCY;
+ case DataExample.Polish:
+ return DATA_POLISH_LETTER_FREQUENCY;
+ case DataExample.Empty:
+ return DATA_EMPTY;
+ default:
+ const exhaustiveCheck: never = example;
+ throw new Error(`Unhandled case: ${exhaustiveCheck}`);
}
}
@@ -308,20 +308,20 @@
return {
view: function() {
return m(
- Popup,
- {
- trigger:
+ Popup,
+ {
+ trigger:
m(Button, {label: `${popupOpen ? 'Close' : 'Open'} Popup`}),
- isOpen: popupOpen,
- onChange: (shouldOpen: boolean) => popupOpen = shouldOpen,
+ isOpen: popupOpen,
+ onChange: (shouldOpen: boolean) => popupOpen = shouldOpen,
+ },
+ m(Button, {
+ label: 'Close Popup',
+ onclick: () => {
+ popupOpen = !popupOpen;
+ raf.scheduleFullRedraw();
},
- m(Button, {
- label: 'Close Popup',
- onclick: () => {
- popupOpen = !popupOpen;
- raf.scheduleFullRedraw();
- },
- }),
+ }),
);
},
};
@@ -369,9 +369,9 @@
return null;
}
return m(
- '.widget-controls',
- m('h3', 'Options'),
- m('ul', listItems),
+ '.widget-controls',
+ m('h3', 'Options'),
+ m('ul', listItems),
);
}
@@ -410,19 +410,19 @@
m(WidgetTitle, {label}),
description && m('p', description),
m(
- '.widget-block',
- m(
- 'div',
- {
- class: classNames(
- 'widget-container',
- wide && 'widget-container-wide',
- ),
- },
- renderWidget(this.optValues),
- ),
- this.renderOptions(listItems),
- ),
+ '.widget-block',
+ m(
+ 'div',
+ {
+ class: classNames(
+ 'widget-container',
+ wide && 'widget-container-wide',
+ ),
+ },
+ renderWidget(this.optValues),
+ ),
+ this.renderOptions(listItems),
+ ),
];
}
@@ -467,162 +467,162 @@
return m('option', {value: option}, option);
});
return m(
- Select,
- {
- value: this.optValues[key],
- onchange: (e: Event) => {
- const el = e.target as HTMLSelectElement;
- this.optValues[key] = el.value;
- raf.scheduleFullRedraw();
- },
+ Select,
+ {
+ value: this.optValues[key],
+ onchange: (e: Event) => {
+ const el = e.target as HTMLSelectElement;
+ this.optValues[key] = el.value;
+ raf.scheduleFullRedraw();
},
- optionElements);
+ },
+ optionElements);
}
}
export const WidgetsPage = createPage({
view() {
return m(
- '.widgets-page',
- m('h1', 'Widgets'),
- m(WidgetShowcase, {
- label: 'Button',
- renderWidget: ({label, icon, rightIcon, ...rest}) => m(Button, {
- icon: icon ? 'send' : undefined,
- rightIcon: rightIcon ? 'arrow_forward' : undefined,
- label: label ? 'Button' : '',
- ...rest,
+ '.widgets-page',
+ m('h1', 'Widgets'),
+ m(WidgetShowcase, {
+ label: 'Button',
+ renderWidget: ({label, icon, rightIcon, ...rest}) => m(Button, {
+ icon: icon ? 'send' : undefined,
+ rightIcon: rightIcon ? 'arrow_forward' : undefined,
+ label: label ? 'Button' : '',
+ ...rest,
+ }),
+ initialOpts: {
+ label: true,
+ icon: true,
+ rightIcon: false,
+ disabled: false,
+ minimal: false,
+ active: false,
+ compact: false,
+ },
+ }),
+ m(WidgetShowcase, {
+ label: 'Checkbox',
+ renderWidget: (opts) => m(Checkbox, {label: 'Checkbox', ...opts}),
+ initialOpts: {
+ disabled: false,
+ },
+ }),
+ m(WidgetShowcase, {
+ label: 'Switch',
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ renderWidget: ({label, ...rest}: any) =>
+ m(Switch, {label: label ? 'Switch' : undefined, ...rest}),
+ initialOpts: {
+ label: true,
+ disabled: false,
+ },
+ }),
+ m(WidgetShowcase, {
+ label: 'Text Input',
+ renderWidget: ({placeholder, ...rest}) => m(TextInput, {
+ placeholder: placeholder ? 'Placeholder...' : '',
+ ...rest,
+ }),
+ initialOpts: {
+ placeholder: true,
+ disabled: false,
+ },
+ }),
+ m(WidgetShowcase, {
+ label: 'Select',
+ renderWidget: (opts) =>
+ m(Select,
+ opts,
+ [
+ m('option', {value: 'foo', label: 'Foo'}),
+ m('option', {value: 'bar', label: 'Bar'}),
+ m('option', {value: 'baz', label: 'Baz'}),
+ ]),
+ initialOpts: {
+ disabled: false,
+ },
+ }),
+ m(WidgetShowcase, {
+ label: 'Filterable Select',
+ renderWidget: () =>
+ m(FilterableSelect, {
+ values: ['foo', 'bar', 'baz'],
+ onSelected: () => {},
}),
- initialOpts: {
- label: true,
- icon: true,
- rightIcon: false,
- disabled: false,
- minimal: false,
- active: false,
- compact: false,
- },
- }),
- m(WidgetShowcase, {
- label: 'Checkbox',
- renderWidget: (opts) => m(Checkbox, {label: 'Checkbox', ...opts}),
- initialOpts: {
- disabled: false,
- },
- }),
- m(WidgetShowcase, {
- label: 'Switch',
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- renderWidget: ({label, ...rest}: any) =>
- m(Switch, {label: label ? 'Switch' : undefined, ...rest}),
- initialOpts: {
- label: true,
- disabled: false,
- },
- }),
- m(WidgetShowcase, {
- label: 'Text Input',
- renderWidget: ({placeholder, ...rest}) => m(TextInput, {
- placeholder: placeholder ? 'Placeholder...' : '',
- ...rest,
- }),
- initialOpts: {
- placeholder: true,
- disabled: false,
- },
- }),
- m(WidgetShowcase, {
- label: 'Select',
- renderWidget: (opts) =>
- m(Select,
- opts,
- [
- m('option', {value: 'foo', label: 'Foo'}),
- m('option', {value: 'bar', label: 'Bar'}),
- m('option', {value: 'baz', label: 'Baz'}),
- ]),
- initialOpts: {
- disabled: false,
- },
- }),
- m(WidgetShowcase, {
- label: 'Filterable Select',
- renderWidget: () =>
- m(FilterableSelect, {
- values: ['foo', 'bar', 'baz'],
- onSelected: () => {},
- }),
- }),
- m(WidgetShowcase, {
- label: 'Empty State',
- renderWidget: ({header, content, detail}) =>
- m(EmptyState,
- {
- header: header && 'No search results found...',
- detail: detail && 'Please try a different search query',
- },
- content && m(Button, {label: 'Try again'})),
- initialOpts: {
- header: true,
- detail: true,
- content: true,
- },
- }),
- m(WidgetShowcase, {
- label: 'Anchor',
- renderWidget: ({icon}) => m(
- Anchor,
- {
- icon: icon && 'open_in_new',
- href: 'https://perfetto.dev/docs/',
- target: '_blank',
- },
- 'Docs',
- ),
- initialOpts: {
- icon: true,
- },
- }),
- m(WidgetShowcase,
+ }),
+ m(WidgetShowcase, {
+ label: 'Empty State',
+ renderWidget: ({header, content, detail}) =>
+ m(EmptyState,
+ {
+ header: header && 'No search results found...',
+ detail: detail && 'Please try a different search query',
+ },
+ content && m(Button, {label: 'Try again'})),
+ initialOpts: {
+ header: true,
+ detail: true,
+ content: true,
+ },
+ }),
+ m(WidgetShowcase, {
+ label: 'Anchor',
+ renderWidget: ({icon}) => m(
+ Anchor,
{
- label: 'Table',
- renderWidget: () => m(TableShowcase), initialOpts: {}, wide: true,
- }),
- m(WidgetShowcase, {
- label: 'Portal',
- description: `A portal is a div rendered out of normal flow
- of the hierarchy.`,
- renderWidget: (opts) => m(PortalButton, opts),
- initialOpts: {
- absolute: true,
- zIndex: true,
- top: true,
+ icon: icon && 'open_in_new',
+ href: 'https://perfetto.dev/docs/',
+ target: '_blank',
},
+ 'Docs',
+ ),
+ initialOpts: {
+ icon: true,
+ },
+ }),
+ m(WidgetShowcase,
+ {
+ label: 'Table',
+ renderWidget: () => m(TableShowcase), initialOpts: {}, wide: true,
}),
- m(WidgetShowcase, {
- label: 'Popup',
- description: `A popup is a nicely styled portal element whose position is
+ m(WidgetShowcase, {
+ label: 'Portal',
+ description: `A portal is a div rendered out of normal flow
+ of the hierarchy.`,
+ renderWidget: (opts) => m(PortalButton, opts),
+ initialOpts: {
+ absolute: true,
+ zIndex: true,
+ top: true,
+ },
+ }),
+ m(WidgetShowcase, {
+ label: 'Popup',
+ description: `A popup is a nicely styled portal element whose position is
dynamically updated to appear to float alongside a specific element on
the page, even as the element is moved and scrolled around.`,
- renderWidget: (opts) => m(
- Popup,
- {
- trigger: m(Button, {label: 'Toggle Popup'}),
- ...opts,
- },
- lorem(),
- ),
- initialOpts: {
- position: new EnumOption(
- PopupPosition.Auto,
- Object.values(PopupPosition),
- ),
- closeOnEscape: true,
- closeOnOutsideClick: true,
+ renderWidget: (opts) => m(
+ Popup,
+ {
+ trigger: m(Button, {label: 'Toggle Popup'}),
+ ...opts,
},
- }),
- m(WidgetShowcase, {
- label: 'Controlled Popup',
+ lorem(),
+ ),
+ initialOpts: {
+ position: new EnumOption(
+ PopupPosition.Auto,
+ Object.values(PopupPosition),
+ ),
+ closeOnEscape: true,
+ closeOnOutsideClick: true,
+ },
+ }),
+ m(WidgetShowcase, {
+ label: 'Controlled Popup',
description: `The open/close state of a controlled popup is passed in via
the 'isOpen' attribute. This means we can get open or close the popup
from wherever we like. E.g. from a button inside the popup.
@@ -631,403 +631,403 @@
on this button.
Note, this is the same component as the popup above, but used in
controlled mode.`,
- renderWidget: (opts) => m(ControlledPopup, opts),
- initialOpts: {},
- }),
- m(WidgetShowcase, {
- label: 'Icon',
- renderWidget: (opts) => m(Icon, {icon: 'star', ...opts}),
- initialOpts: {filled: false},
- }),
- m(WidgetShowcase, {
- label: 'MultiSelect panel',
- renderWidget: ({...rest}) => m(MultiSelect, {
- options: Object.entries(options).map(([key, value]) => {
- return {
- id: key,
- name: key,
- checked: value,
- };
- }),
- onChange: (diffs: MultiSelectDiff[]) => {
- diffs.forEach(({id, checked}) => {
- options[id] = checked;
- });
- raf.scheduleFullRedraw();
- },
- ...rest,
+ renderWidget: (opts) => m(ControlledPopup, opts),
+ initialOpts: {},
+ }),
+ m(WidgetShowcase, {
+ label: 'Icon',
+ renderWidget: (opts) => m(Icon, {icon: 'star', ...opts}),
+ initialOpts: {filled: false},
+ }),
+ m(WidgetShowcase, {
+ label: 'MultiSelect panel',
+ renderWidget: ({...rest}) => m(MultiSelect, {
+ options: Object.entries(options).map(([key, value]) => {
+ return {
+ id: key,
+ name: key,
+ checked: value,
+ };
}),
- initialOpts: {
- repeatCheckedItemsAtTop: false,
- fixedSize: false,
- },
- }),
- m(WidgetShowcase, {
- label: 'Popup with MultiSelect',
- renderWidget: ({icon, ...rest}) => m(PopupMultiSelect, {
- options: Object.entries(options).map(([key, value]) => {
- return {
- id: key,
- name: key,
- checked: value,
- };
- }),
- popupPosition: PopupPosition.Top,
- label: 'Multi Select',
- icon: icon ? Icons.LibraryAddCheck : undefined,
- onChange: (diffs: MultiSelectDiff[]) => {
- diffs.forEach(({id, checked}) => {
- options[id] = checked;
- });
- raf.scheduleFullRedraw();
- },
- ...rest,
- }),
- initialOpts: {
- icon: true,
- showNumSelected: true,
- repeatCheckedItemsAtTop: false,
- },
- }),
- m(WidgetShowcase, {
- label: 'PopupMenu',
- renderWidget: () => {
- return m(PopupMenuButton, {
- icon: 'description',
- items: [
- {itemType: 'regular', text: 'New', callback: () => {}},
- {itemType: 'regular', text: 'Open', callback: () => {}},
- {itemType: 'regular', text: 'Save', callback: () => {}},
- {itemType: 'regular', text: 'Delete', callback: () => {}},
- {
- itemType: 'group',
- text: 'Share',
- itemId: 'foo',
- children: [
- {itemType: 'regular', text: 'Friends', callback: () => {}},
- {itemType: 'regular', text: 'Family', callback: () => {}},
- {itemType: 'regular', text: 'Everyone', callback: () => {}},
- ],
- },
- ],
+ onChange: (diffs: MultiSelectDiff[]) => {
+ diffs.forEach(({id, checked}) => {
+ options[id] = checked;
});
+ raf.scheduleFullRedraw();
},
+ ...rest,
}),
- m(WidgetShowcase, {
- label: 'Menu',
- renderWidget: () => m(
- Menu,
- m(MenuItem, {label: 'New', icon: 'add'}),
- m(MenuItem, {label: 'Open', icon: 'folder_open'}),
- m(MenuItem, {label: 'Save', icon: 'save', disabled: true}),
- m(MenuDivider),
- m(MenuItem, {label: 'Delete', icon: 'delete'}),
- m(MenuDivider),
- m(
- MenuItem,
- {label: 'Share', icon: 'share'},
- m(MenuItem, {label: 'Everyone', icon: 'public'}),
- m(MenuItem, {label: 'Friends', icon: 'group'}),
- m(
- MenuItem,
- {label: 'Specific people', icon: 'person_add'},
- m(MenuItem, {label: 'Alice', icon: 'person'}),
- m(MenuItem, {label: 'Bob', icon: 'person'}),
- ),
- ),
- m(
- MenuItem,
- {label: 'More', icon: 'more_horiz'},
- m(MenuItem, {label: 'Query', icon: 'database'}),
- m(MenuItem, {label: 'Download', icon: 'download'}),
- m(MenuItem, {label: 'Clone', icon: 'copy_all'}),
- ),
- ),
+ initialOpts: {
+ repeatCheckedItemsAtTop: false,
+ fixedSize: false,
+ },
+ }),
+ m(WidgetShowcase, {
+ label: 'Popup with MultiSelect',
+ renderWidget: ({icon, ...rest}) => m(PopupMultiSelect, {
+ options: Object.entries(options).map(([key, value]) => {
+ return {
+ id: key,
+ name: key,
+ checked: value,
+ };
+ }),
+ popupPosition: PopupPosition.Top,
+ label: 'Multi Select',
+ icon: icon ? Icons.LibraryAddCheck : undefined,
+ onChange: (diffs: MultiSelectDiff[]) => {
+ diffs.forEach(({id, checked}) => {
+ options[id] = checked;
+ });
+ raf.scheduleFullRedraw();
+ },
+ ...rest,
+ }),
+ initialOpts: {
+ icon: true,
+ showNumSelected: true,
+ repeatCheckedItemsAtTop: false,
+ },
+ }),
+ m(WidgetShowcase, {
+ label: 'PopupMenu',
+ renderWidget: () => {
+ return m(PopupMenuButton, {
+ icon: 'description',
+ items: [
+ {itemType: 'regular', text: 'New', callback: () => {}},
+ {itemType: 'regular', text: 'Open', callback: () => {}},
+ {itemType: 'regular', text: 'Save', callback: () => {}},
+ {itemType: 'regular', text: 'Delete', callback: () => {}},
+ {
+ itemType: 'group',
+ text: 'Share',
+ itemId: 'foo',
+ children: [
+ {itemType: 'regular', text: 'Friends', callback: () => {}},
+ {itemType: 'regular', text: 'Family', callback: () => {}},
+ {itemType: 'regular', text: 'Everyone', callback: () => {}},
+ ],
+ },
+ ],
+ });
+ },
+ }),
+ m(WidgetShowcase, {
+ label: 'Menu',
+ renderWidget: () => m(
+ Menu,
+ m(MenuItem, {label: 'New', icon: 'add'}),
+ m(MenuItem, {label: 'Open', icon: 'folder_open'}),
+ m(MenuItem, {label: 'Save', icon: 'save', disabled: true}),
+ m(MenuDivider),
+ m(MenuItem, {label: 'Delete', icon: 'delete'}),
+ m(MenuDivider),
+ m(
+ MenuItem,
+ {label: 'Share', icon: 'share'},
+ m(MenuItem, {label: 'Everyone', icon: 'public'}),
+ m(MenuItem, {label: 'Friends', icon: 'group'}),
+ m(
+ MenuItem,
+ {label: 'Specific people', icon: 'person_add'},
+ m(MenuItem, {label: 'Alice', icon: 'person'}),
+ m(MenuItem, {label: 'Bob', icon: 'person'}),
+ ),
+ ),
+ m(
+ MenuItem,
+ {label: 'More', icon: 'more_horiz'},
+ m(MenuItem, {label: 'Query', icon: 'database'}),
+ m(MenuItem, {label: 'Download', icon: 'download'}),
+ m(MenuItem, {label: 'Clone', icon: 'copy_all'}),
+ ),
+ ),
- }),
- m(WidgetShowcase, {
- label: 'PopupMenu2',
- renderWidget: (opts) => m(
+ }),
+ m(WidgetShowcase, {
+ label: 'PopupMenu2',
+ renderWidget: (opts) => m(
+ PopupMenu2,
+ {
+ trigger: m(Button, {
+ label: 'Menu',
+ rightIcon: Icons.ContextMenu,
+ }),
+ ...opts,
+ },
+ m(MenuItem, {label: 'New', icon: 'add'}),
+ m(MenuItem, {label: 'Open', icon: 'folder_open'}),
+ m(MenuItem, {label: 'Save', icon: 'save', disabled: true}),
+ m(MenuDivider),
+ m(MenuItem, {label: 'Delete', icon: 'delete'}),
+ m(MenuDivider),
+ m(
+ MenuItem,
+ {label: 'Share', icon: 'share'},
+ m(MenuItem, {label: 'Everyone', icon: 'public'}),
+ m(MenuItem, {label: 'Friends', icon: 'group'}),
+ m(
+ MenuItem,
+ {label: 'Specific people', icon: 'person_add'},
+ m(MenuItem, {label: 'Alice', icon: 'person'}),
+ m(MenuItem, {label: 'Bob', icon: 'person'}),
+ ),
+ ),
+ m(
+ MenuItem,
+ {label: 'More', icon: 'more_horiz'},
+ m(MenuItem, {label: 'Query', icon: 'database'}),
+ m(MenuItem, {label: 'Download', icon: 'download'}),
+ m(MenuItem, {label: 'Clone', icon: 'copy_all'}),
+ ),
+ ),
+ initialOpts: {
+ popupPosition: new EnumOption(
+ PopupPosition.Bottom,
+ Object.values(PopupPosition),
+ ),
+ },
+ }),
+ m(WidgetShowcase, {
+ label: 'Spinner',
+ description: `Simple spinner, rotates forever.
+ Width and height match the font size.`,
+ renderWidget: ({fontSize, easing}) =>
+ m('', {style: {fontSize}}, m(Spinner, {easing})),
+ initialOpts: {
+ fontSize: new EnumOption(
+ '16px',
+ ['12px', '16px', '24px', '32px', '64px', '128px'],
+ ),
+ easing: false,
+ },
+ }),
+ m(WidgetShowcase, {
+ label: 'Tree',
+ renderWidget: (opts) => m(
+ Tree,
+ opts,
+ m(TreeNode, {left: 'Name', right: 'my_event', icon: 'badge'}),
+ m(TreeNode, {left: 'CPU', right: '2', icon: 'memory'}),
+ m(TreeNode,
+ {left: 'Start time', right: '1s 435ms', icon: 'schedule'}),
+ m(TreeNode, {left: 'Duration', right: '86ms', icon: 'timer'}),
+ m(TreeNode, {
+ left: 'SQL',
+ right: m(
PopupMenu2,
{
- trigger: m(Button, {
- label: 'Menu',
- rightIcon: Icons.ContextMenu,
- }),
- ...opts,
+ popupPosition: PopupPosition.RightStart,
+ trigger: m(Anchor, {
+ icon: Icons.ContextMenu,
+ }, 'SELECT * FROM raw WHERE id = 123'),
},
- m(MenuItem, {label: 'New', icon: 'add'}),
- m(MenuItem, {label: 'Open', icon: 'folder_open'}),
- m(MenuItem, {label: 'Save', icon: 'save', disabled: true}),
- m(MenuDivider),
- m(MenuItem, {label: 'Delete', icon: 'delete'}),
- m(MenuDivider),
- m(
- MenuItem,
- {label: 'Share', icon: 'share'},
- m(MenuItem, {label: 'Everyone', icon: 'public'}),
- m(MenuItem, {label: 'Friends', icon: 'group'}),
- m(
- MenuItem,
- {label: 'Specific people', icon: 'person_add'},
- m(MenuItem, {label: 'Alice', icon: 'person'}),
- m(MenuItem, {label: 'Bob', icon: 'person'}),
- ),
- ),
- m(
- MenuItem,
- {label: 'More', icon: 'more_horiz'},
- m(MenuItem, {label: 'Query', icon: 'database'}),
- m(MenuItem, {label: 'Download', icon: 'download'}),
- m(MenuItem, {label: 'Clone', icon: 'copy_all'}),
- ),
- ),
- initialOpts: {
- popupPosition: new EnumOption(
- PopupPosition.Bottom,
- Object.values(PopupPosition),
- ),
- },
- }),
- m(WidgetShowcase, {
- label: 'Spinner',
- description: `Simple spinner, rotates forever.
- Width and height match the font size.`,
- renderWidget: ({fontSize, easing}) =>
- m('', {style: {fontSize}}, m(Spinner, {easing})),
- initialOpts: {
- fontSize: new EnumOption(
- '16px',
- ['12px', '16px', '24px', '32px', '64px', '128px'],
- ),
- easing: false,
- },
- }),
- m(WidgetShowcase, {
- label: 'Tree',
- renderWidget: (opts) => m(
- Tree,
- opts,
- m(TreeNode, {left: 'Name', right: 'my_event', icon: 'badge'}),
- m(TreeNode, {left: 'CPU', right: '2', icon: 'memory'}),
- m(TreeNode,
- {left: 'Start time', right: '1s 435ms', icon: 'schedule'}),
- m(TreeNode, {left: 'Duration', right: '86ms', icon: 'timer'}),
- m(TreeNode, {
- left: 'SQL',
- right: m(
- PopupMenu2,
- {
- popupPosition: PopupPosition.RightStart,
- trigger: m(Anchor, {
- icon: Icons.ContextMenu,
- }, 'SELECT * FROM raw WHERE id = 123'),
- },
- m(MenuItem, {
- label: 'Copy SQL Query',
- icon: 'content_copy',
- }),
- m(MenuItem, {
- label: 'Execute Query in new tab',
- icon: 'open_in_new',
- }),
- ),
- }),
- m(TreeNode, {
- icon: 'account_tree',
- left: 'Process',
- right: m(Anchor, {icon: 'open_in_new'}, '/bin/foo[789]'),
- }),
- m(TreeNode, {
- left: 'Thread',
- right: m(Anchor, {icon: 'open_in_new'}, 'my_thread[456]'),
- }),
- m(
- TreeNode,
- {
- left: 'Args',
- summary: 'foo: string, baz: string, quux: string[4]',
- },
- m(TreeNode, {left: 'foo', right: 'bar'}),
- m(TreeNode, {left: 'baz', right: 'qux'}),
- m(
- TreeNode,
- {left: 'quux', summary: 'string[4]'},
- m(TreeNode, {left: '[0]', right: 'corge'}),
- m(TreeNode, {left: '[1]', right: 'grault'}),
- m(TreeNode, {left: '[2]', right: 'garply'}),
- m(TreeNode, {left: '[3]', right: 'waldo'}),
- ),
- ),
- m(LazyTreeNode, {
- left: 'Lazy',
- icon: 'bedtime',
- fetchData: async () => {
- await new Promise((r) => setTimeout(r, 1000));
- return () => m(TreeNode, {left: 'foo'});
- },
- }),
- m(LazyTreeNode, {
- left: 'Dynamic',
- unloadOnCollapse: true,
- icon: 'bedtime',
- fetchData: async () => {
- await new Promise((r) => setTimeout(r, 1000));
- return () => m(TreeNode, {left: 'foo'});
- },
- }),
- ),
- wide: true,
- }),
- m(
- WidgetShowcase, {
- label: 'Form',
- renderWidget: () => renderForm('form'),
- }),
- m(WidgetShowcase, {
- label: 'Nested Popups',
- renderWidget: () => m(
- Popup,
- {
- trigger: m(Button, {label: 'Open the popup'}),
- },
- m(PopupMenu2,
- {
- trigger: m(Button, {label: 'Select an option'}),
- },
- m(MenuItem, {label: 'Option 1'}),
- m(MenuItem, {label: 'Option 2'}),
- ),
- m(Button, {
- label: 'Done',
- dismissPopup: true,
+ m(MenuItem, {
+ label: 'Copy SQL Query',
+ icon: 'content_copy',
+ }),
+ m(MenuItem, {
+ label: 'Execute Query in new tab',
+ icon: 'open_in_new',
}),
),
}),
+ m(TreeNode, {
+ icon: 'account_tree',
+ left: 'Process',
+ right: m(Anchor, {icon: 'open_in_new'}, '/bin/foo[789]'),
+ }),
+ m(TreeNode, {
+ left: 'Thread',
+ right: m(Anchor, {icon: 'open_in_new'}, 'my_thread[456]'),
+ }),
m(
- WidgetShowcase, {
- label: 'Callout',
- renderWidget: () => m(
- Callout,
- {
- icon: 'info',
- },
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +
+ TreeNode,
+ {
+ left: 'Args',
+ summary: 'foo: string, baz: string, quux: string[4]',
+ },
+ m(TreeNode, {left: 'foo', right: 'bar'}),
+ m(TreeNode, {left: 'baz', right: 'qux'}),
+ m(
+ TreeNode,
+ {left: 'quux', summary: 'string[4]'},
+ m(TreeNode, {left: '[0]', right: 'corge'}),
+ m(TreeNode, {left: '[1]', right: 'grault'}),
+ m(TreeNode, {left: '[2]', right: 'garply'}),
+ m(TreeNode, {left: '[3]', right: 'waldo'}),
+ ),
+ ),
+ m(LazyTreeNode, {
+ left: 'Lazy',
+ icon: 'bedtime',
+ fetchData: async () => {
+ await new Promise((r) => setTimeout(r, 1000));
+ return () => m(TreeNode, {left: 'foo'});
+ },
+ }),
+ m(LazyTreeNode, {
+ left: 'Dynamic',
+ unloadOnCollapse: true,
+ icon: 'bedtime',
+ fetchData: async () => {
+ await new Promise((r) => setTimeout(r, 1000));
+ return () => m(TreeNode, {left: 'foo'});
+ },
+ }),
+ ),
+ wide: true,
+ }),
+ m(
+ WidgetShowcase, {
+ label: 'Form',
+ renderWidget: () => renderForm('form'),
+ }),
+ m(WidgetShowcase, {
+ label: 'Nested Popups',
+ renderWidget: () => m(
+ Popup,
+ {
+ trigger: m(Button, {label: 'Open the popup'}),
+ },
+ m(PopupMenu2,
+ {
+ trigger: m(Button, {label: 'Select an option'}),
+ },
+ m(MenuItem, {label: 'Option 1'}),
+ m(MenuItem, {label: 'Option 2'}),
+ ),
+ m(Button, {
+ label: 'Done',
+ dismissPopup: true,
+ }),
+ ),
+ }),
+ m(
+ WidgetShowcase, {
+ label: 'Callout',
+ renderWidget: () => m(
+ Callout,
+ {
+ icon: 'info',
+ },
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +
'Nulla rhoncus tempor neque, sed malesuada eros dapibus vel. ' +
'Aliquam in ligula vitae tortor porttitor laoreet iaculis ' +
'finibus est.',
- ),
- }),
- m(WidgetShowcase, {
- label: 'Editor',
- renderWidget: () => m(Editor),
- }),
- m(WidgetShowcase, {
- label: 'VegaView',
- renderWidget: (opt) => m(VegaView, {
- spec: getExampleSpec(opt.exampleSpec),
- data: getExampleData(opt.exampleData),
- }),
- initialOpts: {
- exampleSpec: new EnumOption(
- SpecExample.BarChart,
- Object.values(SpecExample),
- ),
- exampleData: new EnumOption(
- DataExample.English,
- Object.values(DataExample),
- ),
+ ),
+ }),
+ m(WidgetShowcase, {
+ label: 'Editor',
+ renderWidget: () => m(Editor),
+ }),
+ m(WidgetShowcase, {
+ label: 'VegaView',
+ renderWidget: (opt) => m(VegaView, {
+ spec: getExampleSpec(opt.exampleSpec),
+ data: getExampleData(opt.exampleData),
+ }),
+ initialOpts: {
+ exampleSpec: new EnumOption(
+ SpecExample.BarChart,
+ Object.values(SpecExample),
+ ),
+ exampleData: new EnumOption(
+ DataExample.English,
+ Object.values(DataExample),
+ ),
- },
- }),
- m(
- WidgetShowcase, {
- label: 'Form within PopupMenu2',
- description: `A form placed inside a popup menu works just fine,
+ },
+ }),
+ m(
+ WidgetShowcase, {
+ label: 'Form within PopupMenu2',
+ description: `A form placed inside a popup menu works just fine,
and the cancel/submit buttons also dismiss the popup. A bit more
margin is added around it too, which improves the look and feel.`,
- renderWidget: () => m(
- PopupMenu2,
- {
- trigger: m(Button, {label: 'Popup!'}),
- },
- m(MenuItem,
- {
- label: 'Open form...',
- },
- renderForm('popup-form'),
- ),
- ),
- }),
- m(
- WidgetShowcase, {
- label: 'Hotkey',
- renderWidget: (opts) => {
- if (opts.platform === 'auto') {
- return m(HotkeyGlyphs, {hotkey: opts.hotkey as Hotkey});
- } else {
- const platform = opts.platform as Platform;
- return m(HotkeyGlyphs, {
- hotkey: opts.hotkey as Hotkey,
- spoof: platform,
- });
- }
+ renderWidget: () => m(
+ PopupMenu2,
+ {
+ trigger: m(Button, {label: 'Popup!'}),
+ },
+ m(MenuItem,
+ {
+ label: 'Open form...',
},
- initialOpts: {
- hotkey: 'Mod+Shift+P',
- platform: new EnumOption('auto', ['auto', 'Mac', 'PC']),
- },
- }),
- m(
- WidgetShowcase, {
- label: 'Text Paragraph',
- description: `A basic formatted text paragraph with wrapping. If
+ renderForm('popup-form'),
+ ),
+ ),
+ }),
+ m(
+ WidgetShowcase, {
+ label: 'Hotkey',
+ renderWidget: (opts) => {
+ if (opts.platform === 'auto') {
+ return m(HotkeyGlyphs, {hotkey: opts.hotkey as Hotkey});
+ } else {
+ const platform = opts.platform as Platform;
+ return m(HotkeyGlyphs, {
+ hotkey: opts.hotkey as Hotkey,
+ spoof: platform,
+ });
+ }
+ },
+ initialOpts: {
+ hotkey: 'Mod+Shift+P',
+ platform: new EnumOption('auto', ['auto', 'Mac', 'PC']),
+ },
+ }),
+ m(
+ WidgetShowcase, {
+ label: 'Text Paragraph',
+ description: `A basic formatted text paragraph with wrapping. If
it is desirable to preserve the original text format/line breaks,
set the compressSpace attribute to false.`,
- renderWidget: (opts) => {
- return m(TextParagraph, {
- text: `Lorem ipsum dolor sit amet, consectetur adipiscing
+ renderWidget: (opts) => {
+ return m(TextParagraph, {
+ text: `Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nulla rhoncus tempor neque, sed malesuada eros
dapibus vel. Aliquam in ligula vitae tortor porttitor
laoreet iaculis finibus est.`,
- compressSpace: opts.compressSpace,
- });
- },
- initialOpts: {
+ compressSpace: opts.compressSpace,
+ });
+ },
+ initialOpts: {
+ compressSpace: true,
+ },
+ }),
+ m(
+ WidgetShowcase, {
+ label: 'Multi Paragraph Text',
+ description: `A wrapper for multiple paragraph widgets.`,
+ renderWidget: () => {
+ return m(MultiParagraphText,
+ m(TextParagraph, {
+ text: `Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit. Nulla rhoncus tempor neque, sed malesuada eros
+ dapibus vel. Aliquam in ligula vitae tortor porttitor
+ laoreet iaculis finibus est.`,
compressSpace: true,
- },
- }),
- m(
- WidgetShowcase, {
- label: 'Multi Paragraph Text',
- description: `A wrapper for multiple paragraph widgets.`,
- renderWidget: () => {
- return m(MultiParagraphText,
- m(TextParagraph, {
- text: `Lorem ipsum dolor sit amet, consectetur adipiscing
- elit. Nulla rhoncus tempor neque, sed malesuada eros
- dapibus vel. Aliquam in ligula vitae tortor porttitor
- laoreet iaculis finibus est.`,
- compressSpace: true,
- }), m(TextParagraph, {
- text: `Sed ut perspiciatis unde omnis iste natus error sit
+ }), m(TextParagraph, {
+ text: `Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et
quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur
aut odit aut fugit, sed quia consequuntur magni dolores
eos qui ratione voluptatem sequi nesciunt.`,
- compressSpace: true,
- }),
- );
- },
- }),
- m(
- WidgetShowcase, {
- label: 'Modal',
- description: `A helper for modal dialog.`,
- renderWidget: () => m(ModalShowcase),
+ compressSpace: true,
}),
+ );
+ },
+ }),
+ m(
+ WidgetShowcase, {
+ label: 'Modal',
+ description: `A helper for modal dialog.`,
+ renderWidget: () => m(ModalShowcase),
+ }),
);
},
});
@@ -1060,9 +1060,9 @@
vnode.state.progress = (vnode.state.progress + 1) % 100;
raf.scheduleFullRedraw();
return m(
- 'div',
- m('div', 'You should see an animating progress bar'),
- m('progress', {value: vnode.state.progress, max: 100}),
+ 'div',
+ m('div', 'You should see an animating progress bar'),
+ m('progress', {value: vnode.state.progress, max: 100}),
);
},
} as m.Component<{}, {progress: number}>;
@@ -1089,57 +1089,57 @@
view() {
return m(
- 'div',
- {
- style: {
- 'display': 'flex',
- 'flex-direction': 'column',
- 'width': '100%',
- },
+ 'div',
+ {
+ style: {
+ 'display': 'flex',
+ 'flex-direction': 'column',
+ 'width': '100%',
},
- m('textarea', {
- id: 'mwlogs',
- readonly: 'readonly',
- rows: '8',
- placeholder: 'Logs will appear here',
- }),
- m('input[type=button]', {
- value: 'Show modal (static)',
- onclick: () => ModalShowcase.showModalDialog(true),
- }),
- m('input[type=button]', {
- value: 'Show modal (dynamic)',
- onclick: () => ModalShowcase.showModalDialog(false),
- }),
+ },
+ m('textarea', {
+ id: 'mwlogs',
+ readonly: 'readonly',
+ rows: '8',
+ placeholder: 'Logs will appear here',
+ }),
+ m('input[type=button]', {
+ value: 'Show modal (static)',
+ onclick: () => ModalShowcase.showModalDialog(true),
+ }),
+ m('input[type=button]', {
+ value: 'Show modal (dynamic)',
+ onclick: () => ModalShowcase.showModalDialog(false),
+ }),
);
}
} // class ModalShowcase
function renderForm(id: string) {
return m(
- Form,
- {
- submitLabel: 'Submit',
- submitIcon: 'send',
- cancelLabel: 'Cancel',
- resetLabel: 'Reset',
- onSubmit: () => window.alert('Form submitted!'),
+ Form,
+ {
+ submitLabel: 'Submit',
+ submitIcon: 'send',
+ cancelLabel: 'Cancel',
+ resetLabel: 'Reset',
+ onSubmit: () => window.alert('Form submitted!'),
+ },
+ m(FormLabel,
+ {for: `${id}-foo`,
},
- m(FormLabel,
- {for: `${id}-foo`,
- },
- 'Foo'),
- m(TextInput, {id: `${id}-foo`}),
- m(FormLabel,
- {for: `${id}-bar`,
- },
- 'Bar'),
- m(Select,
- {id: `${id}-bar`},
- [
- m('option', {value: 'foo', label: 'Foo'}),
- m('option', {value: 'bar', label: 'Bar'}),
- m('option', {value: 'baz', label: 'Baz'}),
- ]),
+ 'Foo'),
+ m(TextInput, {id: `${id}-foo`}),
+ m(FormLabel,
+ {for: `${id}-bar`,
+ },
+ 'Bar'),
+ m(Select,
+ {id: `${id}-bar`},
+ [
+ m('option', {value: 'foo', label: 'Foo'}),
+ m('option', {value: 'bar', label: 'Bar'}),
+ m('option', {value: 'baz', label: 'Baz'}),
+ ]),
);
}
diff --git a/ui/src/plugins/dev.perfetto.AndroidCujs/index.ts b/ui/src/plugins/dev.perfetto.AndroidCujs/index.ts
index ef5b2d7..444eaed 100644
--- a/ui/src/plugins/dev.perfetto.AndroidCujs/index.ts
+++ b/ui/src/plugins/dev.perfetto.AndroidCujs/index.ts
@@ -141,14 +141,14 @@
callback: () => {
runQuery(JANK_CUJ_QUERY_PRECONDITIONS, ctx.engine).then(() => {
addDebugSliceTrack(
- ctx.engine,
- {
- sqlSource: JANK_CUJ_QUERY,
- columns: JANK_COLUMNS,
- },
- 'Jank CUJs',
- {ts: 'ts', dur: 'dur', name: 'name'},
- []);
+ ctx.engine,
+ {
+ sqlSource: JANK_CUJ_QUERY,
+ columns: JANK_COLUMNS,
+ },
+ 'Jank CUJs',
+ {ts: 'ts', dur: 'dur', name: 'name'},
+ []);
});
},
});
@@ -158,8 +158,8 @@
name: 'Run query: Android Jank CUJs',
callback: () => {
runQuery(JANK_CUJ_QUERY_PRECONDITIONS, ctx.engine)
- .then(
- () => ctx.tabs.openQuery(JANK_CUJ_QUERY, 'Android Jank CUJs'));
+ .then(
+ () => ctx.tabs.openQuery(JANK_CUJ_QUERY, 'Android Jank CUJs'));
},
});
@@ -168,14 +168,14 @@
name: 'Pin: Android Latency CUJs',
callback: () => {
addDebugSliceTrack(
- ctx.engine,
- {
- sqlSource: LATENCY_CUJ_QUERY,
- columns: LATENCY_COLUMNS,
- },
- 'Latency CUJs',
- {ts: 'ts', dur: 'dur', name: 'name'},
- []);
+ ctx.engine,
+ {
+ sqlSource: LATENCY_CUJ_QUERY,
+ columns: LATENCY_COLUMNS,
+ },
+ 'Latency CUJs',
+ {ts: 'ts', dur: 'dur', name: 'name'},
+ []);
},
});
@@ -183,7 +183,7 @@
id: 'dev.perfetto.AndroidCujs#ListLatencyCUJs',
name: 'Run query: Android Latency CUJs',
callback: () =>
- ctx.tabs.openQuery(LATENCY_CUJ_QUERY, 'Android Latency CUJs'),
+ ctx.tabs.openQuery(LATENCY_CUJ_QUERY, 'Android Latency CUJs'),
});
}
}
diff --git a/ui/src/plugins/dev.perfetto.AndroidLongBatteryTracing/index.ts b/ui/src/plugins/dev.perfetto.AndroidLongBatteryTracing/index.ts
index bad4021..695a864 100644
--- a/ui/src/plugins/dev.perfetto.AndroidLongBatteryTracing/index.ts
+++ b/ui/src/plugins/dev.perfetto.AndroidLongBatteryTracing/index.ts
@@ -518,7 +518,7 @@
from step1
)
select ts, dur, name from step2 where state = 'ON' and ${
- condition} and dur is not null`;
+ condition} and dur is not null`;
}
const BLE_RESULTS = `
@@ -771,18 +771,18 @@
onActivate(_: PluginContext): void {}
async addSliceTrack(
- engine: EngineProxy, name: string, query: string, groupId: string,
- columns: string[] = []): Promise<DeferredAction<{}>> {
+ engine: EngineProxy, name: string, query: string, groupId: string,
+ columns: string[] = []): Promise<DeferredAction<{}>> {
const actions = await createDebugSliceTrackActions(
- engine,
- {
- sqlSource: query,
- columns: ['ts', 'dur', 'name', ...columns],
- },
- name,
- {ts: 'ts', dur: 'dur', name: 'name'},
- columns,
- {closeable: false, pinned: false},
+ engine,
+ {
+ sqlSource: query,
+ columns: ['ts', 'dur', 'name', ...columns],
+ },
+ name,
+ {ts: 'ts', dur: 'dur', name: 'name'},
+ columns,
+ {closeable: false, pinned: false},
);
if (actions.length > 1) {
throw new Error();
@@ -796,17 +796,17 @@
}
async addCounterTrack(
- engine: EngineProxy, name: string, query: string,
- groupId: string): Promise<DeferredAction<{}>> {
+ engine: EngineProxy, name: string, query: string,
+ groupId: string): Promise<DeferredAction<{}>> {
const actions = await createDebugCounterTrackActions(
- engine,
- {
- sqlSource: query,
- columns: ['ts', 'value'],
- },
- name,
- {ts: 'ts', value: 'value'},
- {closeable: false, pinned: false},
+ engine,
+ {
+ sqlSource: query,
+ columns: ['ts', 'value'],
+ },
+ name,
+ {ts: 'ts', value: 'value'},
+ {closeable: false, pinned: false},
);
if (actions.length > 1) {
throw new Error();
@@ -826,46 +826,46 @@
this.addSliceTrack(e, 'Default network', DEFAULT_NETWORK, groupId),
this.addSliceTrack(e, 'Tethering', TETHERING, groupId),
this.addCounterTrack(
- e,
- 'Wifi bytes (logscale)',
- `select ts, ifnull(ln(sum(value)), 0) as value from network_summary where dev_type = 'wifi' group by 1`,
- groupId),
+ e,
+ 'Wifi bytes (logscale)',
+ `select ts, ifnull(ln(sum(value)), 0) as value from network_summary where dev_type = 'wifi' group by 1`,
+ groupId),
this.addCounterTrack(
- e,
- 'Wifi TX bytes (logscale)',
- `select ts, ifnull(ln(value), 0) as value from network_summary where dev_type = 'wifi' and dir = 'tx'`,
- groupId),
+ e,
+ 'Wifi TX bytes (logscale)',
+ `select ts, ifnull(ln(value), 0) as value from network_summary where dev_type = 'wifi' and dir = 'tx'`,
+ groupId),
this.addCounterTrack(
- e,
- 'Wifi RX bytes (logscale)',
- `select ts, ifnull(ln(value), 0) as value from network_summary where dev_type = 'wifi' and dir = 'rx'`,
- groupId),
+ e,
+ 'Wifi RX bytes (logscale)',
+ `select ts, ifnull(ln(value), 0) as value from network_summary where dev_type = 'wifi' and dir = 'rx'`,
+ groupId),
this.addCounterTrack(
- e,
- 'Modem bytes (logscale)',
- `select ts, ifnull(ln(sum(value)), 0) as value from network_summary where dev_type = 'modem' group by 1`,
- groupId),
+ e,
+ 'Modem bytes (logscale)',
+ `select ts, ifnull(ln(sum(value)), 0) as value from network_summary where dev_type = 'modem' group by 1`,
+ groupId),
this.addCounterTrack(
- e,
- 'Modem TX bytes (logscale)',
- `select ts, ifnull(ln(value), 0) as value from network_summary where dev_type = 'modem' and dir = 'tx'`,
- groupId),
+ e,
+ 'Modem TX bytes (logscale)',
+ `select ts, ifnull(ln(value), 0) as value from network_summary where dev_type = 'modem' and dir = 'tx'`,
+ groupId),
this.addCounterTrack(
- e,
- 'Modem RX bytes (logscale)',
- `select ts, ifnull(ln(value), 0) as value from network_summary where dev_type = 'modem' and dir = 'rx'`,
- groupId),
+ e,
+ 'Modem RX bytes (logscale)',
+ `select ts, ifnull(ln(value), 0) as value from network_summary where dev_type = 'modem' and dir = 'rx'`,
+ groupId),
]);
}
async addModemActivityInfo(e: EngineProxy, groupId: string):
Promise<DeferredAction<{}>[]> {
const query = (name: string, col: string): Promise<DeferredAction<{}>> =>
- this.addCounterTrack(
- e,
- name,
- `select ts, ${col}_ratio as value from modem_activity_info`,
- groupId);
+ this.addCounterTrack(
+ e,
+ name,
+ `select ts, ${col}_ratio as value from modem_activity_info`,
+ groupId);
await e.query(MODEM_ACTIVITY_INFO);
return await Promise.all([
@@ -888,11 +888,11 @@
const actions: Promise<DeferredAction<{}>>[] = [];
for (; it.valid(); it.next()) {
actions.push(this.addSliceTrack(
- e,
- it.wakelock_name,
- `select ts, dur, name from kernel_wakelocks where wakelock_name = "${
- it.wakelock_name}"`,
- groupId));
+ e,
+ it.wakelock_name,
+ `select ts, dur, name from kernel_wakelocks where wakelock_name = "${
+ it.wakelock_name}"`,
+ groupId));
}
return await Promise.all(actions);
}
@@ -929,19 +929,19 @@
const actions: Promise<DeferredAction<{}>>[] = [];
for (; it.valid(); it.next()) {
actions.push(this.addSliceTrack(
- e,
- `Wakeup ${it.item}`,
- `${sqlPrefix} where item="${it.item}"`,
- groupId,
- WAKEUPS_COLUMNS));
+ e,
+ `Wakeup ${it.item}`,
+ `${sqlPrefix} where item="${it.item}"`,
+ groupId,
+ WAKEUPS_COLUMNS));
items.push(it.item);
}
actions.push(this.addSliceTrack(
- e,
- 'Other wakeups',
- `${sqlPrefix} where item not in ('${items.join('\',\'')}')`,
- groupId,
- WAKEUPS_COLUMNS));
+ e,
+ 'Other wakeups',
+ `${sqlPrefix} where item not in ('${items.join('\',\'')}')`,
+ groupId,
+ WAKEUPS_COLUMNS));
return await Promise.all(actions);
}
@@ -949,16 +949,16 @@
Promise<DeferredAction<{}>[]> {
await e.query(HIGH_CPU);
const result = await e.query(
- `select distinct pkg, cluster from high_cpu where value > 10 order by 1, 2`);
+ `select distinct pkg, cluster from high_cpu where value > 10 order by 1, 2`);
const it = result.iter({pkg: 'str', cluster: 'str'});
const actions: Promise<DeferredAction<{}>>[] = [];
for (; it.valid(); it.next()) {
actions.push(this.addCounterTrack(
- e,
- `CPU (${it.cluster}): ${it.pkg}`,
- `select ts, value from high_cpu where pkg = "${
- it.pkg}" and cluster="${it.cluster}"`,
- groupId));
+ e,
+ `CPU (${it.cluster}): ${it.pkg}`,
+ `select ts, value from high_cpu where pkg = "${
+ it.pkg}" and cluster="${it.cluster}"`,
+ groupId));
}
return await Promise.all(actions);
}
@@ -967,40 +967,40 @@
Promise<DeferredAction<{}>[]> {
return await Promise.all([
this.addSliceTrack(
- e,
- 'BLE Scans (opportunistic)',
- bleScanQuery('opportunistic'),
- groupId),
+ e,
+ 'BLE Scans (opportunistic)',
+ bleScanQuery('opportunistic'),
+ groupId),
this.addSliceTrack(
- e, 'BLE Scans (filtered)', bleScanQuery('filtered'), groupId),
+ e, 'BLE Scans (filtered)', bleScanQuery('filtered'), groupId),
this.addSliceTrack(
- e, 'BLE Scans (unfiltered)', bleScanQuery('not filtered'), groupId),
+ e, 'BLE Scans (unfiltered)', bleScanQuery('not filtered'), groupId),
this.addSliceTrack(e, 'BLE Scan Results', BLE_RESULTS, groupId),
this.addSliceTrack(e, 'Connections (ACL)', BT_CONNS_ACL, groupId),
this.addSliceTrack(e, 'Connections (SCO)', BT_CONNS_SCO, groupId),
this.addSliceTrack(
- e,
- 'Link-level Events',
- BT_LINK_LEVEL_EVENTS,
- groupId,
- BT_LINK_LEVEL_EVENTS_COLUMNS),
+ e,
+ 'Link-level Events',
+ BT_LINK_LEVEL_EVENTS,
+ groupId,
+ BT_LINK_LEVEL_EVENTS_COLUMNS),
this.addSliceTrack(e, 'A2DP Audio', BT_A2DP_AUDIO, groupId),
this.addSliceTrack(
- e,
- 'Quality reports',
- BT_QUALITY_REPORTS,
- groupId,
- BT_QUALITY_REPORTS_COLUMNS),
+ e,
+ 'Quality reports',
+ BT_QUALITY_REPORTS,
+ groupId,
+ BT_QUALITY_REPORTS_COLUMNS),
this.addSliceTrack(
- e, 'RSSI Reports', BT_RSSI_REPORTS, groupId, BT_RSSI_REPORTS_COLUMNS),
+ e, 'RSSI Reports', BT_RSSI_REPORTS, groupId, BT_RSSI_REPORTS_COLUMNS),
this.addSliceTrack(
- e, 'HAL Crashes', BT_HAL_CRASHES, groupId, BT_HAL_CRASHES_COLUMNS),
+ e, 'HAL Crashes', BT_HAL_CRASHES, groupId, BT_HAL_CRASHES_COLUMNS),
this.addSliceTrack(
- e,
- 'Code Path Counter',
- BT_CODE_PATH_COUNTER,
- groupId,
- BT_CODE_PATH_COUNTER_COLUMNS),
+ e,
+ 'Code Path Counter',
+ BT_CODE_PATH_COUNTER,
+ groupId,
+ BT_CODE_PATH_COUNTER_COLUMNS),
]);
}
@@ -1055,7 +1055,7 @@
const cpuId = addGroup('CPU');
const btId = addGroup('Bluetooth');
actions.push(await this.addSliceTrack(
- ctx.engine, 'Thermal throttling', THERMAL_THROTTLING, miscGroupId));
+ ctx.engine, 'Thermal throttling', THERMAL_THROTTLING, miscGroupId));
const promises: Promise<DeferredAction<{}>[]>[] = [
this.addNetworkSummary(ctx.engine, networkId),
diff --git a/ui/src/plugins/dev.perfetto.AndroidNetwork/index.ts b/ui/src/plugins/dev.perfetto.AndroidNetwork/index.ts
index a762a5e..993667b 100644
--- a/ui/src/plugins/dev.perfetto.AndroidNetwork/index.ts
+++ b/ui/src/plugins/dev.perfetto.AndroidNetwork/index.ts
@@ -29,17 +29,17 @@
// must be start with ts, dur, and a name column. The name column and all
// following columns are shown as arguments in slice details.
async addSimpleTrack(
- engine: EngineProxy, trackName: string, tableOrQuery: string,
- columns: string[]): Promise<void> {
+ engine: EngineProxy, trackName: string, tableOrQuery: string,
+ columns: string[]): Promise<void> {
await addDebugSliceTrack(
- engine,
- {
- sqlSource: `SELECT ${columns.join(',')} FROM ${tableOrQuery}`,
- columns: columns,
- },
- trackName,
- {ts: columns[0], dur: columns[1], name: columns[2]},
- columns.slice(2),
+ engine,
+ {
+ sqlSource: `SELECT ${columns.join(',')} FROM ${tableOrQuery}`,
+ columns: columns,
+ },
+ trackName,
+ {ts: columns[0], dur: columns[1], name: columns[2]},
+ columns.slice(2),
);
}
@@ -55,12 +55,12 @@
await ctx.engine.query(`SELECT IMPORT('android.battery_stats');`);
await this.addSimpleTrack(
- ctx.engine,
- track,
- `(SELECT *
+ ctx.engine,
+ track,
+ `(SELECT *
FROM android_battery_stats_event_slices
WHERE track_name = "${track}")`,
- ['ts', 'dur', 'str_value', 'int_value']);
+ ['ts', 'dur', 'str_value', 'int_value']);
},
});
@@ -93,10 +93,10 @@
// The first group column is used for the slice name.
const groupCols = groupby.replaceAll(' ', '').split(',');
await this.addSimpleTrack(
- ctx.engine,
- trackName || 'Network Activity',
- `android_network_activity_${suffix}`,
- ['ts', 'dur', ...groupCols, 'packet_length', 'packet_count']);
+ ctx.engine,
+ trackName || 'Network Activity',
+ `android_network_activity_${suffix}`,
+ ['ts', 'dur', ...groupCols, 'packet_length', 'packet_count']);
},
});
}
diff --git a/ui/src/plugins/dev.perfetto.AndroidPerf/index.ts b/ui/src/plugins/dev.perfetto.AndroidPerf/index.ts
index a521724..d16f73a 100644
--- a/ui/src/plugins/dev.perfetto.AndroidPerf/index.ts
+++ b/ui/src/plugins/dev.perfetto.AndroidPerf/index.ts
@@ -27,36 +27,36 @@
id: 'dev.perfetto.AndroidPerf#BinderSystemServerIncoming',
name: 'Run query: system_server incoming binder graph',
callback: () => ctx.tabs.openQuery(
- `INCLUDE PERFETTO MODULE android.binder;
+ `INCLUDE PERFETTO MODULE android.binder;
SELECT * FROM android_binder_incoming_graph((SELECT upid FROM process WHERE name = 'system_server'))`,
- 'system_server incoming binder graph'),
+ 'system_server incoming binder graph'),
});
ctx.registerCommand({
id: 'dev.perfetto.AndroidPerf#BinderSystemServerOutgoing',
name: 'Run query: system_server outgoing binder graph',
callback: () => ctx.tabs.openQuery(
- `INCLUDE PERFETTO MODULE android.binder;
+ `INCLUDE PERFETTO MODULE android.binder;
SELECT * FROM android_binder_outgoing_graph((SELECT upid FROM process WHERE name = 'system_server'))`,
- 'system_server outgoing binder graph'),
+ 'system_server outgoing binder graph'),
});
ctx.registerCommand({
id: 'dev.perfetto.AndroidPerf#MonitorContentionSystemServer',
name: 'Run query: system_server monitor_contention graph',
callback: () => ctx.tabs.openQuery(
- `INCLUDE PERFETTO MODULE android.monitor_contention;
+ `INCLUDE PERFETTO MODULE android.monitor_contention;
SELECT * FROM android_monitor_contention_graph((SELECT upid FROM process WHERE name = 'system_server'))`,
- 'system_server monitor_contention graph'),
+ 'system_server monitor_contention graph'),
});
ctx.registerCommand({
id: 'dev.perfetto.AndroidPerf#BinderAll',
name: 'Run query: all process binder graph',
callback: () => ctx.tabs.openQuery(
- `INCLUDE PERFETTO MODULE android.binder;
+ `INCLUDE PERFETTO MODULE android.binder;
SELECT * FROM android_binder_graph(-1000, 1000, -1000, 1000)`,
- 'all process binder graph'),
+ 'all process binder graph'),
});
ctx.registerCommand({
diff --git a/ui/src/plugins/dev.perfetto.AndroidPerfTraceCounters/index.ts b/ui/src/plugins/dev.perfetto.AndroidPerfTraceCounters/index.ts
index 3f7d272..9f41870 100644
--- a/ui/src/plugins/dev.perfetto.AndroidPerfTraceCounters/index.ts
+++ b/ui/src/plugins/dev.perfetto.AndroidPerfTraceCounters/index.ts
@@ -49,7 +49,7 @@
),
target_thread_sched_slice AS (
SELECT s.*, t.tid, t.name FROM sched s LEFT JOIN thread t USING (utid) WHERE t.tid = ${
- tid}
+ tid}
),
target_thread_ipc_slice AS (
SELECT
@@ -79,17 +79,17 @@
`;
await addDebugSliceTrack(
- ctx.engine,
- {
- sqlSource: sqlPrefix + `
+ ctx.engine,
+ {
+ sqlSource: sqlPrefix + `
SELECT * FROM target_thread_ipc_slice WHERE ts IS NOT NULL`,
- },
- 'Rutime IPC:' + tid,
- {ts: 'ts', dur: 'dur', name: 'ipc'},
- ['instruction', 'cycle', 'stall_backend_mem', 'l3_cache_miss'],
+ },
+ 'Rutime IPC:' + tid,
+ {ts: 'ts', dur: 'dur', name: 'ipc'},
+ ['instruction', 'cycle', 'stall_backend_mem', 'l3_cache_miss'],
);
ctx.tabs.openQuery(
- sqlPrefix + `
+ sqlPrefix + `
SELECT
(sum(instruction) * 1.0 / sum(cycle)*1.0) AS avg_ipc,
sum(dur)/1e6 as total_runtime_ms,
@@ -98,7 +98,7 @@
sum(stall_backend_mem) as total_stall_backend_mem,
sum(l3_cache_miss) as total_l3_cache_miss
FROM target_thread_ipc_slice WHERE ts IS NOT NULL`,
- 'target thread ipc statistic');
+ 'target thread ipc statistic');
},
});
}
diff --git a/ui/src/plugins/dev.perfetto.CoreCommands/index.ts b/ui/src/plugins/dev.perfetto.CoreCommands/index.ts
index 083a848..3bae76b 100644
--- a/ui/src/plugins/dev.perfetto.CoreCommands/index.ts
+++ b/ui/src/plugins/dev.perfetto.CoreCommands/index.ts
@@ -125,7 +125,7 @@
name: 'Run query: cycles by p-state by CPU',
callback: () => {
ctx.tabs.openQuery(
- CYCLES_PER_P_STATE_PER_CPU, 'Cycles by p-state by CPU');
+ CYCLES_PER_P_STATE_PER_CPU, 'Cycles by p-state by CPU');
},
});
@@ -134,7 +134,7 @@
name: 'Run query: CPU Time by CPU by process',
callback: () => {
ctx.tabs.openQuery(
- CPU_TIME_BY_CPU_BY_PROCESS, 'CPU Time by CPU by process');
+ CPU_TIME_BY_CPU_BY_PROCESS, 'CPU Time by CPU by process');
},
});
@@ -143,7 +143,7 @@
name: 'Run query: heap graph bytes per type',
callback: () => {
ctx.tabs.openQuery(
- HEAP_GRAPH_BYTES_PER_TYPE, 'Heap graph bytes per type');
+ HEAP_GRAPH_BYTES_PER_TYPE, 'Heap graph bytes per type');
},
});
diff --git a/ui/src/plugins/dev.perfetto.ExampleState/index.ts b/ui/src/plugins/dev.perfetto.ExampleState/index.ts
index fc7874f..cc7c9a4 100644
--- a/ui/src/plugins/dev.perfetto.ExampleState/index.ts
+++ b/ui/src/plugins/dev.perfetto.ExampleState/index.ts
@@ -52,7 +52,7 @@
callback: () => {
const counter = this.store.state.counter;
ctx.tabs.openQuery(
- `SELECT ${counter} as counter;`, `Show counter ${counter}`);
+ `SELECT ${counter} as counter;`, `Show counter ${counter}`);
this.store.edit((draft) => {
++draft.counter;
});
diff --git a/ui/src/test/diff_viewer/script.js b/ui/src/test/diff_viewer/script.js
index 83b8edc..50f129b 100644
--- a/ui/src/test/diff_viewer/script.js
+++ b/ui/src/test/diff_viewer/script.js
@@ -19,7 +19,7 @@
const parts = selector.split('.');
if (parts.length === 0) {
throw new Error(
- 'Selector passed to element should be of a form tag.class1.class2');
+ 'Selector passed to element should be of a form tag.class1.class2');
}
const result = document.createElement(parts[0]);
@@ -79,16 +79,16 @@
const parts = line.split(';');
if (parts.length !== 2) {
console.warn(
- `Malformed line (expected two files separated via semicolon) ${
- line}!`);
+ `Malformed line (expected two files separated via semicolon) ${
+ line}!`);
continue;
}
const [output, diff] = parts;
children.push(m(
- 'div.row',
- m('div.cell', output, m('div.image-wrapper', imageLinkElement(output))),
- m('div.cell', diff, m('div.image-wrapper', imageLinkElement(diff)))));
+ 'div.row',
+ m('div.cell', output, m('div.image-wrapper', imageLinkElement(output))),
+ m('div.cell', diff, m('div.image-wrapper', imageLinkElement(diff)))));
}
if (children.length === 0) {
@@ -107,11 +107,11 @@
});
container.appendChild(m(
- 'div.message',
- 'Use following command from Perfetto checkout directory to apply the ' +
+ 'div.message',
+ 'Use following command from Perfetto checkout directory to apply the ' +
'changes: ',
- m('span.cmd', cmd),
- button));
+ m('span.cmd', cmd),
+ button));
}
for (const child of children) {
diff --git a/ui/src/test/perfetto_ui_test_helper.ts b/ui/src/test/perfetto_ui_test_helper.ts
index 8a0c419..13a2b08 100644
--- a/ui/src/test/perfetto_ui_test_helper.ts
+++ b/ui/src/test/perfetto_ui_test_helper.ts
@@ -66,8 +66,8 @@
}
}
throw new Error(
- `waitForPerfettoIdle() failed. Did not reach idle after ${
- timeoutMs} ms. ` +
+ `waitForPerfettoIdle() failed. Did not reach idle after ${
+ timeoutMs} ms. ` +
`Reasons not considered idle: ${reasons.join(', ')}`);
}
@@ -80,10 +80,10 @@
}
export async function compareScreenshots(
- reportPath: string, actualFilename: string, expectedFilename: string) {
+ reportPath: string, actualFilename: string, expectedFilename: string) {
if (!fs.existsSync(expectedFilename)) {
throw new Error(
- `Could not find ${expectedFilename}. Run wih REBASELINE=1.`);
+ `Could not find ${expectedFilename}. Run wih REBASELINE=1.`);
}
const actualImg = PNG.sync.read(fs.readFileSync(actualFilename));
const expectedImg = PNG.sync.read(fs.readFileSync(expectedFilename));
@@ -92,15 +92,15 @@
expect(height).toEqual(expectedImg.height);
const diffPng = new PNG({width, height});
const diff = await pixelmatch(
- actualImg.data, expectedImg.data, diffPng.data, width, height, {
- threshold: DIFF_PER_PIXEL_THRESHOLD,
- });
+ actualImg.data, expectedImg.data, diffPng.data, width, height, {
+ threshold: DIFF_PER_PIXEL_THRESHOLD,
+ });
if (diff > DIFF_MAX_PIXELS) {
const diffFilename = actualFilename.replace('.png', '-diff.png');
fs.writeFileSync(diffFilename, PNG.sync.write(diffPng));
fs.appendFileSync(
- reportPath,
- `${path.basename(actualFilename)};${path.basename(diffFilename)}\n`);
+ reportPath,
+ `${path.basename(actualFilename)};${path.basename(diffFilename)}\n`);
fail(`Diff test failed on ${diffFilename}, delta: ${diff} pixels`);
}
return diff;
diff --git a/ui/src/test/ui_integrationtest.ts b/ui/src/test/ui_integrationtest.ts
index 77098c9..d876ab8 100644
--- a/ui/src/test/ui_integrationtest.ts
+++ b/ui/src/test/ui_integrationtest.ts
@@ -167,20 +167,20 @@
test('open_first_trace_from_url', async () => {
await page.goto(
- 'http://localhost:10000/?testing=1/#!/?url=http://localhost:10000/test/data/chrome_memory_snapshot.pftrace');
+ 'http://localhost:10000/?testing=1/#!/?url=http://localhost:10000/test/data/chrome_memory_snapshot.pftrace');
await waitForPerfettoIdle(page);
});
test('open_second_trace_from_url', async () => {
await page.goto(
- 'http://localhost:10000/?testing=1#!/?url=http://localhost:10000/test/data/chrome_scroll_without_vsync.pftrace');
+ 'http://localhost:10000/?testing=1#!/?url=http://localhost:10000/test/data/chrome_scroll_without_vsync.pftrace');
await waitForPerfettoIdle(page);
});
test('access_subpage_then_go_back', async () => {
await waitForPerfettoIdle(page);
await page.goto(
- 'http://localhost:10000/?testing=1/#!/metrics?local_cache_key=76c25a80-25dd-1eb7-2246-d7b3c7a10f91');
+ 'http://localhost:10000/?testing=1/#!/metrics?local_cache_key=76c25a80-25dd-1eb7-2246-d7b3c7a10f91');
await page.goBack();
await waitForPerfettoIdle(page);
});
@@ -201,7 +201,7 @@
test('open_trace ', async () => {
await page.goto(
- 'http://localhost:10000/?testing=1#!/viewer?local_cache_key=76c25a80-25dd-1eb7-2246-d7b3c7a10f91');
+ 'http://localhost:10000/?testing=1#!/viewer?local_cache_key=76c25a80-25dd-1eb7-2246-d7b3c7a10f91');
await waitForPerfettoIdle(page);
});
@@ -212,7 +212,7 @@
test('open_second_trace', async () => {
await page.goto(
- 'http://localhost:10000/?testing=1#!/viewer?local_cache_key=00000000-0000-0000-e13c-bd7db4ff646f');
+ 'http://localhost:10000/?testing=1#!/viewer?local_cache_key=00000000-0000-0000-e13c-bd7db4ff646f');
await waitForPerfettoIdle(page);
// click on the 'Continue' button in the interstitial
@@ -230,7 +230,7 @@
test('open_invalid_trace', async () => {
await page.goto(
- 'http://localhost:10000/?testing=1#!/viewer?local_cache_key=invalid');
+ 'http://localhost:10000/?testing=1#!/viewer?local_cache_key=invalid');
await waitForPerfettoIdle(page);
});
});
@@ -246,7 +246,7 @@
test('open_trace_from_url', async () => {
await page.goto(
- 'http://localhost:10000/?testing=1/#!/?url=http://localhost:10000/test/data/chrome_memory_snapshot.pftrace');
+ 'http://localhost:10000/?testing=1/#!/?url=http://localhost:10000/test/data/chrome_memory_snapshot.pftrace');
await waitForPerfettoIdle(page);
});
@@ -270,7 +270,7 @@
const page = await getPage();
await page.goto('http://localhost:10000/?testing=1');
await page.goto(
- 'http://localhost:10000/?testing=1#!/viewer?local_cache_key=76c25a80-25dd-1eb7-2246-d7b3c7a10f91');
+ 'http://localhost:10000/?testing=1#!/viewer?local_cache_key=76c25a80-25dd-1eb7-2246-d7b3c7a10f91');
await waitForPerfettoIdle(page);
await page.goBack();
await waitForPerfettoIdle(page);
@@ -280,7 +280,7 @@
const page = await getPage();
await page.goto('about:blank');
await page.goto(
- 'http://localhost:10000/?testing=1#!/viewer?local_cache_key=invalid');
+ 'http://localhost:10000/?testing=1#!/viewer?local_cache_key=invalid');
await waitForPerfettoIdle(page);
});
});
diff --git a/ui/src/trace_processor/engine.ts b/ui/src/trace_processor/engine.ts
index 9f40df9..58a5de6 100644
--- a/ui/src/trace_processor/engine.ts
+++ b/ui/src/trace_processor/engine.ts
@@ -161,7 +161,7 @@
// "(ERR:rpc_seq)" is intercepted by error_dialog.ts to show a more
// graceful and actionable error.
throw new Error(`RPC sequence id mismatch cur=${rpc.seq} last=${
- this.rxSeqId} (ERR:rpc_seq)`);
+ this.rxSeqId} (ERR:rpc_seq)`);
}
this.rxSeqId = rpc.seq;
@@ -169,60 +169,60 @@
let isFinalResponse = true;
switch (rpc.response) {
- case TPM.TPM_APPEND_TRACE_DATA:
- const appendResult = assertExists(rpc.appendResult);
- const pendingPromise = assertExists(this.pendingParses.shift());
- if (appendResult.error && appendResult.error.length > 0) {
- pendingPromise.reject(appendResult.error);
- } else {
- pendingPromise.resolve();
- }
- break;
- case TPM.TPM_FINALIZE_TRACE_DATA:
- assertExists(this.pendingEOFs.shift()).resolve();
- break;
- case TPM.TPM_RESET_TRACE_PROCESSOR:
- assertExists(this.pendingResetTraceProcessors.shift()).resolve();
- break;
- case TPM.TPM_RESTORE_INITIAL_TABLES:
- assertExists(this.pendingRestoreTables.shift()).resolve();
- break;
- case TPM.TPM_QUERY_STREAMING:
- const qRes = assertExists(rpc.queryResult) as {} as QueryResultBypass;
- const pendingQuery = assertExists(this.pendingQueries[0]);
- pendingQuery.appendResultBatch(qRes.rawQueryResult);
- if (pendingQuery.isComplete()) {
- this.pendingQueries.shift();
- } else {
- isFinalResponse = false;
- }
- break;
- case TPM.TPM_COMPUTE_METRIC:
- const metricRes = assertExists(rpc.metricResult) as ComputeMetricResult;
- const pendingComputeMetric =
+ case TPM.TPM_APPEND_TRACE_DATA:
+ const appendResult = assertExists(rpc.appendResult);
+ const pendingPromise = assertExists(this.pendingParses.shift());
+ if (appendResult.error && appendResult.error.length > 0) {
+ pendingPromise.reject(appendResult.error);
+ } else {
+ pendingPromise.resolve();
+ }
+ break;
+ case TPM.TPM_FINALIZE_TRACE_DATA:
+ assertExists(this.pendingEOFs.shift()).resolve();
+ break;
+ case TPM.TPM_RESET_TRACE_PROCESSOR:
+ assertExists(this.pendingResetTraceProcessors.shift()).resolve();
+ break;
+ case TPM.TPM_RESTORE_INITIAL_TABLES:
+ assertExists(this.pendingRestoreTables.shift()).resolve();
+ break;
+ case TPM.TPM_QUERY_STREAMING:
+ const qRes = assertExists(rpc.queryResult) as {} as QueryResultBypass;
+ const pendingQuery = assertExists(this.pendingQueries[0]);
+ pendingQuery.appendResultBatch(qRes.rawQueryResult);
+ if (pendingQuery.isComplete()) {
+ this.pendingQueries.shift();
+ } else {
+ isFinalResponse = false;
+ }
+ break;
+ case TPM.TPM_COMPUTE_METRIC:
+ const metricRes = assertExists(rpc.metricResult) as ComputeMetricResult;
+ const pendingComputeMetric =
assertExists(this.pendingComputeMetrics.shift());
- if (metricRes.error && metricRes.error.length > 0) {
- const error =
+ if (metricRes.error && metricRes.error.length > 0) {
+ const error =
new QueryError(`ComputeMetric() error: ${metricRes.error}`, {
query: 'COMPUTE_METRIC',
});
- pendingComputeMetric.reject(error);
- } else {
- const result = metricRes.metricsAsPrototext ||
+ pendingComputeMetric.reject(error);
+ } else {
+ const result = metricRes.metricsAsPrototext ||
metricRes.metricsAsJson || metricRes.metrics || '';
- pendingComputeMetric.resolve(result);
- }
- break;
- case TPM.TPM_DISABLE_AND_READ_METATRACE:
- const metatraceRes =
+ pendingComputeMetric.resolve(result);
+ }
+ break;
+ case TPM.TPM_DISABLE_AND_READ_METATRACE:
+ const metatraceRes =
assertExists(rpc.metatrace) as DisableAndReadMetatraceResult;
- assertExists(this.pendingReadMetatrace).resolve(metatraceRes);
- this.pendingReadMetatrace = undefined;
- break;
- default:
- console.log(
- 'Unexpected TraceProcessor response received: ', rpc.response);
- break;
+ assertExists(this.pendingReadMetatrace).resolve(metatraceRes);
+ this.pendingReadMetatrace = undefined;
+ break;
+ default:
+ console.log(
+ 'Unexpected TraceProcessor response received: ', rpc.response);
+ break;
} // switch(rpc.response);
if (isFinalResponse) {
@@ -262,7 +262,7 @@
// TraceProcessor instance, so it should be called before passing any trace
// data.
resetTraceProcessor(
- {cropTrackEvents, ingestFtraceInRawTable, analyzeTraceProtoContent}:
+ {cropTrackEvents, ingestFtraceInRawTable, analyzeTraceProtoContent}:
TraceProcessorConfig): Promise<void> {
const asyncRes = defer<void>();
this.pendingResetTraceProcessors.push(asyncRes);
@@ -270,9 +270,9 @@
rpc.request = TPM.TPM_RESET_TRACE_PROCESSOR;
const args = rpc.resetTraceProcessorArgs = new ResetTraceProcessorArgs();
args.dropTrackEventDataBefore = cropTrackEvents ?
- ResetTraceProcessorArgs.DropTrackEventDataBefore
- .TRACK_EVENT_RANGE_OF_INTEREST :
- ResetTraceProcessorArgs.DropTrackEventDataBefore.NO_DROP;
+ ResetTraceProcessorArgs.DropTrackEventDataBefore
+ .TRACK_EVENT_RANGE_OF_INTEREST :
+ ResetTraceProcessorArgs.DropTrackEventDataBefore.NO_DROP;
args.ingestFtraceInRawTable = ingestFtraceInRawTable;
args.analyzeTraceProtoContent = analyzeTraceProtoContent;
this.rpcSendRequest(rpc);
@@ -396,7 +396,7 @@
if (!this._cpus) {
const cpus = [];
const queryRes = await this.query(
- 'select distinct(cpu) as cpu from sched order by cpu;');
+ 'select distinct(cpu) as cpu from sched order by cpu;');
for (const it = queryRes.iter({cpu: NUM}); it.valid(); it.next()) {
cpus.push(it.cpu);
}
@@ -427,13 +427,13 @@
async getTraceTimeBounds(): Promise<Span<time, duration>> {
const result = await this.query(
- `select start_ts as startTs, end_ts as endTs from trace_bounds`);
+ `select start_ts as startTs, end_ts as endTs from trace_bounds`);
const bounds = result.firstRow({
startTs: LONG,
endTs: LONG,
});
return new TimeSpan(
- Time.fromRaw(bounds.startTs), Time.fromRaw(bounds.endTs));
+ Time.fromRaw(bounds.startTs), Time.fromRaw(bounds.endTs));
}
async getTracingMetadataTimeBounds(): Promise<Span<time, duration>> {
diff --git a/ui/src/trace_processor/http_rpc_engine.ts b/ui/src/trace_processor/http_rpc_engine.ts
index 1c826ff..3e0ffa5 100644
--- a/ui/src/trace_processor/http_rpc_engine.ts
+++ b/ui/src/trace_processor/http_rpc_engine.ts
@@ -46,9 +46,9 @@
this.websocket.onopen = () => this.onWebsocketConnected();
this.websocket.onmessage = (e) => this.onWebsocketMessage(e);
this.websocket.onclose = (e) =>
- this.errorHandler(`Websocket closed (${e.code}: ${e.reason})`);
+ this.errorHandler(`Websocket closed (${e.code}: ${e.reason})`);
this.websocket.onerror = (e) =>
- this.errorHandler(`WebSocket error: ${e}`);
+ this.errorHandler(`WebSocket error: ${e}`);
}
if (this.connected) {
@@ -76,14 +76,14 @@
static async checkConnection(): Promise<HttpRpcState> {
const httpRpcState: HttpRpcState = {connected: false};
console.info(
- `It's safe to ignore the ERR_CONNECTION_REFUSED on ${RPC_URL} below. ` +
+ `It's safe to ignore the ERR_CONNECTION_REFUSED on ${RPC_URL} below. ` +
`That might happen while probing the external native accelerator. The ` +
`error is non-fatal and unlikely to be the culprit for any UI bug.`);
try {
const resp = await fetchWithTimeout(
- RPC_URL + 'status',
- {method: 'post', cache: 'no-cache'},
- RPC_CONNECT_TIMEOUT_MS);
+ RPC_URL + 'status',
+ {method: 'post', cache: 'no-cache'},
+ RPC_CONNECT_TIMEOUT_MS);
if (resp.status !== 200) {
httpRpcState.failure = `${resp.status} - ${resp.statusText}`;
} else {
diff --git a/ui/src/trace_processor/proto_ring_buffer.ts b/ui/src/trace_processor/proto_ring_buffer.ts
index 2c32cc8..b788d52 100644
--- a/ui/src/trace_processor/proto_ring_buffer.ts
+++ b/ui/src/trace_processor/proto_ring_buffer.ts
@@ -119,7 +119,7 @@
}
private static tryReadMessage(
- data: Uint8Array, dataStart: number, dataEnd: number): Uint8Array
+ data: Uint8Array, dataStart: number, dataEnd: number): Uint8Array
|undefined {
assertTrue(dataEnd <= data.length);
let pos = dataStart;
@@ -127,7 +127,7 @@
const tag = data[pos++]; // Assume one-byte tag.
if (tag >= 0x80 || (tag & 0x07) !== 2 /* len delimited */) {
throw new Error(
- `RPC framing error, unexpected tag ${tag} @ offset ${pos - 1}`);
+ `RPC framing error, unexpected tag ${tag} @ offset ${pos - 1}`);
}
let len = 0;
@@ -142,7 +142,7 @@
if (len >= kMaxMsgSize) {
throw new Error(
- `RPC framing error, message too large (${len} > ${kMaxMsgSize}`);
+ `RPC framing error, message too large (${len} > ${kMaxMsgSize}`);
}
const end = pos + len;
if (end > dataEnd) return undefined;
diff --git a/ui/src/trace_processor/query_result.ts b/ui/src/trace_processor/query_result.ts
index 798b42f..1e13f5c 100644
--- a/ui/src/trace_processor/query_result.ts
+++ b/ui/src/trace_processor/query_result.ts
@@ -185,43 +185,43 @@
function columnTypeToString(t: ColumnType): string {
switch (t) {
- case NUM:
- return 'NUM';
- case NUM_NULL:
- return 'NUM_NULL';
- case STR:
- return 'STR';
- case STR_NULL:
- return 'STR_NULL';
- case BLOB:
- return 'BLOB';
- case BLOB_NULL:
- return 'BLOB_NULL';
- case LONG:
- return 'LONG';
- case LONG_NULL:
- return 'LONG_NULL';
- default:
- return `INVALID(${t})`;
+ case NUM:
+ return 'NUM';
+ case NUM_NULL:
+ return 'NUM_NULL';
+ case STR:
+ return 'STR';
+ case STR_NULL:
+ return 'STR_NULL';
+ case BLOB:
+ return 'BLOB';
+ case BLOB_NULL:
+ return 'BLOB_NULL';
+ case LONG:
+ return 'LONG';
+ case LONG_NULL:
+ return 'LONG_NULL';
+ default:
+ return `INVALID(${t})`;
}
}
function isCompatible(actual: CellType, expected: ColumnType): boolean {
switch (actual) {
- case CellType.CELL_NULL:
- return expected === NUM_NULL || expected === STR_NULL ||
+ case CellType.CELL_NULL:
+ return expected === NUM_NULL || expected === STR_NULL ||
expected === BLOB_NULL || expected === LONG_NULL;
- case CellType.CELL_VARINT:
- return expected === NUM || expected === NUM_NULL || expected === LONG ||
+ case CellType.CELL_VARINT:
+ return expected === NUM || expected === NUM_NULL || expected === LONG ||
expected === LONG_NULL;
- case CellType.CELL_FLOAT64:
- return expected === NUM || expected === NUM_NULL;
- case CellType.CELL_STRING:
- return expected === STR || expected === STR_NULL;
- case CellType.CELL_BLOB:
- return expected === BLOB || expected === BLOB_NULL;
- default:
- throw new Error(`Unknown CellType ${actual}`);
+ case CellType.CELL_FLOAT64:
+ return expected === NUM || expected === NUM_NULL;
+ case CellType.CELL_STRING:
+ return expected === STR || expected === STR_NULL;
+ case CellType.CELL_BLOB:
+ return expected === BLOB || expected === BLOB_NULL;
+ default:
+ throw new Error(`Unknown CellType ${actual}`);
}
}
@@ -425,71 +425,71 @@
while (reader.pos < reader.len) {
const tag = reader.uint32();
switch (tag >>> 3) {
- case 1: // column_names
- // Only the first batch should contain the column names. If this fires
- // something is going wrong in the handling of the batch stream.
- assertTrue(columnNamesEmptyAtStartOfBatch);
- const origColName = reader.string();
- let colName = origColName;
- // In some rare cases two columns can have the same name (b/194891824)
- // e.g. `select 1 as x, 2 as x`. These queries don't happen in the
- // UI code, but they can happen when the user types a query (e.g.
- // with a join). The most practical thing we can do here is renaming
- // the columns with a suffix. Keeping the same name will break when
- // iterating, because column names become iterator object keys.
- for (let i = 1; columnNamesSet.has(colName); ++i) {
- colName = `${origColName}_${i}`;
- assertTrue(i < 100); // Give up at some point;
- }
- columnNamesSet.add(colName);
- this.columnNames.push(colName);
- break;
- case 2: // error
- // The query has errored only if the |error| field is non-empty.
- // In protos, we don't distinguish between non-present and empty.
- // Make sure we don't propagate ambiguous empty strings to JS.
- const err = reader.string();
- this._error = (err !== undefined && err.length) ? err : undefined;
- break;
- case 3: // batch
- const batchLen = reader.uint32();
- const batchRaw = resBytes.subarray(reader.pos, reader.pos + batchLen);
- reader.pos += batchLen;
+ case 1: // column_names
+ // Only the first batch should contain the column names. If this fires
+ // something is going wrong in the handling of the batch stream.
+ assertTrue(columnNamesEmptyAtStartOfBatch);
+ const origColName = reader.string();
+ let colName = origColName;
+ // In some rare cases two columns can have the same name (b/194891824)
+ // e.g. `select 1 as x, 2 as x`. These queries don't happen in the
+ // UI code, but they can happen when the user types a query (e.g.
+ // with a join). The most practical thing we can do here is renaming
+ // the columns with a suffix. Keeping the same name will break when
+ // iterating, because column names become iterator object keys.
+ for (let i = 1; columnNamesSet.has(colName); ++i) {
+ colName = `${origColName}_${i}`;
+ assertTrue(i < 100); // Give up at some point;
+ }
+ columnNamesSet.add(colName);
+ this.columnNames.push(colName);
+ break;
+ case 2: // error
+ // The query has errored only if the |error| field is non-empty.
+ // In protos, we don't distinguish between non-present and empty.
+ // Make sure we don't propagate ambiguous empty strings to JS.
+ const err = reader.string();
+ this._error = (err !== undefined && err.length) ? err : undefined;
+ break;
+ case 3: // batch
+ const batchLen = reader.uint32();
+ const batchRaw = resBytes.subarray(reader.pos, reader.pos + batchLen);
+ reader.pos += batchLen;
- // The ResultBatch ctor parses the CellsBatch submessage.
- const parsedBatch = new ResultBatch(batchRaw);
- this.batches.push(parsedBatch);
- this._isComplete = parsedBatch.isLastBatch;
+ // The ResultBatch ctor parses the CellsBatch submessage.
+ const parsedBatch = new ResultBatch(batchRaw);
+ this.batches.push(parsedBatch);
+ this._isComplete = parsedBatch.isLastBatch;
- // In theory one could construct a valid proto serializing the column
- // names after the cell batches. In practice the QueryResultSerializer
- // doesn't do that so it's not worth complicating the code.
- const numColumns = this.columnNames.length;
- if (numColumns !== 0) {
- assertTrue(parsedBatch.numCells % numColumns === 0);
- this._numRows += parsedBatch.numCells / numColumns;
- } else {
- // numColumns == 0 is plausible for queries like CREATE TABLE ... .
- assertTrue(parsedBatch.numCells === 0);
- }
- break;
+ // In theory one could construct a valid proto serializing the column
+ // names after the cell batches. In practice the QueryResultSerializer
+ // doesn't do that so it's not worth complicating the code.
+ const numColumns = this.columnNames.length;
+ if (numColumns !== 0) {
+ assertTrue(parsedBatch.numCells % numColumns === 0);
+ this._numRows += parsedBatch.numCells / numColumns;
+ } else {
+ // numColumns == 0 is plausible for queries like CREATE TABLE ... .
+ assertTrue(parsedBatch.numCells === 0);
+ }
+ break;
- case 4:
- this._statementCount = reader.uint32();
- break;
+ case 4:
+ this._statementCount = reader.uint32();
+ break;
- case 5:
- this._statementWithOutputCount = reader.uint32();
- break;
+ case 5:
+ this._statementWithOutputCount = reader.uint32();
+ break;
- case 6:
- this._lastStatementSql = reader.string();
- break;
+ case 6:
+ this._lastStatementSql = reader.string();
+ break;
- default:
- console.warn(`Unexpected QueryResult field ${tag >>> 3}`);
- reader.skipType(tag & 7);
- break;
+ default:
+ console.warn(`Unexpected QueryResult field ${tag >>> 3}`);
+ reader.skipType(tag & 7);
+ break;
} // switch (tag)
} // while (pos < end)
@@ -563,78 +563,78 @@
while (reader.pos < end) {
const tag = reader.uint32();
switch (tag >>> 3) {
- case 1: // cell types, a packed array containing one CellType per cell.
- assertTrue((tag & 7) === TAG_LEN_DELIM); // Must be packed varint.
- this.cellTypesLen = reader.uint32();
- this.cellTypesOff = reader.pos;
- reader.pos += this.cellTypesLen;
- break;
+ case 1: // cell types, a packed array containing one CellType per cell.
+ assertTrue((tag & 7) === TAG_LEN_DELIM); // Must be packed varint.
+ this.cellTypesLen = reader.uint32();
+ this.cellTypesOff = reader.pos;
+ reader.pos += this.cellTypesLen;
+ break;
- case 2: // varint_cells, a packed varint buffer.
- assertTrue((tag & 7) === TAG_LEN_DELIM); // Must be packed varint.
- const packLen = reader.uint32();
- this.varintOff = reader.pos;
- this.varintLen = packLen;
- assertTrue(reader.buf === batchBytes);
- assertTrue(
- this.varintOff + this.varintLen <=
+ case 2: // varint_cells, a packed varint buffer.
+ assertTrue((tag & 7) === TAG_LEN_DELIM); // Must be packed varint.
+ const packLen = reader.uint32();
+ this.varintOff = reader.pos;
+ this.varintLen = packLen;
+ assertTrue(reader.buf === batchBytes);
+ assertTrue(
+ this.varintOff + this.varintLen <=
batchBytes.byteOffset + batchBytes.byteLength);
- reader.pos += packLen;
- break;
+ reader.pos += packLen;
+ break;
- case 3: // float64_cells, a 64-bit aligned packed fixed64 buffer.
- assertTrue((tag & 7) === TAG_LEN_DELIM); // Must be packed varint.
- const f64Len = reader.uint32();
- assertTrue(f64Len % 8 === 0);
- // Float64Array's constructor is evil: the offset is in bytes but the
- // length is in 8-byte words.
- const f64Words = f64Len / 8;
- const f64Off = batchBytes.byteOffset + reader.pos;
- if (f64Off % 8 === 0) {
- this.float64Cells =
+ case 3: // float64_cells, a 64-bit aligned packed fixed64 buffer.
+ assertTrue((tag & 7) === TAG_LEN_DELIM); // Must be packed varint.
+ const f64Len = reader.uint32();
+ assertTrue(f64Len % 8 === 0);
+ // Float64Array's constructor is evil: the offset is in bytes but the
+ // length is in 8-byte words.
+ const f64Words = f64Len / 8;
+ const f64Off = batchBytes.byteOffset + reader.pos;
+ if (f64Off % 8 === 0) {
+ this.float64Cells =
new Float64Array(batchBytes.buffer, f64Off, f64Words);
- } else {
- // When using the production code in trace_processor's rpc.cc, the
- // float64 should be 8-bytes aligned. The slow-path case is only for
- // tests.
- const slice = batchBytes.buffer.slice(f64Off, f64Off + f64Len);
- this.float64Cells = new Float64Array(slice);
- }
- reader.pos += f64Len;
- break;
+ } else {
+ // When using the production code in trace_processor's rpc.cc, the
+ // float64 should be 8-bytes aligned. The slow-path case is only for
+ // tests.
+ const slice = batchBytes.buffer.slice(f64Off, f64Off + f64Len);
+ this.float64Cells = new Float64Array(slice);
+ }
+ reader.pos += f64Len;
+ break;
- case 4: // blob_cells: one entry per blob.
- assertTrue((tag & 7) === TAG_LEN_DELIM);
- // protobufjs's bytes() under the hoods calls slice() and creates
- // a copy. Fine here as blobs are rare and not a fastpath.
- this.blobCells.push(new Uint8Array(reader.bytes()));
- break;
+ case 4: // blob_cells: one entry per blob.
+ assertTrue((tag & 7) === TAG_LEN_DELIM);
+ // protobufjs's bytes() under the hoods calls slice() and creates
+ // a copy. Fine here as blobs are rare and not a fastpath.
+ this.blobCells.push(new Uint8Array(reader.bytes()));
+ break;
- case 5: // string_cells: all the string cells concatenated with \0s.
- assertTrue((tag & 7) === TAG_LEN_DELIM);
- const strLen = reader.uint32();
- assertTrue(reader.pos + strLen <= end);
- const subArr = batchBytes.subarray(reader.pos, reader.pos + strLen);
- assertTrue(subArr.length === strLen);
- // The reason why we do this split rather than creating one string
- // per entry is that utf8 decoding has some non-negligible cost. See
- // go/postmessage-benchmark .
- this.stringCells = utf8Decode(subArr).split('\0');
- reader.pos += strLen;
- break;
+ case 5: // string_cells: all the string cells concatenated with \0s.
+ assertTrue((tag & 7) === TAG_LEN_DELIM);
+ const strLen = reader.uint32();
+ assertTrue(reader.pos + strLen <= end);
+ const subArr = batchBytes.subarray(reader.pos, reader.pos + strLen);
+ assertTrue(subArr.length === strLen);
+ // The reason why we do this split rather than creating one string
+ // per entry is that utf8 decoding has some non-negligible cost. See
+ // go/postmessage-benchmark .
+ this.stringCells = utf8Decode(subArr).split('\0');
+ reader.pos += strLen;
+ break;
- case 6: // is_last_batch (boolean).
- this.isLastBatch = !!reader.bool();
- break;
+ case 6: // is_last_batch (boolean).
+ this.isLastBatch = !!reader.bool();
+ break;
- case 7: // padding for realignment, skip silently.
- reader.skipType(tag & 7);
- break;
+ case 7: // padding for realignment, skip silently.
+ reader.skipType(tag & 7);
+ break;
- default:
- console.warn(`Unexpected QueryResult.CellsBatch field ${tag >>> 3}`);
- reader.skipType(tag & 7);
- break;
+ default:
+ console.warn(`Unexpected QueryResult.CellsBatch field ${tag >>> 3}`);
+ reader.skipType(tag & 7);
+ break;
} // switch(tag)
} // while (pos < end)
}
@@ -701,7 +701,7 @@
const res = this.rowData[columnName];
if (res === undefined) {
throw this.makeError(
- `Column '${columnName}' doesn't exist. ` +
+ `Column '${columnName}' doesn't exist. ` +
`Actual columns: [${this.columnNames.join(',')}]`);
}
return res;
@@ -723,7 +723,7 @@
// whole rows in each QueryResult batch and NOT truncate them midway.
// If this assert fires the TP RPC logic has a bug.
assertTrue(
- this.nextCellTypeOff === this.cellTypesEnd ||
+ this.nextCellTypeOff === this.cellTypesEnd ||
this.cellTypesEnd === -1);
if (!this.tryMoveToNextBatch()) {
this.isValid = false;
@@ -741,42 +741,42 @@
const expType = this.rowSpec[colName];
switch (cellType) {
- case CellType.CELL_NULL:
- rowData[colName] = null;
- break;
+ case CellType.CELL_NULL:
+ rowData[colName] = null;
+ break;
- case CellType.CELL_VARINT:
- if (expType === NUM || expType === NUM_NULL) {
- // This is very subtle. The return type of int64 can be either a
- // number or a Long.js {high:number, low:number} if Long.js is
- // installed. The default state seems different in node and browser.
- // We force-disable Long.js support in the top of this source file.
- const val = this.varIntReader.int64();
- rowData[colName] = val as {} as number;
- } else {
- // LONG, LONG_NULL, or unspecified - return as bigint
- const value =
+ case CellType.CELL_VARINT:
+ if (expType === NUM || expType === NUM_NULL) {
+ // This is very subtle. The return type of int64 can be either a
+ // number or a Long.js {high:number, low:number} if Long.js is
+ // installed. The default state seems different in node and browser.
+ // We force-disable Long.js support in the top of this source file.
+ const val = this.varIntReader.int64();
+ rowData[colName] = val as {} as number;
+ } else {
+ // LONG, LONG_NULL, or unspecified - return as bigint
+ const value =
decodeInt64Varint(this.batchBytes, this.varIntReader.pos);
- rowData[colName] = value;
- this.varIntReader.skip(); // Skips a varint
- }
- break;
+ rowData[colName] = value;
+ this.varIntReader.skip(); // Skips a varint
+ }
+ break;
- case CellType.CELL_FLOAT64:
- rowData[colName] = this.float64Cells[this.nextFloat64Cell++];
- break;
+ case CellType.CELL_FLOAT64:
+ rowData[colName] = this.float64Cells[this.nextFloat64Cell++];
+ break;
- case CellType.CELL_STRING:
- rowData[colName] = this.stringCells[this.nextStringCell++];
- break;
+ case CellType.CELL_STRING:
+ rowData[colName] = this.stringCells[this.nextStringCell++];
+ break;
- case CellType.CELL_BLOB:
- const blob = this.blobCells[this.nextBlobCell++];
- rowData[colName] = blob;
- break;
+ case CellType.CELL_BLOB:
+ const blob = this.blobCells[this.nextBlobCell++];
+ rowData[colName] = blob;
+ break;
- default:
- throw this.makeError(`Invalid cell type ${cellType}`);
+ default:
+ throw this.makeError(`Invalid cell type ${cellType}`);
}
} // For (cells)
this.isValid = true;
@@ -810,7 +810,7 @@
for (const expectedCol of Object.keys(this.rowSpec)) {
if (this.columnNames.indexOf(expectedCol) < 0) {
throw this.makeError(
- `Column ${expectedCol} not found in the SQL result ` +
+ `Column ${expectedCol} not found in the SQL result ` +
`set {${this.columnNames.join(' ')}}`);
}
}
@@ -847,8 +847,8 @@
'Did you mean NUM_NULL, LONG_NULL, STR_NULL or BLOB_NULL?';
} else {
err = `Incompatible cell type. Expected: ${
- columnTypeToString(
- expType)} actual: ${CELL_TYPE_NAMES[actualType]}`;
+ columnTypeToString(
+ expType)} actual: ${CELL_TYPE_NAMES[actualType]}`;
}
}
if (err.length > 0) {
diff --git a/ui/src/trace_processor/query_result_unittest.ts b/ui/src/trace_processor/query_result_unittest.ts
index ab98c11..78e051e 100644
--- a/ui/src/trace_processor/query_result_unittest.ts
+++ b/ui/src/trace_processor/query_result_unittest.ts
@@ -176,7 +176,7 @@
const actualNums = new Array<number|null>();
const actualStrings = new Array<string|null>();
for (const iter = qr.iter({n: NUM_NULL, s: STR_NULL}); iter.valid();
- iter.next()) {
+ iter.next()) {
actualNums.push(iter.n);
actualStrings.push(iter.s);
}
@@ -185,9 +185,9 @@
// Check that using NUM / STR throws.
expect(() => qr.iter({n: NUM_NULL, s: STR}))
- .toThrowError(/col: 's'.*is NULL.*not expected/);
+ .toThrowError(/col: 's'.*is NULL.*not expected/);
expect(() => qr.iter({n: NUM, s: STR_NULL}))
- .toThrowError(/col: 'n'.*is NULL.*not expected/);
+ .toThrowError(/col: 'n'.*is NULL.*not expected/);
expect(qr.iter({n: NUM_NULL})).toBeTruthy();
expect(qr.iter({s: STR_NULL})).toBeTruthy();
});
@@ -352,7 +352,7 @@
describe('decodeInt64Varint', () => {
test('Parsing empty input should throw an error', () => {
expect(() => decodeInt64Varint(new Uint8Array(), 0))
- .toThrow('Index out of range');
+ .toThrow('Index out of range');
});
test('Parsing single byte positive integers', () => {
diff --git a/ui/src/traceconv/index.ts b/ui/src/traceconv/index.ts
index d9c6aed..e5590d5 100644
--- a/ui/src/traceconv/index.ts
+++ b/ui/src/traceconv/index.ts
@@ -89,9 +89,9 @@
await deferredRuntimeInitialized;
module.FS.mkdir('/fs');
module.FS.mount(
- assertExists(module.FS.filesystems.WORKERFS),
- {blobs: [{name: 'trace.proto', data: trace}]},
- '/fs');
+ assertExists(module.FS.filesystems.WORKERFS),
+ {blobs: [{name: 'trace.proto', data: trace}]},
+ '/fs');
updateStatus('Converting trace');
module.callMain(args);
updateStatus('Trace conversion completed');
@@ -120,9 +120,9 @@
}
async function ConvertTraceAndDownload(
- trace: Blob,
- format: Format,
- truncate?: 'start'|'end'): Promise<void> {
+ trace: Blob,
+ format: Format,
+ truncate?: 'start'|'end'): Promise<void> {
const jobName = format === 'json' ? 'convert_json' : 'convert_systrace';
updateJobStatus(jobName, ConversionJobStatus.InProgress);
const outPath = '/trace.json';
@@ -156,7 +156,7 @@
}
async function ConvertTraceAndOpenInLegacy(
-trace: Blob, truncate?: 'start'|'end') {
+ trace: Blob, truncate?: 'start'|'end') {
const jobName = 'open_in_legacy';
updateJobStatus(jobName, ConversionJobStatus.InProgress);
const outPath = '/trace.json';
diff --git a/ui/src/tracks/android_log/index.ts b/ui/src/tracks/android_log/index.ts
index 15551a6..28e2fe8 100644
--- a/ui/src/tracks/android_log/index.ts
+++ b/ui/src/tracks/android_log/index.ts
@@ -122,7 +122,7 @@
const dataEndPx = visibleTimeScale.timeToPx(data.end);
checkerboardExcept(
- ctx, this.getHeight(), 0, size.width, dataStartPx, dataEndPx);
+ ctx, this.getHeight(), 0, size.width, dataStartPx, dataEndPx);
const quantWidth =
Math.max(EVT_PX, visibleTimeScale.durationToPx(data.resolution));
diff --git a/ui/src/tracks/annotation/index.ts b/ui/src/tracks/annotation/index.ts
index 53f20c5..b865272 100644
--- a/ui/src/tracks/annotation/index.ts
+++ b/ui/src/tracks/annotation/index.ts
@@ -65,11 +65,11 @@
},
track: (({trackKey}) => {
return new ChromeSliceTrack(
- engine,
- 0,
- trackKey,
- id,
- 'annotation',
+ engine,
+ 0,
+ trackKey,
+ id,
+ 'annotation',
);
}),
});
diff --git a/ui/src/tracks/async_slices/async_slice_track_v2.ts b/ui/src/tracks/async_slices/async_slice_track_v2.ts
index 1730086..b5d7696 100644
--- a/ui/src/tracks/async_slices/async_slice_track_v2.ts
+++ b/ui/src/tracks/async_slices/async_slice_track_v2.ts
@@ -19,7 +19,7 @@
export class AsyncSliceTrackV2 extends NamedSliceTrack {
constructor(
- args: NewTrackArgs, maxDepth: number, private trackIds: number[]) {
+ args: NewTrackArgs, maxDepth: number, private trackIds: number[]) {
super(args);
this.sliceLayout = {
...SLICE_LAYOUT_FIT_CONTENT_DEFAULTS,
diff --git a/ui/src/tracks/async_slices/index.ts b/ui/src/tracks/async_slices/index.ts
index 91d0274..bae295d 100644
--- a/ui/src/tracks/async_slices/index.ts
+++ b/ui/src/tracks/async_slices/index.ts
@@ -119,10 +119,10 @@
kind: ASYNC_SLICE_TRACK_KIND,
track: ({trackKey}) => {
return new AsyncSliceTrack(
- engine,
- maxDepth,
- trackKey,
- trackIds,
+ engine,
+ maxDepth,
+ trackKey,
+ trackIds,
);
},
});
@@ -134,9 +134,9 @@
kind: ASYNC_SLICE_TRACK_KIND,
track: ({trackKey}) => {
return new AsyncSliceTrackV2(
- {engine, trackKey},
- maxDepth,
- trackIds,
+ {engine, trackKey},
+ maxDepth,
+ trackIds,
);
},
});
@@ -201,10 +201,10 @@
kind: ASYNC_SLICE_TRACK_KIND,
track: ({trackKey}) => {
return new AsyncSliceTrack(
- ctx.engine,
- maxDepth,
- trackKey,
- trackIds,
+ ctx.engine,
+ maxDepth,
+ trackKey,
+ trackIds,
);
},
});
@@ -216,9 +216,9 @@
kind: ASYNC_SLICE_TRACK_KIND,
track: ({trackKey}) => {
return new AsyncSliceTrackV2(
- {engine: ctx.engine, trackKey},
- maxDepth,
- trackIds,
+ {engine: ctx.engine, trackKey},
+ maxDepth,
+ trackIds,
);
},
});
@@ -292,10 +292,10 @@
kind: ASYNC_SLICE_TRACK_KIND,
track: ({trackKey}) => {
return new AsyncSliceTrack(
- engine,
- maxDepth,
- trackKey,
- trackIds,
+ engine,
+ maxDepth,
+ trackKey,
+ trackIds,
);
},
});
@@ -307,9 +307,9 @@
kind: ASYNC_SLICE_TRACK_KIND,
track: ({trackKey}) => {
return new AsyncSliceTrackV2(
- {engine, trackKey},
- maxDepth,
- trackIds,
+ {engine, trackKey},
+ maxDepth,
+ trackIds,
);
},
});
diff --git a/ui/src/tracks/chrome_critical_user_interactions/index.ts b/ui/src/tracks/chrome_critical_user_interactions/index.ts
index fa47ae6..29c16ca 100644
--- a/ui/src/tracks/chrome_critical_user_interactions/index.ts
+++ b/ui/src/tracks/chrome_critical_user_interactions/index.ts
@@ -77,19 +77,19 @@
function convertToCriticalUserInteractionType(cujType: string):
CriticalUserInteractionType {
switch (cujType) {
- case CriticalUserInteractionType.PAGE_LOAD:
- return CriticalUserInteractionType.PAGE_LOAD;
- case CriticalUserInteractionType.STARTUP:
- return CriticalUserInteractionType.STARTUP;
- case CriticalUserInteractionType.WEB_CONTENT_INTERACTION:
- return CriticalUserInteractionType.WEB_CONTENT_INTERACTION;
- default:
- return CriticalUserInteractionType.UNKNOWN;
+ case CriticalUserInteractionType.PAGE_LOAD:
+ return CriticalUserInteractionType.PAGE_LOAD;
+ case CriticalUserInteractionType.STARTUP:
+ return CriticalUserInteractionType.STARTUP;
+ case CriticalUserInteractionType.WEB_CONTENT_INTERACTION:
+ return CriticalUserInteractionType.WEB_CONTENT_INTERACTION;
+ default:
+ return CriticalUserInteractionType.UNKNOWN;
}
}
export class CriticalUserInteractionTrack extends
- CustomSqlTableSliceTrack<CriticalUserInteractionSliceTrackTypes> {
+ CustomSqlTableSliceTrack<CriticalUserInteractionSliceTrackTypes> {
static readonly kind = CRITICAL_USER_INTERACTIONS_KIND;
getSqlDataSource(): CustomSqlTableDefConfig {
@@ -110,7 +110,7 @@
}
getDetailsPanel(
- args: OnSliceClickArgs<CriticalUserInteractionSliceTrackTypes['slice']>):
+ args: OnSliceClickArgs<CriticalUserInteractionSliceTrackTypes['slice']>):
CustomSqlDetailsPanelConfig {
let detailsPanel = {
kind: GenericSliceDetailsTab.kind,
@@ -121,41 +121,41 @@
};
switch (convertToCriticalUserInteractionType(args.slice.type)) {
- case CriticalUserInteractionType.PAGE_LOAD:
- detailsPanel = {
- kind: PageLoadDetailsPanel.kind,
- config: {
- sqlTableName: this.tableName,
- title: 'Chrome Page Load',
- },
- };
- break;
- case CriticalUserInteractionType.STARTUP:
- detailsPanel = {
- kind: StartupDetailsPanel.kind,
- config: {
- sqlTableName: this.tableName,
- title: 'Chrome Startup',
- },
- };
- break;
- case CriticalUserInteractionType.WEB_CONTENT_INTERACTION:
- detailsPanel = {
- kind: WebContentInteractionPanel.kind,
- config: {
- sqlTableName: this.tableName,
- title: 'Chrome Web Content Interaction',
- },
- };
- break;
- default:
- break;
+ case CriticalUserInteractionType.PAGE_LOAD:
+ detailsPanel = {
+ kind: PageLoadDetailsPanel.kind,
+ config: {
+ sqlTableName: this.tableName,
+ title: 'Chrome Page Load',
+ },
+ };
+ break;
+ case CriticalUserInteractionType.STARTUP:
+ detailsPanel = {
+ kind: StartupDetailsPanel.kind,
+ config: {
+ sqlTableName: this.tableName,
+ title: 'Chrome Startup',
+ },
+ };
+ break;
+ case CriticalUserInteractionType.WEB_CONTENT_INTERACTION:
+ detailsPanel = {
+ kind: WebContentInteractionPanel.kind,
+ config: {
+ sqlTableName: this.tableName,
+ title: 'Chrome Web Content Interaction',
+ },
+ };
+ break;
+ default:
+ break;
}
return detailsPanel;
}
onSliceClick(
- args: OnSliceClickArgs<CriticalUserInteractionSliceTrackTypes['slice']>) {
+ args: OnSliceClickArgs<CriticalUserInteractionSliceTrackTypes['slice']>) {
const detailsPanelConfig = this.getDetailsPanel(args);
globals.makeSelection(Actions.selectGenericSlice({
id: args.slice.scopedId,
@@ -210,7 +210,7 @@
kind: CriticalUserInteractionTrack.kind,
displayName: 'Chrome Interactions',
track: (trackCtx) => new CriticalUserInteractionTrack(
- {engine: ctx.engine, trackKey: trackCtx.trackKey}),
+ {engine: ctx.engine, trackKey: trackCtx.trackKey}),
});
}
diff --git a/ui/src/tracks/chrome_critical_user_interactions/page_load_details_panel.ts b/ui/src/tracks/chrome_critical_user_interactions/page_load_details_panel.ts
index 9a95c4d..3880087 100644
--- a/ui/src/tracks/chrome_critical_user_interactions/page_load_details_panel.ts
+++ b/ui/src/tracks/chrome_critical_user_interactions/page_load_details_panel.ts
@@ -30,7 +30,7 @@
import d = DetailsSchema;
export class PageLoadDetailsPanel extends
- BottomTab<GenericSliceDetailsTabConfig> {
+ BottomTab<GenericSliceDetailsTabConfig> {
static readonly kind = 'org.perfetto.PageLoadDetailsPanel';
private data: Details;
@@ -42,43 +42,43 @@
constructor(args: NewBottomTabArgs<GenericSliceDetailsTabConfig>) {
super(args);
this.data = new Details(
- this.engine,
- 'chrome_page_loads',
- this.config.id,
- {
- 'Navigation start': d.Timestamp('navigation_start_ts'),
- 'FCP event': d.Timestamp('fcp_ts'),
- 'FCP': d.Interval('navigation_start_ts', 'fcp'),
- 'LCP event': d.Timestamp('lcp_ts', {skipIfNull: true}),
- 'LCP': d.Interval('navigation_start_ts', 'lcp', {skipIfNull: true}),
- 'DOMContentLoaded':
+ this.engine,
+ 'chrome_page_loads',
+ this.config.id,
+ {
+ 'Navigation start': d.Timestamp('navigation_start_ts'),
+ 'FCP event': d.Timestamp('fcp_ts'),
+ 'FCP': d.Interval('navigation_start_ts', 'fcp'),
+ 'LCP event': d.Timestamp('lcp_ts', {skipIfNull: true}),
+ 'LCP': d.Interval('navigation_start_ts', 'lcp', {skipIfNull: true}),
+ 'DOMContentLoaded':
d.Timestamp('dom_content_loaded_event_ts', {skipIfNull: true}),
- 'onload timestamp': d.Timestamp('load_event_ts', {skipIfNull: true}),
- 'performance.mark timings': d.Dict({
- data: {
- 'Fully loaded':
+ 'onload timestamp': d.Timestamp('load_event_ts', {skipIfNull: true}),
+ 'performance.mark timings': d.Dict({
+ data: {
+ 'Fully loaded':
d.Timestamp('mark_fully_loaded_ts', {skipIfNull: true}),
- 'Fully visible':
+ 'Fully visible':
d.Timestamp('mark_fully_visible_ts', {skipIfNull: true}),
- 'Interactive':
+ 'Interactive':
d.Timestamp('mark_interactive_ts', {skipIfNull: true}),
- },
- skipIfEmpty: true,
- }),
- 'Navigation ID': 'navigation_id',
- 'Browser process': d.SqlIdRef('process', 'browser_upid'),
- 'URL': d.URLValue('url'),
- },
- wellKnownTypes);
+ },
+ skipIfEmpty: true,
+ }),
+ 'Navigation ID': 'navigation_id',
+ 'Browser process': d.SqlIdRef('process', 'browser_upid'),
+ 'URL': d.URLValue('url'),
+ },
+ wellKnownTypes);
}
viewTab() {
return m(
- DetailsShell,
- {
- title: this.getTitle(),
- },
- m(GridLayout, m(GridLayoutColumn, this.data.render())));
+ DetailsShell,
+ {
+ title: this.getTitle(),
+ },
+ m(GridLayout, m(GridLayoutColumn, this.data.render())));
}
getTitle(): string {
diff --git a/ui/src/tracks/chrome_critical_user_interactions/startup_details_panel.ts b/ui/src/tracks/chrome_critical_user_interactions/startup_details_panel.ts
index 97a0db2..b91ab16 100644
--- a/ui/src/tracks/chrome_critical_user_interactions/startup_details_panel.ts
+++ b/ui/src/tracks/chrome_critical_user_interactions/startup_details_panel.ts
@@ -43,7 +43,7 @@
}
export class StartupDetailsPanel extends
- BottomTab<GenericSliceDetailsTabConfig> {
+ BottomTab<GenericSliceDetailsTabConfig> {
static readonly kind = 'org.perfetto.StartupDetailsPanel';
private loaded = false;
private data: Data|undefined;
@@ -121,19 +121,19 @@
}
return m(
- DetailsShell,
- {
- title: this.getTitle(),
- },
- m(GridLayout,
+ DetailsShell,
+ {
+ title: this.getTitle(),
+ },
+ m(GridLayout,
+ m(
+ GridLayoutColumn,
m(
- GridLayoutColumn,
- m(
- Section,
- {title: 'Details'},
- m(Tree, dictToTreeNodes(this.getDetailsDictionary())),
- ),
- )));
+ Section,
+ {title: 'Details'},
+ m(Tree, dictToTreeNodes(this.getDetailsDictionary())),
+ ),
+ )));
}
getTitle(): string {
diff --git a/ui/src/tracks/chrome_critical_user_interactions/web_content_interaction_details_panel.ts b/ui/src/tracks/chrome_critical_user_interactions/web_content_interaction_details_panel.ts
index fa1641f..a5ae992 100644
--- a/ui/src/tracks/chrome_critical_user_interactions/web_content_interaction_details_panel.ts
+++ b/ui/src/tracks/chrome_critical_user_interactions/web_content_interaction_details_panel.ts
@@ -56,7 +56,7 @@
}
export class WebContentInteractionPanel extends
- BottomTab<GenericSliceDetailsTabConfig> {
+ BottomTab<GenericSliceDetailsTabConfig> {
static readonly kind = 'org.perfetto.WebContentInteractionPanel';
private loaded = false;
private data: Data|undefined;
@@ -112,7 +112,7 @@
details['Total duration of all events'] =
m(DurationWidget, {dur: this.data.totalDurationMs});
details['SQL ID'] = m(
- SqlRef, {table: 'chrome_web_content_interactions', id: this.config.id});
+ SqlRef, {table: 'chrome_web_content_interactions', id: this.config.id});
return details;
}
@@ -122,19 +122,19 @@
}
return m(
- DetailsShell,
- {
- title: this.getTitle(),
- },
- m(GridLayout,
+ DetailsShell,
+ {
+ title: this.getTitle(),
+ },
+ m(GridLayout,
+ m(
+ GridLayoutColumn,
m(
- GridLayoutColumn,
- m(
- Section,
- {title: 'Details'},
- m(Tree, dictToTreeNodes(this.getDetailsDictionary())),
- ),
- )));
+ Section,
+ {title: 'Details'},
+ m(Tree, dictToTreeNodes(this.getDetailsDictionary())),
+ ),
+ )));
}
getTitle(): string {
diff --git a/ui/src/tracks/chrome_scroll_jank/chrome_tasks_scroll_jank_track.ts b/ui/src/tracks/chrome_scroll_jank/chrome_tasks_scroll_jank_track.ts
index 5b87694..90024c7 100644
--- a/ui/src/tracks/chrome_scroll_jank/chrome_tasks_scroll_jank_track.ts
+++ b/ui/src/tracks/chrome_scroll_jank/chrome_tasks_scroll_jank_track.ts
@@ -33,7 +33,7 @@
}
export class ChromeTasksScrollJankTrack extends
- NamedSliceTrack<ChromeTasksScrollJankTrackTypes> {
+ NamedSliceTrack<ChromeTasksScrollJankTrackTypes> {
static readonly kind = 'org.chromium.ScrollJank.BrowserUIThreadLongTasks';
constructor(args: NewTrackArgs) {
@@ -49,8 +49,8 @@
export type GetTrackGroupUuidFn = (utid: number, upid: number|null) => string;
export async function decideTracks(
- engine: Engine,
- getTrackGroupUuid: GetTrackGroupUuidFn): Promise<DecideTracksResult> {
+ engine: Engine,
+ getTrackGroupUuid: GetTrackGroupUuidFn): Promise<DecideTracksResult> {
const result: DecideTracksResult = {
tracksToAdd: [],
};
diff --git a/ui/src/tracks/chrome_scroll_jank/event_latency_details_panel.ts b/ui/src/tracks/chrome_scroll_jank/event_latency_details_panel.ts
index e8a97de..51de4b7 100644
--- a/ui/src/tracks/chrome_scroll_jank/event_latency_details_panel.ts
+++ b/ui/src/tracks/chrome_scroll_jank/event_latency_details_panel.ts
@@ -57,7 +57,7 @@
import {ScrollJankV3Track} from './scroll_jank_v3_track';
export class EventLatencySliceDetailsPanel extends
- BottomTab<GenericSliceDetailsTabConfig> {
+ BottomTab<GenericSliceDetailsTabConfig> {
static readonly kind = 'dev.perfetto.EventLatencySliceDetailsPanel';
private loaded = false;
@@ -163,7 +163,7 @@
if (this.relevantThreadStage) {
this.relevantThreadTracks = await getEventLatencyCauseTracks(
- this.engine, this.relevantThreadStage);
+ this.engine, this.relevantThreadStage);
}
}
@@ -178,11 +178,11 @@
}
const name = this.relevantThreadStage ? this.relevantThreadStage.name :
- this.sliceDetails.name;
+ this.sliceDetails.name;
const ts = this.relevantThreadStage ? this.relevantThreadStage.ts :
- this.sliceDetails.ts;
+ this.sliceDetails.ts;
const dur = this.relevantThreadStage ? this.relevantThreadStage.dur :
- this.sliceDetails.dur;
+ this.sliceDetails.dur;
const stageDetails = ScrollJankCauseMap.getEventLatencyDetails(name);
if (stageDetails === undefined) return undefined;
@@ -198,16 +198,16 @@
const columns: ColumnDescriptor<RelevantThreadRow>[] = [
widgetColumn<RelevantThreadRow>(
- 'Relevant Thread', (x) => getCauseLink(x.tracks, x.ts, x.dur)),
+ 'Relevant Thread', (x) => getCauseLink(x.tracks, x.ts, x.dur)),
widgetColumn<RelevantThreadRow>(
- 'Description',
- (x) => {
- if (x.description === '') {
- return x.description;
- } else {
- return m(TextParagraph, {text: x.description});
- }
- }),
+ 'Description',
+ (x) => {
+ if (x.description === '') {
+ return x.description;
+ } else {
+ return m(TextParagraph, {text: x.description});
+ }
+ }),
];
const trackLinks: RelevantThreadRow[] = [];
@@ -236,9 +236,9 @@
}
return m(
- Section,
- {title: this.isJankStage ? `Jank Cause: ${name}` : name},
- childWidgets);
+ Section,
+ {title: this.isJankStage ? `Jank Cause: ${name}` : name},
+ childWidgets);
}
private async getOldestAncestorSliceId(): Promise<number> {
@@ -265,53 +265,53 @@
private getLinksSection(): m.Child {
return m(
- Section,
- {title: 'Quick links'},
- m(
- Tree,
- m(TreeNode, {
- left: this.sliceDetails ?
- sliceRef(
- this.sliceDetails,
- 'EventLatency in context of other Input events') :
- 'EventLatency in context of other Input events',
- right: this.sliceDetails ? '' : 'N/A',
- }),
- m(TreeNode, {
- left: this.jankySlice ? getSliceForTrack(
- this.jankySlice,
- ScrollJankV3Track.kind,
- 'Jank Interval') :
- 'Jank Interval',
- right: this.jankySlice ? '' : 'N/A',
- }),
- ),
+ Section,
+ {title: 'Quick links'},
+ m(
+ Tree,
+ m(TreeNode, {
+ left: this.sliceDetails ?
+ sliceRef(
+ this.sliceDetails,
+ 'EventLatency in context of other Input events') :
+ 'EventLatency in context of other Input events',
+ right: this.sliceDetails ? '' : 'N/A',
+ }),
+ m(TreeNode, {
+ left: this.jankySlice ? getSliceForTrack(
+ this.jankySlice,
+ ScrollJankV3Track.kind,
+ 'Jank Interval') :
+ 'Jank Interval',
+ right: this.jankySlice ? '' : 'N/A',
+ }),
+ ),
);
}
private getDescriptionText(): m.Child {
return m(
- MultiParagraphText,
- m(TextParagraph, {
- text: `EventLatency tracks the latency of handling a given input event
+ MultiParagraphText,
+ m(TextParagraph, {
+ text: `EventLatency tracks the latency of handling a given input event
(Scrolls, Touches, Taps, etc). Ideally from when the input was
read by the hardware to when it was reflected on the screen.`,
- }),
- m(TextParagraph, {
- text:
+ }),
+ m(TextParagraph, {
+ text:
`Note however the concept of coalescing or terminating early. This
occurs when we receive multiple events or handle them quickly by
converting them into a different event. Such as a TOUCH_MOVE
being converted into a GESTURE_SCROLL_UPDATE type, or a multiple
GESTURE_SCROLL_UPDATE events being formed into a single frame at
the end of the RendererCompositorQueuingDelay.`,
- }),
- m(TextParagraph, {
- text:
+ }),
+ m(TextParagraph, {
+ text:
`*Important:* On some platforms (MacOS) we do not get feedback on
when something is presented on the screen so the timings are only
accurate for what we know on a given platform.`,
- }),
+ }),
);
}
@@ -321,9 +321,9 @@
const rightSideWidgets: m.Child[] = [];
rightSideWidgets.push(
- m(Section,
- {title: 'Description'},
- m('.div', this.getDescriptionText())));
+ m(Section,
+ {title: 'Description'},
+ m('.div', this.getDescriptionText())));
const stageWidget = this.getRelevantLinks();
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
@@ -333,23 +333,23 @@
rightSideWidgets.push(this.getLinksSection());
return m(
- DetailsShell,
- {
- title: 'Slice',
- description: this.name,
- },
- m(GridLayout,
- m(GridLayoutColumn,
- renderDetails(slice),
- hasArgs(slice.args) &&
+ DetailsShell,
+ {
+ title: 'Slice',
+ description: this.name,
+ },
+ m(GridLayout,
+ m(GridLayoutColumn,
+ renderDetails(slice),
+ hasArgs(slice.args) &&
m(Section,
{title: 'Arguments'},
m(Tree, renderArguments(this.engine, slice.args)))),
- m(GridLayoutColumn,
- m(Section,
- {title: 'Description'},
- m('.div', this.getDescriptionText())),
- this.getLinksSection())),
+ m(GridLayoutColumn,
+ m(Section,
+ {title: 'Description'},
+ m('.div', this.getDescriptionText())),
+ this.getLinksSection())),
);
} else {
return m(DetailsShell, {title: 'Slice', description: 'Loading...'});
diff --git a/ui/src/tracks/chrome_scroll_jank/event_latency_track.ts b/ui/src/tracks/chrome_scroll_jank/event_latency_track.ts
index b85116f..3fdd53d 100644
--- a/ui/src/tracks/chrome_scroll_jank/event_latency_track.ts
+++ b/ui/src/tracks/chrome_scroll_jank/event_latency_track.ts
@@ -40,7 +40,7 @@
'org.chromium.ScrollJank.event_latencies';
export class EventLatencyTrack extends
- CustomSqlTableSliceTrack<EventLatencyTrackTypes> {
+ CustomSqlTableSliceTrack<EventLatencyTrackTypes> {
static readonly kind = CHROME_EVENT_LATENCY_TRACK_KIND;
constructor(args: NewTrackArgs, private baseTable: string) {
diff --git a/ui/src/tracks/chrome_scroll_jank/index.ts b/ui/src/tracks/chrome_scroll_jank/index.ts
index 46d71eb..38d41dd 100644
--- a/ui/src/tracks/chrome_scroll_jank/index.ts
+++ b/ui/src/tracks/chrome_scroll_jank/index.ts
@@ -296,7 +296,7 @@
FROM latency_stages stage;`;
await ctx.engine.query(
- `INCLUDE PERFETTO MODULE chrome.scroll_jank.scroll_jank_intervals`);
+ `INCLUDE PERFETTO MODULE chrome.scroll_jank.scroll_jank_intervals`);
await ctx.engine.query(tableDefSql);
ctx.registerTrack({
@@ -312,7 +312,7 @@
private async addScrollJankV3ScrollTrack(ctx: PluginContextTrace):
Promise<void> {
await ctx.engine.query(
- `INCLUDE PERFETTO MODULE chrome.scroll_jank.scroll_jank_intervals`);
+ `INCLUDE PERFETTO MODULE chrome.scroll_jank.scroll_jank_intervals`);
ctx.registerTrack({
uri: 'perfetto.ChromeScrollJank#scrollJankV3',
diff --git a/ui/src/tracks/chrome_scroll_jank/scroll_delta_graph.ts b/ui/src/tracks/chrome_scroll_jank/scroll_delta_graph.ts
index e82d40a..a6b7913 100644
--- a/ui/src/tracks/chrome_scroll_jank/scroll_delta_graph.ts
+++ b/ui/src/tracks/chrome_scroll_jank/scroll_delta_graph.ts
@@ -45,7 +45,7 @@
}
export async function getUserScrollDeltas(
- engine: EngineProxy, startTs: time, dur: duration):
+ engine: EngineProxy, startTs: time, dur: duration):
Promise<ScrollDeltaDetails[]> {
const queryResult = await engine.query(`
INCLUDE PERFETTO MODULE chrome.scroll_jank.scroll_offsets;
@@ -80,7 +80,7 @@
}
export async function getAppliedScrollDeltas(
- engine: EngineProxy, startTs: time, dur: duration):
+ engine: EngineProxy, startTs: time, dur: duration):
Promise<ScrollDeltaDetails[]> {
const queryResult = await engine.query(`
INCLUDE PERFETTO MODULE chrome.scroll_jank.scroll_offsets;
@@ -128,7 +128,7 @@
}
export async function getJankIntervals(
- engine: EngineProxy, startTs: time, dur: duration):
+ engine: EngineProxy, startTs: time, dur: duration):
Promise<JankIntervalPlotDetails[]> {
const queryResult = await engine.query(`
INCLUDE PERFETTO MODULE chrome.scroll_jank.scroll_jank_intervals;
@@ -158,9 +158,9 @@
}
export function buildScrollOffsetsGraph(
- userDeltas: ScrollDeltaDetails[],
- appliedDeltas: ScrollDeltaDetails[],
- jankIntervals: JankIntervalPlotDetails[]): m.Child {
+ userDeltas: ScrollDeltaDetails[],
+ appliedDeltas: ScrollDeltaDetails[],
+ jankIntervals: JankIntervalPlotDetails[]): m.Child {
const userData = buildOffsetData(userDeltas, USER_CATEGORY);
const appliedData = buildOffsetData(appliedDeltas, APPLIED_CATEGORY);
const jankData = buildJankLayerData(jankIntervals);
@@ -247,7 +247,7 @@
}
function buildOffsetData(
- deltas: ScrollDeltaDetails[], category: string): ScrollDeltaPlotDatum[] {
+ deltas: ScrollDeltaDetails[], category: string): ScrollDeltaPlotDatum[] {
const plotData: ScrollDeltaPlotDatum[] = [];
for (const delta of deltas) {
plotData.push({
diff --git a/ui/src/tracks/chrome_scroll_jank/scroll_details_panel.ts b/ui/src/tracks/chrome_scroll_jank/scroll_details_panel.ts
index 9f89c35..59d1a07 100644
--- a/ui/src/tracks/chrome_scroll_jank/scroll_details_panel.ts
+++ b/ui/src/tracks/chrome_scroll_jank/scroll_details_panel.ts
@@ -85,7 +85,7 @@
}
export class ScrollDetailsPanel extends
- BottomTab<GenericSliceDetailsTabConfig> {
+ BottomTab<GenericSliceDetailsTabConfig> {
static readonly kind = 'org.perfetto.ScrollDetailsPanel';
loaded = false;
data: Data|undefined;
@@ -239,7 +239,7 @@
const userDeltas =
await getUserScrollDeltas(this.engine, this.data.ts, this.data.dur);
const appliedDeltas = await getAppliedScrollDeltas(
- this.engine, this.data.ts, this.data.dur);
+ this.engine, this.data.ts, this.data.dur);
const jankIntervals =
await getJankIntervals(this.engine, this.data.ts, this.data.dur);
this.scrollDeltas =
@@ -315,7 +315,7 @@
for (const jankSlice of this.orderedJankSlices) {
data.push({
jankLink: getSliceForTrack(
- jankSlice.jankSlice, ScrollJankV3Track.kind, jankSlice.cause),
+ jankSlice.jankSlice, ScrollJankV3Track.kind, jankSlice.cause),
dur: m(DurationWidget, {dur: jankSlice.delayDur}),
delayedVSyncs: jankSlice.delayVsync,
});
@@ -334,42 +334,42 @@
private getDescriptionText(): m.Child {
return m(
- MultiParagraphText,
- m(TextParagraph, {
- text: `The interval during which the user has started a scroll ending
+ MultiParagraphText,
+ m(TextParagraph, {
+ text: `The interval during which the user has started a scroll ending
after their finger leaves the screen and any resulting fling
animations have finished.`,
- }),
- m(TextParagraph, {
- text: `Note: This can contain periods of time where the finger is down
+ }),
+ m(TextParagraph, {
+ text: `Note: This can contain periods of time where the finger is down
and not moving and no active scrolling is occurring.`,
- }),
- m(TextParagraph, {
- text: `Note: Sometimes if a user touches the screen quickly after
+ }),
+ m(TextParagraph, {
+ text: `Note: Sometimes if a user touches the screen quickly after
letting go or Chrome was hung and got into a bad state. A new
scroll will start which will result in a slightly overlapping
scroll. This can occur due to the last scroll still outputting
frames (to get caught up) and the "new" scroll having started
producing frames after the user has started scrolling again.`,
- }),
+ }),
);
}
private getGraphText(): m.Child {
return m(
- MultiParagraphText,
- m(TextParagraph, {
- text: `The scroll offset is the discrepancy in physical screen pixels
+ MultiParagraphText,
+ m(TextParagraph, {
+ text: `The scroll offset is the discrepancy in physical screen pixels
between two consecutive frames.`,
- }),
- m(TextParagraph, {
- text: `The overall curve of the graph indicates the direction (up or
+ }),
+ m(TextParagraph, {
+ text: `The overall curve of the graph indicates the direction (up or
down) by which the user scrolled over time.`,
- }),
- m(TextParagraph, {
- text: `Grey blocks in the graph represent intervals of jank
+ }),
+ m(TextParagraph, {
+ text: `Grey blocks in the graph represent intervals of jank
corresponding with the Chrome Scroll Janks track.`,
- }),
+ }),
);
}
@@ -386,39 +386,39 @@
});
return m(
- DetailsShell,
- {
- title: this.getTitle(),
- },
- m(GridLayout,
- m(GridLayoutColumn,
- m(
- Section,
- {title: 'Details'},
- m(Tree, details),
- ),
- m(Section,
- {title: 'Slice Metrics'},
- m(Tree, this.renderMetricsDictionary())),
- m(
- Section,
- {title: 'Frame Presentation Delays'},
- this.getDelayTable(),
- )),
+ DetailsShell,
+ {
+ title: this.getTitle(),
+ },
+ m(GridLayout,
+ m(GridLayoutColumn,
m(
- GridLayoutColumn,
- m(
- Section,
- {title: 'Description'},
- this.getDescriptionText(),
- ),
- m(
- Section,
- {title: 'Scroll Offsets Plot'},
- m('.div[style=\'padding-bottom:5px\']', this.getGraphText()),
- this.scrollDeltas,
- ),
- )),
+ Section,
+ {title: 'Details'},
+ m(Tree, details),
+ ),
+ m(Section,
+ {title: 'Slice Metrics'},
+ m(Tree, this.renderMetricsDictionary())),
+ m(
+ Section,
+ {title: 'Frame Presentation Delays'},
+ this.getDelayTable(),
+ )),
+ m(
+ GridLayoutColumn,
+ m(
+ Section,
+ {title: 'Description'},
+ this.getDescriptionText(),
+ ),
+ m(
+ Section,
+ {title: 'Scroll Offsets Plot'},
+ m('.div[style=\'padding-bottom:5px\']', this.getGraphText()),
+ this.scrollDeltas,
+ ),
+ )),
);
}
diff --git a/ui/src/tracks/chrome_scroll_jank/scroll_jank_cause_link_utils.ts b/ui/src/tracks/chrome_scroll_jank/scroll_jank_cause_link_utils.ts
index df919ce..48fcef2 100644
--- a/ui/src/tracks/chrome_scroll_jank/scroll_jank_cause_link_utils.ts
+++ b/ui/src/tracks/chrome_scroll_jank/scroll_jank_cause_link_utils.ts
@@ -53,8 +53,8 @@
}
export async function getScrollJankCauseStage(
- engine: EngineProxy,
- eventLatencyId: SliceSqlId): Promise<EventLatencyStage|undefined> {
+ engine: EngineProxy,
+ eventLatencyId: SliceSqlId): Promise<EventLatencyStage|undefined> {
const queryResult = await engine.query(`
SELECT
IFNULL(cause_of_jank, '${UNKNOWN_NAME}') AS causeOfJank,
@@ -94,7 +94,7 @@
}
export async function getEventLatencyCauseTracks(
- engine: EngineProxy, scrollJankCauseStage: EventLatencyStage):
+ engine: EngineProxy, scrollJankCauseStage: EventLatencyStage):
Promise<EventLatencyCauseThreadTracks[]> {
const threadTracks: EventLatencyCauseThreadTracks[] = [];
const causeDetails =
@@ -103,22 +103,22 @@
for (const cause of causeDetails.jankCauses) {
switch (cause.process) {
- case CauseProcess.RENDERER:
- case CauseProcess.BROWSER:
- case CauseProcess.GPU:
- const tracksForProcess = await getChromeCauseTracks(
- engine,
- scrollJankCauseStage.eventLatencyId,
- cause.process,
- cause.thread);
- for (const track of tracksForProcess) {
- track.causeDescription = cause.description;
- threadTracks.push(track);
- }
- break;
- case CauseProcess.UNKNOWN:
- default:
- break;
+ case CauseProcess.RENDERER:
+ case CauseProcess.BROWSER:
+ case CauseProcess.GPU:
+ const tracksForProcess = await getChromeCauseTracks(
+ engine,
+ scrollJankCauseStage.eventLatencyId,
+ cause.process,
+ cause.thread);
+ for (const track of tracksForProcess) {
+ track.causeDescription = cause.description;
+ threadTracks.push(track);
+ }
+ break;
+ case CauseProcess.UNKNOWN:
+ default:
+ break;
}
}
@@ -126,10 +126,10 @@
}
async function getChromeCauseTracks(
- engine: EngineProxy,
- eventLatencySliceId: number,
- processName: CauseProcess,
- threadName: CauseThread): Promise<EventLatencyCauseThreadTracks[]> {
+ engine: EngineProxy,
+ eventLatencySliceId: number,
+ processName: CauseProcess,
+ threadName: CauseThread): Promise<EventLatencyCauseThreadTracks[]> {
const queryResult = await engine.query(`
INCLUDE PERFETTO MODULE chrome.scroll_jank.scroll_jank_cause_utils;
@@ -173,15 +173,15 @@
}
export function getCauseLink(
- threadTracks: EventLatencyCauseThreadTracks,
- ts: time|undefined,
- dur: duration|undefined): m.Child {
+ threadTracks: EventLatencyCauseThreadTracks,
+ ts: time|undefined,
+ dur: duration|undefined): m.Child {
const trackKeys: string[] = [];
for (const trackId of threadTracks.trackIds) {
const trackKey = globals.state.trackKeyByTrackId[trackId];
if (trackKey === undefined) {
return `Could not locate track ${trackId} for thread ${
- threadTracks.thread} in the global state`;
+ threadTracks.thread} in the global state`;
}
trackKeys.push(trackKey);
}
@@ -193,26 +193,26 @@
// Fixed length of a container to ensure that the icon does not overlap with
// the text due to table formatting.
return m(
- `div[style='width:250px']`,
- m(Anchor,
- {
- icon: Icons.UpdateSelection,
- onclick: () => {
- verticalScrollToTrack(trackKeys[0], true);
- if (exists(ts) && exists(dur)) {
- focusHorizontalRange(ts, Time.fromRaw(ts + dur), 0.3);
- globals.timeline.selectArea(
- ts, Time.fromRaw(ts + dur), trackKeys);
+ `div[style='width:250px']`,
+ m(Anchor,
+ {
+ icon: Icons.UpdateSelection,
+ onclick: () => {
+ verticalScrollToTrack(trackKeys[0], true);
+ if (exists(ts) && exists(dur)) {
+ focusHorizontalRange(ts, Time.fromRaw(ts + dur), 0.3);
+ globals.timeline.selectArea(
+ ts, Time.fromRaw(ts + dur), trackKeys);
- globals.dispatch(Actions.selectArea({
- area: {
- start: ts,
- end: Time.fromRaw(ts + dur),
- tracks: trackKeys,
- },
- }));
- }
- },
+ globals.dispatch(Actions.selectArea({
+ area: {
+ start: ts,
+ end: Time.fromRaw(ts + dur),
+ tracks: trackKeys,
+ },
+ }));
+ }
},
- threadTracks.thread));
+ },
+ threadTracks.thread));
}
diff --git a/ui/src/tracks/chrome_scroll_jank/scroll_jank_cause_map.ts b/ui/src/tracks/chrome_scroll_jank/scroll_jank_cause_map.ts
index c4842ef..fb06c9c 100644
--- a/ui/src/tracks/chrome_scroll_jank/scroll_jank_cause_map.ts
+++ b/ui/src/tracks/chrome_scroll_jank/scroll_jank_cause_map.ts
@@ -51,33 +51,33 @@
function getScrollJankProcess(process: string): CauseProcess {
switch (process) {
- case CauseProcess.BROWSER:
- return CauseProcess.BROWSER;
- case CauseProcess.RENDERER:
- return CauseProcess.RENDERER;
- case CauseProcess.GPU:
- return CauseProcess.GPU;
- default:
- return CauseProcess.UNKNOWN;
+ case CauseProcess.BROWSER:
+ return CauseProcess.BROWSER;
+ case CauseProcess.RENDERER:
+ return CauseProcess.RENDERER;
+ case CauseProcess.GPU:
+ return CauseProcess.GPU;
+ default:
+ return CauseProcess.UNKNOWN;
}
}
function getScrollJankThread(thread: string): CauseThread {
switch (thread) {
- case CauseThread.BROWSER_MAIN:
- return CauseThread.BROWSER_MAIN;
- case CauseThread.RENDERER_MAIN:
- return CauseThread.RENDERER_MAIN;
- case CauseThread.CHROME_CHILD_IO_THREAD:
- return CauseThread.CHROME_CHILD_IO_THREAD;
- case CauseThread.COMPOSITOR:
- return CauseThread.COMPOSITOR;
- case CauseThread.VIZ_COMPOSITOR:
- return CauseThread.VIZ_COMPOSITOR;
- case CauseThread.SURFACE_FLINGER:
- return CauseThread.SURFACE_FLINGER;
- default:
- return CauseThread.UNKNOWN;
+ case CauseThread.BROWSER_MAIN:
+ return CauseThread.BROWSER_MAIN;
+ case CauseThread.RENDERER_MAIN:
+ return CauseThread.RENDERER_MAIN;
+ case CauseThread.CHROME_CHILD_IO_THREAD:
+ return CauseThread.CHROME_CHILD_IO_THREAD;
+ case CauseThread.COMPOSITOR:
+ return CauseThread.COMPOSITOR;
+ case CauseThread.VIZ_COMPOSITOR:
+ return CauseThread.VIZ_COMPOSITOR;
+ case CauseThread.SURFACE_FLINGER:
+ return CauseThread.SURFACE_FLINGER;
+ default:
+ return CauseThread.UNKNOWN;
}
}
diff --git a/ui/src/tracks/chrome_scroll_jank/scroll_jank_slice.ts b/ui/src/tracks/chrome_scroll_jank/scroll_jank_slice.ts
index 56b1db3..851dfd1 100644
--- a/ui/src/tracks/chrome_scroll_jank/scroll_jank_slice.ts
+++ b/ui/src/tracks/chrome_scroll_jank/scroll_jank_slice.ts
@@ -42,9 +42,9 @@
}
async function getSlicesFromTrack(
- engine: EngineProxy,
- track: ScrollJankTrackSpec,
- constraints: SQLConstraints): Promise<BasicSlice[]> {
+ engine: EngineProxy,
+ track: ScrollJankTrackSpec,
+ constraints: SQLConstraints): Promise<BasicSlice[]> {
const query = await engine.query(`
SELECT
id AS sliceId,
@@ -71,7 +71,7 @@
export type ScrollJankSlice = BasicSlice;
export async function getScrollJankSlices(
- engine: EngineProxy, id: number): Promise<ScrollJankSlice[]> {
+ engine: EngineProxy, id: number): Promise<ScrollJankSlice[]> {
const track =
ScrollJankPluginState.getInstance().getTrack(ScrollJankV3Track.kind);
if (track == undefined) {
@@ -86,7 +86,7 @@
export type EventLatencySlice = BasicSlice;
export async function getEventLatencySlice(
- engine: EngineProxy, id: number): Promise<EventLatencySlice|undefined> {
+ engine: EngineProxy, id: number): Promise<EventLatencySlice|undefined> {
const track =
ScrollJankPluginState.getInstance().getTrack(EventLatencyTrack.kind);
if (track == undefined) {
@@ -100,7 +100,7 @@
}
export async function getEventLatencyDescendantSlice(
- engine: EngineProxy, id: number, descendant: string|undefined):
+ engine: EngineProxy, id: number, descendant: string|undefined):
Promise<EventLatencySlice|undefined> {
const query = await engine.query(`
SELECT
@@ -134,9 +134,9 @@
if (result.length > 1) {
throw new Error(`
Slice table and track view ${
- eventLatencyTrack
- .sqlTableName} has more than one descendant of slice id ${
- id} with name ${descendant}`);
+ eventLatencyTrack
+ .sqlTableName} has more than one descendant of slice id ${
+ id} with name ${descendant}`);
}
if (result.length === 0) {
return undefined;
@@ -156,35 +156,35 @@
m.ClassComponent<BasicScrollJankSliceRefAttrs> {
view(vnode: m.Vnode<BasicScrollJankSliceRefAttrs>) {
return m(
- Anchor,
- {
- icon: Icons.UpdateSelection,
- onclick: () => {
- const track =
+ Anchor,
+ {
+ icon: Icons.UpdateSelection,
+ onclick: () => {
+ const track =
ScrollJankPluginState.getInstance().getTrack(vnode.attrs.kind);
- if (track == undefined) {
- throw new Error(`${vnode.attrs.kind} track is not registered.`);
- }
+ if (track == undefined) {
+ throw new Error(`${vnode.attrs.kind} track is not registered.`);
+ }
- globals.makeSelection(Actions.selectGenericSlice({
- id: vnode.attrs.id,
- sqlTableName: track.sqlTableName,
- start: vnode.attrs.ts,
- duration: vnode.attrs.dur,
- trackKey: track.key,
- detailsPanelConfig: track.detailsPanelConfig,
- }));
+ globals.makeSelection(Actions.selectGenericSlice({
+ id: vnode.attrs.id,
+ sqlTableName: track.sqlTableName,
+ start: vnode.attrs.ts,
+ duration: vnode.attrs.dur,
+ trackKey: track.key,
+ detailsPanelConfig: track.detailsPanelConfig,
+ }));
- scrollToTrackAndTs(track.key, vnode.attrs.ts, true);
- },
+ scrollToTrackAndTs(track.key, vnode.attrs.ts, true);
},
- vnode.attrs.name,
+ },
+ vnode.attrs.name,
);
}
}
export function getSliceForTrack(
- state: BasicSlice, trackKind: string, name: string): m.Child {
+ state: BasicSlice, trackKind: string, name: string): m.Child {
return m(ScrollJankSliceRef, {
id: state.sliceId,
ts: state.ts,
diff --git a/ui/src/tracks/chrome_scroll_jank/scroll_jank_v3_details_panel.ts b/ui/src/tracks/chrome_scroll_jank/scroll_jank_v3_details_panel.ts
index e1218ef..7e63f52 100644
--- a/ui/src/tracks/chrome_scroll_jank/scroll_jank_v3_details_panel.ts
+++ b/ui/src/tracks/chrome_scroll_jank/scroll_jank_v3_details_panel.ts
@@ -67,12 +67,12 @@
}
async function getSliceDetails(
- engine: EngineProxy, id: number): Promise<SliceDetails|undefined> {
+ engine: EngineProxy, id: number): Promise<SliceDetails|undefined> {
return getSlice(engine, asSliceSqlId(id));
}
export class ScrollJankV3DetailsPanel extends
- BottomTab<GenericSliceDetailsTabConfig> {
+ BottomTab<GenericSliceDetailsTabConfig> {
static readonly kind = 'org.perfetto.ScrollJankV3DetailsPanel';
data: Data|undefined;
loaded = false;
@@ -177,12 +177,12 @@
if (this.hasCause()) {
this.causeSliceDetails = await getEventLatencyDescendantSlice(
- this.engine, this.data.eventLatencyId, this.data.jankCause);
+ this.engine, this.data.eventLatencyId, this.data.jankCause);
}
if (this.hasSubcause()) {
this.subcauseSliceDetails = await getEventLatencyDescendantSlice(
- this.engine, this.data.eventLatencyId, this.data.jankSubcause);
+ this.engine, this.data.eventLatencyId, this.data.jankSubcause);
}
}
}
@@ -241,15 +241,15 @@
private getDescriptionText(): m.Child {
return m(
- MultiParagraphText,
- m(TextParagraph, {
- text: `Delay between when the frame was expected to be presented and
+ MultiParagraphText,
+ m(TextParagraph, {
+ text: `Delay between when the frame was expected to be presented and
when it was actually presented.`,
- }),
- m(TextParagraph, {
- text: `This is the period of time during which the user is viewing a
+ }),
+ m(TextParagraph, {
+ text: `This is the period of time during which the user is viewing a
frame that isn't correct.`,
- }));
+ }));
}
private getLinksSection(): m.Child[] {
@@ -257,28 +257,28 @@
if (exists(this.sliceDetails) && exists(this.data)) {
result['Janked Event Latency stage'] = exists(this.causeSliceDetails) ?
- getSliceForTrack(
- this.causeSliceDetails,
- EventLatencyTrack.kind,
- this.data.jankCause) :
- sqlValueToString(this.data.jankCause);
+ getSliceForTrack(
+ this.causeSliceDetails,
+ EventLatencyTrack.kind,
+ this.data.jankCause) :
+ sqlValueToString(this.data.jankCause);
if (this.hasSubcause()) {
result['Sub-cause of Jank'] = exists(this.subcauseSliceDetails) ?
- getSliceForTrack(
- this.subcauseSliceDetails,
- EventLatencyTrack.kind,
- this.data.jankSubcause) :
- sqlValueToString(this.data.jankSubcause);
+ getSliceForTrack(
+ this.subcauseSliceDetails,
+ EventLatencyTrack.kind,
+ this.data.jankSubcause) :
+ sqlValueToString(this.data.jankSubcause);
}
const children = dictToTreeNodes(result);
if (exists(this.eventLatencySliceDetails)) {
children.unshift(m(TreeNode, {
left: getSliceForTrack(
- this.eventLatencySliceDetails,
- EventLatencyTrack.kind,
- 'Input EventLatency in context of ScrollUpdates'),
+ this.eventLatencySliceDetails,
+ EventLatencyTrack.kind,
+ 'Input EventLatency in context of ScrollUpdates'),
right: '',
}));
} else {
@@ -299,30 +299,30 @@
const details = this.renderDetailsDictionary();
return m(
- DetailsShell,
- {
- title: this.getTitle(),
- },
- m(GridLayout,
+ DetailsShell,
+ {
+ title: this.getTitle(),
+ },
+ m(GridLayout,
+ m(
+ GridLayoutColumn,
m(
- GridLayoutColumn,
- m(
- Section,
- {title: 'Details'},
- m(Tree, details),
- ),
- ),
- m(GridLayoutColumn,
- m(
- Section,
- {title: 'Description'},
- this.getDescriptionText(),
- ),
- m(
- Section,
- {title: 'Jank Cause'},
- m(Tree, this.getLinksSection()),
- ))),
+ Section,
+ {title: 'Details'},
+ m(Tree, details),
+ ),
+ ),
+ m(GridLayoutColumn,
+ m(
+ Section,
+ {title: 'Description'},
+ this.getDescriptionText(),
+ ),
+ m(
+ Section,
+ {title: 'Jank Cause'},
+ m(Tree, this.getLinksSection()),
+ ))),
);
}
diff --git a/ui/src/tracks/chrome_scroll_jank/scroll_jank_v3_track.ts b/ui/src/tracks/chrome_scroll_jank/scroll_jank_v3_track.ts
index 53c2e3c..644fa4a 100644
--- a/ui/src/tracks/chrome_scroll_jank/scroll_jank_v3_track.ts
+++ b/ui/src/tracks/chrome_scroll_jank/scroll_jank_v3_track.ts
@@ -36,7 +36,7 @@
const JANK_SLICE_NAME = ' Jank';
export class ScrollJankV3Track extends
- CustomSqlTableSliceTrack<NamedSliceTrackTypes> {
+ CustomSqlTableSliceTrack<NamedSliceTrackTypes> {
static readonly kind = 'org.chromium.ScrollJank.scroll_jank_v3_track';
constructor(args: NewTrackArgs) {
diff --git a/ui/src/tracks/chrome_scroll_jank/scroll_track.ts b/ui/src/tracks/chrome_scroll_jank/scroll_track.ts
index a888844..1f3648b 100644
--- a/ui/src/tracks/chrome_scroll_jank/scroll_track.ts
+++ b/ui/src/tracks/chrome_scroll_jank/scroll_track.ts
@@ -32,7 +32,7 @@
'org.chromium.TopLevelScrolls.scrolls';
export class TopLevelScrollTrack extends
- CustomSqlTableSliceTrack<NamedSliceTrackTypes> {
+ CustomSqlTableSliceTrack<NamedSliceTrackTypes> {
public static kind = CHROME_TOPLEVEL_SCROLLS_KIND;
getSqlDataSource(): CustomSqlTableDefConfig {
@@ -66,7 +66,7 @@
onDestroy() {
super.onDestroy();
ScrollJankPluginState.getInstance().unregisterTrack(
- TopLevelScrollTrack.kind);
+ TopLevelScrollTrack.kind);
}
}
diff --git a/ui/src/tracks/chrome_slices/index.ts b/ui/src/tracks/chrome_slices/index.ts
index ea03097..f232352 100644
--- a/ui/src/tracks/chrome_slices/index.ts
+++ b/ui/src/tracks/chrome_slices/index.ts
@@ -144,7 +144,7 @@
// it is less than or equal to one, incase the thread duration exceeds
// the total duration.
cpuTimeRatio = Math.min(
- Math.round(BIMath.ratio(it.threadDur, it.dur) * 100) / 100, 1);
+ Math.round(BIMath.ratio(it.threadDur, it.dur) * 100) / 100, 1);
}
slices.cpuTimeRatio![row] = cpuTimeRatio;
}
@@ -268,10 +268,10 @@
kind: SLICE_TRACK_KIND,
track: ({trackKey}) => {
return new ChromeSliceTrack(
- engine,
- maxDepth,
- trackKey,
- trackId,
+ engine,
+ maxDepth,
+ trackKey,
+ trackId,
);
},
});
diff --git a/ui/src/tracks/counter/index.ts b/ui/src/tracks/counter/index.ts
index e8a3c46..4ac8a37 100644
--- a/ui/src/tracks/counter/index.ts
+++ b/ui/src/tracks/counter/index.ts
@@ -142,7 +142,7 @@
private fetcher = new TimelineFetcher<Data>(this.onBoundsChange.bind(this));
constructor(
- ctx: TrackContext, private config: Config, private engine: EngineProxy) {
+ ctx: TrackContext, private config: Config, private engine: EngineProxy) {
this.trackKey = ctx.trackKey;
this.store = ctx.mountStore<CounterTrackState>((init: unknown) => {
if (isCounterState(init)) {
@@ -218,7 +218,7 @@
ifnull(min(delta), 0) as minDelta
from ${this.tableName('counter_view')}`);
const row = queryRes.firstRow(
- {maxValue: NUM, minValue: NUM, maxDelta: NUM, minDelta: NUM});
+ {maxValue: NUM, minValue: NUM, maxDelta: NUM, minDelta: NUM});
this.maximumValueSeen = row.maxValue;
this.minimumValueSeen = row.minValue;
this.maximumDeltaSeen = row.maxDelta;
@@ -342,11 +342,11 @@
});
return m(
- PopupMenu2,
- {
- trigger: m(Button, {icon: 'show_chart', minimal: true}),
- },
- menuItems,
+ PopupMenu2,
+ {
+ trigger: m(Button, {icon: 'show_chart', minimal: true}),
+ },
+ menuItems,
);
}
@@ -500,8 +500,8 @@
const xStart = Math.floor(timeScale.timeToPx(this.hoveredTs));
const xEnd = this.hoveredTsEnd === undefined ?
- endPx :
- Math.floor(timeScale.timeToPx(this.hoveredTsEnd));
+ endPx :
+ Math.floor(timeScale.timeToPx(this.hoveredTsEnd));
const y = MARGIN_TOP + RECT_HEIGHT -
Math.round(((this.hoveredValue - yMin) / yRange) * RECT_HEIGHT);
@@ -516,7 +516,7 @@
// Draw change marker.
ctx.beginPath();
ctx.arc(
- xStart, y, 3 /* r*/, 0 /* start angle*/, 2 * Math.PI /* end angle*/);
+ xStart, y, 3 /* r*/, 0 /* start angle*/, 2 * Math.PI /* end angle*/);
ctx.fill();
ctx.stroke();
@@ -549,12 +549,12 @@
// If the cached trace slices don't fully cover the visible time range,
// show a gray rectangle with a "Loading..." label.
checkerboardExcept(
- ctx,
- this.getHeight(),
- 0,
- size.width,
- timeScale.timeToPx(data.start),
- timeScale.timeToPx(data.end));
+ ctx,
+ this.getHeight(),
+ 0,
+ size.width,
+ timeScale.timeToPx(data.start),
+ timeScale.timeToPx(data.end));
}
onMouseMove(pos: {x: number, y: number}) {
@@ -609,7 +609,7 @@
async onDestroy(): Promise<void> {
if (this.engine.isAlive) {
await this.engine.query(
- `DROP VIEW IF EXISTS ${this.tableName('counter_view')}`);
+ `DROP VIEW IF EXISTS ${this.tableName('counter_view')}`);
}
this.store.dispose();
}
diff --git a/ui/src/tracks/cpu_freq/index.ts b/ui/src/tracks/cpu_freq/index.ts
index ee50102..420c05b 100644
--- a/ui/src/tracks/cpu_freq/index.ts
+++ b/ui/src/tracks/cpu_freq/index.ts
@@ -223,8 +223,8 @@
}
const geqConstraint = this.config.idleTrackId === undefined ?
- `ts >= ${minTs}` :
- `source_geq(ts, ${minTs})`;
+ `ts >= ${minTs}` :
+ `source_geq(ts, ${minTs})`;
return this.engine.query(`
select
(ts + ${bucketSize / 2n}) / ${bucketSize} * ${bucketSize} as tsq,
@@ -251,14 +251,14 @@
private async queryMaxSourceDur(): Promise<duration> {
const maxDurFreqResult = await this.engine.query(
- `select ifnull(max(dur), 0) as maxDur from ${this.tableName('freq')}`);
+ `select ifnull(max(dur), 0) as maxDur from ${this.tableName('freq')}`);
const maxDur = maxDurFreqResult.firstRow({'maxDur': LONG}).maxDur;
if (this.config.idleTrackId === undefined) {
return maxDur;
}
const maxDurIdleResult = await this.engine.query(
- `select ifnull(max(dur), 0) as maxDur from ${this.tableName('idle')}`);
+ `select ifnull(max(dur), 0) as maxDur from ${this.tableName('idle')}`);
return BIMath.max(maxDur, maxDurIdleResult.firstRow({maxDur: LONG}).maxDur);
}
@@ -414,8 +414,8 @@
const timestamp = Time.fromRaw(data.timestamps[i]);
const x = visibleTimeScale.timeToPx(timestamp);
const xEnd = i === data.lastIdleValues.length - 1 ?
- finalX :
- visibleTimeScale.timeToPx(Time.fromRaw(data.timestamps[i + 1]));
+ finalX :
+ visibleTimeScale.timeToPx(Time.fromRaw(data.timestamps[i + 1]));
const width = xEnd - x;
const height = calculateY(data.lastFreqKHz[i]) - zeroY;
@@ -433,8 +433,8 @@
const xStart = Math.floor(visibleTimeScale.timeToPx(this.hoveredTs));
const xEnd = this.hoveredTsEnd === undefined ?
- endPx :
- Math.floor(visibleTimeScale.timeToPx(this.hoveredTsEnd));
+ endPx :
+ Math.floor(visibleTimeScale.timeToPx(this.hoveredTsEnd));
const y = zeroY - Math.round((this.hoveredValue / yMax) * RECT_HEIGHT);
// Highlight line.
@@ -448,7 +448,7 @@
// Draw change marker.
ctx.beginPath();
ctx.arc(
- xStart, y, 3 /* r*/, 0 /* start angle*/, 2 * Math.PI /* end angle*/);
+ xStart, y, 3 /* r*/, 0 /* start angle*/, 2 * Math.PI /* end angle*/);
ctx.fill();
ctx.stroke();
@@ -473,12 +473,12 @@
// If the cached trace slices don't fully cover the visible time range,
// show a gray rectangle with a "Loading..." label.
checkerboardExcept(
- ctx,
- this.getHeight(),
- 0,
- size.width,
- visibleTimeScale.timeToPx(data.start),
- visibleTimeScale.timeToPx(data.end));
+ ctx,
+ this.getHeight(),
+ 0,
+ size.width,
+ visibleTimeScale.timeToPx(data.start),
+ visibleTimeScale.timeToPx(data.end));
}
onMouseMove(pos: {x: number, y: number}) {
diff --git a/ui/src/tracks/cpu_profile/index.ts b/ui/src/tracks/cpu_profile/index.ts
index 69fa4ff..3c7b2f0 100644
--- a/ui/src/tracks/cpu_profile/index.ts
+++ b/ui/src/tracks/cpu_profile/index.ts
@@ -122,12 +122,12 @@
selection.kind === 'CPU_PROFILE_SAMPLE' && selection.ts === centerX;
const strokeWidth = isSelected ? 3 : 0;
this.drawMarker(
- ctx,
- timeScale.timeToPx(centerX),
- this.centerY,
- isHovered,
- strokeWidth,
- data.callsiteId[i]);
+ ctx,
+ timeScale.timeToPx(centerX),
+ this.centerY,
+ isHovered,
+ strokeWidth,
+ data.callsiteId[i]);
}
// Group together identical identical CPU profile samples by connecting them
@@ -162,8 +162,8 @@
}
drawMarker(
- ctx: CanvasRenderingContext2D, x: number, y: number, isHovered: boolean,
- strokeWidth: number, callsiteId: number): void {
+ ctx: CanvasRenderingContext2D, x: number, y: number, isHovered: boolean,
+ strokeWidth: number, callsiteId: number): void {
ctx.beginPath();
ctx.moveTo(x - this.markerWidth, y - this.markerWidth);
ctx.lineTo(x, y + this.markerWidth);
@@ -213,7 +213,7 @@
const ts = Time.fromRaw(data.tsStarts[index]);
globals.makeSelection(
- Actions.selectCpuProfileSample({id, utid: this.utid, ts}));
+ Actions.selectCpuProfileSample({id, utid: this.utid, ts}));
return true;
}
return false;
@@ -221,8 +221,8 @@
// If the markers overlap the rightmost one will be selected.
findTimestampIndex(
- left: number, timeScale: TimeScale, data: Data, x: number, y: number,
- right: number): number {
+ left: number, timeScale: TimeScale, data: Data, x: number, y: number,
+ right: number): number {
let index = -1;
if (left !== -1) {
const start = Time.fromRaw(data.tsStarts[left]);
diff --git a/ui/src/tracks/cpu_slices/index.ts b/ui/src/tracks/cpu_slices/index.ts
index 495f3df..0596894 100644
--- a/ui/src/tracks/cpu_slices/index.ts
+++ b/ui/src/tracks/cpu_slices/index.ts
@@ -144,8 +144,8 @@
const isCached = this.cachedBucketSize <= resolution;
const queryTsq = isCached ?
- `cached_tsq / ${resolution} * ${resolution}` :
- `(ts + ${resolution / 2n}) / ${resolution} * ${resolution}`;
+ `cached_tsq / ${resolution} * ${resolution}` :
+ `(ts + ${resolution / 2n}) / ${resolution} * ${resolution}`;
const queryTable =
isCached ? this.tableName('sched_cached') : this.tableName('sched');
const constraintColumn = isCached ? 'cached_tsq' : 'ts';
@@ -225,7 +225,7 @@
async onDestroy() {
if (this.engine.isAlive) {
await this.engine.query(
- `drop table if exists ${this.tableName('sched_cached')}`);
+ `drop table if exists ${this.tableName('sched_cached')}`);
}
this.fetcher.dispose();
}
@@ -244,12 +244,12 @@
// If the cached trace slices don't fully cover the visible time range,
// show a gray rectangle with a "Loading..." label.
checkerboardExcept(
- ctx,
- this.getHeight(),
- 0,
- size.width,
- visibleTimeScale.timeToPx(data.start),
- visibleTimeScale.timeToPx(data.end));
+ ctx,
+ this.getHeight(),
+ 0,
+ size.width,
+ visibleTimeScale.timeToPx(data.start),
+ visibleTimeScale.timeToPx(data.end));
this.renderSlices(ctx, data);
}
@@ -381,11 +381,11 @@
const wakeupPos = visibleTimeScale.timeToPx(details.wakeupTs);
const latencyWidth = rectStart - wakeupPos;
drawDoubleHeadedArrow(
- ctx,
- wakeupPos,
- MARGIN_TOP + RECT_HEIGHT,
- latencyWidth,
- latencyWidth >= 20);
+ ctx,
+ wakeupPos,
+ MARGIN_TOP + RECT_HEIGHT,
+ latencyWidth,
+ latencyWidth >= 20);
// Latency time with a white semi-transparent background.
const latency = tStart - details.wakeupTs;
const displayText = Duration.humanise(latency);
@@ -393,16 +393,16 @@
if (latencyWidth >= measured.width + 2) {
ctx.fillStyle = 'rgba(255,255,255,0.7)';
ctx.fillRect(
- wakeupPos + latencyWidth / 2 - measured.width / 2 - 1,
- MARGIN_TOP + RECT_HEIGHT - 12,
- measured.width + 2,
- 11);
+ wakeupPos + latencyWidth / 2 - measured.width / 2 - 1,
+ MARGIN_TOP + RECT_HEIGHT - 12,
+ measured.width + 2,
+ 11);
ctx.textBaseline = 'bottom';
ctx.fillStyle = 'black';
ctx.fillText(
- displayText,
- wakeupPos + (latencyWidth) / 2,
- MARGIN_TOP + RECT_HEIGHT - 1);
+ displayText,
+ wakeupPos + (latencyWidth) / 2,
+ MARGIN_TOP + RECT_HEIGHT - 1);
}
}
}
@@ -465,7 +465,7 @@
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
const hoveredPid = threadInfo ? (threadInfo.pid ? threadInfo.pid : -1) : -1;
globals.dispatch(
- Actions.setHoveredUtidAndPid({utid: hoveredUtid, pid: hoveredPid}));
+ Actions.setHoveredUtidAndPid({utid: hoveredUtid, pid: hoveredPid}));
}
onMouseOut() {
diff --git a/ui/src/tracks/debug/add_debug_track_menu.ts b/ui/src/tracks/debug/add_debug_track_menu.ts
index 924e7f3..38033fb 100644
--- a/ui/src/tracks/debug/add_debug_track_menu.ts
+++ b/ui/src/tracks/debug/add_debug_track_menu.ts
@@ -93,25 +93,25 @@
const options = [];
for (const type of ['slice', 'counter']) {
options.push(
- m('option',
- {
- value: type,
- selected: this.trackType === type ? true : undefined,
- },
- type));
+ m('option',
+ {
+ value: type,
+ selected: this.trackType === type ? true : undefined,
+ },
+ type));
}
return m(
- Select,
- {
- id: 'track_type',
- oninput: (e: Event) => {
- if (!e.target) return;
- this.trackType =
+ Select,
+ {
+ id: 'track_type',
+ oninput: (e: Event) => {
+ if (!e.target) return;
+ this.trackType =
(e.target as HTMLSelectElement).value as 'slice' | 'counter';
- raf.scheduleFullRedraw();
- },
+ raf.scheduleFullRedraw();
},
- options);
+ },
+ options);
}
view(vnode: m.Vnode<AddDebugTrackMenuAttrs>) {
@@ -119,17 +119,17 @@
const options = [];
for (const column of this.columns) {
options.push(
- m('option',
- {
- selected: this.renderParams[name] === column ? true : undefined,
- },
- column));
+ m('option',
+ {
+ selected: this.renderParams[name] === column ? true : undefined,
+ },
+ column));
}
if (name === 'dur') {
options.push(
- m('option',
- {selected: this.renderParams[name] === '0' ? true : undefined},
- m('i', '0')));
+ m('option',
+ {selected: this.renderParams[name] === '0' ? true : undefined},
+ m('i', '0')));
}
return [
m(FormLabel,
@@ -148,58 +148,58 @@
];
};
return m(
- Form,
- {
- onSubmit: () => {
- switch (this.trackType) {
- case 'slice':
- addDebugSliceTrack(
- vnode.attrs.engine,
- vnode.attrs.dataSource,
- this.name,
- {
- ts: this.renderParams.ts,
- dur: this.renderParams.dur,
- name: this.renderParams.name,
- },
- this.columns);
- break;
- case 'counter':
- addDebugCounterTrack(
- vnode.attrs.engine, vnode.attrs.dataSource, this.name, {
- ts: this.renderParams.ts,
- value: this.renderParams.value,
- });
- break;
- }
- },
- submitLabel: 'Show',
+ Form,
+ {
+ onSubmit: () => {
+ switch (this.trackType) {
+ case 'slice':
+ addDebugSliceTrack(
+ vnode.attrs.engine,
+ vnode.attrs.dataSource,
+ this.name,
+ {
+ ts: this.renderParams.ts,
+ dur: this.renderParams.dur,
+ name: this.renderParams.name,
+ },
+ this.columns);
+ break;
+ case 'counter':
+ addDebugCounterTrack(
+ vnode.attrs.engine, vnode.attrs.dataSource, this.name, {
+ ts: this.renderParams.ts,
+ value: this.renderParams.value,
+ });
+ break;
+ }
},
- m(FormLabel,
- {for: 'track_name',
- },
- 'Track name'),
- m(TextInput, {
- id: 'track_name',
- ref: TRACK_NAME_FIELD_REF,
- onkeydown: (e: KeyboardEvent) => {
- // Allow Esc to close popup.
- if (e.key === 'Escape') return;
- },
- oninput: (e: KeyboardEvent) => {
- if (!e.target) return;
- this.name = (e.target as HTMLInputElement).value;
- },
- }),
- m(FormLabel,
- {for: 'track_type',
- },
- 'Track type'),
- this.renderTrackTypeSelect(),
- renderSelect('ts'),
- this.trackType === 'slice' && renderSelect('dur'),
- this.trackType === 'slice' && renderSelect('name'),
- this.trackType === 'counter' && renderSelect('value'),
+ submitLabel: 'Show',
+ },
+ m(FormLabel,
+ {for: 'track_name',
+ },
+ 'Track name'),
+ m(TextInput, {
+ id: 'track_name',
+ ref: TRACK_NAME_FIELD_REF,
+ onkeydown: (e: KeyboardEvent) => {
+ // Allow Esc to close popup.
+ if (e.key === 'Escape') return;
+ },
+ oninput: (e: KeyboardEvent) => {
+ if (!e.target) return;
+ this.name = (e.target as HTMLInputElement).value;
+ },
+ }),
+ m(FormLabel,
+ {for: 'track_type',
+ },
+ 'Track type'),
+ this.renderTrackTypeSelect(),
+ renderSelect('ts'),
+ this.trackType === 'slice' && renderSelect('dur'),
+ this.trackType === 'slice' && renderSelect('name'),
+ this.trackType === 'counter' && renderSelect('value'),
);
}
}
diff --git a/ui/src/tracks/debug/counter_track.ts b/ui/src/tracks/debug/counter_track.ts
index e594ffe..ad02d23 100644
--- a/ui/src/tracks/debug/counter_track.ts
+++ b/ui/src/tracks/debug/counter_track.ts
@@ -91,11 +91,11 @@
// once or want to tweak the actions once produced. Otherwise, use
// addDebugCounterTrack().
export async function createDebugCounterTrackActions(
- engine: EngineProxy,
- data: SqlDataSource,
- trackName: string,
- columns: CounterColumns,
- config?: CounterDebugTrackCreateConfig) {
+ engine: EngineProxy,
+ data: SqlDataSource,
+ trackName: string,
+ columns: CounterColumns,
+ config?: CounterDebugTrackCreateConfig) {
// To prepare displaying the provided data as a track, materialize it and
// compute depths.
const debugTrackId = ++debugTrackCount;
@@ -138,12 +138,12 @@
// Adds a debug track immediately. Use createDebugCounterTrackActions() if you
// want to create many tracks at once.
export async function addDebugCounterTrack(
- engine: EngineProxy,
- data: SqlDataSource,
- trackName: string,
- columns: CounterColumns,
- config?: CounterDebugTrackCreateConfig) {
+ engine: EngineProxy,
+ data: SqlDataSource,
+ trackName: string,
+ columns: CounterColumns,
+ config?: CounterDebugTrackCreateConfig) {
const actions = await createDebugCounterTrackActions(
- engine, data, trackName, columns, config);
+ engine, data, trackName, columns, config);
globals.dispatchMultiple(actions);
}
diff --git a/ui/src/tracks/debug/details_tab.ts b/ui/src/tracks/debug/details_tab.ts
index cb1f1ca..c0baf43 100644
--- a/ui/src/tracks/debug/details_tab.ts
+++ b/ui/src/tracks/debug/details_tab.ts
@@ -90,7 +90,7 @@
}
export class DebugSliceDetailsTab extends
- BottomTab<GenericSliceDetailsTabConfig> {
+ BottomTab<GenericSliceDetailsTabConfig> {
static readonly kind = 'dev.perfetto.DebugSliceDetailsTab';
data?: {
@@ -109,8 +109,8 @@
}
private async maybeLoadThreadState(
- id: number|undefined, ts: time, dur: duration, table: string|undefined,
- utid?: Utid): Promise<ThreadState|undefined> {
+ id: number|undefined, ts: time, dur: duration, table: string|undefined,
+ utid?: Utid): Promise<ThreadState|undefined> {
if (id === undefined) return undefined;
if (utid === undefined) return undefined;
@@ -128,21 +128,21 @@
private renderThreadStateInfo(): m.Child {
if (this.threadState === undefined) return null;
return m(
- TreeNode,
- {
- left: threadStateRef(this.threadState),
- right: '',
- },
- renderTreeContents({
- 'Thread': getThreadName(this.threadState.thread),
- 'Process': getProcessName(this.threadState.thread?.process),
- 'State': this.threadState.state,
- }));
+ TreeNode,
+ {
+ left: threadStateRef(this.threadState),
+ right: '',
+ },
+ renderTreeContents({
+ 'Thread': getThreadName(this.threadState.thread),
+ 'Process': getProcessName(this.threadState.thread?.process),
+ 'State': this.threadState.state,
+ }));
}
private async maybeLoadSlice(
- id: number|undefined, ts: time, dur: duration, table: string|undefined,
- trackId?: number): Promise<SliceDetails|undefined> {
+ id: number|undefined, ts: time, dur: duration, table: string|undefined,
+ trackId?: number): Promise<SliceDetails|undefined> {
if (id === undefined) return undefined;
if ((table !== 'slice') && trackId === undefined) return undefined;
@@ -159,24 +159,24 @@
private renderSliceInfo(): m.Child {
if (this.slice === undefined) return null;
return m(
- TreeNode,
- {
- left: sliceRef(this.slice, 'Slice'),
- right: '',
- },
- m(TreeNode, {
- left: 'Name',
- right: this.slice.name,
- }),
- m(TreeNode, {
- left: 'Thread',
- right: getThreadName(this.slice.thread),
- }),
- m(TreeNode, {
- left: 'Process',
- right: getProcessName(this.slice.process),
- }),
- hasArgs(this.slice.args) &&
+ TreeNode,
+ {
+ left: sliceRef(this.slice, 'Slice'),
+ right: '',
+ },
+ m(TreeNode, {
+ left: 'Name',
+ right: this.slice.name,
+ }),
+ m(TreeNode, {
+ left: 'Thread',
+ right: getThreadName(this.slice.thread),
+ }),
+ m(TreeNode, {
+ left: 'Process',
+ right: getProcessName(this.slice.process),
+ }),
+ hasArgs(this.slice.args) &&
m(TreeNode,
{
left: 'Args',
@@ -187,7 +187,7 @@
private async loadData() {
const queryResult = await this.engine.query(`select * from ${
- this.config.sqlTableName} where id = ${this.config.id}`);
+ this.config.sqlTableName} where id = ${this.config.id}`);
const row = queryResult.firstRow({
ts: LONG,
dur: LONG,
@@ -208,19 +208,19 @@
}
this.threadState = await this.maybeLoadThreadState(
- sqlValueToNumber(this.data.args['id']),
- this.data.ts,
- this.data.dur,
- sqlValueToString(this.data.args['table_name']),
- sqlValueToUtid(this.data.args['utid']));
+ sqlValueToNumber(this.data.args['id']),
+ this.data.ts,
+ this.data.dur,
+ sqlValueToString(this.data.args['table_name']),
+ sqlValueToUtid(this.data.args['utid']));
this.slice = await this.maybeLoadSlice(
- sqlValueToNumber(this.data.args['id']) ??
+ sqlValueToNumber(this.data.args['id']) ??
sqlValueToNumber(this.data.args['slice_id']),
- this.data.ts,
- this.data.dur,
- sqlValueToString(this.data.args['table_name']),
- sqlValueToNumber(this.data.args['track_id']));
+ this.data.ts,
+ this.data.dur,
+ sqlValueToString(this.data.args['table_name']),
+ sqlValueToNumber(this.data.args['track_id']));
raf.scheduleRedraw();
}
@@ -249,19 +249,19 @@
}
return m(
- DetailsShell,
- {
- title: 'Debug Slice',
- },
+ DetailsShell,
+ {
+ title: 'Debug Slice',
+ },
+ m(
+ GridLayout,
m(
- GridLayout,
- m(
- Section,
- {title: 'Details'},
- m(Tree, details),
- ),
- m(Section, {title: 'Arguments'}, dictToTree(args)),
- ),
+ Section,
+ {title: 'Details'},
+ m(Tree, details),
+ ),
+ m(Section, {title: 'Arguments'}, dictToTree(args)),
+ ),
);
}
diff --git a/ui/src/tracks/debug/slice_track.ts b/ui/src/tracks/debug/slice_track.ts
index 97754d7..4218478 100644
--- a/ui/src/tracks/debug/slice_track.ts
+++ b/ui/src/tracks/debug/slice_track.ts
@@ -51,7 +51,7 @@
}
export class DebugTrackV2 extends
- CustomSqlTableSliceTrack<NamedSliceTrackTypes> {
+ CustomSqlTableSliceTrack<NamedSliceTrackTypes> {
private config: DebugTrackV2Config;
constructor(engine: EngineProxy, ctx: TrackContext) {
@@ -91,7 +91,7 @@
tooltip: 'Close',
showButton: true,
}) :
- [];
+ [];
}
}
@@ -114,12 +114,12 @@
// once or want to tweak the actions once produced. Otherwise, use
// addDebugSliceTrack().
export async function createDebugSliceTrackActions(
- engine: EngineProxy,
- data: SqlDataSource,
- trackName: string,
- sliceColumns: SliceColumns,
- argColumns: string[],
- config?: DebugTrackV2CreateConfig): Promise<DeferredAction<{}>[]> {
+ engine: EngineProxy,
+ data: SqlDataSource,
+ trackName: string,
+ sliceColumns: SliceColumns,
+ argColumns: string[],
+ config?: DebugTrackV2CreateConfig): Promise<DeferredAction<{}>[]> {
// To prepare displaying the provided data as a track, materialize it and
// compute depths.
const debugTrackId = ++debugTrackCount;
@@ -179,13 +179,13 @@
// Adds a debug track immediately. Use createDebugSliceTrackActions() if you
// want to create many tracks at once.
export async function addDebugSliceTrack(
- engine: EngineProxy,
- data: SqlDataSource,
- trackName: string,
- sliceColumns: SliceColumns,
- argColumns: string[],
- config?: DebugTrackV2CreateConfig) {
+ engine: EngineProxy,
+ data: SqlDataSource,
+ trackName: string,
+ sliceColumns: SliceColumns,
+ argColumns: string[],
+ config?: DebugTrackV2CreateConfig) {
const actions = await createDebugSliceTrackActions(
- engine, data, trackName, sliceColumns, argColumns, config);
+ engine, data, trackName, sliceColumns, argColumns, config);
globals.dispatchMultiple(actions);
}
diff --git a/ui/src/tracks/frames/actual_frames_track_v2.ts b/ui/src/tracks/frames/actual_frames_track_v2.ts
index 53b882d..1fdffeb 100644
--- a/ui/src/tracks/frames/actual_frames_track_v2.ts
+++ b/ui/src/tracks/frames/actual_frames_track_v2.ts
@@ -54,7 +54,7 @@
export class ActualFramesTrack extends NamedSliceTrack<ActualFrameTrackTypes> {
constructor(
- engine: EngineProxy, maxDepth: number, trackKey: string,
+ engine: EngineProxy, maxDepth: number, trackKey: string,
private trackIds: number[]) {
super({engine, trackKey});
this.sliceLayout = {
@@ -95,38 +95,38 @@
}
function getColorSchemeForJank(
- jankTag: string|null, jankSeverityType: string|null): ColorScheme {
+ jankTag: string|null, jankSeverityType: string|null): ColorScheme {
if (jankSeverityType === 'Partial') {
switch (jankTag) {
- case 'Self Jank':
- return RED_200;
- case 'Other Jank':
- return YELLOW_100;
- case 'Dropped Frame':
- return BLUE_200;
- case 'Buffer Stuffing':
- case 'SurfaceFlinger Stuffing':
- return LIGHT_GREEN_100;
- case 'No Jank': // should not happen
- return GREEN_200;
- default:
- return PINK_200;
+ case 'Self Jank':
+ return RED_200;
+ case 'Other Jank':
+ return YELLOW_100;
+ case 'Dropped Frame':
+ return BLUE_200;
+ case 'Buffer Stuffing':
+ case 'SurfaceFlinger Stuffing':
+ return LIGHT_GREEN_100;
+ case 'No Jank': // should not happen
+ return GREEN_200;
+ default:
+ return PINK_200;
}
} else {
switch (jankTag) {
- case 'Self Jank':
- return RED_500;
- case 'Other Jank':
- return YELLOW_500;
- case 'Dropped Frame':
- return BLUE_500;
- case 'Buffer Stuffing':
- case 'SurfaceFlinger Stuffing':
- return LIGHT_GREEN_500;
- case 'No Jank':
- return GREEN_500;
- default:
- return PINK_500;
+ case 'Self Jank':
+ return RED_500;
+ case 'Other Jank':
+ return YELLOW_500;
+ case 'Dropped Frame':
+ return BLUE_500;
+ case 'Buffer Stuffing':
+ case 'SurfaceFlinger Stuffing':
+ return LIGHT_GREEN_500;
+ case 'No Jank':
+ return GREEN_500;
+ default:
+ return PINK_500;
}
}
}
diff --git a/ui/src/tracks/frames/expected_frames_track_v2.ts b/ui/src/tracks/frames/expected_frames_track_v2.ts
index cdec547..464ced9 100644
--- a/ui/src/tracks/frames/expected_frames_track_v2.ts
+++ b/ui/src/tracks/frames/expected_frames_track_v2.ts
@@ -22,7 +22,7 @@
export class ExpectedFramesTrack extends NamedSliceTrack {
constructor(
- engine: EngineProxy, maxDepth: number, trackKey: string,
+ engine: EngineProxy, maxDepth: number, trackKey: string,
private trackIds: number[]) {
super({engine, trackKey});
this.sliceLayout = {
diff --git a/ui/src/tracks/frames/index.ts b/ui/src/tracks/frames/index.ts
index 436b53c..25d1fd9 100644
--- a/ui/src/tracks/frames/index.ts
+++ b/ui/src/tracks/frames/index.ts
@@ -94,7 +94,7 @@
}
const displayName = getTrackName(
- {name: trackName, upid, pid, processName, kind: 'ExpectedFrames'});
+ {name: trackName, upid, pid, processName, kind: 'ExpectedFrames'});
ctx.registerTrack({
uri: `perfetto.ExpectedFrames#${upid}`,
@@ -103,10 +103,10 @@
kind: EXPECTED_FRAMES_SLICE_TRACK_KIND,
track: ({trackKey}) => {
return new ExpectedFramesTrack(
- engine,
- maxDepth,
- trackKey,
- trackIds,
+ engine,
+ maxDepth,
+ trackKey,
+ trackIds,
);
},
});
@@ -118,10 +118,10 @@
kind: EXPECTED_FRAMES_SLICE_TRACK_KIND,
track: ({trackKey}) => {
return new ExpectedFramesTrackV2(
- engine,
- maxDepth,
- trackKey,
- trackIds,
+ engine,
+ maxDepth,
+ trackKey,
+ trackIds,
);
},
});
@@ -185,10 +185,10 @@
kind: ACTUAL_FRAMES_SLICE_TRACK_KIND,
track: ({trackKey}) => {
return new ActualFramesTrack(
- engine,
- maxDepth,
- trackKey,
- trackIds,
+ engine,
+ maxDepth,
+ trackKey,
+ trackIds,
);
},
});
@@ -200,10 +200,10 @@
kind: ACTUAL_FRAMES_SLICE_TRACK_KIND,
track: ({trackKey}) => {
return new ActualFramesTrackV2(
- engine,
- maxDepth,
- trackKey,
- trackIds,
+ engine,
+ maxDepth,
+ trackKey,
+ trackIds,
);
},
});
diff --git a/ui/src/tracks/ftrace/index.ts b/ui/src/tracks/ftrace/index.ts
index a469c65..dd1a2b7 100644
--- a/ui/src/tracks/ftrace/index.ts
+++ b/ui/src/tracks/ftrace/index.ts
@@ -90,7 +90,7 @@
};
const it = queryRes.iter(
- {tsQuant: LONG, type: STR, name: STR},
+ {tsQuant: LONG, type: STR, name: STR},
);
for (let row = 0; it.valid(); it.next(), row++) {
result.timestamps[row] = it.tsQuant;
@@ -112,7 +112,7 @@
const dataEndPx = visibleTimeScale.timeToPx(data.end);
checkerboardExcept(
- ctx, this.getHeight(), 0, size.width, dataStartPx, dataEndPx);
+ ctx, this.getHeight(), 0, size.width, dataStartPx, dataEndPx);
const diamondSideLen = RECT_HEIGHT / Math.sqrt(2);
diff --git a/ui/src/tracks/heap_profile/index.ts b/ui/src/tracks/heap_profile/index.ts
index 23ee7f0..684404d 100644
--- a/ui/src/tracks/heap_profile/index.ts
+++ b/ui/src/tracks/heap_profile/index.ts
@@ -67,7 +67,7 @@
id,
ts,
'heap_profile:' || (select group_concat(distinct heap_name) from heap_profile_allocation where upid = ${
- this.upid}) AS type
+ this.upid}) AS type
from heap_profile_allocation
where upid = ${this.upid}
union
@@ -129,11 +129,11 @@
upid,
track: ({trackKey}) => {
return new HeapProfileTrack(
- {
- engine: ctx.engine,
- trackKey,
- },
- upid);
+ {
+ engine: ctx.engine,
+ trackKey,
+ },
+ upid);
},
});
}
diff --git a/ui/src/tracks/perf_samples_profile/index.ts b/ui/src/tracks/perf_samples_profile/index.ts
index f76acd5..05ed875 100644
--- a/ui/src/tracks/perf_samples_profile/index.ts
+++ b/ui/src/tracks/perf_samples_profile/index.ts
@@ -119,17 +119,17 @@
selection.leftTs <= centerX && selection.rightTs >= centerX;
const strokeWidth = isSelected ? 3 : 0;
this.drawMarker(
- ctx,
- visibleTimeScale.timeToPx(centerX),
- this.centerY,
- isHovered,
- strokeWidth);
+ ctx,
+ visibleTimeScale.timeToPx(centerX),
+ this.centerY,
+ isHovered,
+ strokeWidth);
}
}
drawMarker(
- ctx: CanvasRenderingContext2D, x: number, y: number, isHovered: boolean,
- strokeWidth: number): void {
+ ctx: CanvasRenderingContext2D, x: number, y: number, isHovered: boolean,
+ strokeWidth: number): void {
ctx.beginPath();
ctx.moveTo(x, y - this.markerWidth);
ctx.lineTo(x - this.markerWidth, y);
@@ -189,8 +189,8 @@
// If the markers overlap the rightmost one will be selected.
findTimestampIndex(
- left: number, timeScale: TimeScale, data: Data, x: number, y: number,
- right: number): number {
+ left: number, timeScale: TimeScale, data: Data, x: number, y: number,
+ right: number): number {
let index = -1;
if (left !== -1) {
const start = Time.fromRaw(data.tsStarts[left]);
diff --git a/ui/src/tracks/process_summary/index.ts b/ui/src/tracks/process_summary/index.ts
index a0f0d80..766ce75 100644
--- a/ui/src/tracks/process_summary/index.ts
+++ b/ui/src/tracks/process_summary/index.ts
@@ -310,7 +310,7 @@
getUuidUnchecked(utid: number, upid: number|null) {
return upid === null ? this.utidToUuid.get(utid) :
- this.upidToUuid.get(upid);
+ this.upidToUuid.get(upid);
}
}
diff --git a/ui/src/tracks/process_summary/process_scheduling_track.ts b/ui/src/tracks/process_summary/process_scheduling_track.ts
index 5ca52c3..3d41d8d 100644
--- a/ui/src/tracks/process_summary/process_scheduling_track.ts
+++ b/ui/src/tracks/process_summary/process_scheduling_track.ts
@@ -178,10 +178,10 @@
Promise<QueryResult> {
const isCached = this.cachedBucketSize <= bucketSize;
const tsq = isCached ?
- `cached_tsq / ${bucketSize} * ${bucketSize}` :
- `(ts + ${bucketSize / 2n}) / ${bucketSize} * ${bucketSize}`;
+ `cached_tsq / ${bucketSize} * ${bucketSize}` :
+ `(ts + ${bucketSize / 2n}) / ${bucketSize} * ${bucketSize}`;
const queryTable = isCached ? this.tableName('process_sched_cached') :
- this.tableName('process_sched');
+ this.tableName('process_sched');
const constraintColumn = isCached ? 'cached_tsq' : 'ts';
// The mouse move handler depends on slices being sorted by cpu then tsq
@@ -229,12 +229,12 @@
// If the cached trace slices don't fully cover the visible time range,
// show a gray rectangle with a "Loading..." label.
checkerboardExcept(
- ctx,
- this.getHeight(),
- 0,
- size.width,
- visibleTimeScale.timeToPx(data.start),
- visibleTimeScale.timeToPx(data.end));
+ ctx,
+ this.getHeight(),
+ 0,
+ size.width,
+ visibleTimeScale.timeToPx(data.start),
+ visibleTimeScale.timeToPx(data.end));
assertTrue(data.starts.length === data.ends.length);
assertTrue(data.starts.length === data.utids.length);
diff --git a/ui/src/tracks/process_summary/process_summary_track.ts b/ui/src/tracks/process_summary/process_summary_track.ts
index e5e4f5e..604dd03 100644
--- a/ui/src/tracks/process_summary/process_summary_track.ts
+++ b/ui/src/tracks/process_summary/process_summary_track.ts
@@ -67,13 +67,13 @@
async onCreate(): Promise<void> {
await this.engine.query(
- `create virtual table ${this.tableName('window')} using window;`);
+ `create virtual table ${this.tableName('window')} using window;`);
let utids = [this.config.utid];
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
if (this.config.upid) {
const threadQuery = await this.engine.query(
- `select utid from thread where upid=${this.config.upid}`);
+ `select utid from thread where upid=${this.config.upid}`);
utids = [];
for (const it = threadQuery.iter({utid: NUM}); it.valid(); it.next()) {
utids.push(it.utid);
@@ -81,7 +81,7 @@
}
const trackQuery = await this.engine.query(
- `select id from thread_track where utid in (${utids.join(',')})`);
+ `select id from thread_track where utid in (${utids.join(',')})`);
const tracks = [];
for (const it = trackQuery.iter({id: NUM}); it.valid(); it.next()) {
tracks.push(it.id);
@@ -89,7 +89,7 @@
const processSliceView = this.tableName('process_slice_view');
await this.engine.query(
- `create view ${processSliceView} as ` +
+ `create view ${processSliceView} as ` +
// 0 as cpu is a dummy column to perform span join on.
`select ts, dur/${utids.length} as dur ` +
`from slice s ` +
@@ -124,8 +124,8 @@
}
private async computeSummary(
- start: time, end: time, resolution: duration,
- bucketSize: duration): Promise<Data> {
+ start: time, end: time, resolution: duration,
+ bucketSize: duration): Promise<Data> {
const duration = end - start;
const numBuckets = Math.min(Number(duration / bucketSize), LIMIT);
@@ -161,8 +161,8 @@
async onDestroy(): Promise<void> {
if (this.engine.isAlive) {
await this.engine.query(`drop table if exists ${
- this.tableName(
- 'window')}; drop table if exists ${this.tableName('span')}`);
+ this.tableName(
+ 'window')}; drop table if exists ${this.tableName('span')}`);
}
this.fetcher.dispose();
}
@@ -179,12 +179,12 @@
if (data === undefined) return; // Can't possibly draw anything.
checkerboardExcept(
- ctx,
- this.getHeight(),
- 0,
- size.width,
- visibleTimeScale.timeToPx(data.start),
- visibleTimeScale.timeToPx(data.end));
+ ctx,
+ this.getHeight(),
+ 0,
+ size.width,
+ visibleTimeScale.timeToPx(data.start),
+ visibleTimeScale.timeToPx(data.end));
this.renderSummary(ctx, data);
}
diff --git a/ui/src/tracks/sched/active_cpu_count.ts b/ui/src/tracks/sched/active_cpu_count.ts
index 6dc2103..d7c9dda 100644
--- a/ui/src/tracks/sched/active_cpu_count.ts
+++ b/ui/src/tracks/sched/active_cpu_count.ts
@@ -83,15 +83,15 @@
async onInit() {
await this.engine.query(
- `INCLUDE PERFETTO MODULE sched.thread_level_parallelism`);
+ `INCLUDE PERFETTO MODULE sched.thread_level_parallelism`);
return new NullDisposable();
}
getSqlSource() {
const sourceTable = this.config!.cpuType === undefined ?
- 'sched_active_cpu_count' :
- `sched_active_cpu_count_for_core_type(${
- sqliteString(this.config!.cpuType)})`;
+ 'sched_active_cpu_count' :
+ `sched_active_cpu_count_for_core_type(${
+ sqliteString(this.config!.cpuType)})`;
return `
select
ts,
diff --git a/ui/src/tracks/sched/index.ts b/ui/src/tracks/sched/index.ts
index d9d5ed2..751de59 100644
--- a/ui/src/tracks/sched/index.ts
+++ b/ui/src/tracks/sched/index.ts
@@ -33,7 +33,7 @@
ctx.registerTrack({
uri: RunnableThreadCountTrack.kind,
track: (trackCtx) => new RunnableThreadCountTrack(
- {engine: ctx.engine, trackKey: trackCtx.trackKey}),
+ {engine: ctx.engine, trackKey: trackCtx.trackKey}),
});
ctx.registerTrack({
uri: ActiveCPUCountTrack.kind,
diff --git a/ui/src/tracks/sched/runnable_thread_count.ts b/ui/src/tracks/sched/runnable_thread_count.ts
index 2a05d4e..5c51528 100644
--- a/ui/src/tracks/sched/runnable_thread_count.ts
+++ b/ui/src/tracks/sched/runnable_thread_count.ts
@@ -63,7 +63,7 @@
async onInit() {
await this.engine.query(
- `INCLUDE PERFETTO MODULE sched.thread_level_parallelism`);
+ `INCLUDE PERFETTO MODULE sched.thread_level_parallelism`);
return new NullDisposable();
}
diff --git a/ui/src/tracks/screenshots/index.ts b/ui/src/tracks/screenshots/index.ts
index d35fbe5..254dadb 100644
--- a/ui/src/tracks/screenshots/index.ts
+++ b/ui/src/tracks/screenshots/index.ts
@@ -89,7 +89,7 @@
await ctx.engine.query(`INCLUDE PERFETTO MODULE android.screenshots`);
const res = await ctx.engine.query(
- 'select count() as count from android_screenshots');
+ 'select count() as count from android_screenshots');
const {count} = res.firstRow({count: NUM});
if (count > 0) {
diff --git a/ui/src/tracks/screenshots/screenshot_panel.ts b/ui/src/tracks/screenshots/screenshot_panel.ts
index 28d0889..29328f9 100644
--- a/ui/src/tracks/screenshots/screenshot_panel.ts
+++ b/ui/src/tracks/screenshots/screenshot_panel.ts
@@ -29,7 +29,7 @@
import {EngineProxy} from '../../trace_processor/engine';
async function getSliceDetails(
- engine: EngineProxy, id: number): Promise<SliceDetails|undefined> {
+ engine: EngineProxy, id: number): Promise<SliceDetails|undefined> {
return getSlice(engine, asSliceSqlId(id));
}
@@ -46,7 +46,7 @@
constructor(args: NewBottomTabArgs<GenericSliceDetailsTabConfig>) {
super(args);
getSliceDetails(this.engine, this.config.id)
- .then((sliceDetails) => this.sliceDetails = sliceDetails);
+ .then((sliceDetails) => this.sliceDetails = sliceDetails);
}
renderTabCanvas() {}
@@ -62,9 +62,9 @@
}
assertTrue(this.sliceDetails.args[0].key == 'screenshot.jpg_image');
return m('.screenshot-panel', m('img', {
- src: 'data:image/png;base64, ' +
+ src: 'data:image/png;base64, ' +
this.sliceDetails.args[0].displayValue,
- }));
+ }));
}
}
diff --git a/ui/src/tracks/thread_state/index.ts b/ui/src/tracks/thread_state/index.ts
index e0a09ff..62ef1fe 100644
--- a/ui/src/tracks/thread_state/index.ts
+++ b/ui/src/tracks/thread_state/index.ts
@@ -151,7 +151,7 @@
{shortState: string | undefined; ioWait: boolean | undefined},
number>();
function internState(
- shortState: string|undefined, ioWait: boolean|undefined) {
+ shortState: string|undefined, ioWait: boolean|undefined) {
let idx = stringIndexes.get({shortState, ioWait});
if (idx !== undefined) return idx;
idx = data.strings.length;
@@ -197,7 +197,7 @@
async onDestroy() {
if (this.engine.isAlive) {
await this.engine.query(
- `drop view if exists ${this.tableName('thread_state')}`);
+ `drop view if exists ${this.tableName('thread_state')}`);
}
this.fetcher.dispose();
}
@@ -221,12 +221,12 @@
let drawRectOnSelected = () => {};
checkerboardExcept(
- ctx,
- this.getHeight(),
- 0,
- size.width,
- timeScale.timeToPx(data.start),
- timeScale.timeToPx(data.end),
+ ctx,
+ this.getHeight(),
+ 0,
+ size.width,
+ timeScale.timeToPx(data.start),
+ timeScale.timeToPx(data.end),
);
ctx.textAlign = 'center';
@@ -280,10 +280,10 @@
ctx.beginPath();
ctx.lineWidth = 3;
ctx.strokeRect(
- rectStart,
- MARGIN_TOP - 1.5,
- rectEnd - rectStart,
- RECT_HEIGHT + 3);
+ rectStart,
+ MARGIN_TOP - 1.5,
+ rectEnd - rectStart,
+ RECT_HEIGHT + 3);
ctx.closePath();
};
}
@@ -300,7 +300,7 @@
if (index === -1) return false;
const id = data.ids[index];
globals.makeSelection(
- Actions.selectThreadState({id, trackKey: this.trackKey}));
+ Actions.selectThreadState({id, trackKey: this.trackKey}));
return true;
}
}
@@ -357,11 +357,11 @@
utid,
track: ({trackKey}) => {
return new ThreadStateTrackV2(
- {
- engine: ctx.engine,
- trackKey,
- },
- utid);
+ {
+ engine: ctx.engine,
+ trackKey,
+ },
+ utid);
},
});
}
diff --git a/ui/src/tracks/visualised_args/index.ts b/ui/src/tracks/visualised_args/index.ts
index 98aed0f..a1cf645 100644
--- a/ui/src/tracks/visualised_args/index.ts
+++ b/ui/src/tracks/visualised_args/index.ts
@@ -42,7 +42,7 @@
private helperViewName: string;
constructor(
- engine: EngineProxy, maxDepth: number, trackKey: string, trackId: number,
+ engine: EngineProxy, maxDepth: number, trackKey: string, trackId: number,
private argName: string) {
const uuid = uuidv4();
const namespace = `__arg_visualisation_helper_${argName}_${uuid}`;
@@ -121,11 +121,11 @@
// worse than the situation we had before with track config.
const params = trackCtx.params as VisualisedArgsState;
return new VisualisedArgsTrack(
- ctx.engine,
- params.maxDepth,
- trackCtx.trackKey,
- params.trackId,
- params.argName,
+ ctx.engine,
+ params.maxDepth,
+ trackCtx.trackKey,
+ params.trackId,
+ params.argName,
);
},
});
diff --git a/ui/src/widgets/anchor.ts b/ui/src/widgets/anchor.ts
index 72e8217..419601f 100644
--- a/ui/src/widgets/anchor.ts
+++ b/ui/src/widgets/anchor.ts
@@ -26,10 +26,10 @@
const {icon, ...htmlAttrs} = attrs;
return m(
- 'a.pf-anchor',
- htmlAttrs,
- icon && m('i.material-icons', icon),
- children,
+ 'a.pf-anchor',
+ htmlAttrs,
+ icon && m('i.material-icons', icon),
+ children,
);
}
}
diff --git a/ui/src/widgets/basic_table.ts b/ui/src/widgets/basic_table.ts
index 3ae40d4..15c9e1b 100644
--- a/ui/src/widgets/basic_table.ts
+++ b/ui/src/widgets/basic_table.ts
@@ -28,10 +28,10 @@
export class BasicTable implements m.ClassComponent<TableAttrs<any>> {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
renderColumnHeader(
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- _vnode: m.Vnode<TableAttrs<any>>,
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- column: ColumnDescriptor<any>): m.Children {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ _vnode: m.Vnode<TableAttrs<any>>,
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ column: ColumnDescriptor<any>): m.Children {
return m('td', column.title);
}
@@ -40,22 +40,22 @@
const attrs = vnode.attrs;
return m(
- 'table.generic-table',
- {
- // TODO(altimin, stevegolton): this should be the default for
- // generic-table, but currently it is overriden by
- // .pf-details-shell .pf-content table, so specify this here for now.
- style: {
- 'table-layout': 'auto',
- },
+ 'table.generic-table',
+ {
+ // TODO(altimin, stevegolton): this should be the default for
+ // generic-table, but currently it is overriden by
+ // .pf-details-shell .pf-content table, so specify this here for now.
+ style: {
+ 'table-layout': 'auto',
},
- m('thead',
- m('tr.header',
- attrs.columns.map(
- (column) => this.renderColumnHeader(vnode, column)))),
- attrs.data.map(
- (row) =>
- m('tr',
- attrs.columns.map((column) => m('td', column.render(row))))));
+ },
+ m('thead',
+ m('tr.header',
+ attrs.columns.map(
+ (column) => this.renderColumnHeader(vnode, column)))),
+ attrs.data.map(
+ (row) =>
+ m('tr',
+ attrs.columns.map((column) => m('td', column.render(row))))));
}
}
diff --git a/ui/src/widgets/button.ts b/ui/src/widgets/button.ts
index c46f403..3d4d230 100644
--- a/ui/src/widgets/button.ts
+++ b/ui/src/widgets/button.ts
@@ -72,23 +72,23 @@
const label = 'label' in attrs ? attrs.label : undefined;
const classes = classNames(
- active && 'pf-active',
- compact && 'pf-compact',
- minimal && 'pf-minimal',
- (icon && !label) && 'pf-icon-only',
- dismissPopup && Popup.DISMISS_POPUP_GROUP_CLASS,
- className,
+ active && 'pf-active',
+ compact && 'pf-compact',
+ minimal && 'pf-minimal',
+ (icon && !label) && 'pf-icon-only',
+ dismissPopup && Popup.DISMISS_POPUP_GROUP_CLASS,
+ className,
);
return m(
- 'button.pf-button',
- {
- ...htmlAttrs,
- className: classes,
- },
- icon && m(Icon, {className: 'pf-left-icon', icon}),
- rightIcon && m(Icon, {className: 'pf-right-icon', icon: rightIcon}),
- label || '\u200B', // Zero width space keeps button in-flow
+ 'button.pf-button',
+ {
+ ...htmlAttrs,
+ className: classes,
+ },
+ icon && m(Icon, {className: 'pf-left-icon', icon}),
+ rightIcon && m(Icon, {className: 'pf-right-icon', icon: rightIcon}),
+ label || '\u200B', // Zero width space keeps button in-flow
);
}
}
diff --git a/ui/src/widgets/callout.ts b/ui/src/widgets/callout.ts
index 637a289..7b2ae97 100644
--- a/ui/src/widgets/callout.ts
+++ b/ui/src/widgets/callout.ts
@@ -27,10 +27,10 @@
const {icon, ...htmlAttrs} = attrs;
return m(
- '.pf-callout',
- htmlAttrs,
- icon && m(Icon, {className: 'pf-left-icon', icon}),
- children,
+ '.pf-callout',
+ htmlAttrs,
+ icon && m(Icon, {className: 'pf-left-icon', icon}),
+ children,
);
}
}
diff --git a/ui/src/widgets/checkbox.ts b/ui/src/widgets/checkbox.ts
index 023df79..ff80c69 100644
--- a/ui/src/widgets/checkbox.ts
+++ b/ui/src/widgets/checkbox.ts
@@ -27,21 +27,21 @@
view({attrs}: m.CVnode<CheckboxAttrs>) {
const {label, disabled, checked, className, ...htmlAttrs} = attrs;
const classes = classNames(
- disabled && 'pf-disabled',
- className,
+ disabled && 'pf-disabled',
+ className,
);
// The default checkbox is removed and an entirely new one created inside
// the span element in CSS.
return m(
- 'label.pf-checkbox',
- {
- ...htmlAttrs,
- className: classes,
- },
- m('input[type=checkbox]', {disabled, checked}),
- m('span'),
- label,
+ 'label.pf-checkbox',
+ {
+ ...htmlAttrs,
+ className: classes,
+ },
+ m('input[type=checkbox]', {disabled, checked}),
+ m('span'),
+ label,
);
}
}
diff --git a/ui/src/widgets/details_shell.ts b/ui/src/widgets/details_shell.ts
index 90ba707..105ad88 100644
--- a/ui/src/widgets/details_shell.ts
+++ b/ui/src/widgets/details_shell.ts
@@ -36,18 +36,18 @@
} = attrs;
return m(
- 'section.pf-details-shell',
- {class: classNames(fillParent && 'pf-fill-parent')},
- m(
- 'header.pf-header-bar',
- m('h1.pf-header-title', title),
- m('span.pf-header-description', description),
- m('nav.pf-header-buttons', buttons),
- ),
- m(
- 'article.pf-content',
- children,
- ),
+ 'section.pf-details-shell',
+ {class: classNames(fillParent && 'pf-fill-parent')},
+ m(
+ 'header.pf-header-bar',
+ m('h1.pf-header-title', title),
+ m('span.pf-header-description', description),
+ m('nav.pf-header-buttons', buttons),
+ ),
+ m(
+ 'article.pf-content',
+ children,
+ ),
);
}
}
diff --git a/ui/src/widgets/editor.ts b/ui/src/widgets/editor.ts
index 5b26daa..8377644 100644
--- a/ui/src/widgets/editor.ts
+++ b/ui/src/widgets/editor.ts
@@ -94,7 +94,7 @@
if (editorView && this.generation !== generation) {
const state = editorView.state;
editorView.dispatch(state.update(
- {changes: {from: 0, to: state.doc.length, insert: initialText}}));
+ {changes: {from: 0, to: state.doc.length, insert: initialText}}));
this.generation = generation;
}
}
diff --git a/ui/src/widgets/empty_state.ts b/ui/src/widgets/empty_state.ts
index 57cd746..ce64242 100644
--- a/ui/src/widgets/empty_state.ts
+++ b/ui/src/widgets/empty_state.ts
@@ -37,15 +37,15 @@
className,
} = attrs;
return m(
- '.pf-empty-state',
- {className},
- m('i.material-icons', icon),
- m(
- '.pf-empty-state-header',
- header && m('.pf-empty-state-title', header),
- detail && m('.pf-empty-state-detail', detail),
- ),
- m('div.pf-empty-state-content', children),
+ '.pf-empty-state',
+ {className},
+ m('i.material-icons', icon),
+ m(
+ '.pf-empty-state-header',
+ header && m('.pf-empty-state-title', header),
+ detail && m('.pf-empty-state-detail', detail),
+ ),
+ m('div.pf-empty-state-content', children),
);
}
}
diff --git a/ui/src/widgets/form.ts b/ui/src/widgets/form.ts
index c3ee8de..0fe82ff 100644
--- a/ui/src/widgets/form.ts
+++ b/ui/src/widgets/form.ts
@@ -63,35 +63,35 @@
} = attrs;
return m(
- 'form.pf-form',
- htmlAttrs,
- children,
- m(
- '.pf-form-button-bar',
- m(Button, {
- type: 'submit',
- label: submitLabel,
- rightIcon: submitIcon,
- className: Popup.DISMISS_POPUP_GROUP_CLASS,
- onclick: (e: Event) => {
- preventDefault && e.preventDefault();
- onSubmit();
- },
- }),
- // This cancel button just closes the popup if we are inside one.
- cancelLabel && m(Button, {
- type: 'button',
- label: cancelLabel,
- className: Popup.DISMISS_POPUP_GROUP_CLASS,
- minimal: true,
- }),
- // This reset button just clears the form.
- resetLabel && m(Button, {
- label: resetLabel,
- minimal: true,
- type: 'reset',
- }),
- ),
+ 'form.pf-form',
+ htmlAttrs,
+ children,
+ m(
+ '.pf-form-button-bar',
+ m(Button, {
+ type: 'submit',
+ label: submitLabel,
+ rightIcon: submitIcon,
+ className: Popup.DISMISS_POPUP_GROUP_CLASS,
+ onclick: (e: Event) => {
+ preventDefault && e.preventDefault();
+ onSubmit();
+ },
+ }),
+ // This cancel button just closes the popup if we are inside one.
+ cancelLabel && m(Button, {
+ type: 'button',
+ label: cancelLabel,
+ className: Popup.DISMISS_POPUP_GROUP_CLASS,
+ minimal: true,
+ }),
+ // This reset button just clears the form.
+ resetLabel && m(Button, {
+ label: resetLabel,
+ minimal: true,
+ type: 'reset',
+ }),
+ ),
);
}
}
diff --git a/ui/src/widgets/hotkey_glyphs.ts b/ui/src/widgets/hotkey_glyphs.ts
index 17573d8..116314f 100644
--- a/ui/src/widgets/hotkey_glyphs.ts
+++ b/ui/src/widgets/hotkey_glyphs.ts
@@ -44,12 +44,12 @@
const hasShift = modifier.includes('Shift');
return m(
- 'span.pf-hotkey',
- hasMod && m('span.pf-keycap', glyphForMod(platform)),
- hasCtrl && m('span.pf-keycap', glyphForCtrl(platform)),
- hasAlt && m('span.pf-keycap', glyphForAlt(platform)),
- hasShift && m('span.pf-keycap', glyphForShift()),
- m('span.pf-keycap', glyphForKey(key, platform)));
+ 'span.pf-hotkey',
+ hasMod && m('span.pf-keycap', glyphForMod(platform)),
+ hasCtrl && m('span.pf-keycap', glyphForCtrl(platform)),
+ hasAlt && m('span.pf-keycap', glyphForAlt(platform)),
+ hasShift && m('span.pf-keycap', glyphForShift()),
+ m('span.pf-keycap', glyphForKey(key, platform)));
} else {
return m('span.pf-keycap', '???');
}
diff --git a/ui/src/widgets/icon.ts b/ui/src/widgets/icon.ts
index 6a4bdb5..dba6fb7 100644
--- a/ui/src/widgets/icon.ts
+++ b/ui/src/widgets/icon.ts
@@ -28,8 +28,8 @@
view({attrs}: m.Vnode<IconAttrs>): m.Child {
const {icon, filled, ...htmlAttrs} = attrs;
return m(
- filled ? 'i.material-icons-filled' : 'i.material-icons',
- htmlAttrs,
- icon);
+ filled ? 'i.material-icons-filled' : 'i.material-icons',
+ htmlAttrs,
+ icon);
}
}
diff --git a/ui/src/widgets/menu.ts b/ui/src/widgets/menu.ts
index 275f07c..a194758 100644
--- a/ui/src/widgets/menu.ts
+++ b/ui/src/widgets/menu.ts
@@ -60,19 +60,19 @@
attrs;
return m(
- PopupMenu2,
- {
- popupPosition: PopupPosition.RightStart,
- trigger: m(MenuItem, {
- rightIcon: rightIcon,
- closePopupOnClick,
- ...rest,
- }),
- showArrow: false,
- createNewGroup: false,
- edgeOffset: 5, // Adjust for popup padding & border.
- },
- children,
+ PopupMenu2,
+ {
+ popupPosition: PopupPosition.RightStart,
+ trigger: m(MenuItem, {
+ rightIcon: rightIcon,
+ closePopupOnClick,
+ ...rest,
+ }),
+ showArrow: false,
+ createNewGroup: false,
+ edgeOffset: 5, // Adjust for popup padding & border.
+ },
+ children,
);
}
@@ -89,20 +89,20 @@
} = attrs;
const classes = classNames(
- active && 'pf-active',
- !disabled && closePopupOnClick && Popup.DISMISS_POPUP_GROUP_CLASS,
- className,
+ active && 'pf-active',
+ !disabled && closePopupOnClick && Popup.DISMISS_POPUP_GROUP_CLASS,
+ className,
);
return m(
- 'button.pf-menu-item' + (disabled ? '[disabled]' : ''),
- {
- ...htmlAttrs,
- className: classes,
- },
- icon && m(Icon, {className: 'pf-left-icon', icon}),
- rightIcon && m(Icon, {className: 'pf-right-icon', icon: rightIcon}),
- label,
+ 'button.pf-menu-item' + (disabled ? '[disabled]' : ''),
+ {
+ ...htmlAttrs,
+ className: classes,
+ },
+ icon && m(Icon, {className: 'pf-left-icon', icon}),
+ rightIcon && m(Icon, {className: 'pf-right-icon', icon: rightIcon}),
+ label,
);
}
};
@@ -159,13 +159,13 @@
attrs;
return m(
- Popup,
- {
- trigger,
- position: popupPosition,
- className: 'pf-popup-menu',
- ...popupAttrs,
- },
- m(Menu, children));
+ Popup,
+ {
+ trigger,
+ position: popupPosition,
+ className: 'pf-popup-menu',
+ ...popupAttrs,
+ },
+ m(Menu, children));
}
};
diff --git a/ui/src/widgets/modal.ts b/ui/src/widgets/modal.ts
index b5c0166..3f2ba87 100644
--- a/ui/src/widgets/modal.ts
+++ b/ui/src/widgets/modal.ts
@@ -124,42 +124,42 @@
const buttons: m.Children = [];
for (const button of attrs.buttons || []) {
buttons.push(
- m('button.modal-btn',
- {
- class: button.primary ? 'modal-btn-primary' : '',
- id: button.id,
- onclick: () => {
- closeModal(attrs.key);
- if (button.action !== undefined) button.action();
- },
+ m('button.modal-btn',
+ {
+ class: button.primary ? 'modal-btn-primary' : '',
+ id: button.id,
+ onclick: () => {
+ closeModal(attrs.key);
+ if (button.action !== undefined) button.action();
},
- button.text));
+ },
+ button.text));
}
const aria = '[aria-labelledby=mm-title][aria-model][role=dialog]';
const align = attrs.vAlign === 'TOP' ? '.modal-dialog-valign-top' : '';
return m(
- '.modal-backdrop',
- {
- onclick: this.onBackdropClick.bind(this, attrs),
- onkeyup: this.onBackdropKeyupdown.bind(this, attrs),
- onkeydown: this.onBackdropKeyupdown.bind(this, attrs),
- tabIndex: 0,
- },
+ '.modal-backdrop',
+ {
+ onclick: this.onBackdropClick.bind(this, attrs),
+ onkeyup: this.onBackdropKeyupdown.bind(this, attrs),
+ onkeydown: this.onBackdropKeyupdown.bind(this, attrs),
+ tabIndex: 0,
+ },
+ m(
+ `.modal-dialog${align}${aria}`,
m(
- `.modal-dialog${align}${aria}`,
- m(
- 'header',
- m('h2', {id: 'mm-title'}, attrs.title),
- m(
- 'button[aria-label=Close Modal]',
- {onclick: () => closeModal(attrs.key)},
- m.trust('✕'),
- ),
- ),
- m('main', vnode.children),
- buttons.length > 0 ? m('footer', buttons) : null,
- ));
+ 'header',
+ m('h2', {id: 'mm-title'}, attrs.title),
+ m(
+ 'button[aria-label=Close Modal]',
+ {onclick: () => closeModal(attrs.key)},
+ m.trust('✕'),
+ ),
+ ),
+ m('main', vnode.children),
+ buttons.length > 0 ? m('footer', buttons) : null,
+ ));
}
onBackdropClick(attrs: ModalAttrs, e: MouseEvent) {
diff --git a/ui/src/widgets/multiselect.ts b/ui/src/widgets/multiselect.ts
index 3cbc409..bb2e782 100644
--- a/ui/src/widgets/multiselect.ts
+++ b/ui/src/widgets/multiselect.ts
@@ -74,10 +74,10 @@
});
return m(
- fixedSize ? '.pf-multiselect-panel.pf-multi-select-fixed-size' :
- '.pf-multiselect-panel',
- this.renderSearchBox(),
- this.renderListOfItems(attrs, filteredItems),
+ fixedSize ? '.pf-multiselect-panel.pf-multi-select-fixed-size' :
+ '.pf-multiselect-panel',
+ this.renderSearchBox(),
+ this.renderListOfItems(attrs, filteredItems),
);
}
@@ -95,88 +95,88 @@
});
} else {
return [m(
- '.pf-list',
- repeatCheckedItemsAtTop && anyChecked &&
+ '.pf-list',
+ repeatCheckedItemsAtTop && anyChecked &&
m(
- '.pf-multiselect-container',
- m(
- '.pf-multiselect-header',
- m('span',
- this.searchText === '' ? 'Selected' :
- `Selected (Filtered)`),
- m(Button, {
- label: this.searchText === '' ? 'Clear All' :
- 'Clear Filtered',
- icon: Icons.Deselect,
- minimal: true,
- onclick: () => {
- const diffs =
- options.filter(({checked}) => checked)
- .map(({id}) => ({id, checked: false}));
- onChange(diffs);
- scheduleFullRedraw();
- },
- disabled: !anyChecked,
- }),
- ),
- this.renderOptions(
- attrs, options.filter(({checked}) => checked)),
- ),
- m(
- '.pf-multiselect-container',
- m(
+ '.pf-multiselect-container',
+ m(
'.pf-multiselect-header',
m('span',
- this.searchText === '' ? 'Options' : `Options (Filtered)`),
- m(Button, {
- label: this.searchText === '' ? 'Select All' :
- 'Select Filtered',
- icon: Icons.SelectAll,
- minimal: true,
- compact: true,
- onclick: () => {
- const diffs = options.filter(({checked}) => !checked)
- .map(({id}) => ({id, checked: true}));
- onChange(diffs);
- scheduleFullRedraw();
- },
- disabled: allChecked,
- }),
+ this.searchText === '' ? 'Selected' :
+ `Selected (Filtered)`),
m(Button, {
label: this.searchText === '' ? 'Clear All' :
- 'Clear Filtered',
+ 'Clear Filtered',
icon: Icons.Deselect,
minimal: true,
- compact: true,
onclick: () => {
- const diffs = options.filter(({checked}) => checked)
- .map(({id}) => ({id, checked: false}));
+ const diffs =
+ options.filter(({checked}) => checked)
+ .map(({id}) => ({id, checked: false}));
onChange(diffs);
scheduleFullRedraw();
},
disabled: !anyChecked,
}),
- ),
- this.renderOptions(attrs, options),
+ ),
+ this.renderOptions(
+ attrs, options.filter(({checked}) => checked)),
),
- )];
+ m(
+ '.pf-multiselect-container',
+ m(
+ '.pf-multiselect-header',
+ m('span',
+ this.searchText === '' ? 'Options' : `Options (Filtered)`),
+ m(Button, {
+ label: this.searchText === '' ? 'Select All' :
+ 'Select Filtered',
+ icon: Icons.SelectAll,
+ minimal: true,
+ compact: true,
+ onclick: () => {
+ const diffs = options.filter(({checked}) => !checked)
+ .map(({id}) => ({id, checked: true}));
+ onChange(diffs);
+ scheduleFullRedraw();
+ },
+ disabled: allChecked,
+ }),
+ m(Button, {
+ label: this.searchText === '' ? 'Clear All' :
+ 'Clear Filtered',
+ icon: Icons.Deselect,
+ minimal: true,
+ compact: true,
+ onclick: () => {
+ const diffs = options.filter(({checked}) => checked)
+ .map(({id}) => ({id, checked: false}));
+ onChange(diffs);
+ scheduleFullRedraw();
+ },
+ disabled: !anyChecked,
+ }),
+ ),
+ this.renderOptions(attrs, options),
+ ),
+ )];
}
}
private renderSearchBox() {
return m(
- '.pf-search-bar',
- m(TextInput, {
- oninput: (event: Event) => {
- const eventTarget = event.target as HTMLTextAreaElement;
- this.searchText = eventTarget.value;
- scheduleFullRedraw();
- },
- value: this.searchText,
- placeholder: 'Filter options...',
- className: 'pf-search-box',
- }),
- this.renderClearButton(),
+ '.pf-search-bar',
+ m(TextInput, {
+ oninput: (event: Event) => {
+ const eventTarget = event.target as HTMLTextAreaElement;
+ this.searchText = eventTarget.value;
+ scheduleFullRedraw();
+ },
+ value: this.searchText,
+ placeholder: 'Filter options...',
+ className: 'pf-search-box',
+ }),
+ this.renderClearButton(),
);
}
@@ -230,13 +230,13 @@
} = attrs;
return m(
- Popup,
- {
- trigger:
+ Popup,
+ {
+ trigger:
m(Button, {label: this.labelText(attrs), icon, minimal, compact}),
- position: popupPosition,
- },
- m(MultiSelect, attrs as MultiSelectAttrs),
+ position: popupPosition,
+ },
+ m(MultiSelect, attrs as MultiSelectAttrs),
);
}
diff --git a/ui/src/widgets/popup.ts b/ui/src/widgets/popup.ts
index 1de3474..dbfeef4 100644
--- a/ui/src/widgets/popup.ts
+++ b/ui/src/widgets/popup.ts
@@ -202,16 +202,16 @@
};
return m(
- Portal,
- portalAttrs,
- m('.pf-popup',
- {
- class: classNames(
- className, createNewGroup && Popup.POPUP_GROUP_CLASS),
- ref: Popup.POPUP_REF,
- },
- showArrow && m('.pf-popup-arrow[data-popper-arrow]'),
- m('.pf-popup-content', children)),
+ Portal,
+ portalAttrs,
+ m('.pf-popup',
+ {
+ class: classNames(
+ className, createNewGroup && Popup.POPUP_GROUP_CLASS),
+ ref: Popup.POPUP_REF,
+ },
+ showArrow && m('.pf-popup-arrow[data-popper-arrow]'),
+ m('.pf-popup-content', children)),
);
}
@@ -289,7 +289,7 @@
} else {
if (this.popupElement && this.triggerElement) {
this.popper = createPopper<ExtendedModifiers>(
- this.triggerElement, this.popupElement, options);
+ this.triggerElement, this.popupElement, options);
}
}
}
diff --git a/ui/src/widgets/section.ts b/ui/src/widgets/section.ts
index d592215..67e4b61 100644
--- a/ui/src/widgets/section.ts
+++ b/ui/src/widgets/section.ts
@@ -25,13 +25,13 @@
view({attrs, children}: m.CVnode<SectionAttrs>) {
const {title, ...htmlAttrs} = attrs;
return m(
- 'section.pf-section',
- htmlAttrs,
- m(
- 'header',
- m('h1', title),
- ),
- m('article', children),
+ 'section.pf-section',
+ htmlAttrs,
+ m(
+ 'header',
+ m('h1', title),
+ ),
+ m('article', children),
);
}
}
diff --git a/ui/src/widgets/select.ts b/ui/src/widgets/select.ts
index 0428c8d..2e8e991 100644
--- a/ui/src/widgets/select.ts
+++ b/ui/src/widgets/select.ts
@@ -52,8 +52,8 @@
});
const displayedValues = attrs.maxDisplayedItems === undefined ?
- filteredValues :
- filteredValues.slice(0, attrs.maxDisplayedItems);
+ filteredValues :
+ filteredValues.slice(0, attrs.maxDisplayedItems);
const extraItems = exists(attrs.maxDisplayedItems) &&
Math.max(0, filteredValues.length - attrs.maxDisplayedItems);
@@ -63,28 +63,28 @@
// MAYBE(altimin): when the user presses enter and there are multiple items,
// select the first one.
return m(
- 'div',
- m('.pf-search-bar',
- m(TextInput, {
- oninput: (event: Event) => {
- const eventTarget = event.target as HTMLTextAreaElement;
- this.searchText = eventTarget.value;
- scheduleFullRedraw();
- },
- onload: (event: Event) => {
- if (!attrs.autofocusInput) return;
- const eventTarget = event.target as HTMLTextAreaElement;
- eventTarget.focus();
- },
- value: this.searchText,
- placeholder: 'Filter...',
- className: 'pf-search-box',
- }),
- m(Menu,
- ...displayedValues.map((value) => m(MenuItem, {
- label: value,
- onclick: () => attrs.onSelected(value),
- })),
- Boolean(extraItems) && m('i', `+${extraItems} more`))));
+ 'div',
+ m('.pf-search-bar',
+ m(TextInput, {
+ oninput: (event: Event) => {
+ const eventTarget = event.target as HTMLTextAreaElement;
+ this.searchText = eventTarget.value;
+ scheduleFullRedraw();
+ },
+ onload: (event: Event) => {
+ if (!attrs.autofocusInput) return;
+ const eventTarget = event.target as HTMLTextAreaElement;
+ eventTarget.focus();
+ },
+ value: this.searchText,
+ placeholder: 'Filter...',
+ className: 'pf-search-box',
+ }),
+ m(Menu,
+ ...displayedValues.map((value) => m(MenuItem, {
+ label: value,
+ onclick: () => attrs.onSelected(value),
+ })),
+ Boolean(extraItems) && m('i', `+${extraItems} more`))));
}
}
diff --git a/ui/src/widgets/sql_ref.ts b/ui/src/widgets/sql_ref.ts
index 85a788d..1d00789 100644
--- a/ui/src/widgets/sql_ref.ts
+++ b/ui/src/widgets/sql_ref.ts
@@ -35,21 +35,21 @@
const {table, id} = attrs;
if (id !== undefined) {
return m(
- PopupMenu2,
- {
- trigger: m(Anchor, {icon: Icons.ContextMenu}, `${table}[${id}]`),
- },
- m(MenuItem, {
- label: 'Copy ID',
- icon: 'content_copy',
- onclick: () => copyToClipboard(`${id}`),
- }),
- m(MenuItem, {
- label: 'Copy SQL query',
- icon: 'file_copy',
- onclick: () =>
- copyToClipboard(`select * from ${table} where id=${id}`),
- }),
+ PopupMenu2,
+ {
+ trigger: m(Anchor, {icon: Icons.ContextMenu}, `${table}[${id}]`),
+ },
+ m(MenuItem, {
+ label: 'Copy ID',
+ icon: 'content_copy',
+ onclick: () => copyToClipboard(`${id}`),
+ }),
+ m(MenuItem, {
+ label: 'Copy SQL query',
+ icon: 'file_copy',
+ onclick: () =>
+ copyToClipboard(`select * from ${table} where id=${id}`),
+ }),
);
} else {
return `${table}[Unknown]`;
diff --git a/ui/src/widgets/switch.ts b/ui/src/widgets/switch.ts
index f0396ba..f5e48a3 100644
--- a/ui/src/widgets/switch.ts
+++ b/ui/src/widgets/switch.ts
@@ -29,21 +29,21 @@
const {label, checked, disabled, className, ...htmlAttrs} = attrs;
const classes = classNames(
- disabled && 'pf-disabled',
- className,
+ disabled && 'pf-disabled',
+ className,
);
// The default checkbox is removed and an entirely new one created inside
// the span element in CSS.
return m(
- 'label.pf-switch',
- {
- ...htmlAttrs,
- className: classes,
- },
- m('input[type=checkbox]', {disabled, checked}),
- m('span'),
- label,
+ 'label.pf-switch',
+ {
+ ...htmlAttrs,
+ className: classes,
+ },
+ m('input[type=checkbox]', {disabled, checked}),
+ m('span'),
+ label,
);
}
}
diff --git a/ui/src/widgets/text_paragraph.ts b/ui/src/widgets/text_paragraph.ts
index fcf6c4f..a1773f4 100644
--- a/ui/src/widgets/text_paragraph.ts
+++ b/ui/src/widgets/text_paragraph.ts
@@ -30,8 +30,8 @@
compressSpace = true;
}
return m(
- `div.pf-text-paragraph`,
- compressSpace ? text.replace(/\s\s+/g, ' ') : text);
+ `div.pf-text-paragraph`,
+ compressSpace ? text.replace(/\s\s+/g, ' ') : text);
}
}
@@ -48,7 +48,7 @@
} = attrs;
const classes = classNames(
- className,
+ className,
);
return m('div', {class: classes}, children);
diff --git a/ui/src/widgets/tree.ts b/ui/src/widgets/tree.ts
index 034bf7c..1dd1340 100644
--- a/ui/src/widgets/tree.ts
+++ b/ui/src/widgets/tree.ts
@@ -38,7 +38,7 @@
} = attrs;
const classes = classNames(
- className,
+ className,
);
return m('.pf-tree', {class: classes}, children);
@@ -81,23 +81,23 @@
const {children, attrs, attrs: {left, onCollapseChanged = () => {}}} =
vnode;
return m(
- '.pf-tree-node',
- {
- class: classNames(this.getClassNameForNode(vnode)),
+ '.pf-tree-node',
+ {
+ class: classNames(this.getClassNameForNode(vnode)),
+ },
+ m('span.pf-tree-gutter', {
+ onclick: () => {
+ this.collapsed = !this.isCollapsed(vnode);
+ onCollapseChanged(this.collapsed, attrs);
+ scheduleFullRedraw();
},
- m('span.pf-tree-gutter', {
- onclick: () => {
- this.collapsed = !this.isCollapsed(vnode);
- onCollapseChanged(this.collapsed, attrs);
- scheduleFullRedraw();
- },
- }),
- m(
- '.pf-tree-content',
- m('.pf-tree-left', left),
- this.renderRight(vnode),
- ),
- hasChildren(vnode) &&
+ }),
+ m(
+ '.pf-tree-content',
+ m('.pf-tree-left', left),
+ this.renderRight(vnode),
+ ),
+ hasChildren(vnode) &&
[
m('span.pf-tree-indent-gutter'),
m('.pf-tree-children', children),
@@ -200,39 +200,39 @@
} = attrs;
return m(
- TreeNode,
- {
- left,
- right,
- icon,
- summary,
- showCaret: true,
- loading: this.loading,
- collapsed: this.collapsed,
- onCollapseChanged: (collapsed) => {
- if (collapsed) {
- if (unloadOnCollapse) {
- this.renderChildren = undefined;
- }
- } else {
- // Expanding
- if (this.renderChildren) {
- this.collapsed = false;
- scheduleFullRedraw();
- } else {
- this.loading = true;
- fetchData().then((result) => {
- this.loading = false;
- this.collapsed = false;
- this.renderChildren = result;
- scheduleFullRedraw();
- });
- }
+ TreeNode,
+ {
+ left,
+ right,
+ icon,
+ summary,
+ showCaret: true,
+ loading: this.loading,
+ collapsed: this.collapsed,
+ onCollapseChanged: (collapsed) => {
+ if (collapsed) {
+ if (unloadOnCollapse) {
+ this.renderChildren = undefined;
}
- this.collapsed = collapsed;
- scheduleFullRedraw();
- },
+ } else {
+ // Expanding
+ if (this.renderChildren) {
+ this.collapsed = false;
+ scheduleFullRedraw();
+ } else {
+ this.loading = true;
+ fetchData().then((result) => {
+ this.loading = false;
+ this.collapsed = false;
+ this.renderChildren = result;
+ scheduleFullRedraw();
+ });
+ }
+ }
+ this.collapsed = collapsed;
+ scheduleFullRedraw();
},
- this.renderChildren && this.renderChildren());
+ },
+ this.renderChildren && this.renderChildren());
}
}
diff --git a/ui/src/widgets/vega_view.ts b/ui/src/widgets/vega_view.ts
index c51e728..e3e97da 100644
--- a/ui/src/widgets/vega_view.ts
+++ b/ui/src/widgets/vega_view.ts
@@ -215,12 +215,12 @@
const pending = this.view.runAsync();
pending
- .then(() => {
- this.handleComplete(pending);
- })
- .catch((err) => {
- this.handleError(pending, err);
- });
+ .then(() => {
+ this.handleComplete(pending);
+ })
+ .catch((err) => {
+ this.handleError(pending, err);
+ });
this.pending = pending;
this._status = Status.Loading;
}
@@ -292,11 +292,11 @@
view(_: m.Vnode<VegaViewAttrs>) {
return m(
- '.pf-vega-view',
- m(''),
- (this.wrapper?.status === Status.Loading) &&
+ '.pf-vega-view',
+ m(''),
+ (this.wrapper?.status === Status.Loading) &&
m('.pf-vega-view-status', m(Spinner)),
- (this.wrapper?.status === Status.Error) &&
+ (this.wrapper?.status === Status.Error) &&
m('.pf-vega-view-status', this.wrapper?.error ?? 'Error'),
);
}
diff --git a/ui/src/widgets/virtual_scroll_container.ts b/ui/src/widgets/virtual_scroll_container.ts
index 2f32d0a..9d7e3a0 100644
--- a/ui/src/widgets/virtual_scroll_container.ts
+++ b/ui/src/widgets/virtual_scroll_container.ts
@@ -30,12 +30,12 @@
} = attrs;
return m(
- '.pf-virtual-scroll-container',
- {
- ref: this.REF,
- onscroll: (e: Event) => onScroll(e.target as HTMLElement),
- },
- children);
+ '.pf-virtual-scroll-container',
+ {
+ ref: this.REF,
+ onscroll: (e: Event) => onScroll(e.target as HTMLElement),
+ },
+ children);
}
oncreate({dom, attrs}: m.VnodeDOM<VirtualScrollContainerAttrs, this>) {
