feat(ui): add zoom in/out buttons and menu

src/libs/browser/webcontrol.cpp

@@ -73,6 +73,11 @@ int WebControl::zoomLevel() const
     return m_webView->zoomLevel();
 }
 
+int WebControl::zoomLevelPercentage() const
+{
+    return m_webView->availableZoomLevels().at(zoomLevel());
+}
+
 void WebControl::setZoomLevel(int level)
 {
     m_webView->setZoomLevel(level);

src/libs/browser/webcontrol.h

@@ -54,6 +54,7 @@ class WebControl final : public QWidget
     QByteArray saveHistory() const;
 
     int zoomLevel() const;
+    int zoomLevelPercentage() const;
     void setZoomLevel(int level);
     void setJavaScriptEnabled(bool enabled);
 

src/libs/ui/browsertab.cpp

@@ -25,6 +25,7 @@
 #include "searchsidebar.h"
 #include "widgets/layouthelper.h"
 #include "widgets/toolbarframe.h"
+#include "widgets/browserzoomwidget.h"
 
 #include <browser/webcontrol.h>
 #include <core/application.h>
@@ -34,12 +35,15 @@
 #include <registry/searchquery.h>
 
 #include <QApplication>
+#include <QKeyEvent>
 #include <QLabel>
 #include <QMenu>
+#include <QPushButton>
 #include <QStyle>
 #include <QToolButton>
 #include <QVBoxLayout>
 #include <QWebEngineHistory>
+#include <QWidgetAction>
 
 using namespace Zeal;
 using namespace Zeal::WidgetUi;
@@ -124,6 +128,44 @@ BrowserTab::BrowserTab(QWidget *parent)
 
         label->setText(title);
     });
+    m_browserActionButton = new QToolButton();
+    m_browserActionButton->setAutoRaise(true);
+    m_browserActionButton->setText(QStringLiteral("⋮"));
+    m_browserActionButton->setArrowType(Qt::NoArrow);
+    m_browserActionButton->setPopupMode(QToolButton::InstantPopup);
+
+    auto zoomActionWidget = new BrowserZoomWidget();
+
+    connect(zoomActionWidget->zoomInButton(), &QPushButton::clicked, [this, zoomActionWidget]() {
+        m_webControl->zoomIn();
+        const auto zoomLevel = QString("%1%").arg(m_webControl->zoomLevelPercentage());
+        zoomActionWidget->zoomLevelLabel()->setText(zoomLevel);
+    });
+
+    connect(zoomActionWidget->zoomOutButton(), &QPushButton::clicked, [this, zoomActionWidget]() {
+        m_webControl->zoomOut();
+        const auto zoomLevel = QString("%1%").arg(m_webControl->zoomLevelPercentage());
+        zoomActionWidget->zoomLevelLabel()->setText(zoomLevel);
+    });
+
+    connect(zoomActionWidget->resetZoomButton(), &QPushButton::clicked, [this, zoomActionWidget]() {
+        m_webControl->resetZoom();
+        const auto zoomLevel = QString("%1%").arg(m_webControl->zoomLevelPercentage());
+        zoomActionWidget->zoomLevelLabel()->setText(zoomLevel);
+    });
+
+    auto zoomWidgetAction = new QWidgetAction(this);
+    zoomWidgetAction->setDefaultWidget(zoomActionWidget);
+
+    auto browserActionsMenu = new QMenu(m_browserActionButton);
+    browserActionsMenu->addAction(zoomWidgetAction);
+
+    connect(browserActionsMenu, &QMenu::aboutToShow, [this, zoomActionWidget] () {
+        const auto zoomLevel = QString("%1%").arg(m_webControl->zoomLevelPercentage());
+        zoomActionWidget->zoomLevelLabel()->setText(zoomLevel);
+    });
+
+    m_browserActionButton->setMenu(browserActionsMenu);
 
     auto toolBarLayout = new QHBoxLayout();
     toolBarLayout->setContentsMargins(4, 0, 4, 0);
@@ -132,6 +174,7 @@ BrowserTab::BrowserTab(QWidget *parent)
     toolBarLayout->addWidget(m_backButton);
     toolBarLayout->addWidget(m_forwardButton);
     toolBarLayout->addWidget(label, 1);
+    toolBarLayout->addWidget(m_browserActionButton);
 
     auto toolBarFrame = new ToolBarFrame();
     toolBarFrame->setLayout(toolBarLayout);

