Skip to content

Commit 4c7f4da

Browse files
danilsomsikovDevtools-frontend LUCI CQ
danilsomsikov
authored and
Devtools-frontend LUCI CQ
committed
Inline AudioContextContentBuilder into WebAudioView.
This will make adopting UI eng vision easier. The `ContextDetailBuilder` and `ContextSummaryBuilder` classes from `AudioContextContentBuilder.ts` are now directly implemented within the `WebAudioView` class, removing the need for a separate file and module. The UI strings used by these builders have also been moved to `WebAudioView.ts`. Bug: 414631999 Change-Id: If0f2cf8274fd896754a83bb3676dbb3da2c31d66 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6845778 Auto-Submit: Danil Somsikov <[email protected]> Reviewed-by: Kateryna Prokopenko <[email protected]> Commit-Queue: Danil Somsikov <[email protected]>
1 parent 648bfb7 commit 4c7f4da

File tree

3 files changed

+75
-117
lines changed

3 files changed

+75
-117
lines changed

‎front_end/panels/web_audio/AudioContextContentBuilder.ts‎

Lines changed: 0 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,3 @@
11
// Copyright 2019 The Chromium Authors. All rights reserved.
22
// Use of this source code is governed by a BSD-style license that can be
33
// found in the LICENSE file.
4-
/* eslint-disable rulesdir/no-imperative-dom-api */
5-
6-
import * as i18n from '../../core/i18n/i18n.js';
7-
import type * as Protocol from '../../generated/protocol.js';
8-
import * as UI from '../../ui/legacy/legacy.js';
9-
10-
const UIStrings = {
11-
/**
12-
* @description The current state of an item
13-
*/
14-
state: 'State',
15-
/**
16-
* @description Text in Audio Context Content Builder
17-
*/
18-
sampleRate: 'Sample Rate',
19-
/**
20-
* @description Text in Audio Context Content Builder
21-
*/
22-
callbackBufferSize: 'Callback Buffer Size',
23-
/**
24-
* @description Label in the Audio Context Content Builder for the maximum number of output channels
25-
* that this Audio Context has.
26-
*/
27-
maxOutputChannels: 'Max Output Channels',
28-
/**
29-
* @description Text in Audio Context Content Builder
30-
*/
31-
currentTime: 'Current Time',
32-
/**
33-
* @description Text in Audio Context Content Builder
34-
*/
35-
callbackInterval: 'Callback Interval',
36-
/**
37-
* @description Text in Audio Context Content Builder
38-
*/
39-
renderCapacity: 'Render Capacity',
40-
} as const;
41-
const str_ = i18n.i18n.registerUIStrings('panels/web_audio/AudioContextContentBuilder.ts', UIStrings);
42-
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
43-
44-
export class ContextDetailBuilder {
45-
private readonly fragment: DocumentFragment;
46-
private readonly container: HTMLDivElement;
47-
constructor(context: Protocol.WebAudio.BaseAudioContext) {
48-
this.fragment = document.createDocumentFragment();
49-
this.container = document.createElement('div');
50-
this.container.classList.add('context-detail-container');
51-
this.fragment.appendChild(this.container);
52-
this.build(context);
53-
}
54-
55-
private build(context: Protocol.WebAudio.BaseAudioContext): void {
56-
const title = context.contextType === 'realtime' ? i18n.i18n.lockedString('AudioContext') :
57-
i18n.i18n.lockedString('OfflineAudioContext');
58-
this.addTitle(title, context.contextId);
59-
this.addEntry(i18nString(UIStrings.state), context.contextState);
60-
this.addEntry(i18nString(UIStrings.sampleRate), context.sampleRate, 'Hz');
61-
if (context.contextType === 'realtime') {
62-
this.addEntry(i18nString(UIStrings.callbackBufferSize), context.callbackBufferSize, 'frames');
63-
}
64-
this.addEntry(i18nString(UIStrings.maxOutputChannels), context.maxOutputChannelCount, 'ch');
65-
}
66-
67-
private addTitle(title: string, subtitle: string): void {
68-
this.container.appendChild(UI.Fragment.html`
69-
<div class="context-detail-header">
70-
<div class="context-detail-title">${title}</div>
71-
<div class="context-detail-subtitle">${subtitle}</div>
72-
</div>
73-
`);
74-
}
75-
76-
private addEntry(entry: string, value: string|number, unit?: string|undefined): void {
77-
const valueWithUnit = value + (unit ? ` ${unit}` : '');
78-
this.container.appendChild(UI.Fragment.html`
79-
<div class="context-detail-row">
80-
<div class="context-detail-row-entry">${entry}</div>
81-
<div class="context-detail-row-value">${valueWithUnit}</div>
82-
</div>
83-
`);
84-
}
85-
86-
getFragment(): DocumentFragment {
87-
return this.fragment;
88-
}
89-
}
90-
91-
export class ContextSummaryBuilder {
92-
private readonly fragment: DocumentFragment;
93-
constructor(contextRealtimeData: Protocol.WebAudio.ContextRealtimeData) {
94-
const time = contextRealtimeData.currentTime.toFixed(3);
95-
const mean = (contextRealtimeData.callbackIntervalMean * 1000).toFixed(3);
96-
const stddev = (Math.sqrt(contextRealtimeData.callbackIntervalVariance) * 1000).toFixed(3);
97-
const capacity = (contextRealtimeData.renderCapacity * 100).toFixed(3);
98-
this.fragment = document.createDocumentFragment();
99-
this.fragment.appendChild(UI.Fragment.html`
100-
<div class="context-summary-container">
101-
<span>${i18nString(UIStrings.currentTime)}: ${time} s</span>
102-
<span>\u2758</span>
103-
<span>${i18nString(UIStrings.callbackInterval)}: μ = ${mean} ms, σ = ${stddev} ms</span>
104-
<span>\u2758</span>
105-
<span>${i18nString(UIStrings.renderCapacity)}: ${capacity} %</span>
106-
</div>
107-
`);
108-
}
109-
110-
getFragment(): DocumentFragment {
111-
return this.fragment;
112-
}
113-
}

