devtools/lib/src/inspector/inspector_tree_html.dart - third_party/dart-pkg - Git at Google

 // Copyright 2019 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.

 // TODO(jacobr): make this class production quality. It is missing some
 // important edge cases.

 /// Use this library to render an inspector tree to HTML elements instead of
 /// canvas.
 library inspector_tree_html;

 import 'dart:html';

 import 'package:meta/meta.dart';

 import '../ui/elements.dart';
 import '../ui/fake_flutter/fake_flutter.dart';
 import '../ui/flutter_html_shim.dart';
 import '../ui/html_icon_renderer.dart';
 import '../ui/icons.dart';
 import 'diagnostics_node.dart';
 import 'inspector_service.dart';
 import 'inspector_text_styles.dart';
 import 'inspector_tree.dart';
 import 'inspector_tree_web.dart';

 abstract class HtmlPaintEntry extends PaintEntry {
   void paint(Element parent);

   Element element;
 }

 class IconPaintEntry extends HtmlPaintEntry {
   IconPaintEntry({
     @required this.iconRenderer,
   });

   @override
   Icon get icon => iconRenderer.icon;

   final HtmlIconRenderer iconRenderer;

   @override
   void paint(Element parent) {
     element = iconRenderer.createElement();
     parent.append(element);
   }

   @override
   void attach(InspectorTree owner) {
     // The browser handles painting images when they are available so we don't
     // have to do anything.
   }
 }

 class HtmlTextPaintEntry extends HtmlPaintEntry {
   HtmlTextPaintEntry({
     @required this.text,
     @required this.color,
     @required this.font,
   });

   final String text;
   final String color;
   final String font;

   @override
   Icon get icon => null;

   @override
   void paint(Element parent) {
     element = Element.span()..text = text;
     if (color != null) {
       element.style.color = color;
     }
     if (font != null) {
       element.style.font = font;
     }
     parent.append(element);
   }
 }

 class InspectorTreeNodeRenderHtmlBuilder
     extends InspectorTreeNodeRenderBuilder<InspectorTreeNodeHtmlRender> {
   InspectorTreeNodeRenderHtmlBuilder({
     @required DiagnosticLevel level,
     @required DiagnosticsTreeStyle treeStyle,
     @required this.allowWrap,
   }) : super(level: level, treeStyle: treeStyle);

   TextStyle lastStyle;
   String font;
   String color;
   final bool allowWrap;
   final List<HtmlPaintEntry> _entries = [];

   @override
   void appendText(String text, TextStyle textStyle) {
     if (text == null || text.isEmpty) {
       return;
     }
     if (textStyle != lastStyle) {
       if (textStyle.color != lastStyle?.color) {
         if (textStyle.color == regular.color) {
           color = null;
         } else {
           color = colorToCss(textStyle.color);
         }
       }
       if (textStyle == regular) {
         font = null;
       } else {
         font = fontStyleToCss(textStyle);
       }
       lastStyle = textStyle;
     }
     _entries.add(HtmlTextPaintEntry(text: text, color: color, font: font));
   }

   @override
   void addIcon(Icon icon) {
     _entries.add(IconPaintEntry(iconRenderer: getIconRenderer(icon)));
   }

   @override
   InspectorTreeNodeHtmlRender build() {
     // The html renderer does not know what its size is.
     final classes = [
       'inspector-level-${diagnosticLevelToName[level]}',
       'inspector-style-${treeStyleToName[treeStyle]}',
     ];
     if (!allowWrap) {
       classes.add('inspector-no-wrap');
     }
     return InspectorTreeNodeHtmlRender(_entries, const Size(0, 0), classes);
   }
 }

 class InspectorTreeNodeHtmlRender
     extends InspectorTreeNodeRender<HtmlPaintEntry> {
   InspectorTreeNodeHtmlRender(
       List<HtmlPaintEntry> entries, Size size, this.cssClasses)
       : super(entries, size);

   final List<String> cssClasses;

   void paint(Element container) {
     container.classes.addAll(cssClasses);
     element = container;
     for (var entry in entries) {
       entry.paint(container);
     }
   }

   Element element;

   @override
   PaintEntry hitTest(Offset location) {
     // TODO(jacobr): consider removing this method from the base class.
     throw 'Not yet supported by HTML tree';
   }
 }

 class InspectorTreeNodeHtml extends InspectorTreeNode {
   @override
   InspectorTreeNodeRenderBuilder createRenderBuilder() {
     return InspectorTreeNodeRenderHtmlBuilder(
       level: diagnostic.level,
       treeStyle: diagnostic.style,
       allowWrap: diagnostic.allowWrap,
     );
   }
 }

 class InspectorTreeHtml extends InspectorTree implements InspectorTreeWeb {
   InspectorTreeHtml({
     @required bool summaryTree,
     @required FlutterTreeType treeType,
     NodeAddedCallback onNodeAdded,
     VoidCallback onSelectionChange,
     TreeEventCallback onExpand,
     TreeHoverEventCallback onHover,
   })  : _container = div(c: 'inspector-tree-html'),
         super(
           summaryTree: summaryTree,
           treeType: treeType,
           onNodeAdded: onNodeAdded,
           onSelectionChange: onSelectionChange,
           onExpand: onExpand,
           onHover: onHover,
         ) {
     _container.onClick.listen(onMouseClick);
     _container.element.onMouseMove.listen(onMouseMove);
     _container.element.onMouseLeave.listen(onMouseLeave);
   }

   InspectorTreeRow _resolveTreeRow(Element e) {
     while (e != null && !e.classes.contains('inspector-tree-row')) {
       e = e.parent;
     }
     if (e == null) {
       return null;
     }
     final parent = e.parent;
     final int index = parent.children.indexOf(e);
     assert(index >= 0 && index < numRows);
     final row = root.getRow(index, selection: selection);
     // TODO(jacobr): figure out why this assert is sometimes failing.
     // final InspectorTreeNodeHtmlRender render = row.node.renderObject;
     // assert(render.element.parent == e);
     return row;
   }

   Icon _resolveIcon(InspectorTreeRow row, Element e) {
     final InspectorTreeNodeHtmlRender render = row?.node?.renderObject;
     if (render == null) {
       return null;
     }
     while (e != null && !e.classes.contains('flutter-icon')) {
       if (e == render.element) {
         return null;
       }
       e = e.parent;
     }
     if (e == null) {
       return null;
     }
     for (var entry in render.entries) {
       if (entry.element == e) {
         return entry.icon;
       }
     }
     return null;
   }

   final CoreElement _container;

   bool _recomputeRows = false;

   @override
   void setState(VoidCallback modifyState) {
     // More closely match Flutter semantics where state is set immediately
     // instead of after a frame.
     modifyState();
     if (!_recomputeRows) {
       _recomputeRows = true;
       window.requestAnimationFrame((_) => _rebuildData());
     }
   }

   void _rebuildData() {
     if (_recomputeRows) {
       _recomputeRows = false;
       if (root == null) {
         _container.clear();
         return;
       }

       final int rowCount = numRows;
       // TODO(jacobr): make this rebuild more incremental.
       _container.clear();
       for (int i = 0; i < rowCount; i++) {
         _container.element.append(paintRow(i, selection: selection));
       }
     }
   }

   void onMouseClick(MouseEvent mouseEvent) {
     final row = _resolveTreeRow(mouseEvent.target);
     if (row == null) {
       return;
     }
     final Icon icon = _resolveIcon(row, mouseEvent.target);
     if (row != null) {
       onTapIcon(row, icon);
     }
   }

   void onMouseMove(MouseEvent mouseEvent) {
     if (onHover != null) {
       // TODO(jacobr): determine the icon
       onHover(_resolveTreeRow(mouseEvent.target)?.node, null);
     }
   }

   void onMouseLeave(MouseEvent mouseEvent) {
     if (onHover != null) {
       onHover(null, null);
     }
   }

   @override
   CoreElement get element => _container;

   @override
   InspectorTreeNode createNode() => InspectorTreeNodeHtml();

   // Horizontal padding is specified by CSS so including it here would throw
   // off calculations.
   @override
   double get horizontalPadding => 0.0;

   Element paintRow(
     int index, {
     @required InspectorTreeNode selection,
   }) {
     try {
       final container = Element.div();
       container.classes.add('inspector-tree-row');
       // Variables incremented as part of painting.
       double currentX = 0;

       final InspectorTreeRow row = root?.getRow(index, selection: selection);
       if (row == null) {
         return container;
       }
       final InspectorTreeNode node = row.node;
       final diagnostic = node.diagnostic;
       // Add an has_property helper on RemoteDiagnosticsNode.
       if (diagnostic != null &&
           diagnostic.name?.isNotEmpty == true &&
           diagnostic.showName &&
           diagnostic.showSeparator &&
           diagnostic.description != null) {
         container.classes.add('property-value');
       }
       // final bool showExpandCollapse = node.showExpandCollapse;
       final InspectorTreeNodeHtmlRender renderObject = node.renderObject;

       // TODO(jacobr): port this code to work for the html renderer to support
       // drawing lines describing the tree. Likely the best way to render this
       // ui is by abusing CSS for drawing borders although we could also consider
       // prerendering some base64 images.
       /*
       bool hasPath = false;
       void _endPath() {
         if (!hasPath) return;
         canvas.stroke();
         hasPath = false;
       }

       void _maybeStart([Color color = Colors.grey]) {
         if (color != currentColor) {
           _endPath();
         }
         if (hasPath) return;
         hasPath = true;
         canvas.beginPath();
         if (currentColor != color) {
           currentColor = color;
           canvas.strokeStyle = colorToCss(color);
         }
         canvas.lineWidth = chartLineStrokeWidth;
       }

       for (int tick in row.ticks) {
         currentX = getDepthIndent(tick) - columnWidth * 0.5;
         if (isVisible(1.0)) {
           final highlight = row.highlightDepth == tick;
           _maybeStart(highlight ? highlightLineColor : defaultTreeLineColor);
           canvas
             ..moveTo(currentX, 0.0)
             ..lineTo(currentX, rowHeight);
         }
       }
       if (row.lineToParent) {
         final highlight = row.highlightDepth == row.depth - 1;
         currentX = getDepthIndent(row.depth - 1) - columnWidth * 0.5;
         final double width = showExpandCollapse ? columnWidth * 0.5 : columnWidth;
         if (isVisible(width)) {
           _maybeStart(highlight ? highlightLineColor : defaultTreeLineColor);
           canvas
             ..moveTo(currentX, 0.0)
             ..lineTo(currentX, rowHeight * 0.5)
             ..lineTo(currentX + width, rowHeight * 0.5);
         }
       }
       _endPath();

       */
       // Render the main row content.
       if (renderObject == null) {
         return container;
       }
       currentX = getDepthIndent(row.depth - 1) - columnWidth;
       if (!row.node.showExpandCollapse) {
         currentX += columnWidth;
       }

       final rowContentContainer = Element.div();
       rowContentContainer.classes.add('inspector-tree-row-content');
       rowContentContainer.style.paddingLeft = '${currentX}px';
       final rowContent = Element.div();
       rowContentContainer.append(rowContent);
       renderObject.paint(rowContent);
       container.append(rowContentContainer);

       // TODO(jacobr): handle row selected backgrounds using CSS classes.
       return container;
     } catch (e, s) {
       print(s);
       return Element.div()..text = 'Error: $e, $s';
     }
   }

   @override
   void animateToTargets(List<InspectorTreeNode> targets) {
     // TODO: implement animateToTargets
     window.requestAnimationFrame((_) {
       for (var target in targets.reversed) {
         final InspectorTreeNodeHtmlRender renderObject = target.renderObject;
         // TODO(jacobr): be smarter about not calling this on all elements.
         renderObject?.element?.scrollIntoView();
       }
     });
   }

   @override
   String get tooltip => element.tooltip;

   @override
   set tooltip(String value) {
     element.tooltip = value;
   }
 }
	// Copyright 2019 The Chromium Authors. All rights reserved.
	// Use of this source code is governed by a BSD-style license that can be
	// found in the LICENSE file.

	// TODO(jacobr): make this class production quality. It is missing some
	// important edge cases.

	/// Use this library to render an inspector tree to HTML elements instead of
	/// canvas.
	library inspector_tree_html;

	import 'dart:html';

	import 'package:meta/meta.dart';

	import '../ui/elements.dart';
	import '../ui/fake_flutter/fake_flutter.dart';
	import '../ui/flutter_html_shim.dart';
	import '../ui/html_icon_renderer.dart';
	import '../ui/icons.dart';
	import 'diagnostics_node.dart';
	import 'inspector_service.dart';
	import 'inspector_text_styles.dart';
	import 'inspector_tree.dart';
	import 'inspector_tree_web.dart';

	abstract class HtmlPaintEntry extends PaintEntry {
	void paint(Element parent);

	Element element;
	}

	class IconPaintEntry extends HtmlPaintEntry {
	IconPaintEntry({
	@required this.iconRenderer,
	});

	@override
	Icon get icon => iconRenderer.icon;

	final HtmlIconRenderer iconRenderer;

	@override
	void paint(Element parent) {
	element = iconRenderer.createElement();
	parent.append(element);
	}

	@override
	void attach(InspectorTree owner) {
	// The browser handles painting images when they are available so we don't
	// have to do anything.
	}
	}

	class HtmlTextPaintEntry extends HtmlPaintEntry {
	HtmlTextPaintEntry({
	@required this.text,
	@required this.color,
	@required this.font,
	});

	final String text;
	final String color;
	final String font;

	@override
	Icon get icon => null;

	@override
	void paint(Element parent) {
	element = Element.span()..text = text;
	if (color != null) {
	element.style.color = color;
	}
	if (font != null) {
	element.style.font = font;
	}
	parent.append(element);
	}
	}

	class InspectorTreeNodeRenderHtmlBuilder
	extends InspectorTreeNodeRenderBuilder<InspectorTreeNodeHtmlRender> {
	InspectorTreeNodeRenderHtmlBuilder({
	@required DiagnosticLevel level,
	@required DiagnosticsTreeStyle treeStyle,
	@required this.allowWrap,
	}) : super(level: level, treeStyle: treeStyle);

	TextStyle lastStyle;
	String font;
	String color;
	final bool allowWrap;
	final List<HtmlPaintEntry> _entries = [];

	@override
	void appendText(String text, TextStyle textStyle) {
	if (text == null \|\| text.isEmpty) {
	return;
	}
	if (textStyle != lastStyle) {
	if (textStyle.color != lastStyle?.color) {
	if (textStyle.color == regular.color) {
	color = null;
	} else {
	color = colorToCss(textStyle.color);
	}
	}
	if (textStyle == regular) {
	font = null;
	} else {
	font = fontStyleToCss(textStyle);
	}
	lastStyle = textStyle;
	}
	_entries.add(HtmlTextPaintEntry(text: text, color: color, font: font));
	}

	@override
	void addIcon(Icon icon) {
	_entries.add(IconPaintEntry(iconRenderer: getIconRenderer(icon)));
	}

	@override
	InspectorTreeNodeHtmlRender build() {
	// The html renderer does not know what its size is.
	final classes = [
	'inspector-level-${diagnosticLevelToName[level]}',
	'inspector-style-${treeStyleToName[treeStyle]}',
	];
	if (!allowWrap) {
	classes.add('inspector-no-wrap');
	}
	return InspectorTreeNodeHtmlRender(_entries, const Size(0, 0), classes);
	}
	}

	class InspectorTreeNodeHtmlRender
	extends InspectorTreeNodeRender<HtmlPaintEntry> {
	InspectorTreeNodeHtmlRender(
	List<HtmlPaintEntry> entries, Size size, this.cssClasses)
	: super(entries, size);

	final List<String> cssClasses;

	void paint(Element container) {
	container.classes.addAll(cssClasses);
	element = container;
	for (var entry in entries) {
	entry.paint(container);
	}
	}

	Element element;

	@override
	PaintEntry hitTest(Offset location) {
	// TODO(jacobr): consider removing this method from the base class.
	throw 'Not yet supported by HTML tree';
	}
	}

	class InspectorTreeNodeHtml extends InspectorTreeNode {
	@override
	InspectorTreeNodeRenderBuilder createRenderBuilder() {
	return InspectorTreeNodeRenderHtmlBuilder(
	level: diagnostic.level,
	treeStyle: diagnostic.style,
	allowWrap: diagnostic.allowWrap,
	);
	}
	}

	class InspectorTreeHtml extends InspectorTree implements InspectorTreeWeb {
	InspectorTreeHtml({
	@required bool summaryTree,
	@required FlutterTreeType treeType,
	NodeAddedCallback onNodeAdded,
	VoidCallback onSelectionChange,
	TreeEventCallback onExpand,
	TreeHoverEventCallback onHover,
	}) : _container = div(c: 'inspector-tree-html'),
	super(
	summaryTree: summaryTree,
	treeType: treeType,
	onNodeAdded: onNodeAdded,
	onSelectionChange: onSelectionChange,
	onExpand: onExpand,
	onHover: onHover,
	) {
	_container.onClick.listen(onMouseClick);
	_container.element.onMouseMove.listen(onMouseMove);
	_container.element.onMouseLeave.listen(onMouseLeave);
	}

	InspectorTreeRow _resolveTreeRow(Element e) {
	while (e != null && !e.classes.contains('inspector-tree-row')) {
	e = e.parent;
	}
	if (e == null) {
	return null;
	}
	final parent = e.parent;
	final int index = parent.children.indexOf(e);
	assert(index >= 0 && index < numRows);
	final row = root.getRow(index, selection: selection);
	// TODO(jacobr): figure out why this assert is sometimes failing.
	// final InspectorTreeNodeHtmlRender render = row.node.renderObject;
	// assert(render.element.parent == e);
	return row;
	}

	Icon _resolveIcon(InspectorTreeRow row, Element e) {
	final InspectorTreeNodeHtmlRender render = row?.node?.renderObject;
	if (render == null) {
	return null;
	}
	while (e != null && !e.classes.contains('flutter-icon')) {
	if (e == render.element) {
	return null;
	}
	e = e.parent;
	}
	if (e == null) {
	return null;
	}
	for (var entry in render.entries) {
	if (entry.element == e) {
	return entry.icon;
	}
	}
	return null;
	}

	final CoreElement _container;

	bool _recomputeRows = false;

	@override
	void setState(VoidCallback modifyState) {
	// More closely match Flutter semantics where state is set immediately
	// instead of after a frame.
	modifyState();
	if (!_recomputeRows) {
	_recomputeRows = true;
	window.requestAnimationFrame((_) => _rebuildData());
	}
	}

	void _rebuildData() {
	if (_recomputeRows) {
	_recomputeRows = false;
	if (root == null) {
	_container.clear();
	return;
	}

	final int rowCount = numRows;
	// TODO(jacobr): make this rebuild more incremental.
	_container.clear();
	for (int i = 0; i < rowCount; i++) {
	_container.element.append(paintRow(i, selection: selection));
	}
	}
	}

	void onMouseClick(MouseEvent mouseEvent) {
	final row = _resolveTreeRow(mouseEvent.target);
	if (row == null) {
	return;
	}
	final Icon icon = _resolveIcon(row, mouseEvent.target);
	if (row != null) {
	onTapIcon(row, icon);
	}
	}

	void onMouseMove(MouseEvent mouseEvent) {
	if (onHover != null) {
	// TODO(jacobr): determine the icon
	onHover(_resolveTreeRow(mouseEvent.target)?.node, null);
	}
	}

	void onMouseLeave(MouseEvent mouseEvent) {
	if (onHover != null) {
	onHover(null, null);
	}
	}

	@override
	CoreElement get element => _container;

	@override
	InspectorTreeNode createNode() => InspectorTreeNodeHtml();

	// Horizontal padding is specified by CSS so including it here would throw
	// off calculations.
	@override
	double get horizontalPadding => 0.0;

	Element paintRow(
	int index, {
	@required InspectorTreeNode selection,
	}) {
	try {
	final container = Element.div();
	container.classes.add('inspector-tree-row');
	// Variables incremented as part of painting.
	double currentX = 0;

	final InspectorTreeRow row = root?.getRow(index, selection: selection);
	if (row == null) {
	return container;
	}
	final InspectorTreeNode node = row.node;
	final diagnostic = node.diagnostic;
	// Add an has_property helper on RemoteDiagnosticsNode.
	if (diagnostic != null &&
	diagnostic.name?.isNotEmpty == true &&
	diagnostic.showName &&
	diagnostic.showSeparator &&
	diagnostic.description != null) {
	container.classes.add('property-value');
	}
	// final bool showExpandCollapse = node.showExpandCollapse;
	final InspectorTreeNodeHtmlRender renderObject = node.renderObject;

	// TODO(jacobr): port this code to work for the html renderer to support
	// drawing lines describing the tree. Likely the best way to render this
	// ui is by abusing CSS for drawing borders although we could also consider
	// prerendering some base64 images.
	/*
	bool hasPath = false;
	void _endPath() {
	if (!hasPath) return;
	canvas.stroke();
	hasPath = false;
	}

	void _maybeStart([Color color = Colors.grey]) {
	if (color != currentColor) {
	_endPath();
	}
	if (hasPath) return;
	hasPath = true;
	canvas.beginPath();
	if (currentColor != color) {
	currentColor = color;
	canvas.strokeStyle = colorToCss(color);
	}
	canvas.lineWidth = chartLineStrokeWidth;
	}

	for (int tick in row.ticks) {
	currentX = getDepthIndent(tick) - columnWidth * 0.5;
	if (isVisible(1.0)) {
	final highlight = row.highlightDepth == tick;
	_maybeStart(highlight ? highlightLineColor : defaultTreeLineColor);
	canvas
	..moveTo(currentX, 0.0)
	..lineTo(currentX, rowHeight);
	}
	}
	if (row.lineToParent) {
	final highlight = row.highlightDepth == row.depth - 1;
	currentX = getDepthIndent(row.depth - 1) - columnWidth * 0.5;
	final double width = showExpandCollapse ? columnWidth * 0.5 : columnWidth;
	if (isVisible(width)) {
	_maybeStart(highlight ? highlightLineColor : defaultTreeLineColor);
	canvas
	..moveTo(currentX, 0.0)
	..lineTo(currentX, rowHeight * 0.5)
	..lineTo(currentX + width, rowHeight * 0.5);
	}
	}
	_endPath();

	*/
	// Render the main row content.
	if (renderObject == null) {
	return container;
	}
	currentX = getDepthIndent(row.depth - 1) - columnWidth;
	if (!row.node.showExpandCollapse) {
	currentX += columnWidth;
	}

	final rowContentContainer = Element.div();
	rowContentContainer.classes.add('inspector-tree-row-content');
	rowContentContainer.style.paddingLeft = '${currentX}px';
	final rowContent = Element.div();
	rowContentContainer.append(rowContent);
	renderObject.paint(rowContent);
	container.append(rowContentContainer);

	// TODO(jacobr): handle row selected backgrounds using CSS classes.
	return container;
	} catch (e, s) {
	print(s);
	return Element.div()..text = 'Error: $e, $s';
	}
	}

	@override
	void animateToTargets(List<InspectorTreeNode> targets) {
	// TODO: implement animateToTargets
	window.requestAnimationFrame((_) {
	for (var target in targets.reversed) {
	final InspectorTreeNodeHtmlRender renderObject = target.renderObject;
	// TODO(jacobr): be smarter about not calling this on all elements.
	renderObject?.element?.scrollIntoView();
	}
	});
	}

	@override
	String get tooltip => element.tooltip;

	@override
	set tooltip(String value) {
	element.tooltip = value;
	}
	}