src/libs/ui/browsertab.h

@@ -70,8 +70,12 @@ public slots:
     // Widgets.
     SearchSidebar *m_searchSidebar = nullptr;
     Browser::WebControl *m_webControl = nullptr;
+    QAction *m_browserZoomInAction = nullptr;
+    QAction *m_browserZoomOutAction = nullptr;
+    QAction *m_browserResetZoomAction = nullptr;
     QToolButton *m_backButton = nullptr;
     QToolButton *m_forwardButton = nullptr;
+    QToolButton *m_browserActionButton = nullptr;
 };
 
 } // namespace WidgetUi

src/libs/ui/mainwindow.cpp

@@ -139,14 +139,15 @@ MainWindow::MainWindow(Core::Application *app, QWidget *parent)
     connect(shortcut, &QShortcut::activated, this, [this]() { currentTab()->webControl()->back(); });
     shortcut = new QShortcut(QKeySequence::Forward, this);
     connect(shortcut, &QShortcut::activated, this, [this]() { currentTab()->webControl()->forward(); });
-    shortcut = new QShortcut(QKeySequence::ZoomIn, this);
-    connect(shortcut, &QShortcut::activated, this, [this]() { currentTab()->webControl()->zoomIn(); });
     shortcut = new QShortcut(QStringLiteral("Ctrl+="), this);
     connect(shortcut, &QShortcut::activated, this, [this]() { currentTab()->webControl()->zoomIn(); });
