From 00d77456c9123ce0ad9d0aa397ae55970c0b3220 Mon Sep 17 00:00:00 2001
From: Aaron Dodson <adodson@google.com>
Date: Wed, 12 Mar 2025 09:27:47 -0700
Subject: [PATCH] =?UTF-8?q?Revert=20"fix!:=20Remove=20the=20blocklyMenuIte?=
 =?UTF-8?q?mHighlight=20CSS=20class=20and=20use=20the=20hover=E2=80=A6"=20?=
 =?UTF-8?q?(#8800)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit d6125d4fb94ac7f4ab9e57a2944a5aa1c6ead328.
---
 core/css.ts      |  3 ++-
 core/menu.ts     |  2 ++
 core/menuitem.ts | 21 +++++++++++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/core/css.ts b/core/css.ts
index 00bbc0e02..51d410d0b 100644
--- a/core/css.ts
+++ b/core/css.ts
@@ -438,7 +438,8 @@ input[type=number] {
   cursor: inherit;
 }
 
-.blocklyMenuItem:hover {
+/* State: hover. */
+.blocklyMenuItemHighlight {
   background-color: rgba(0,0,0,.1);
 }
 
diff --git a/core/menu.ts b/core/menu.ts
index acb5a3780..6baab2149 100644
--- a/core/menu.ts
+++ b/core/menu.ts
@@ -249,9 +249,11 @@ export class Menu {
   setHighlighted(item: MenuItem | null) {
     const currentHighlighted = this.highlightedItem;
     if (currentHighlighted) {
+      currentHighlighted.setHighlighted(false);
       this.highlightedItem = null;
     }
     if (item) {
+      item.setHighlighted(true);
       this.highlightedItem = item;
       // Bring the highlighted item into view. This has no effect if the menu is
       // not scrollable.
diff --git a/core/menuitem.ts b/core/menuitem.ts
index 7136d3f49..ebeb9404b 100644
--- a/core/menuitem.ts
+++ b/core/menuitem.ts
@@ -12,6 +12,7 @@
 // Former goog.module ID: Blockly.MenuItem
 
 import * as aria from './utils/aria.js';
+import * as dom from './utils/dom.js';
 import * as idGenerator from './utils/idgenerator.js';
 
 /**
@@ -67,6 +68,7 @@ export class MenuItem {
       'blocklyMenuItem ' +
       (this.enabled ? '' : 'blocklyMenuItemDisabled ') +
       (this.checked ? 'blocklyMenuItemSelected ' : '') +
+      (this.highlight ? 'blocklyMenuItemHighlight ' : '') +
       (this.rightToLeft ? 'blocklyMenuItemRtl ' : '');
 
     const content = document.createElement('div');
@@ -175,6 +177,25 @@ export class MenuItem {
     this.checked = checked;
   }
 
+  /**
+   * Highlights or unhighlights the component.
+   *
+   * @param highlight Whether to highlight or unhighlight the component.
+   * @internal
+   */
+  setHighlighted(highlight: boolean) {
+    this.highlight = highlight;
+    const el = this.getElement();
+    if (el && this.isEnabled()) {
+      const name = 'blocklyMenuItemHighlight';
+      if (highlight) {
+        dom.addClass(el, name);
+      } else {
+        dom.removeClass(el, name);
+      }
+    }
+  }
+
   /**
    * Returns true if the menu item is enabled, false otherwise.
    *