‎front_end/panels/web_audio/WebAudioView.ts‎

Lines changed: 75 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import type * as Protocol from '../../generated/protocol.js';
1313
import * as UI from '../../ui/legacy/legacy.js';
1414
import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
1515

16-
import {ContextDetailBuilder, ContextSummaryBuilder} from './AudioContextContentBuilder.js';
1716
import * as GraphVisualizer from './graph_visualizer/graph_visualizer.js';
1817
import webAudioStyles from './webAudio.css.js';
1918
import {Events as ModelEvents, WebAudioModel} from './WebAudioModel.js';
@@ -37,6 +36,35 @@ const UIStrings = {
3736
* @example {realtime (1e03ec)} PH1
3837
*/
3938
audioContextS: 'Audio context: {PH1}',
39+
/**
40+
* @description The current state of an item
41+
*/
42+
state: 'State',
43+
/**
44+
* @description Text in Web Audio View
45+
*/
46+
sampleRate: 'Sample Rate',
47+
/**
48+
* @description Text in Web Audio View
49+
*/
50+
callbackBufferSize: 'Callback Buffer Size',
51+
/**
52+
* @description Label in the Web Audio View for the maximum number of output channels
53+
* that this Audio Context has.
54+
*/
55+
maxOutputChannels: 'Max Output Channels',
56+
/**
57+
* @description Text in Web Audio View
58+
*/
59+
currentTime: 'Current Time',
60+
/**
61+
* @description Text in Web Audio View
62+
*/
63+
callbackInterval: 'Callback Interval',
64+
/**
65+
* @description Text in Web Audio View
66+
*/
67+
renderCapacity: 'Render Capacity',
4068
} as const;
4169
const str_ = i18n.i18n.registerUIStrings('panels/web_audio/WebAudioView.ts', UIStrings);
4270
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -417,18 +445,60 @@ export class WebAudioView extends UI.ThrottledWidget.ThrottledWidget implements
417445
this.landingPage.show(this.detailViewContainer);
418446
return;
419447
}
448+
420449
if (this.landingPage.isShowing()) {
421450
this.landingPage.detach();
422451
}
423-
const detailBuilder = new ContextDetailBuilder(context);
452+
424453
this.detailViewContainer.removeChildren();
425-
this.detailViewContainer.appendChild(detailBuilder.getFragment());
454+
455+
const container = document.createElement('div');
456+
container.classList.add('context-detail-container');
457+
458+
const addEntry = (entry: string, value: string|number, unit?: string): void => {
459+
const valueWithUnit = value + (unit ? ` ${unit}` : '');
460+
container.appendChild(UI.Fragment.html`
461+
<div class="context-detail-row">
462+
<div class="context-detail-row-entry">${entry}</div>
463+
<div class="context-detail-row-value">${valueWithUnit}</div>
464+
</div>
465+
`);
466+
};
467+
468+
const title = context.contextType === 'realtime' ? i18n.i18n.lockedString('AudioContext') :
469+
i18n.i18n.lockedString('OfflineAudioContext');
470+
container.appendChild(UI.Fragment.html`
471+
<div class="context-detail-header">
472+
<div class="context-detail-title">${title}</div>
473+
<div class="context-detail-subtitle">${context.contextId}</div>
474+
</div>
475+
`);
476+
477+
addEntry(i18nString(UIStrings.state), context.contextState);
478+
addEntry(i18nString(UIStrings.sampleRate), context.sampleRate, 'Hz');
479+
if (context.contextType === 'realtime') {
480+
addEntry(i18nString(UIStrings.callbackBufferSize), context.callbackBufferSize, 'frames');
481+
}
482+
addEntry(i18nString(UIStrings.maxOutputChannels), context.maxOutputChannelCount, 'ch');
483+
484+
this.detailViewContainer.appendChild(container);
426485
}
427486

