Cleanup Blockly UI components. (#3723)

* Cleanup Blockly UI components. Remove unnecessary getters
2026-01-08 17:40:09 +01:00 · 2020-03-11 10:40:16 -07:00
parent 13ac939b91
commit eb07793ba8
7 changed files with 68 additions and 217 deletions
--- a/core/components/component.js
+++ b/core/components/component.js
@@ -30,7 +30,7 @@ Blockly.Component = function() {
  /**
   * Whether the component is rendered right-to-left.
   * @type {boolean}
-   * @private
+   * @protected
   */
  this.rightToLeft_ = Blockly.Component.defaultRightToLeft;

@@ -496,17 +496,6 @@ Blockly.Component.prototype.getContentElement = function() {
  return this.element_;
 };

-/**
- * Returns true if the component is rendered right-to-left, false otherwise.
- * The first time this function is invoked, the right-to-left rendering property
- * is set if it has not been already.
- * @return {boolean} Whether the control is rendered right-to-left.
- * @protected
- */
-Blockly.Component.prototype.isRightToLeft = function() {
-  return this.rightToLeft_;
-};
-
 /**
 * Set is right-to-left. This function should be used if the component needs
 * to know the rendering direction during DOM creation (i.e. before
--- a/core/components/menu/menuitem.js
+++ b/core/components/menu/menuitem.js
@@ -67,7 +67,7 @@ Blockly.MenuItem.prototype.createDom = function() {
  element.className = 'goog-menuitem goog-option ' +
      (!this.enabled_ ? 'goog-menuitem-disabled ' : '') +
      (this.checked_ ? 'goog-option-selected ' : '') +
-      (this.isRightToLeft() ? 'goog-menuitem-rtl ' : '');
+      (this.rightToLeft_ ? 'goog-menuitem-rtl ' : '');

  var content = this.getContentWrapperDom();
  element.appendChild(content);
--- a/core/components/tree/basenode.js
+++ b/core/components/tree/basenode.js
@@ -33,31 +33,31 @@ goog.require('Blockly.utils.style');
 Blockly.tree.BaseNode = function(content, config) {
  Blockly.Component.call(this);

-  /**
-   * The configuration for the tree.
-   * @type {!Blockly.tree.BaseNode.Config}
-   * @private
-   */
-  this.config_ = config;
-
  /**
   * Text content of the node label.
   * @type {string}
-   * @private
+   * @package
   */
-  this.content_ = content;
+  this.content = content;

  /**
   * @type {string}
-   * @private
+   * @package
   */
-  this.iconClass_;
+  this.iconClass;

  /**
   * @type {string}
-   * @private
+   * @package
   */
-  this.expandedIconClass_;
+  this.expandedIconClass;
+
+  /**
+   * The configuration for the tree.
+   * @type {!Blockly.tree.BaseNode.Config}
+   * @protected
+   */
+  this.config_ = config;

  /**
   * @type {Blockly.tree.TreeControl}
@@ -77,48 +77,29 @@ Blockly.tree.BaseNode = function(content, config) {
   */
  this.nextSibling_;

-  /**
-   * @type {Blockly.tree.BaseNode}
-   * @private
-   */
-  this.firstChild_;
-
-  /**
-   * @type {Blockly.tree.BaseNode}
-   * @private
-   */
-  this.lastChild_;
-
  /**
   * Whether the tree item is selected.
   * @type {boolean}
-   * @private
+   * @protected
   */
  this.selected_ = false;

  /**
   * Whether the tree node is expanded.
   * @type {boolean}
-   * @private
+   * @protected
   */
  this.expanded_ = false;

-  /**
-   * Tooltip for the tree item
-   * @type {?string}
-   * @private
-   */
-  this.toolTip_ = null;
-
  /**
   * Whether to allow user to collapse this node.
   * @type {boolean}
-   * @private
+   * @protected
   */
  this.isUserCollapsible_ = true;

  /**
-   * Nesting depth of this node; cached result of computeDepth_.
+   * Nesting depth of this node; cached result of getDepth.
   * -1 if value has not been cached.
   * @type {number}
   * @private
@@ -255,13 +236,9 @@ Blockly.tree.BaseNode.prototype.addChildAt = function(child, index) {

  if (prevNode) {
    prevNode.nextSibling_ = child;
-  } else {
-    this.firstChild_ = child;
  }
  if (nextNode) {
    nextNode.previousSibling_ = child;
-  } else {
-    this.lastChild_ = child;
  }

  var tree = this.getTree();
@@ -275,8 +252,8 @@ Blockly.tree.BaseNode.prototype.addChildAt = function(child, index) {
  if (el) {
    this.updateExpandIcon();
    Blockly.utils.aria.setState(
-        el, Blockly.utils.aria.State.EXPANDED, this.getExpanded());
-    if (this.getExpanded()) {
+        el, Blockly.utils.aria.State.EXPANDED, this.expanded_);
+    if (this.expanded_) {
      var childrenEl = this.getChildrenElement();
      if (!child.getElement()) {
        child.createDom();
@@ -294,7 +271,7 @@ Blockly.tree.BaseNode.prototype.addChildAt = function(child, index) {
          prevNode.updateExpandIcon();
        } else {
          Blockly.utils.style.setElementShown(childrenEl, true);
-          this.setExpanded(this.getExpanded());
+          this.setExpanded(this.expanded_);
        }
      }
    }
@@ -330,27 +307,17 @@ Blockly.tree.BaseNode.prototype.getTree = function() {
 Blockly.tree.BaseNode.prototype.getDepth = function() {
  var depth = this.depth_;
  if (depth < 0) {
-    depth = this.computeDepth_();
+    var parent = this.getParent();
+    if (parent) {
+      depth = parent.getDepth() + 1;
+    } else {
+      depth = 0;
+    }
    this.setDepth_(depth);
  }
  return depth;
 };

-/**
- * Computes the depth of the node in the tree.
- * Called only by getDepth, when the depth hasn't already been cached.
- * @return {number} The non-negative depth of this node (the root is zero).
- * @private
- */
-Blockly.tree.BaseNode.prototype.computeDepth_ = function() {
-  var parent = this.getParent();
-  if (parent) {
-    return parent.getDepth() + 1;
-  } else {
-    return 0;
-  }
-};
-
 /**
 * Changes the depth of a node (and all its descendants).
 * @param {number} depth The new nesting depth; must be non-negative.
@@ -362,7 +329,7 @@ Blockly.tree.BaseNode.prototype.setDepth_ = function(depth) {
    var row = this.getRowElement();
    if (row) {
      var indent = this.getPixelIndent_() + 'px';
-      if (this.isRightToLeft()) {
+      if (this.rightToLeft_) {
        row.style.paddingRight = indent;
      } else {
        row.style.paddingLeft = indent;
@@ -410,22 +377,6 @@ Blockly.tree.BaseNode.prototype.getChildren = function() {
  return children;
 };

-/**
- * @return {Blockly.tree.BaseNode} The first child of this node.
- * @protected
- */
-Blockly.tree.BaseNode.prototype.getFirstChild = function() {
-  return this.getChildAt(0);
-};
-
-/**
- * @return {Blockly.tree.BaseNode} The last child of this node.
- * @protected
- */
-Blockly.tree.BaseNode.prototype.getLastChild = function() {
-  return this.getChildAt(this.getChildCount() - 1);
-};
-
 /**
 * @return {Blockly.tree.BaseNode} The previous sibling of this node.
 * @protected
@@ -469,23 +420,12 @@ Blockly.tree.BaseNode.prototype.select = function() {
  }
 };

-/**
- * Selects the first node.
- * @protected
- */
-Blockly.tree.BaseNode.prototype.selectFirst = function() {
-  var tree = this.getTree();
-  if (tree && this.firstChild_) {
-    tree.setSelectedItem(this.firstChild_);
-  }
-};
-
 /**
 * Called from the tree to instruct the node change its selection state.
 * @param {boolean} selected The new selection state.
 * @protected
 */
-Blockly.tree.BaseNode.prototype.setSelectedInternal = function(selected) {
+Blockly.tree.BaseNode.prototype.setSelected = function(selected) {
  if (this.selected_ == selected) {
    return;
  }
@@ -504,23 +444,6 @@ Blockly.tree.BaseNode.prototype.setSelectedInternal = function(selected) {
  }
 };

-/**
- * @return {boolean} Whether the node is expanded.
- * @protected
- */
-Blockly.tree.BaseNode.prototype.getExpanded = function() {
-  return this.expanded_;
-};
-
-/**
- * Sets the node to be expanded internally, without state change events.
- * @param {boolean} expanded Whether to expand or close the node.
- * @protected
- */
-Blockly.tree.BaseNode.prototype.setExpandedInternal = function(expanded) {
-  this.expanded_ = expanded;
-};
-
 /**
 * Sets the node to be expanded.
 * @param {boolean} expanded Whether to expand or close the node.
@@ -596,15 +519,7 @@ Blockly.tree.BaseNode.prototype.doNodeCollapsed = function() {
 * @protected
 */
 Blockly.tree.BaseNode.prototype.toggle = function() {
-  this.setExpanded(!this.getExpanded());
-};
-
-/**
- * @return {boolean} Whether the node is collapsible by user actions.
- * @protected
- */
-Blockly.tree.BaseNode.prototype.isUserCollapsible = function() {
-  return this.isUserCollapsible_;
+  this.setExpanded(!this.expanded_);
 };

 /**
@@ -613,7 +528,7 @@ Blockly.tree.BaseNode.prototype.isUserCollapsible = function() {
 * @protected
 */
 Blockly.tree.BaseNode.prototype.toDom = function() {
-  var nonEmptyAndExpanded = this.getExpanded() && this.hasChildren();
+  var nonEmptyAndExpanded = this.expanded_ && this.hasChildren();

  var children = document.createElement('div');
  children.style.backgroundPosition = this.getBackgroundPosition();
@@ -650,7 +565,7 @@ Blockly.tree.BaseNode.prototype.getPixelIndent_ = function() {
 Blockly.tree.BaseNode.prototype.getRowDom = function() {
  var row = document.createElement('div');
  row.className = this.getRowClassName();
-  row.style['padding-' + (this.isRightToLeft() ? 'right' : 'left')] =
+  row.style['padding-' + (this.rightToLeft_ ? 'right' : 'left')] =
      this.getPixelIndent_() + 'px';

  row.appendChild(this.getIconDom());
@@ -678,7 +593,7 @@ Blockly.tree.BaseNode.prototype.getRowClassName = function() {
 Blockly.tree.BaseNode.prototype.getLabelDom = function() {
  var label = document.createElement('span');
  label.className = this.config_.cssItemLabel || '';
-  label.textContent = this.getText();
+  label.textContent = this.content;
  return label;
 };

@@ -762,43 +677,6 @@ Blockly.tree.BaseNode.prototype.getChildrenElement = function() {
  return el ? /** @type {Element} */ (el.lastChild) : null;
 };

-/**
- * Gets the icon class for the node.
- * @return {string} s The icon source.
- * @protected
- */
-Blockly.tree.BaseNode.prototype.getIconClass = function() {
-  return this.iconClass_;
-};
-
-/**
- * Gets the icon class for when the node is expanded.
- * @return {string} The class.
- * @protected
- */
-Blockly.tree.BaseNode.prototype.getExpandedIconClass = function() {
-  return this.expandedIconClass_;
-};
-
-/**
- * Sets the text of the label.
- * @param {string} s The plain text of the label.
- * @protected
- */
-Blockly.tree.BaseNode.prototype.setText = function(s) {
-  this.content_ = s;
-};
-
-/**
- * Returns the text of the label. If the text was originally set as HTML, the
- * return value is unspecified.
- * @return {string} The plain text of the label.
- * @package
- */
-Blockly.tree.BaseNode.prototype.getText = function() {
-  return this.content_;
-};
-
 /**
 * Updates the row styles.
 * @protected
@@ -933,7 +811,7 @@ Blockly.tree.BaseNode.prototype.selectPrevious = function() {
 * @package
 */
 Blockly.tree.BaseNode.prototype.selectParent = function() {
-  if (this.hasChildren() && this.getExpanded() && this.isUserCollapsible_) {
+  if (this.hasChildren() && this.expanded_ && this.isUserCollapsible_) {
    this.setExpanded(false);
  } else {
    var parent = this.getParent();
@@ -954,10 +832,10 @@ Blockly.tree.BaseNode.prototype.selectParent = function() {
 */
 Blockly.tree.BaseNode.prototype.selectChild = function() {
  if (this.hasChildren()) {
-    if (!this.getExpanded()) {
+    if (!this.expanded_) {
      this.setExpanded(true);
    } else {
-      this.getFirstChild().select();
+      this.getChildAt(0).select();
    }
    return true;
  }
@@ -969,11 +847,11 @@ Blockly.tree.BaseNode.prototype.selectChild = function() {
 * @protected
 */
 Blockly.tree.BaseNode.prototype.getLastShownDescendant = function() {
-  if (!this.getExpanded() || !this.hasChildren()) {
+  if (!this.expanded_ || !this.hasChildren()) {
    return this;
  }
  // we know there is at least 1 child
-  return this.getLastChild().getLastShownDescendant();
+  return this.getChildAt(this.getChildCount() - 1).getLastShownDescendant();
 };

 /**
@@ -982,8 +860,8 @@ Blockly.tree.BaseNode.prototype.getLastShownDescendant = function() {
 * @protected
 */
 Blockly.tree.BaseNode.prototype.getNextShownNode = function() {
-  if (this.hasChildren() && this.getExpanded()) {
-    return this.getFirstChild();
+  if (this.hasChildren() && this.expanded_) {
+    return this.getChildAt(0);
  } else {
    var parent = this;
    var next;
@@ -1019,14 +897,6 @@ Blockly.tree.BaseNode.prototype.getPreviousShownNode = function() {
  return /** @type {Blockly.tree.BaseNode} */ (parent);
 };

-/**
- * @return {!Blockly.tree.BaseNode.Config} The configuration for the tree.
- * @protected
- */
-Blockly.tree.BaseNode.prototype.getConfig = function() {
-  return this.config_;
-};
-
 /**
 * Internal method that is used to set the tree control on the node.
 * @param {Blockly.tree.TreeControl} tree The tree control.
--- a/core/components/tree/treecontrol.js
+++ b/core/components/tree/treecontrol.js
@@ -64,9 +64,9 @@ Blockly.tree.TreeControl = function(toolbox, config) {
  Blockly.tree.BaseNode.call(this, '', config);

  // The root is open and selected by default.
-  this.setExpandedInternal(true);
-  this.setSelectedInternal(true);
-
+  this.expanded_ = true;
+  this.selected_ = true;
+  
  /**
   * Currently selected item.
   * @type {Blockly.tree.BaseNode}
@@ -136,14 +136,9 @@ Blockly.tree.TreeControl.prototype.hasFocus = function() {
  return this.focused_;
 };

-/** @override */
-Blockly.tree.TreeControl.prototype.getExpanded = function() {
-  return true;
-};
-
 /** @override */
 Blockly.tree.TreeControl.prototype.setExpanded = function(expanded) {
-  this.setExpandedInternal(expanded);
+  this.expanded_ = expanded;
 };

 /** @override */
@@ -160,7 +155,7 @@ Blockly.tree.TreeControl.prototype.updateExpandIcon = function() {
 /** @override */
 Blockly.tree.TreeControl.prototype.getRowClassName = function() {
  return Blockly.tree.TreeControl.superClass_.getRowClassName.call(this) +
-      ' ' + this.getConfig().cssHideRoot;
+      ' ' + this.config_.cssHideRoot;
 };

 /**
@@ -169,20 +164,18 @@ Blockly.tree.TreeControl.prototype.getRowClassName = function() {
 * @override
 */
 Blockly.tree.TreeControl.prototype.getCalculatedIconClass = function() {
-  var expanded = this.getExpanded();
-  var expandedIconClass = this.getExpandedIconClass();
-  if (expanded && expandedIconClass) {
-    return expandedIconClass;
+  var expanded = this.expanded_;
+  if (expanded && this.expandedIconClass) {
+    return this.expandedIconClass;
  }
-  var iconClass = this.getIconClass();
+  var iconClass = this.iconClass;
  if (!expanded && iconClass) {
    return iconClass;
  }

  // fall back on default icons
-  var config = this.getConfig();
-  if (expanded && config.cssExpandedRootIcon) {
-    return config.cssTreeIcon + ' ' + config.cssExpandedRootIcon;
+  if (expanded && this.config_.cssExpandedRootIcon) {
+    return this.config_.cssTreeIcon + ' ' + this.config_.cssExpandedRootIcon;
  }
  return '';
 };
@@ -205,13 +198,13 @@ Blockly.tree.TreeControl.prototype.setSelectedItem = function(node) {
  var oldNode = this.getSelectedItem();

  if (this.selectedItem_) {
-    this.selectedItem_.setSelectedInternal(false);
+    this.selectedItem_.setSelected(false);
  }

  this.selectedItem_ = node;

  if (node) {
-    node.setSelectedInternal(true);
+    node.setSelected(true);
  }

  if (this.onAfterSelected_) {
@@ -265,7 +258,7 @@ Blockly.tree.TreeControl.prototype.initAccessibility = function() {
 Blockly.tree.TreeControl.prototype.enterDocument = function() {
  Blockly.tree.TreeControl.superClass_.enterDocument.call(this);
  var el = this.getElement();
-  el.className = this.getConfig().cssRoot;
+  el.className = this.config_.cssRoot;
  el.setAttribute('hideFocus', 'true');
  this.attachEvents_();
  this.initAccessibility();
@@ -392,5 +385,5 @@ Blockly.tree.TreeControl.prototype.getNodeFromEvent_ = function(e) {
 */
 Blockly.tree.TreeControl.prototype.createNode = function(opt_content) {
  return new Blockly.tree.TreeNode(
-      this.toolbox_, opt_content || '', this.getConfig());
+      this.toolbox_, opt_content || '', this.config_);
 };
--- a/core/components/tree/treenode.js
+++ b/core/components/tree/treenode.js
@@ -61,18 +61,17 @@ Blockly.tree.TreeNode.prototype.getTree = function() {
 * @override
 */
 Blockly.tree.TreeNode.prototype.getCalculatedIconClass = function() {
-  var expanded = this.getExpanded();
-  var expandedIconClass = this.getExpandedIconClass();
-  if (expanded && expandedIconClass) {
-    return expandedIconClass;
+  var expanded = this.expanded_;
+  if (expanded && this.expandedIconClass) {
+    return this.expandedIconClass;
  }
-  var iconClass = this.getIconClass();
+  var iconClass = this.iconClass;
  if (!expanded && iconClass) {
    return iconClass;
  }

  // fall back on default icons
-  var config = this.getConfig();
+  var config = this.config_;
  if (this.hasChildren()) {
    if (expanded && config.cssExpandedFolderIcon) {
      return config.cssTreeIcon + ' ' + config.cssExpandedFolderIcon;
@@ -94,7 +93,7 @@ Blockly.tree.TreeNode.prototype.getCalculatedIconClass = function() {
 */
 Blockly.tree.TreeNode.prototype.onClick_ = function(_e) {
  // Expand icon.
-  if (this.hasChildren() && this.isUserCollapsible()) {
+  if (this.hasChildren() && this.isUserCollapsible_) {
    this.toggle();
    this.select();
  } else if (this.isSelected()) {
@@ -128,8 +127,8 @@ Blockly.tree.TreeNode.prototype.onKeyDown = function(e) {
    var map = {};
    var next = Blockly.utils.KeyCodes.DOWN;
    var prev = Blockly.utils.KeyCodes.UP;
-    map[Blockly.utils.KeyCodes.RIGHT] = this.isRightToLeft() ? prev : next;
-    map[Blockly.utils.KeyCodes.LEFT] = this.isRightToLeft() ? next : prev;
+    map[Blockly.utils.KeyCodes.RIGHT] = this.rightToLeft_ ? prev : next;
+    map[Blockly.utils.KeyCodes.LEFT] = this.rightToLeft_ ? next : prev;
    map[Blockly.utils.KeyCodes.UP] = Blockly.utils.KeyCodes.LEFT;
    map[Blockly.utils.KeyCodes.DOWN] = Blockly.utils.KeyCodes.RIGHT;

--- a/core/toolbox.js
+++ b/core/toolbox.js
@@ -302,7 +302,7 @@ Blockly.Toolbox.prototype.handleAfterTreeSelected_ = function(
  }
  if (oldNode != newNode && oldNode != this) {
    var event = new Blockly.Events.Ui(null, 'category',
-        oldNode && oldNode.getText(), newNode && newNode.getText());
+        oldNode && oldNode.content, newNode && newNode.content);
    event.workspaceId = this.workspace_.id;
    Blockly.Events.fire(event);
  }
@@ -709,7 +709,7 @@ Blockly.Toolbox.prototype.refreshSelection = function() {
 Blockly.Toolbox.prototype.selectFirstCategory = function() {
  var selectedItem = this.tree_.getSelectedItem();
  if (!selectedItem) {
-    this.tree_.selectFirst();
+    this.tree_.selectChild();
  }
 };

--- a/tests/mocha/navigation_test.js
+++ b/tests/mocha/navigation_test.js
@@ -45,7 +45,7 @@ suite('Navigation', function() {
        }
      };

-      this.firstCategory_ = this.workspace.getToolbox().tree_.firstChild_;
+      this.firstCategory_ = this.workspace.getToolbox().tree_.getChildAt(0);
      this.secondCategory_ = this.firstCategory_.getNextShownNode();
    });

@@ -248,7 +248,7 @@ suite('Navigation', function() {
      }]);
      this.workspace = createNavigationWorkspace(true);
      this.basicBlock = this.workspace.newBlock('basic_block');
-      this.firstCategory_ = this.workspace.getToolbox().tree_.firstChild_;
+      this.firstCategory_ = this.workspace.getToolbox().tree_.getChildAt(0);
      this.mockEvent = {
        getModifierState: function() {
          return false;