add debugger to Markdown web viewer by F12

src/core/buffer/buffer.cpp

@@ -61,6 +61,7 @@ void Buffer::attachViewWindow(ViewWindow *p_win)
 
 void Buffer::detachViewWindow(ViewWindow *p_win)
 {
+    Q_UNUSED(p_win);
     Q_ASSERT(p_win != m_viewWindowToSync);
 
     --m_attachedViewWindowCount;

src/core/configmgr.cpp

@@ -25,7 +25,7 @@
 using namespace vnotex;
 
 #ifndef QT_NO_DEBUG
-    #define VX_DEBUG_WEB
+    // #define VX_DEBUG_WEB
 #endif
 
 const QString ConfigMgr::c_orgName = "VNote";
@@ -171,7 +171,7 @@ bool ConfigMgr::checkAppConfig()
 
 #ifndef VX_DEBUG_WEB
     if (!needUpdate) {
-        return;
+        return false;
     }
 #endif
 
@@ -215,7 +215,7 @@ bool ConfigMgr::checkAppConfig()
         FileUtils::copyFile(getConfigFilePath(Source::Default), mainConfigFilePath);
         FileUtils::copyDir(extraDataRoot + QStringLiteral("/web"),
                            appConfigDir.filePath(QStringLiteral("web")));
-        return needUpdate;
+        return false;
     }
 #else
     Q_ASSERT(needUpdate);

src/core/editorconfig.h

@@ -59,6 +59,7 @@ namespace vnotex
             FindPrevious,
             ApplySnippet,
             Tag,
+            Debug,
             MaxShortcut
         };
         Q_ENUM(Shortcut)

src/data/core/core.qrc

@@ -77,6 +77,7 @@
         <file>icons/maximize_restore.svg</file>
         <file>icons/close.svg</file>
         <file>icons/delete.svg</file>
+        <file>icons/debug_editor.svg</file>
         <file>icons/stay_on_top.svg</file>
         <file>icons/outline_editor.svg</file>
         <file>icons/find_replace_editor.svg</file>

src/data/core/icons/debug_editor.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1636007276787" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3786" width="512" height="512" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M1022.06544 583.40119c0 11.0558-4.034896 20.61962-12.111852 28.696576-8.077979 8.077979-17.639752 12.117992-28.690436 12.117992L838.446445 624.215758c0 72.690556-14.235213 134.320195-42.718941 184.89915l132.615367 133.26312c8.076956 8.065699 12.117992 17.634636 12.117992 28.690436 0 11.050684-4.034896 20.614503-12.117992 28.691459-7.653307 8.065699-17.209964 12.106736-28.690436 12.106736-11.475356 0-21.040199-4.041036-28.690436-12.106736L744.717737 874.15318c-2.124384 2.118244-5.308913 4.88424-9.558703 8.283664-4.259 3.3984-13.180184 9.463536-26.78504 18.171871-13.598716 8.715499-27.415396 16.473183-41.439808 23.276123-14.029528 6.797823-31.462572 12.966313-52.289923 18.49319-20.827351 5.517667-41.446971 8.28571-61.842487 8.28571L552.801776 379.38668l-81.611739 0 0 571.277058c-21.668509 0-43.250036-2.874467-64.707744-8.615215-21.473057-5.734608-39.960107-12.749372-55.476499-21.039175-15.518438-8.289804-29.541827-16.572444-42.077328-24.867364-12.541641-8.290827-21.781072-15.193027-27.739784-20.714787l-9.558703-8.93244L154.95056 998.479767c-8.500605 8.921183-18.699897 13.386892-30.606065 13.386892-10.201339 0-19.335371-3.40454-27.409257-10.202363-8.079002-7.652284-12.437264-17.10968-13.080923-28.372188-0.633427-11.263531 2.659573-21.143553 9.893324-29.647227l128.787178-144.727219c-24.650423-48.464805-36.980239-106.699114-36.980239-174.710091L42.738895 624.207571c-11.057847 0-20.61655-4.041036-28.690436-12.111852-8.079002-8.082072-12.120039-17.640776-12.120039-28.696576 0-11.050684 4.041036-20.61962 12.120039-28.689413 8.073886-8.072863 17.632589-12.107759 28.690436-12.107759l142.81466 0L185.553555 355.156836l-110.302175-110.302175c-8.074909-8.077979-12.113899-17.640776-12.113899-28.691459 0-11.04966 4.044106-20.61962 12.113899-28.690436 8.071839-8.076956 17.638729-12.123109 28.691459-12.123109 11.056823 0 20.612457 4.052293 28.692482 12.123109l110.302175 110.302175 538.128077 0 110.303198-110.302175c8.070816-8.076956 17.632589-12.123109 28.690436-12.123109 11.050684 0 20.617573 4.052293 28.689413 12.123109 8.077979 8.070816 12.119015 17.640776 12.119015 28.690436 0 11.050684-4.041036 20.614503-12.119015 28.691459l-110.302175 110.302175 0 187.448206 142.815683 0c11.0558 0 20.618597 4.034896 28.690436 12.113899 8.076956 8.069793 12.117992 17.638729 12.117992 28.683273l0 0L1022.06544 583.40119 1022.06544 583.40119zM716.021162 216.158085 307.968605 216.158085c0-56.526411 19.871583-104.667851 59.616796-144.414087 39.733956-39.746236 87.88256-59.611679 144.411017-59.611679 56.529481 0 104.678084 19.865443 144.413064 59.611679C696.156742 111.48921 716.021162 159.631674 716.021162 216.158085L716.021162 216.158085 716.021162 216.158085 716.021162 216.158085z" p-id="3787" fill="#000000"></path></svg>