428487
private updateSummaryBar(contextRealtimeData: Protocol.WebAudio.ContextRealtimeData): void {
429-
const summaryBuilder = new ContextSummaryBuilder(contextRealtimeData);
430488
this.summaryBarContainer.removeChildren();
431-
this.summaryBarContainer.appendChild(summaryBuilder.getFragment());
489+
const time = contextRealtimeData.currentTime.toFixed(3);
490+
const mean = (contextRealtimeData.callbackIntervalMean * 1000).toFixed(3);
491+
const stddev = (Math.sqrt(contextRealtimeData.callbackIntervalVariance) * 1000).toFixed(3);
492+
const capacity = (contextRealtimeData.renderCapacity * 100).toFixed(3);
493+
this.summaryBarContainer.appendChild(UI.Fragment.html`
494+
<div class="context-summary-container">
495+
<span>${i18nString(UIStrings.currentTime)}: ${time} s</span>
496+
<span>\u2758</span>
497+
<span>${i18nString(UIStrings.callbackInterval)}: μ = ${mean} ms, σ = ${stddev} ms</span>
498+
<span>\u2758</span>
499+
<span>${i18nString(UIStrings.renderCapacity)}: ${capacity} %</span>
500+
</div>
501+
`);
432502
}
433503

434504
private clearSummaryBar(): void {

‎front_end/panels/web_audio/web_audio.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
// Use of this source code is governed by a BSD-style license that can be
33
// found in the LICENSE file.
44

5-
import * as AudioContextContentBuilder from './AudioContextContentBuilder.js';
65
import * as WebAudioModel from './WebAudioModel.js';
76
import * as WebAudioView from './WebAudioView.js';
87

@@ -15,7 +14,6 @@ export {
1514
NodeView,
1615
} from './graph_visualizer/graph_visualizer.js';
1716
export {
18-
AudioContextContentBuilder,
1917
WebAudioModel,
2018
WebAudioView,
2119
};

0 commit comments

Comments
 (0)