Code review comment fixes.

lib/inspector/inspector_tree.dart

@@ -11,6 +11,7 @@
 /// and will help simplify porting this code to work with Hummingbird.
 library inspector_tree;
 
+import 'dart:math' as math;
 import 'package:meta/meta.dart';
 
 import '../ui/fake_flutter/fake_flutter.dart';
@@ -57,9 +58,10 @@ final Icon collapseArrow = MaterialIcon(
 );
 
 final Icon expandArrow = MaterialIcon(
-  'arrow_right',
+  'arrow_drop_down',
   arrowColor,
   fontSize: 32,
+  angle: -math.pi / 2, // -90 degrees
   iconWidth: (columnWidth - iconPadding).toInt(),
 );
 

lib/ui/html_icon_renderer.dart

@@ -24,6 +24,7 @@ abstract class HtmlIconRenderer<T extends Icon> {
   HtmlIconRenderer(this.icon);
 
   CanvasImageSource get image;
+
   bool get loaded => image != null;
 
   CoreElement createCoreElement() {
@@ -52,6 +53,7 @@ abstract class HtmlIconRenderer<T extends Icon> {
   final T icon;
 
   int get iconWidth => icon.iconWidth;
+
   int get iconHeight => icon.iconHeight;
 }
 
@@ -175,6 +177,7 @@ class _ColorIconRenderer extends HtmlIconRenderer<ColorIcon> {
 
   @override
   int get iconWidth => 18;
+
   @override
   int get iconHeight => 18;
 }
@@ -259,38 +262,73 @@ class _CustomIconRenderer extends HtmlIconRenderer<CustomIcon> {
   }
 }
 
-// TODO(jacobr): this renderer assumes the material design font is already
-// loaded. Fix this code to listen for when the font to be loaded and only
-// provide the image at that point.
 class _MaterialIconRenderer extends HtmlIconRenderer<MaterialIcon> {
   _MaterialIconRenderer(MaterialIcon icon) : super(icon);
 
   @override
   CanvasImageSource get image {
     if (_image != null) return _image;
+    if (!_fontLoaded) return null;
 
     _image = createCanvasSource();
     return _image;
   }
 
   CanvasElement _image;
+  Future<CanvasElement> _imageFuture;
+
+  static FontFace _iconsFont;
+  static Future<FontFace> _iconsFontFuture;
+  static bool _fontLoaded = false;
 
   @override
-  Future<CanvasImageSource> loadImage() async => image;
+  Future<CanvasImageSource> loadImage() {
+    if (_imageFuture != null) {
+      return _imageFuture;
+    }
+    if (_fontLoaded) {
+      return Future.value(image);
+    }
+    Completer<CanvasElement> imageCompleter = Completer();
+    if (!_fontLoaded) {
+      if (_iconsFont == null) {
+        _iconsFont = new FontFace(
+          'Material Icons',
+          'url(packages/devtools/ui/MaterialIcons-Regular.woff2)',
+        );
+        document.fonts.add(_iconsFont);
+        _iconsFontFuture = _iconsFont.load();
+        _iconsFontFuture.then((_) {
+          _fontLoaded = true;
+        });
+      }
+
+      _iconsFontFuture.then((_) {
+        _image = createCanvasSource();
+        imageCompleter.complete(_image);
+      });
+    }
+    return imageCompleter.future;
+  }
 
   @override
   CanvasImageSource createCanvasSource() {
     final canvas = CanvasElement(
       width: iconWidth * window.devicePixelRatio,
       height: iconHeight * window.devicePixelRatio,
     );
-    canvas.context2D
+    final context2D = canvas.context2D
       ..scale(window.devicePixelRatio, window.devicePixelRatio)
+      ..translate(iconWidth / 2, iconHeight / 2);
+    if (icon.angle != 0) {
+      context2D.rotate(icon.angle);
+    }
+    context2D
       ..font = '${icon.fontSize}px Material Icons'
       ..fillStyle = colorToCss(icon.color)
       ..textBaseline = 'middle'
       ..textAlign = 'center'
-      ..fillText(icon.text, iconWidth / 2, iconHeight / 2, iconWidth + 10);
+      ..fillText(icon.text, 0, 0, iconWidth + 10);
     return canvas;
   }
 }

lib/ui/material_icons.dart

@@ -15,12 +15,13 @@ class MaterialIcon extends Icon {
     this.color, {
     this.fontSize = 18,
     this.iconWidth = 18,
+    this.angle = 0,
   });
 
   final String text;
   final Color color;
   final int fontSize;
-
+  final double angle;
   @override
   final int iconWidth;
 }

web/index.html

@@ -22,7 +22,6 @@
     <link rel="stylesheet" href="packages/devtools/debugger/debugger.css">
     <link rel="stylesheet" href="packages/devtools/inspector/inspector.css">
     <link rel="stylesheet" href="packages/devtools/logging/logging.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link href="packages/codemirror/codemirror.css" rel="stylesheet">
     <script src="packages/codemirror/codemirror.js"></script>
 
@@ -38,12 +37,7 @@
 
         <nav class="masthead-nav" id="main-nav">
             <!-- add the known pages -->
-            <a disabled><span class="octicon octicon-device-mobile"></span><span> Inspector</span></a>
-            <a disabled><span class="octicon octicon-bug"></span><span> Debugger</span></a>
-            <a disabled><span class="octicon octicon-package"></span><span> Memory</span></a>
-            <a disabled><span class="octicon octicon-pulse"></span><span> Timeline</span></a>
-            <a disabled><span class="octicon octicon-dashboard"></span><span> Performance</span></a>
-            <a disabled><span class="octicon octicon-clippy"></span><span> Logging</span></a>
+            <a disabled><span class="octicon octicon-device-mobile"></span><span> Inspector</span></a><a disabled><span class="octicon octicon-bug"></span><span> Debugger</span></a><a disabled><span class="octicon octicon-package"></span><span> Memory</span></a><a disabled><span class="octicon octicon-pulse"></span><span> Timeline</span></a><a disabled><span class="octicon octicon-dashboard"></span><span> Performance</span></a><a disabled><span class="octicon octicon-clippy"></span><span> Logging</span></a>
         </nav>
     </div>
 </header>

web/styles.css

@@ -706,3 +706,37 @@ but a more subtle solution would be better.
     bottom: 30px;
     z-index: 10;
 }
+
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Material Icons'),
+    local('MaterialIcons-Regular'),
+    url(packages/devtools/ui/MaterialIcons-Regular.woff2) format('woff2');
+}
+
+.material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;  /* Preferred icon size */
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+
+    /* Support for IE. */
+    font-feature-settings: 'liga';
+}