src/data/core/vnotex.json

@@ -62,7 +62,7 @@
             "OpenLastClosedFile" : "Ctrl+Shift+T"
         },
         "toolbar_icon_size" : 16,
-        "docks_tabbar_icon_size" : 26,
+        "docks_tabbar_icon_size" : 24,
         "note_management" : {
             "external_node" : {
                 "//comment" : "Wildcard patterns of files and folders to exclude as external files",
@@ -119,7 +119,8 @@
                 "FindNext" : "F3",
                 "FindPrevious" : "Shift+F3",
                 "ApplySnippet" : "Ctrl+G, I",
-                "Tag" : "Ctrl+G, B"
+                "Tag" : "Ctrl+G, B",
+                "Debug" : "F12"
             },
             "spell_check_auto_detect_language" : false,
             "spell_check_default_dictionary" : "en_US",

src/widgets/markdownviewwindow.cpp

@@ -126,10 +126,20 @@ void MarkdownViewWindow::setModeInternal(ViewWindowMode p_mode, bool p_syncBuffe
 
     case ViewWindowMode::Edit:
     {
+        if (m_debugViewer && m_debugViewer->isVisible()) {
+            toggleDebug();
+        }
+
+        bool hideViewer = true;
         if (!m_editor) {
             // We need viewer to preview.
             if (!m_viewer) {
                 setupViewer();
+
+                // Must show the viewer to let it init with the correct DPI.
+                // Will hide it when viewerReady().
+                m_viewer->show();
+                hideViewer = false;
             }
 
             setupTextEditor();
@@ -143,8 +153,10 @@ void MarkdownViewWindow::setModeInternal(ViewWindowMode p_mode, bool p_syncBuffe
         m_editor->show();
         m_editor->setFocus();
 
+        if (hideViewer) {
             Q_ASSERT(m_viewer);
             m_viewer->hide();
+        }
 
         getMainStatusWidget()->setCurrentWidget(m_textEditorStatusWidget.get());
         break;
@@ -274,6 +286,10 @@ void MarkdownViewWindow::setupToolBar()
                         m_editor->setInplacePreviewEnabled(p_checked);
                     }
                 });
+        connect(this, &ViewWindow::modeChanged,
+                this, [this, act]() {
+                    act->setEnabled(inModeCanInsert() && getBuffer());
+                });
     }
 
     addAction(toolBar, ViewWindowToolBarHelper::ImageHost);
@@ -301,6 +317,14 @@ void MarkdownViewWindow::setupToolBar()
     ToolBarHelper::addSpacer(toolBar);
     addAction(toolBar, ViewWindowToolBarHelper::FindAndReplace);
     addAction(toolBar, ViewWindowToolBarHelper::Outline);
+
+    {
+        auto act = addAction(toolBar, ViewWindowToolBarHelper::Debug);
+        connect(this, &ViewWindow::modeChanged,
+                this, [this, act]() {
+                    act->setEnabled(m_mode != ViewWindowMode::Edit);
+                });
+    }
 }
 
 void MarkdownViewWindow::setupTextEditor()
@@ -459,6 +483,12 @@ void MarkdownViewWindow::setupViewer()
             this, [this](const QStringList &p_texts, int p_totalMatches, int p_currentMatchIndex) {
                 this->showFindResult(p_texts, p_totalMatches, p_currentMatchIndex);
             });
