Converted Observatory error-ref element

R=johnmccutchan@google.com

Review URL: https://codereview.chromium.org/2202943002 .
This commit is contained in:
Carlo Bernaschina 2016-08-02 13:51:22 -07:00
parent cdb317d88b
commit bd79732101
10 changed files with 198 additions and 38 deletions

View file

@ -59,13 +59,15 @@ import 'package:observatory/src/elements/containers/virtual_collection.dart';
import 'package:observatory/src/elements/containers/virtual_tree.dart';
import 'package:observatory/src/elements/curly_block.dart';
import 'package:observatory/src/elements/curly_block_wrapper.dart';
import 'package:observatory/src/elements/error_ref.dart';
import 'package:observatory/src/elements/error_ref_wrapper.dart';
import 'package:observatory/src/elements/function_ref.dart';
import 'package:observatory/src/elements/function_ref_wrapper.dart';
import 'package:observatory/src/elements/isolate_ref.dart';
import 'package:observatory/src/elements/isolate_ref_wrapper.dart';
import 'package:observatory/src/elements/nav/bar.dart';
import 'package:observatory/src/elements/nav/class_menu.dart';
import 'package:observatory/src/elements/nav/class_menu_wrapper.dart';
import 'package:observatory/src/elements/function_ref.dart';
import 'package:observatory/src/elements/function_ref_wrapper.dart';
import 'package:observatory/src/elements/nav/isolate_menu.dart';
import 'package:observatory/src/elements/nav/isolate_menu_wrapper.dart';
import 'package:observatory/src/elements/nav/library_menu.dart';
@ -98,10 +100,11 @@ export 'package:observatory/src/elements/code_ref.dart';
export 'package:observatory/src/elements/containers/virtual_collection.dart';
export 'package:observatory/src/elements/containers/virtual_tree.dart';
export 'package:observatory/src/elements/curly_block.dart';
export 'package:observatory/src/elements/error_ref.dart';
export 'package:observatory/src/elements/function_ref.dart';
export 'package:observatory/src/elements/isolate_ref.dart';
export 'package:observatory/src/elements/nav/bar.dart';
export 'package:observatory/src/elements/nav/class_menu.dart';
export 'package:observatory/src/elements/function_ref.dart';
export 'package:observatory/src/elements/nav/isolate_menu.dart';
export 'package:observatory/src/elements/nav/library_menu.dart';
export 'package:observatory/src/elements/nav/menu.dart';
@ -125,6 +128,8 @@ Future initElements() async {
CodeRefElementWrapper.tag.ensureRegistration();
CurlyBlockElement.tag.ensureRegistration();
CurlyBlockElementWrapper.tag.ensureRegistration();
ErrorRefElement.tag.ensureRegistration();
ErrorRefElementWrapper.tag.ensureRegistration();
FunctionRefElement.tag.ensureRegistration();
FunctionRefElementWrapper.tag.ensureRegistration();
IsolateRefElement.tag.ensureRegistration();

View file

@ -376,6 +376,20 @@ code-ref-wrapped > a[href] {
text-decoration: none;
}
/* error-ref */
/* TODO(cbernaschina) fix error-ref-wrapped to error-ref when wrapper
removed */
error-ref-wrapped > pre {
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: 10px;
font-family: consolas, courier, monospace;
font-size: 1em;
line-height: 1.2em;
white-space: pre;
}
/* function-ref */
/* TODO(cbernaschina) fix function-ref-wrapped to function-ref when wrapper
removed */
@ -389,7 +403,7 @@ function-ref-wrapped > a[href] {
}
/* isolate-ref */
/* TODO(cbernaschina) fix isolate-ref-ref-wrapped to isolate-ref when wrapper
/* TODO(cbernaschina) fix isolate-ref-wrapped to isolate-ref when wrapper
removed */
isolate-ref-wrapped > a[href]:hover {
@ -401,7 +415,7 @@ isolate-ref-wrapped > a[href] {
}
/* nav-notify */
/* TODO(cbernaschina) fix nav-notify-ref-wrapped to nav-notify-ref when wrapper
/* TODO(cbernaschina) fix nav-notify-wrapped to nav-notify when wrapper
removed */
nav-notify-wrapped > div {
float: right;

View file

@ -1,13 +1,52 @@
// Copyright (c) 2014, the Dart project authors. Please see the AUTHORS file
// Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
library error_ref_element;
import 'package:polymer/polymer.dart';
import 'service_ref.dart';
import 'dart:html';
import 'dart:async';
import 'package:observatory/models.dart'
show ErrorRef;
import 'package:observatory/src/elements/helpers/tag.dart';
import 'package:observatory/src/elements/helpers/rendering_scheduler.dart';
class ErrorRefElement extends HtmlElement implements Renderable {
static const tag = const Tag<ErrorRefElement>('error-ref-wrapped');
RenderingScheduler<ErrorRefElement> _r;
Stream<RenderedEvent<ErrorRefElement>> get onRendered => _r.onRendered;
ErrorRef _error;
ErrorRef get error => _error;
factory ErrorRefElement(ErrorRef error, {RenderingQueue queue}) {
assert(error != null);
ErrorRefElement e = document.createElement(tag.name);
e._r = new RenderingScheduler<ErrorRefElement>(e, queue: queue);
e._error = error;
return e;
}
@CustomTag('error-ref')
class ErrorRefElement extends ServiceRefElement {
ErrorRefElement.created() : super.created();
@override
void attached() {
super.attached();
_r.enable();
}
@override
void detached() {
super.detached();
children = [];
_r.disable(notify: true);
}
void render() {
children = [
new PreElement()..text = error.message
];
}
}

View file

@ -1,25 +0,0 @@
<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="service_ref.html">
<polymer-element name="error-ref">
<template>
<link rel="stylesheet" href="css/shared.css">
<style>
.errorBox {
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: 10px;
font-family: consolas, courier, monospace;
font-size: 1em;
line-height: 1.2em;
white-space: pre;
}
</style>
<span>
<pre class="errorBox">{{ ref.message }}</pre>
</span>
</template>
</polymer-element>
<script type="application/dart" src="error_ref.dart"></script>

View file

@ -0,0 +1,78 @@
// Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
import 'dart:html';
import 'package:observatory/app.dart';
import 'package:observatory/mocks.dart' show ErrorRefMock;
import 'package:observatory/service_html.dart' show ServiceMap, DartError;
import 'package:observatory/src/elements/error_ref.dart';
import 'package:observatory/src/elements/helpers/tag.dart';
import 'package:observatory/src/elements/shims/binding.dart';
class ErrorRefElementWrapper extends HtmlElement {
static const binder = const Binder<ErrorRefElementWrapper>(const {
'ref': #ref
});
static const tag = const Tag<ErrorRefElementWrapper>('error-ref');
ServiceMap _error;
ServiceMap get ref => _error;
void set ref(ServiceMap ref) { _error = ref; render(); }
ErrorRefElementWrapper.created() : super.created() {
binder.registerCallback(this);
createShadowRoot();
render();
}
@override
void attached() {
super.attached();
render();
}
void render() {
shadowRoot.children = [];
if (_error == null) return;
if (ref is Map) {
shadowRoot.children = [
new StyleElement()
..text = '''
error-ref-wrapped > pre {
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: 10px;
font-family: consolas, courier, monospace;
font-size: 1em;
line-height: 1.2em;
white-space: pre;
}
''',
new ErrorRefElement(new ErrorRefMock(message: ref['message']))
];
} else {
shadowRoot.children = [
new StyleElement()
..text = '''
error-ref-wrapped > pre {
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: 10px;
font-family: consolas, courier, monospace;
font-size: 1em;
line-height: 1.2em;
white-space: pre;
}
''',
new ErrorRefElement(
new ErrorRefMock(message: (ref as DartError).message),
queue: ObservatoryApplication.app.queue)
];
}
}
}

View file

@ -1,6 +1,5 @@
<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="instance_ref.html">
<link rel="import" href="error_ref.html">
<polymer-element name="eval-box">

View file

@ -1,6 +1,5 @@
<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="instance_ref.html">
<link rel="import" href="error_ref.html">
<polymer-element name="eval-link">

View file

@ -56,7 +56,7 @@
'lib/src/elements/debugger.dart',
'lib/src/elements/debugger.html',
'lib/src/elements/error_ref.dart',
'lib/src/elements/error_ref.html',
'lib/src/elements/error_ref_wrapper.dart',
'lib/src/elements/error_view.dart',
'lib/src/elements/error_view.html',
'lib/src/elements/eval_box.dart',

View file

@ -0,0 +1,31 @@
// Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
import 'dart:html';
import 'package:unittest/unittest.dart';
import 'package:observatory/models.dart';
import 'package:observatory/mocks.dart';
import 'package:observatory/src/elements/error_ref.dart';
main() {
ErrorRefElement.tag.ensureRegistration();
final ErrorRef ref = new ErrorRefMock(id: 'id', message: 'fixed-error-m');
test('instantiation', () {
final ErrorRefElement e = new ErrorRefElement(ref);
expect(e, isNotNull, reason: 'element correctly created');
expect(e.error, equals(ref));
});
test('elements created after attachment', () async {
final ErrorRefElement e = new ErrorRefElement(ref);
document.body.append(e);
await e.onRendered.first;
expect(e.children.length, isNonZero, reason: 'has elements');
expect(e.innerHtml.contains(ref.message), isTrue,
reason: 'no message in the component');
e.remove();
await e.onRendered.first;
expect(e.children.length, isZero,
reason: 'is empty');
});
}

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="dart.unittest" content="full-stack-traces">
<style>
.unittest-table { font-family:monospace; border:1px; }
.unittest-pass { background: #6b3;}
.unittest-fail { background: #d55;}
.unittest-error { background: #a11;}
</style>
<script src="/packages/web_components/webcomponents.js"></script>
<script src="/packages/web_components/dart_support.js"></script>
</head>
<body>
<script type="text/javascript"
src="/root_dart/tools/testing/dart/test_controller.js"></script>
%TEST_SCRIPTS%
</body>
</html>