fix!: classes on text input bubble to match comment view (#7935)

core/bubbles/bubble.ts

@@ -90,7 +90,11 @@ export abstract class Bubble implements IBubble {
     protected anchor: Coordinate,
     protected ownerRect?: Rect,
   ) {
-    this.svgRoot = dom.createSvgElement(Svg.G, {}, workspace.getBubbleCanvas());
+    this.svgRoot = dom.createSvgElement(
+      Svg.G,
+      {'class': 'blocklyBubble'},
+      workspace.getBubbleCanvas(),
+    );
     const embossGroup = dom.createSvgElement(
       Svg.G,
       {
@@ -100,7 +104,11 @@ export abstract class Bubble implements IBubble {
       },
       this.svgRoot,
     );
-    this.tail = dom.createSvgElement(Svg.PATH, {}, embossGroup);
+    this.tail = dom.createSvgElement(
+      Svg.PATH,
+      {'class': 'blocklyBubbleTail'},
+      embossGroup,
+    );
     this.background = dom.createSvgElement(
       Svg.RECT,
       {

core/bubbles/textinput_bubble.ts

@@ -75,10 +75,11 @@ export class TextInputBubble extends Bubble {
     protected ownerRect?: Rect,
   ) {
     super(workspace, anchor, ownerRect);
+    dom.addClass(this.svgRoot, 'blocklyTextInputBubble');
     ({inputRoot: this.inputRoot, textArea: this.textArea} = this.createEditor(
       this.contentContainer,
     ));
-    this.resizeGroup = this.createResizeHandle(this.svgRoot);
+    this.resizeGroup = this.createResizeHandle(this.svgRoot, workspace);
     this.setSize(this.DEFAULT_SIZE, true);
   }
 
@@ -126,7 +127,7 @@ export class TextInputBubble extends Bubble {
       dom.HTML_NS,
       'textarea',
     ) as HTMLTextAreaElement;
-    textArea.className = 'blocklyCommentTextarea';
+    textArea.className = 'blocklyTextarea blocklyText';
     textArea.setAttribute('dir', this.workspace.RTL ? 'RTL' : 'LTR');
 
     body.appendChild(textArea);
@@ -158,51 +159,27 @@ export class TextInputBubble extends Bubble {
   }
 
   /** Creates the resize handler elements and binds events to them. */
-  private createResizeHandle(container: SVGGElement): SVGGElement {
-    const resizeGroup = dom.createSvgElement(
-      Svg.G,
+  private createResizeHandle(
+    container: SVGGElement,
+    workspace: WorkspaceSvg,
+  ): SVGGElement {
+    const resizeHandle = dom.createSvgElement(
+      Svg.IMAGE,
       {
-        'class': this.workspace.RTL ? 'blocklyResizeSW' : 'blocklyResizeSE',
+        'class': 'blocklyResizeHandle',
+        'href': `${workspace.options.pathToMedia}resize-handle.svg`,
       },
       container,
     );
-    const size = 2 * Bubble.BORDER_WIDTH;
-    dom.createSvgElement(
-      Svg.POLYGON,
-      {'points': `0,${size} ${size},${size} ${size},0`},
-      resizeGroup,
-    );
-    dom.createSvgElement(
-      Svg.LINE,
-      {
-        'class': 'blocklyResizeLine',
-        'x1': size / 3,
-        'y1': size - 1,
-        'x2': size - 1,
-        'y2': size / 3,
-      },
-      resizeGroup,
-    );
-    dom.createSvgElement(
-      Svg.LINE,
-      {
-        'class': 'blocklyResizeLine',
-        'x1': (size * 2) / 3,
-        'y1': size - 1,
-        'x2': size - 1,
-        'y2': (size * 2) / 3,
-      },
-      resizeGroup,
-    );
 
     browserEvents.conditionalBind(
-      resizeGroup,
+      resizeHandle,
       'pointerdown',
       this,
       this.onResizePointerDown,
     );
 
-    return resizeGroup;
+    return resizeHandle;
   }
 
   /**