+    connect(adapter, &MarkdownViewerAdapter::viewerReady,
+            this, [this]() {
+                if (m_mode == ViewWindowMode::Edit) {
+                    m_viewer->hide();
+                }
+            });
 }
 
 void MarkdownViewWindow::syncTextEditorFromBuffer(bool p_syncPositionFromReadMode)
@@ -1187,3 +1217,35 @@ bool MarkdownViewWindow::updateConfigRevision()
 
     return changed;
 }
+
+void MarkdownViewWindow::toggleDebug()
+{
+    Q_ASSERT(m_viewer);
+    if (m_debugViewer) {
+        bool shouldEnable = !m_debugViewer->isVisible();
+        m_debugViewer->setVisible(shouldEnable);
+        m_viewer->page()->setDevToolsPage(shouldEnable ? m_debugViewer->page() : nullptr);
+    } else {
+        setupDebugViewer();
+        m_viewer->page()->setDevToolsPage(m_debugViewer->page());
+    }
+}
+
+void MarkdownViewWindow::setupDebugViewer()
+{
+    Q_ASSERT(!m_debugViewer);
+
+    // Need a vertical QSplitter to hold the original QSplitter and the debug viewer.
+    auto mainSplitter = new QSplitter(this);
+    mainSplitter->setContentsMargins(0, 0, 0, 0);
+    mainSplitter->setOrientation(Qt::Vertical);
+
+    replaceCentralWidget(mainSplitter);
+
+    mainSplitter->addWidget(m_splitter);
+    mainSplitter->setFocusProxy(m_splitter);
+
+    m_debugViewer = new WebViewer(VNoteX::getInst().getThemeMgr().getBaseBackground(), this);
+    m_debugViewer->resize(m_splitter->width(), m_splitter->height() / 2);
+    mainSplitter->addWidget(m_debugViewer);
+}

src/widgets/markdownviewwindow.h

@@ -7,6 +7,7 @@
 
 class QSplitter;
 class QStackedWidget;
+class QWebEngineView;
 
 namespace vte
 {
@@ -76,6 +77,8 @@ namespace vnotex
 
         void handleFindAndReplaceWidgetOpened() Q_DECL_OVERRIDE;
 
+        void toggleDebug() Q_DECL_OVERRIDE;
+
     protected:
         void syncEditorFromBuffer() Q_DECL_OVERRIDE;
 
@@ -159,6 +162,8 @@ namespace vnotex
 
         bool updateConfigRevision();
 
+        void setupDebugViewer();
+
         template <class T>
         static QSharedPointer<Outline> headingsToOutline(const QVector<T> &p_headings);
 
@@ -181,6 +186,9 @@ namespace vnotex
 
         QSharedPointer<QStackedWidget> m_mainStatusWidget;
 
+        // Used to debug web view.
+        QWebEngineView *m_debugViewer = nullptr;
+
         // Managed by QObject.
         PreviewHelper *m_previewHelper = nullptr;
 

src/widgets/viewwindow.cpp

@@ -237,7 +237,16 @@ void ViewWindow::setCentralWidget(QWidget *p_widget)
     m_mainLayout->insertWidget(1, m_centralWidget, 1);
 
     setFocusProxy(m_centralWidget);
+    m_centralWidget->show();
+}
 
+void ViewWindow::replaceCentralWidget(QWidget *p_widget)
+{
+    Q_ASSERT(m_centralWidget);
+    m_mainLayout->replaceWidget(m_centralWidget, p_widget);
+
+    m_centralWidget = p_widget;
+    setFocusProxy(m_centralWidget);
     m_centralWidget->show();
 }
 
@@ -248,14 +257,19 @@ void ViewWindow::addTopWidget(QWidget *p_widget)
 
 void ViewWindow::addBottomWidget(QWidget *p_widget)
 {
+    if (m_statusWidgetInBottomLayout) {
+        m_bottomLayout->insertWidget(m_bottomLayout->count() - 1, p_widget);
+    } else {
         m_bottomLayout->addWidget(p_widget);
+    }
 }
 
 void ViewWindow::setStatusWidget(const QSharedPointer<StatusWidget> &p_widget)
 {
     m_statusWidget = p_widget;
-    m_bottomLayout->insertWidget(0, p_widget.data());
+    m_bottomLayout->addWidget(p_widget.data());
     p_widget->show();
+    m_statusWidgetInBottomLayout = true;
 }
 
 QSharedPointer<QWidget> ViewWindow::statusWidget()
@@ -272,6 +286,7 @@ void ViewWindow::setStatusWidgetVisible(bool p_visible)
             setStatusWidget(m_statusWidget);
         } else {
             m_statusWidget->hide();
+            m_statusWidgetInBottomLayout = false;
         }
     }
 }
