refactor!: Improve ability to use CSS to style Blockly. (#8647)

* refactor!: Rename blocklyTreeIconClosed to blocklyToolboxCategoryIconClosed.

* refactor!: Rename blocklyTreeLabel to blocklyToolboxCategoryLabel

* refactor!: Rename blocklyToolboxDiv to blocklyToolbox.

* refactor: remove unreferenced CSS classes.

* refactor!: Remove the blocklyArrowTop and blocklyArrowBottom classes.

* feat: Add a blocklyTextInputField class to text fields.

core/css.ts

@@ -132,22 +132,12 @@ let content = `
   z-index: -1;
   background-color: inherit;
   border-color: inherit;
-}
-
-.blocklyArrowTop {
   border-top: 1px solid;
   border-left: 1px solid;
   border-top-left-radius: 4px;
   border-color: inherit;
 }
 
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
 .blocklyHighlightedConnectionPath {
   fill: none;
   stroke: #fc3;
@@ -243,10 +233,6 @@ let content = `
   cursor: inherit;
 }
 
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
 .blocklyIconGroup {
   cursor: default;
 }

core/dropdowndiv.ts

@@ -697,19 +697,12 @@ function positionInternal(
 
   // Update arrow CSS.
   if (metrics.arrowVisible) {
+    const x = metrics.arrowX;
+    const y = metrics.arrowY;
+    const rotation = metrics.arrowAtTop ? 45 : 225;
     arrow.style.display = '';
-    arrow.style.transform =
-      'translate(' +
-      metrics.arrowX +
-      'px,' +
-      metrics.arrowY +
-      'px) rotate(45deg)';
-    arrow.setAttribute(
-      'class',
-      metrics.arrowAtTop
-        ? 'blocklyDropDownArrow blocklyArrowTop'
-        : 'blocklyDropDownArrow blocklyArrowBottom',
-    );
+    arrow.style.transform = `translate(${x}px, ${y}px) rotate(${rotation}deg)`;
+    arrow.setAttribute('class', 'blocklyDropDownArrow');
   } else {
     arrow.style.display = 'none';
   }

core/field_textinput.ts

@@ -22,6 +22,7 @@ import {
 } from './field_input.js';
 import * as fieldRegistry from './field_registry.js';
 import * as parsing from './utils/parsing.js';
+import * as dom from './utils/dom.js';
 
 /**
  * Class for an editable text field.
@@ -49,6 +50,13 @@ export class FieldTextInput extends FieldInput<string> {
     super(value, validator, config);
   }
 
+  override initView() {
+    super.initView();
+    if (this.fieldGroup_) {
+      dom.addClass(this.fieldGroup_, 'blocklyTextInputField');
+    }
+  }
+
   /**
    * Ensure that the input value casts to a valid string.
    *

core/toolbox/category.ts

@@ -135,11 +135,11 @@ export class ToolboxCategory
       'row': 'blocklyToolboxCategory',
       'rowcontentcontainer': 'blocklyTreeRowContentContainer',
       'icon': 'blocklyToolboxCategoryIcon',
-      'label': 'blocklyTreeLabel',
+      'label': 'blocklyToolboxCategoryLabel',
       'contents': 'blocklyToolboxCategoryGroup',
       'selected': 'blocklyToolboxSelected',
       'openicon': 'blocklyToolboxCategoryIconOpen',
-      'closedicon': 'blocklyTreeIconClosed',
+      'closedicon': 'blocklyToolboxCategoryIconClosed',
     };
   }
 
@@ -663,11 +663,11 @@ Css.register(`
   background-color: rgba(255, 255, 255, .2);
 }
 
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategoryContainer {
+.blocklyToolbox[layout="h"] .blocklyToolboxCategoryContainer {
   margin: 1px 5px 1px 0;
 }
 
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategoryContainer {
+.blocklyToolbox[dir="RTL"][layout="h"] .blocklyToolboxCategoryContainer {
   margin: 1px 0 1px 5px;
 }
 
@@ -679,7 +679,7 @@ Css.register(`
   white-space: nowrap;
 }
 
-.blocklyToolboxDiv[dir="RTL"] .blocklyToolboxCategory {
+.blocklyToolbox[dir="RTL"] .blocklyToolboxCategory {
   margin-left: 8px;
   padding-right: 0;
 }
@@ -692,19 +692,19 @@ Css.register(`
   width: 16px;
 }
 
-.blocklyTreeIconClosed {
+.blocklyToolboxCategoryIconClosed {
   background-position: -32px -1px;
 }
 
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
+.blocklyToolbox[dir="RTL"] .blocklyToolboxCategoryIconClosed {
   background-position: 0 -1px;
 }
 
-.blocklyToolboxSelected>.blocklyTreeIconClosed {
+.blocklyToolboxSelected>.blocklyToolboxCategoryIconClosed {
   background-position: -32px -17px;
 }
 
-.blocklyToolboxDiv[dir="RTL"] .blocklyToolboxSelected>.blocklyTreeIconClosed {
+.blocklyToolbox[dir="RTL"] .blocklyToolboxSelected>.blocklyToolboxCategoryIconClosed {
   background-position: 0 -17px;
 }
 
@@ -716,18 +716,18 @@ Css.register(`
   background-position: -16px -17px;
 }
 
-.blocklyTreeLabel {
+.blocklyToolboxCategoryLabel {
   cursor: default;
   font: 16px sans-serif;
   padding: 0 3px;
   vertical-align: middle;
 }
 
-.blocklyToolboxDelete .blocklyTreeLabel {
+.blocklyToolboxDelete .blocklyToolboxCategoryLabel {
   cursor: url("<<<PATH>>>/handdelete.cur"), auto;
 }
 
-.blocklyToolboxSelected .blocklyTreeLabel {
+.blocklyToolboxSelected .blocklyToolboxCategoryLabel {
   color: #fff;
 }
 `);

core/toolbox/separator.ts

@@ -88,7 +88,7 @@ Css.register(`
   margin: 5px 0;
 }
 
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
+.blocklyToolbox[layout="h"] .blocklyTreeSeparator {
   border-right: solid #e5e5e5 1px;
   border-bottom: none;
   height: auto;

core/toolbox/toolbox.ts

@@ -198,7 +198,7 @@ export class Toolbox
   protected createContainer_(): HTMLDivElement {
     const toolboxContainer = document.createElement('div');
     toolboxContainer.setAttribute('layout', this.isHorizontal() ? 'h' : 'v');
-    dom.addClass(toolboxContainer, 'blocklyToolboxDiv');
+    dom.addClass(toolboxContainer, 'blocklyToolbox');
     toolboxContainer.setAttribute('dir', this.RTL ? 'RTL' : 'LTR');
     return toolboxContainer;
   }
@@ -1107,7 +1107,7 @@ Css.register(`
 }
 
 /* Category tree in Toolbox. */
-.blocklyToolboxDiv {
+.blocklyToolbox {
   user-select: none;
   -ms-user-select: none;
   -webkit-user-select: none;