Skip to content

Timeline styling and bug fixes #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Jan 7, 2019
Merged

Timeline styling and bug fixes #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f7929a0
fix crash that happened on refreshing timeline page
kenzieschmoll Jan 3, 2019
df7e6e5
Add tooltips to match intellij
kenzieschmoll Jan 3, 2019
3264612
Add all threads to timeline data
kenzieschmoll Jan 4, 2019
837d077
Merge branch 'master' of github.com:kenzieschmoll/devtools into timeline
kenzieschmoll Jan 5, 2019
b0200b4
Await serviceAvailable in timeline. Move styling to CSS.
kenzieschmoll Jan 7, 2019
cb5f7ca
nit fix.
kenzieschmoll Jan 7, 2019
52bb483
Merge branch 'master' of github.com:kenzieschmoll/devtools into timeline
kenzieschmoll Jan 7, 2019
a9f446e
merge master
kenzieschmoll Jan 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions lib/service_manager.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ class ServiceConnectionManager {
new StreamController<VmServiceWrapper>.broadcast();
final StreamController<Null> _connectionClosedController =
new StreamController<Null>.broadcast();
final Completer<Null> serviceAvailable = Completer();
final Map<String, List<String>> methodsForService = {};

IsolateManager _isolateManager;
Expand Down Expand Up @@ -90,6 +91,7 @@ class ServiceConnectionManager {
}

this.service = service;
serviceAvailable.complete();

service.onServiceEvent.listen((e) {
if (e.kind == EventKind.kServiceRegistered) {
Expand Down
34 changes: 19 additions & 15 deletions lib/timeline/fps.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,17 @@ import 'package:vm_service_lib/vm_service_lib.dart';

import '../charts/charts.dart';
import '../ui/elements.dart';
import '../ui/fake_flutter/dart_ui/dart_ui.dart';
import '../ui/flutter_html_shim.dart';
import '../vm_service_wrapper.dart';
import 'timeline.dart';

class FramesChart extends LineChart<FramesTracker> {
FramesChart(CoreElement parent) : super(parent, classes: 'perf-chart') {
fpsLabel = parent.add(div(c: 'perf-label'));
fpsLabel.element.style.left = '0';
fpsLabel.element.style.top = '0';
fpsLabel.element.style.bottom = null;

lastFrameLabel = parent.add(div(c: 'perf-label'));
lastFrameLabel.element.style.right = '0';
lastFrameLabel.element.style.top = '0';
lastFrameLabel.element.style.bottom = null;
lastFrameLabel.element.style.textAlign = '-webkit-right';
fpsLabel = parent.add(div(c: 'perf-label top-left'));

lastFrameLabel = parent.add(div(c: 'perf-label top-right')
..tooltip = 'Rendering time of latest frame.');
}

CoreElement fpsLabel;
Expand All @@ -34,7 +31,7 @@ class FramesChart extends LineChart<FramesTracker> {
return;
}

fpsLabel.text = '${data.calcRecentFPS().round()} FPS';
fpsLabel.text = '${data.calcRecentFPS().round()} frames per second';
final FrameInfo lastFrame = data.lastSample;
lastFrameLabel.setInnerHtml('frame ${lastFrame.number} • '
'${lastFrame.elapsedMs.toStringAsFixed(1)}ms');
Expand Down Expand Up @@ -62,12 +59,15 @@ class FramesChart extends LineChart<FramesTracker> {
final num height = math.min(dim.y, frame.elapsedMs * pixPerMs);
x -= 3 * units;

final String color = frame.elapsedMs > FrameInfo.kTargetMaxFrameTimeMs
? '#f97c7c'
: '#4078c0';
final Color color =
_isSlowFrame(frame) ? slowFrameColor : normalFrameColor;
final String tooltip = _isSlowFrame(frame)
? 'This frame took ${frame.elapsedMs}ms to render, which can cause '
'frame rate to drop below 60 FPS.'
: 'This frame took ${frame.elapsedMs}ms to render.';
svgElements.add('<rect x="$x" y="${dim.y - height}" rx="1" ry="1" '
'width="${2 * units}" height="$height" '
'style="fill:$color"><title>${frame.elapsedMs}ms</title></rect>');
'style="fill:${colorToCss(color)}"><title>$tooltip</title></rect>');

if (frame.frameGroupStart) {
final double lineX = x - (units / 2);
Expand All @@ -82,6 +82,10 @@ class FramesChart extends LineChart<FramesTracker> {
</svg>
''');
}

bool _isSlowFrame(FrameInfo frame) {
return frame.elapsedMs > FrameInfo.kTargetMaxFrameTimeMs;
}
}

class FramesTracker {
Expand Down
12 changes: 9 additions & 3 deletions lib/timeline/timeline.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,16 @@ import '../framework/framework.dart';
import '../globals.dart';
import '../service_extensions.dart' as extensions;
import '../ui/elements.dart';
import '../ui/fake_flutter/dart_ui/dart_ui.dart';
import '../ui/primer.dart';
import '../ui/ui_utils.dart';
import '../vm_service_wrapper.dart';
import 'fps.dart';
import 'timeline_protocol.dart';

const Color slowFrameColor = Color(0xFFf97c7c);
const Color normalFrameColor = Color(0xFF4078c0);

// TODO(devoncarew): show the Skia picture (gpu drawing commands) for a frame

// TODO(devoncarew): show the list of widgets re-drawn during a frame
Expand Down Expand Up @@ -181,6 +185,8 @@ class TimelineScreen extends Screen {
}

void _updateListeningState() async {
await serviceManager.serviceAvailable.future;

final bool shouldBeRunning = !paused && isCurrentScreen;
final bool isRunning = !timelineFramesBuilder.isPaused;

Expand Down Expand Up @@ -222,9 +228,9 @@ class TimelineScreen extends Screen {
for (TimelineEvent event in events) {
final TimelineThread thread =
new TimelineThread(timelineData, event.args['name'], event.threadId);
if (thread.isVisible) {
timelineData.addThread(thread);
}
// TODO: consider pruning which threads we add based on which ones are
// relevant to the user.
timelineData.addThread(thread);
}

timelineData.onTimelineThreadEvent.listen((TimelineThreadEvent event) {
Expand Down
2 changes: 0 additions & 2 deletions lib/timeline/timeline_protocol.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,6 @@ class TimelineThread implements Comparable<TimelineThread> {

String _name;

bool get isVisible => name.startsWith('io.flutter.');

int get sortPriority {
if (name.endsWith('.ui')) {
return 1;
Expand Down
13 changes: 13 additions & 0 deletions web/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,6 +359,19 @@ form[horizontal] {
color: #7a7a7a;
}

.perf-chart .perf-label.top-right {
top: 0;
right: 0;
text-align: right;
height: 30px;
}

.perf-chart .perf-label.top-left {
top: 0;
left: 0;
height: 30px;
}

/* .perf-table {

} */
Expand Down