@@ -468,10 +483,6 @@ QAction *ViewWindow::addAction(QToolBar *p_toolBar, ViewWindowToolBarHelper::Act
     case ViewWindowToolBarHelper::InplacePreview:
     {
         act = ViewWindowToolBarHelper::addAction(p_toolBar, p_action);
-        connect(this, &ViewWindow::modeChanged,
-                this, [this, act]() {
-                    act->setEnabled(inModeCanInsert() && getBuffer());
-                });
         break;
     }
 
@@ -497,6 +508,14 @@ QAction *ViewWindow::addAction(QToolBar *p_toolBar, ViewWindowToolBarHelper::Act
         break;
     }
 
+    case ViewWindowToolBarHelper::Debug:
+    {
+        act = ViewWindowToolBarHelper::addAction(p_toolBar, p_action);
+        connect(act, &QAction::triggered,
+                this, &ViewWindow::toggleDebug);
+        break;
+    }
+
     default:
         Q_ASSERT(false);
         break;
@@ -1276,3 +1295,8 @@ bool ViewWindow::isSessionEnabled() const
 {
     return m_sessionEnabled;
 }
+
+void ViewWindow::toggleDebug()
+{
+    qDebug() << "debug is not supported";
+}

src/widgets/viewwindow.h

@@ -176,6 +176,8 @@ namespace vnotex
 
         virtual void handleFindAndReplaceWidgetOpened();
 
+        virtual void toggleDebug();
+
     protected:
         bool eventFilter(QObject *p_obj, QEvent *p_event) Q_DECL_OVERRIDE;
 
@@ -186,6 +188,8 @@ namespace vnotex
     protected:
         void setCentralWidget(QWidget *p_widget);
 
+        void replaceCentralWidget(QWidget *p_widget);
+
         void addTopWidget(QWidget *p_widget);
 
         void addToolBar(QToolBar *p_bar);
@@ -367,6 +371,8 @@ namespace vnotex
 
         QActionGroup *m_imageHostActionGroup = nullptr;
 
+        bool m_statusWidgetInBottomLayout = false;
+
         static QIcon s_savedIcon;
         static QIcon s_modifiedIcon;
     };

src/widgets/viewwindowtoolbarhelper.cpp

@@ -393,6 +393,13 @@ QAction *ViewWindowToolBarHelper::addAction(QToolBar *p_tb, Action p_action)
         break;
     }
 
+    case Action::Debug:
+    {
+        act = p_tb->addAction(ToolBarHelper::generateIcon("debug_editor.svg"), ViewWindow::tr("Debug"));
+        addActionShortcut(act, editorConfig.getShortcut(Shortcut::Debug), viewWindow);
+        break;
+    }
+
     default:
         Q_ASSERT(false);
         break;

src/widgets/viewwindowtoolbarhelper.h

@@ -46,7 +46,8 @@ namespace vnotex
             FindAndReplace,
             SectionNumber,
             InplacePreview,
-            ImageHost
+            ImageHost,
+            Debug
         };
 
         static QAction *addAction(QToolBar *p_tb, Action p_action);

src/widgets/webpage.cpp

@@ -23,9 +23,14 @@ bool WebPage::acceptNavigationRequest(const QUrl &p_url,
         return false;
     } if (!p_isMainFrame) {
         return true;
-    } else if (p_url.scheme() == QStringLiteral("data")) {
+    }
+
+    const auto scheme = p_url.scheme();
+    if (scheme == QStringLiteral("data")) {
         // Qt 5.12 and above will trigger this when calling QWebEngineView::setHtml().
         return true;
+    } else if (scheme == QStringLiteral("chrome-devtools")) {
+        return true;
     }
 
     WidgetUtils::openUrlByDesktop(p_url);

src/widgets/webviewer.cpp

@@ -30,6 +30,11 @@ WebViewer::WebViewer(const QColor &p_background,
     }
 }
 
+WebViewer::WebViewer(const QColor &p_background, QWidget *p_parent)
+    : WebViewer(p_background, 1.0, p_parent)
+{
+}
+
 WebViewer::~WebViewer()
 {
 }

src/widgets/webviewer.h

@@ -9,9 +9,9 @@ namespace vnotex
     {
         Q_OBJECT
     public:
-        explicit WebViewer(const QColor &p_background,
+        WebViewer(const QColor &p_background, qreal p_zoomFactor, QWidget *p_parent = nullptr);
-                           qreal p_zoomFactor,
+
-                           QWidget *p_parent = nullptr);
+        WebViewer(const QColor &p_background, QWidget *p_parent = nullptr);
 
         virtual ~WebViewer();