-    shortcut = new QShortcut(QKeySequence::ZoomOut, this);
-    connect(shortcut, &QShortcut::activated, this, [this]() { currentTab()->webControl()->zoomOut(); });
-    shortcut = new QShortcut(QStringLiteral("Ctrl+0"), this);
-    connect(shortcut, &QShortcut::activated, this, [this]() { currentTab()->webControl()->resetZoom(); });
+
+    ui->actionResetZoom->setShortcut(QKeySequence(QStringLiteral("Ctrl+0")));
+    ui->actionZoomIn->setShortcut(QKeySequence::ZoomIn);
+    ui->actionZoomOut->setShortcut(QKeySequence::ZoomOut);
+    connect(ui->actionResetZoom, &QAction::triggered, this, [this] { currentTab()->webControl()->resetZoom(); });
+    connect(ui->actionZoomIn, &QAction::triggered, this, [this] { currentTab()->webControl()->zoomIn(); });
+    connect(ui->actionZoomOut, &QAction::triggered, this, [this] { currentTab()->webControl()->zoomOut(); });
 
     // Tools Menu
     connect(ui->actionDocsets, &QAction::triggered, this, [this]() {

src/libs/ui/mainwindow.ui

@@ -65,7 +65,7 @@
      <x>0</x>
      <y>0</y>
      <width>900</width>
-     <height>20</height>
+     <height>23</height>
     </rect>
    </property>
    <widget class="QMenu" name="menuFile">
@@ -90,7 +90,16 @@
     <property name="title">
      <string>&amp;Edit</string>
     </property>
+    <widget class="QMenu" name="menu_Zoom">
+     <property name="title">
+      <string>&amp;Zoom</string>
+     </property>
+     <addaction name="actionZoomIn"/>
+     <addaction name="actionZoomOut"/>
+     <addaction name="actionResetZoom"/>
+    </widget>
     <addaction name="actionFind"/>
+    <addaction name="menu_Zoom"/>
     <addaction name="separator"/>
     <addaction name="actionPreferences"/>
    </widget>
@@ -180,6 +189,21 @@
     <string>&amp;Docsets…</string>
    </property>
   </action>
+  <action name="actionZoomIn">
+   <property name="text">
+    <string>Zoon &amp;In</string>
+   </property>
+  </action>
+  <action name="actionZoomOut">
+   <property name="text">
+    <string>Zoom &amp;Out</string>
+   </property>
+  </action>
+  <action name="actionResetZoom">
+   <property name="text">
+    <string>&amp;Reset Zoom</string>
+   </property>
+  </action>
  </widget>
  <layoutdefault spacing="6" margin="11"/>
  <resources/>

src/libs/ui/widgets/CMakeLists.txt

@@ -3,6 +3,7 @@ add_library(Widgets STATIC
     searchedit.cpp
     shortcutedit.cpp
     toolbarframe.cpp
+    browserzoomwidget.cpp
 )
 
 find_package(Qt${QT_VERSION_MAJOR} COMPONENTS Widgets REQUIRED)

src/libs/ui/widgets/browserzoomwidget.cpp

@@ -0,0 +1,75 @@
+#include "browserzoomwidget.h"
+#include <QColor>
+#include <QPalette>
+#include <QPushButton>
+#include <QLabel>
+#include <QHBoxLayout>
+#include <QString>
+
+BrowserZoomWidget::BrowserZoomWidget(QWidget *parent)
+: QWidget(parent)
+{
+    const auto highlightedBackgroundColor = palette().highlight().color().name();
+    const auto highlightedTextColor = palette().highlightedText().color().name();
+    const auto styleSheet
+        = QString("QPushButton:hover { background-color: %1; color: %2; border: none; }").arg(highlightedBackgroundColor)
+                                                                                          .arg(highlightedTextColor);
+    setStyleSheet(styleSheet);
+    setMouseTracking(true);
+    auto zoomLabel = new QLabel(tr("Zoom"));
+    zoomLabel->setMouseTracking(true);
+    zoomLabel->setAlignment(Qt::AlignRight | Qt::AlignVCenter);
+
+    constexpr int maxButtonWidth = 32;
+
+    m_zoomOutButton = new QPushButton(QStringLiteral("-"));
+    m_zoomOutButton->setMouseTracking(true);
+    m_zoomOutButton->setMaximumWidth(maxButtonWidth);
+    m_zoomOutButton->setToolTip(tr("Zoom out"));
+
+    m_zoomOutButton->setFlat(true);
+    m_zoomLevelLabel = new QLabel("100%");
+    m_zoomLevelLabel->setAlignment(Qt::AlignRight | Qt::AlignVCenter);
+    m_zoomLevelLabel->setMouseTracking(true);
+    m_zoomLevelLabel->setToolTip(tr("Current zoom level"));
+
+    m_zoomInButton = new QPushButton(QStringLiteral("+"));
+    m_zoomInButton->setFlat(true);
+    m_zoomInButton->setMouseTracking(true);
+    m_zoomInButton->setMaximumWidth(maxButtonWidth);
+    m_zoomInButton->setToolTip(tr("Zoom in"));
+
+    m_resetZoomButton = new QPushButton(QStringLiteral("↻"));
+    m_resetZoomButton->setFlat(true);
+    m_resetZoomButton->setMouseTracking(true);
+    m_resetZoomButton->setMaximumWidth(maxButtonWidth);
+    m_resetZoomButton->setToolTip(tr("Reset zoom level"));
+
+    auto layout = new QHBoxLayout(this);
+    layout->setSpacing(2);
+    layout->addWidget(zoomLabel);
+    layout->addWidget(m_zoomOutButton);
+    layout->addWidget(m_zoomLevelLabel);
+    layout->addWidget(m_zoomInButton);
+    layout->addWidget(m_resetZoomButton);
+}
+
+QPushButton *BrowserZoomWidget::zoomOutButton()
+{
+    return m_zoomOutButton;
+}
+
+QPushButton *BrowserZoomWidget::zoomInButton()
+{
+    return m_zoomInButton;
+}
+
+QPushButton *BrowserZoomWidget::resetZoomButton()
+{
+    return m_resetZoomButton;
+}
+
+QLabel *BrowserZoomWidget::zoomLevelLabel()
+{
+    return m_zoomLevelLabel;
+}

src/libs/ui/widgets/browserzoomwidget.h

@@ -0,0 +1,26 @@
+#ifndef BROWSERZOOMWIDGET_H
+#define BROWSERZOOMWIDGET_H
+
+#include <QWidget>
+
+class QPushButton;
+class QLabel;
+
+class BrowserZoomWidget : public QWidget
+{
+    Q_OBJECT
+public:
+    explicit BrowserZoomWidget(QWidget *parent = nullptr);
+    QPushButton *zoomOutButton();
+    QPushButton *zoomInButton();
+    QPushButton *resetZoomButton();
+    QLabel *zoomLevelLabel();
+
+private:
+    QPushButton *m_zoomOutButton{nullptr};
+    QPushButton *m_zoomInButton{nullptr};
+    QPushButton *m_resetZoomButton{nullptr};
+    QLabel *m_zoomLevelLabel{nullptr};
+};
+
+#endif // BROWSERZOOMWIDGETACTION_H