fix: Fix bug that preventing scrolling menu items into view. (#8726)

* fix: Fix bug that preventing scrolling menu items into view.

* chore: Deprecate now-unused-in-core functions in style.

(cherry picked from commit 0c20129a26)

core/field_dropdown.ts

@@ -29,7 +29,6 @@ import {Coordinate} from './utils/coordinate.js';
 import * as dom from './utils/dom.js';
 import * as parsing from './utils/parsing.js';
 import * as utilsString from './utils/string.js';
-import * as style from './utils/style.js';
 import {Svg} from './utils/svg.js';
 
 /**
@@ -304,11 +303,6 @@ export class FieldDropdown extends Field<string> {
 
     if (this.selectedMenuItem) {
       this.menu_!.setHighlighted(this.selectedMenuItem);
-      style.scrollIntoContainerView(
-        this.selectedMenuItem.getElement()!,
-        dropDownDiv.getContentDiv(),
-        true,
-      );
     }
 
     this.applyColour();

core/menu.ts

@@ -260,10 +260,11 @@ export class Menu {
       this.highlightedItem = item;
       // Bring the highlighted item into view. This has no effect if the menu is
       // not scrollable.
-      const el = this.getElement() as Element;
-      style.scrollIntoContainerView(item.getElement() as Element, el);
-
-      aria.setState(el, aria.State.ACTIVEDESCENDANT, item.getId());
+      const el = this.getElement();
+      if (el) {
+        aria.setState(el, aria.State.ACTIVEDESCENDANT, item.getId());
+      }
+      item.getElement()?.scrollIntoView();
     }
   }
 

core/utils/style.ts

@@ -7,6 +7,7 @@
 // Former goog.module ID: Blockly.utils.style
 
 import {Coordinate} from './coordinate.js';
+import * as deprecation from './deprecation.js';
 import {Rect} from './rect.js';
 import {Size} from './size.js';
 
@@ -58,6 +59,7 @@ function getSizeInternal(element: Element): Size {
  * @returns Object with width/height properties.
  */
 function getSizeWithDisplay(element: Element): Size {
+  deprecation.warn(`Blockly.utils.style.getSizeWithDisplay()`, 'v11.2', 'v13');
   const offsetWidth = (element as HTMLElement).offsetWidth;
   const offsetHeight = (element as HTMLElement).offsetHeight;
   return new Size(offsetWidth, offsetHeight);
@@ -130,6 +132,7 @@ export function getViewportPageOffset(): Coordinate {
  * @returns The computed border widths.
  */
 export function getBorderBox(element: Element): Rect {
+  deprecation.warn(`Blockly.utils.style.getBorderBox()`, 'v11.2', 'v13');
   const left = parseFloat(getComputedStyle(element, 'borderLeftWidth'));
   const right = parseFloat(getComputedStyle(element, 'borderRightWidth'));
   const top = parseFloat(getComputedStyle(element, 'borderTopWidth'));
@@ -156,6 +159,12 @@ export function scrollIntoContainerView(
   container: Element,
   opt_center?: boolean,
 ) {
+  deprecation.warn(
+    `Blockly.utils.style.scrollIntoContainerView()`,
+    'v11.2',
+    'v13',
+    'the native Element.scrollIntoView()',
+  );
   const offset = getContainerOffsetToScrollInto(element, container, opt_center);
   container.scrollLeft = offset.x;
   container.scrollTop = offset.y;
@@ -180,6 +189,11 @@ export function getContainerOffsetToScrollInto(
   container: Element,
   opt_center?: boolean,
 ): Coordinate {
+  deprecation.warn(
+    `Blockly.utils.style.getContainerOffsetToScrollInto()`,
+    'v11.2',
+    'v13',
+  );
   // Absolute position of the element's border's top left corner.
   const elementPos = getPageOffset(element);
   // Absolute position of the container's border's top left corner.