Ladybird/Qt: Add a hover effect to the audio play state button

By default, a flat QPushButton does not have a hover effect. Add a small
subclass to provide such an effect to make it clearer it is a button.

Ladybird/CMakeLists.txt

@@ -124,6 +124,7 @@ if (ENABLE_QT)
         Qt/Settings.cpp
         Qt/SettingsDialog.cpp
         Qt/Tab.cpp
+        Qt/TabBar.cpp
         Qt/TaskManagerWindow.cpp
         Qt/TVGIconEngine.cpp
         Qt/StringUtils.cpp

Ladybird/Qt/BrowserWindow.cpp

@@ -15,6 +15,7 @@
 #include "TaskManagerWindow.h"
 #include "WebContentView.h"
 #include <AK/TypeCasts.h>
+#include <Ladybird/Qt/TabBar.h>
 #include <Ladybird/Utilities.h>
 #include <LibWeb/CSS/PreferredColorScheme.h>
 #include <LibWeb/Loader/ResourceLoader.h>
@@ -669,11 +670,9 @@ void BrowserWindow::tab_audio_play_state_changed(int index, Web::HTML::AudioPlay
         break;
 
     case Web::HTML::AudioPlayState::Playing:
-        auto* button = new QPushButton(icon_for_page_mute_state(*tab), {});
+        auto* button = new TabBarButton(icon_for_page_mute_state(*tab));
         button->setToolTip(tool_tip_for_page_mute_state(*tab));
         button->setObjectName("LadybirdAudioState");
-        button->setFlat(true);
-        button->resize({ 20, 20 });
 
         connect(button, &QPushButton::clicked, this, [this, tab, position]() {
             tab->view().toggle_page_mute_state();
@@ -685,7 +684,7 @@ void BrowserWindow::tab_audio_play_state_changed(int index, Web::HTML::AudioPlay
                 break;
             case Web::HTML::AudioPlayState::Playing:
                 auto* button = m_tabs_container->tabBar()->tabButton(index, position);
-                verify_cast<QPushButton>(button)->setIcon(icon_for_page_mute_state(*tab));
+                verify_cast<TabBarButton>(button)->setIcon(icon_for_page_mute_state(*tab));
                 button->setToolTip(tool_tip_for_page_mute_state(*tab));
                 break;
             }

Ladybird/Qt/TabBar.cpp

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2024, Tim Flynn <trflynn89@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include <Ladybird/Qt/TabBar.h>
+#include <QEvent>
+#include <QPushButton>
+
+namespace Ladybird {
+
+TabBarButton::TabBarButton(QIcon const& icon, QWidget* parent)
+    : QPushButton(icon, {}, parent)
+{
+    resize({ 20, 20 });
+    setFlat(true);
+}
+
+bool TabBarButton::event(QEvent* event)
+{
+    if (event->type() == QEvent::Enter)
+        setFlat(false);
+    if (event->type() == QEvent::Leave)
+        setFlat(true);
+
+    return QPushButton::event(event);
+}
+
+}

Ladybird/Qt/TabBar.h

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2024, Tim Flynn <trflynn89@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <QPushButton>
+
+class QEvent;
+class QIcon;
+class QWidget;
+
+namespace Ladybird {
+
+class TabBarButton : public QPushButton {
+    Q_OBJECT
+
+public:
+    explicit TabBarButton(QIcon const& icon, QWidget* parent = nullptr);
+
+protected:
+    bool event(QEvent* event);
+};
+
+}

Meta/gn/secondary/Ladybird/BUILD.gn

@@ -20,6 +20,7 @@ moc_qt_objects("generate_moc") {
     "Qt/LocationEdit.h",
     "Qt/SettingsDialog.h",
     "Qt/Tab.h",
+    "Qt/TabBar.h",
     "Qt/TaskManagerWindow.h",
     "Qt/WebContentView.h",
   ]
@@ -96,6 +97,7 @@ executable("ladybird_executable") {
       "Qt/StringUtils.cpp",
       "Qt/TVGIconEngine.cpp",
       "Qt/Tab.cpp",
+      "Qt/TabBar.cpp",
       "Qt/TaskManagerWindow.cpp",
       "Qt/WebContentView.cpp",
       "Qt/main.cpp",