[web] move useful utilities out DomRenderer

Author: yjbanov

lib/web_ui/lib/src/engine/canvas_pool.dart

@@ -11,7 +11,6 @@ import 'package:meta/meta.dart';
 import 'package:ui/ui.dart' as ui;
 
 import 'browser_detection.dart';
-import 'dom_renderer.dart';
 import 'engine_canvas.dart';
 import 'html/bitmap_canvas.dart';
 import 'html/painting.dart';
@@ -751,7 +750,7 @@ class CanvasPool extends _SaveStackTracking {
         rect.center.dx - shaderBounds.left;
     final double cy = shaderBounds == null ? rect.center.dy :
         rect.center.dy - shaderBounds.top;
-    DomRenderer.ellipse(context, cx, cy, rect.width / 2,
+    drawEllipse(context, cx, cy, rect.width / 2,
         rect.height / 2, 0, 0, 2.0 * math.pi, false);
     contextHandle.paint(style);
   }
@@ -762,7 +761,7 @@ class CanvasPool extends _SaveStackTracking {
     final ui.Rect? shaderBounds = contextHandle._shaderBounds;
     final double cx = shaderBounds == null ? c.dx : c.dx - shaderBounds.left;
     final double cy = shaderBounds == null ? c.dy : c.dy - shaderBounds.top;
-    DomRenderer.ellipse(context, cx, cy, radius, radius, 0, 0, 2.0 * math.pi, false);
+    drawEllipse(context, cx, cy, radius, radius, 0, 0, 2.0 * math.pi, false);
     contextHandle.paint(style);
   }
 

lib/web_ui/lib/src/engine/dom_renderer.dart

@@ -23,10 +23,6 @@ import 'window.dart';
 
 class DomRenderer {
   DomRenderer() {
-    if (assertionsEnabled) {
-      _debugFrameStatistics = DebugDomRendererFrameStatistics();
-    }
-
     reset();
 
     assert(() {
@@ -35,12 +31,6 @@ class DomRenderer {
     }());
   }
 
-  static const int vibrateLongPress = 50;
-  static const int vibrateLightImpact = 10;
-  static const int vibrateMediumImpact = 20;
-  static const int vibrateHeavyImpact = 30;
-  static const int vibrateSelectionClick = 10;
-
   // The tag name for the root view of the flutter app (glass-pane)
   static const String _glassPaneTagName = 'flt-glass-pane';
 
@@ -175,52 +165,6 @@ class DomRenderer {
 
   final html.Element rootElement = html.document.body!;
 
-  html.Element createElement(String tagName, {html.Element? parent}) {
-    final html.Element element = html.document.createElement(tagName);
-    parent?.append(element);
-    return element;
-  }
-
-  void appendText(html.Element parent, String text) {
-    parent.appendText(text);
-  }
-
-  static void setElementStyle(
-      html.Element element, String name, String? value) {
-    if (value == null) {
-      element.style.removeProperty(name);
-    } else {
-      element.style.setProperty(name, value);
-    }
-  }
-
-  static void setClipPath(html.Element element, String? value) {
-    if (browserEngine == BrowserEngine.webkit) {
-      if (value == null) {
-        element.style.removeProperty('-webkit-clip-path');
-      } else {
-        element.style.setProperty('-webkit-clip-path', value);
-      }
-    }
-    if (value == null) {
-      element.style.removeProperty('clip-path');
-    } else {
-      element.style.setProperty('clip-path', value);
-    }
-  }
-
-  void setThemeColor(ui.Color color) {
-    html.MetaElement? theme =
-        html.document.querySelector('#flutterweb-theme') as html.MetaElement?;
-    if (theme == null) {
-      theme = html.MetaElement()
-        ..id = 'flutterweb-theme'
-        ..name = 'theme-color';
-      html.document.head!.append(theme);
-    }
-    theme.content = colorToCssString(color)!;
-  }
-
   static const String defaultFontStyle = 'normal';
   static const String defaultFontWeight = 'normal';
   static const double defaultFontSize = 14;
@@ -313,7 +257,7 @@ class DomRenderer {
     // IMPORTANT: the glass pane element must come after the scene element in the DOM node list so
     //            it can intercept input events.
     _glassPaneElement?.remove();
-    final html.Element glassPaneElement = createElement(_glassPaneTagName);
+    final html.Element glassPaneElement = html.document.createElement(_glassPaneTagName);
     _glassPaneElement = glassPaneElement;
     glassPaneElement.style
       ..position = 'absolute'
@@ -331,11 +275,11 @@ class DomRenderer {
     _glassPaneShadow = glassPaneElementHostNode;
 
     // Don't allow the scene to receive pointer events.
-    _sceneHostElement = createElement('flt-scene-host')
+    _sceneHostElement = html.document.createElement('flt-scene-host')
       ..style.pointerEvents = 'none';
 
     final html.Element semanticsHostElement =
-        createElement('flt-semantics-host');
+        html.document.createElement('flt-semantics-host');
     semanticsHostElement.style
       ..position = 'absolute'
       ..transformOrigin = '0 0 0';
@@ -463,34 +407,6 @@ class DomRenderer {
     }
   }
 
-  static bool? _ellipseFeatureDetected;
-
-  /// Draws CanvasElement ellipse with fallback.
-  static void ellipse(
-      html.CanvasRenderingContext2D context,
-      double centerX,
-      double centerY,
-      double radiusX,
-      double radiusY,
-      double rotation,
-      double startAngle,
-      double endAngle,
-      bool antiClockwise) {
-    // ignore: implicit_dynamic_function
-    _ellipseFeatureDetected ??= js_util.getProperty(context, 'ellipse') != null;
-    if (_ellipseFeatureDetected!) {
-      context.ellipse(centerX, centerY, radiusX, radiusY, rotation, startAngle,
-          endAngle, antiClockwise);
-    } else {
-      context.save();
-      context.translate(centerX, centerY);
-      context.rotate(rotation);
-      context.scale(radiusX, radiusY);
-      context.arc(0, 0, 1, startAngle, endAngle, antiClockwise);
-      context.restore();
-    }
-  }
-
   static const String orientationLockTypeAny = 'any';
   static const String orientationLockTypeNatural = 'natural';
   static const String orientationLockTypeLandscape = 'landscape';
@@ -596,36 +512,14 @@ class DomRenderer {
 
   /// Removes a global resource element.
   void removeResource(html.Element? element) {
-    element?.remove();
-  }
-
-  /// Provides haptic feedback.
-  void vibrate(int durationMs) {
-    final html.Navigator navigator = html.window.navigator;
-    if (js_util.hasProperty(navigator, 'vibrate')) {
-      // ignore: implicit_dynamic_function
-      js_util.callMethod(navigator, 'vibrate', <num>[durationMs]);
+    if (element == null) {
+      return;
     }
+    assert(element.parent == _resourcesHost);
+    element.remove();
   }
 
   String get currentHtml => _rootApplicationElement?.outerHtml ?? '';
-
-  DebugDomRendererFrameStatistics? _debugFrameStatistics;
-
-  DebugDomRendererFrameStatistics? debugFlushFrameStatistics() {
-    if (!assertionsEnabled) {
-      throw Exception('This code should not be reachable in production.');
-    }
-    final DebugDomRendererFrameStatistics? current = _debugFrameStatistics;
-    _debugFrameStatistics = DebugDomRendererFrameStatistics();
-    return current;
-  }
-
-  void debugRulerCacheHit() => _debugFrameStatistics!.paragraphRulerCacheHits++;
-  void debugRulerCacheMiss() =>
-      _debugFrameStatistics!.paragraphRulerCacheMisses++;
-  void debugRichTextLayout() => _debugFrameStatistics!.richTextLayouts++;
-  void debugPlainTextLayout() => _debugFrameStatistics!.plainTextLayouts++;
 }
 
 // Applies the required global CSS to an incoming [html.CssStyleSheet] `sheet`.
@@ -752,45 +646,6 @@ void applyGlobalCssRulesToSheet(
   }
 }
 
-/// Miscellaneous statistics collecting during a single frame's execution.
-///
-/// This is useful when profiling the app. This class should only be used when
-/// assertions are enabled and therefore is not suitable for collecting any
-/// time measurements. It is mostly useful for counting certain events.
-class DebugDomRendererFrameStatistics {
-  /// The number of times we reused a previously initialized paragraph ruler to
-  /// measure a paragraph of text.
-  int paragraphRulerCacheHits = 0;
-
-  /// The number of times we had to create a new paragraph ruler to measure a
-  /// paragraph of text.
-  int paragraphRulerCacheMisses = 0;
-
-  /// The number of times we used a paragraph ruler to measure a paragraph of
-  /// text.
-  int get totalParagraphRulerAccesses =>
-      paragraphRulerCacheHits + paragraphRulerCacheMisses;
-
-  /// The number of times a paragraph of rich text was laid out this frame.
-  int richTextLayouts = 0;
-
-  /// The number of times a paragraph of plain text was laid out this frame.
-  int plainTextLayouts = 0;
-
-  @override
-  String toString() {
-    return '''
-Frame statistics:
-  Paragraph ruler cache hits: $paragraphRulerCacheHits
-  Paragraph ruler cache misses: $paragraphRulerCacheMisses
-  Paragraph ruler accesses: $totalParagraphRulerAccesses
-  Rich text layouts: $richTextLayouts
-  Plain text layouts: $plainTextLayouts
-'''
-        .trim();
-  }
-}
-
 /// Singleton DOM renderer.
 DomRenderer get domRenderer => ensureDomRendererInitialized();
 

lib/web_ui/lib/src/engine/html/backdrop_filter.dart

@@ -7,7 +7,6 @@ import 'dart:html' as html;
 import 'package:ui/ui.dart' as ui;
 
 import '../browser_detection.dart';
-import '../dom_renderer.dart';
 import '../util.dart';
 import '../vector_math.dart';
 import 'shaders/shader.dart';
@@ -122,10 +121,10 @@ class PersistedBackdropFilter extends PersistedContainerSurface
       // Gaussian blur with standard deviation (normal distribution),
       // the blur will fall within 2 * sigma pixels.
       if (browserEngine == BrowserEngine.webkit) {
-        DomRenderer.setElementStyle(_filterElement!, '-webkit-backdrop-filter',
+        setElementStyle(_filterElement!, '-webkit-backdrop-filter',
             filter.filterAttribute);
       }
-      DomRenderer.setElementStyle(_filterElement!, 'backdrop-filter', filter.filterAttribute);
+      setElementStyle(_filterElement!, 'backdrop-filter', filter.filterAttribute);
     }
   }
 

lib/web_ui/lib/src/engine/html/clip.dart

@@ -7,7 +7,6 @@ import 'dart:svg' as svg;
 
 import 'package:ui/ui.dart' as ui;
 
-import '../dom_renderer.dart';
 import '../shadow.dart';
 import '../util.dart';
 import 'dom_canvas.dart';
@@ -363,7 +362,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
     _clipElement = svgClipPath;
     rootElement!.append(_clipElement!);
     if (elevation == 0.0) {
-      DomRenderer.setClipPath(rootElement!, createSvgClipUrl());
+      setClipPath(rootElement!, createSvgClipUrl());
       final html.CssStyleDeclaration rootElementStyle = rootElement!.style;
       rootElementStyle
         ..overflow = ''
@@ -378,7 +377,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
       return;
     }
 
-    DomRenderer.setClipPath(childContainer!, createSvgClipUrl());
+    setClipPath(childContainer!, createSvgClipUrl());
     final html.CssStyleDeclaration rootElementStyle = rootElement!.style;
     rootElementStyle
       ..overflow = ''
@@ -438,7 +437,7 @@ class PersistedPhysicalShape extends PersistedContainerSurface
       _svgElement = null;
       // Reset style on prior element since we may have switched between
       // rect/rrect and arbitrary path.
-      DomRenderer.setClipPath(rootElement!, '');
+      setClipPath(rootElement!, '');
       _applyShape();
     } else {
       // Reuse clipElement from prior surface.
@@ -518,7 +517,7 @@ svg.SvgSvgElement createSvgClipDef(html.HtmlElement element, ui.Path clipPath) {
   final ui.Rect pathBounds = clipPath.getBounds();
   final svg.SvgSvgElement svgClipPath = pathToSvgClipPath(clipPath,
       scaleX: 1.0 / pathBounds.right, scaleY: 1.0 / pathBounds.bottom);
-  DomRenderer.setClipPath(element, createSvgClipUrl());
+  setClipPath(element, createSvgClipUrl());
   // We need to set width and height for the clipElement to cover the
   // bounds of the path since browsers such as Safari and Edge
   // seem to incorrectly intersect the element bounding rect with

lib/web_ui/lib/src/engine/html/dom_canvas.dart

@@ -165,7 +165,7 @@ html.HtmlElement buildDrawRectElement(
     ui.Rect rect, SurfacePaintData paint, String tagName, Matrix4 transform) {
   assert(paint.shader == null);
   final html.HtmlElement rectangle =
-      domRenderer.createElement(tagName) as html.HtmlElement;
+      html.document.createElement(tagName) as html.HtmlElement;
   assert(() {
     rectangle.setAttribute('flt-rect', '$rect');
     rectangle.setAttribute('flt-paint', '$paint');

lib/web_ui/lib/src/engine/html/offset.dart

@@ -6,7 +6,7 @@ import 'dart:html' as html;
 
 import 'package:ui/ui.dart' as ui;
 
-import '../dom_renderer.dart';
+import '../util.dart';
 import '../vector_math.dart';
 import 'surface.dart';
 
@@ -42,8 +42,8 @@ class PersistedOffset extends PersistedContainerSurface
   @override
   html.Element createElement() {
     final html.Element element = html.document.createElement('flt-offset');
-    DomRenderer.setElementStyle(element, 'position', 'absolute');
-    DomRenderer.setElementStyle(element, 'transform-origin', '0 0 0');
+    setElementStyle(element, 'position', 'absolute');
+    setElementStyle(element, 'transform-origin', '0 0 0');
     return element;
   }
 

lib/web_ui/lib/src/engine/html/opacity.dart

@@ -6,7 +6,7 @@ import 'dart:html' as html;
 
 import 'package:ui/ui.dart' as ui;
 
-import '../dom_renderer.dart';
+import '../util.dart';
 import '../vector_math.dart';
 import 'surface.dart';
 
@@ -43,16 +43,16 @@ class PersistedOpacity extends PersistedContainerSurface
 
   @override
   html.Element createElement() {
-    final html.Element element = domRenderer.createElement('flt-opacity');
-    DomRenderer.setElementStyle(element, 'position', 'absolute');
-    DomRenderer.setElementStyle(element, 'transform-origin', '0 0 0');
+    final html.Element element = html.document.createElement('flt-opacity');
+    setElementStyle(element, 'position', 'absolute');
+    setElementStyle(element, 'transform-origin', '0 0 0');
     return element;
   }
 
   @override
   void apply() {
     final html.Element element = rootElement!;
-    DomRenderer.setElementStyle(element, 'opacity', '${alpha / 255}');
+    setElementStyle(element, 'opacity', '${alpha / 255}');
     element.style.transform = 'translate(${offset.dx}px, ${offset.dy}px)';
   }
 

lib/web_ui/lib/src/engine/html/transform.dart

@@ -7,7 +7,6 @@ import 'dart:typed_data';
 
 import 'package:ui/ui.dart' as ui;
 
-import '../dom_renderer.dart';
 import '../util.dart';
 import '../vector_math.dart';
 import 'surface.dart';
@@ -43,9 +42,9 @@ class PersistedTransform extends PersistedContainerSurface
 
   @override
   html.Element createElement() {
-    final html.Element element = domRenderer.createElement('flt-transform');
-    DomRenderer.setElementStyle(element, 'position', 'absolute');
-    DomRenderer.setElementStyle(element, 'transform-origin', '0 0 0');
+    final html.Element element = html.document.createElement('flt-transform');
+    setElementStyle(element, 'position', 'absolute');
+    setElementStyle(element, 'transform-origin', '0 0 0');
     return element;
   }