Custom scroll bar in WebKit / Chromium.

Telegram/SourceFiles/inline_bots/bot_attach_web_view.cpp

@@ -27,6 +27,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "window/themes/window_theme.h"
 #include "window/window_controller.h"
 #include "window/window_session_controller.h"
+#include "webview/webview_interface.h"
 #include "core/application.h"
 #include "core/local_url_handlers.h"
 #include "ui/basic_click_handlers.h"
@@ -366,7 +367,7 @@ void AttachWebView::request(const WebViewButton &button) {
 		_bot->inputUser,
 		MTP_bytes(button.url),
 		MTP_string(_startCommand),
-		MTP_dataJSON(MTP_bytes(Window::Theme::WebViewParams())),
+		MTP_dataJSON(MTP_bytes(Window::Theme::WebViewParams().json)),
 		MTPint() // reply_to_msg_id
 	)).done([=](const MTPWebViewResult &result) {
 		_requestId = 0;
@@ -559,7 +560,7 @@ void AttachWebView::requestSimple(const WebViewButton &button) {
 		MTP_flags(Flag::f_theme_params),
 		_bot->inputUser,
 		MTP_bytes(button.url),
-		MTP_dataJSON(MTP_bytes(Window::Theme::WebViewParams()))
+		MTP_dataJSON(MTP_bytes(Window::Theme::WebViewParams().json))
 	)).done([=](const MTPSimpleWebViewResult &result) {
 		_requestId = 0;
 		result.match([&](const MTPDsimpleWebViewResultUrl &data) {
@@ -589,7 +590,7 @@ void AttachWebView::requestMenu(
 			_bot->inputUser,
 			MTP_string(url),
 			MTPstring(),
-			MTP_dataJSON(MTP_bytes(Window::Theme::WebViewParams())),
+			MTP_dataJSON(MTP_bytes(Window::Theme::WebViewParams().json)),
 			MTPint()
 		)).done([=](const MTPWebViewResult &result) {
 			_requestId = 0;
@@ -644,7 +645,7 @@ void AttachWebView::show(
 	Expects(_bot != nullptr && _peer != nullptr);
 
 	const auto close = crl::guard(this, [=] {
-		cancel();
+		crl::on_main(this, [=] { cancel(); });
 	});
 	const auto sendData = crl::guard(this, [=](QByteArray data) {
 		if (_peer != _bot || queryId) {
@@ -669,7 +670,7 @@ void AttachWebView::show(
 			return false;
 		}
 		UrlClickHandler::Open(local, {});
-		crl::on_main(close);
+		close();
 		return true;
 	};
 	auto title = Info::Profile::NameValue(

Telegram/SourceFiles/payments/payments_checkout_process.cpp

@@ -24,6 +24,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "apiwrap.h"
 #include "api/api_cloud_password.h"
 #include "window/themes/window_theme.h"
+#include "webview/webview_interface.h"
 
 #include <QJsonDocument>
 #include <QJsonObject>

Telegram/SourceFiles/payments/payments_form.cpp

@@ -29,6 +29,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "apiwrap.h"
 #include "core/core_cloud_password.h"
 #include "window/themes/window_theme.h"
+#include "webview/webview_interface.h"
 #include "styles/style_payments.h" // paymentsThumbnailSize.
 
 #include <QtCore/QJsonDocument>
@@ -242,7 +243,7 @@ void Form::requestForm() {
 		MTP_flags(MTPpayments_GetPaymentForm::Flag::f_theme_params),
 		_peer->input,
 		MTP_int(_msgId),
-		MTP_dataJSON(MTP_bytes(Window::Theme::WebViewParams()))
+		MTP_dataJSON(MTP_bytes(Window::Theme::WebViewParams().json))
 	)).done([=](const MTPpayments_PaymentForm &result) {
 		hideProgress();
 		result.match([&](const auto &data) {

Telegram/SourceFiles/payments/ui/payments_panel.cpp

@@ -783,15 +783,20 @@ void Panel::showWebviewError(
 	showCriticalError(rich);
 }
 
-void Panel::updateThemeParams(const QByteArray &json) {
+void Panel::updateThemeParams(const Webview::ThemeParams &params) {
 	if (!_webview || !_webview->window.widget()) {
 		return;
 	}
+	_webview->window.updateTheme(
+		params.scrollBg,
+		params.scrollBgOver,
+		params.scrollBarBg,
+		params.scrollBarBgOver);
 	_webview->window.eval(R"(
 if (window.TelegramGameProxy) {
 	window.TelegramGameProxy.receiveEvent(
 		"theme_changed",
-		{ "theme_params": )" + json + R"( });
+		{ "theme_params": )" + params.json + R"( });
 }
 )");
 }

Telegram/SourceFiles/payments/ui/payments_panel.h

@@ -18,6 +18,7 @@ class Checkbox;
 
 namespace Webview {
 struct Available;
+struct ThemeParams;
 } // namespace Webview
 
 namespace Payments::Ui {
@@ -76,7 +77,7 @@ public:
 		const QString &url,
 		bool allowBack,
 		rpl::producer<QString> bottomText);
-	void updateThemeParams(const QByteArray &json);
+	void updateThemeParams(const Webview::ThemeParams &params);
 
 	[[nodiscard]] rpl::producer<> backRequests() const;
 

Telegram/SourceFiles/ui/chat/attach/attach_bot_webview.cpp

@@ -307,7 +307,7 @@ Panel::Panel(
 	Fn<bool(QString)> handleLocalUri,
 	Fn<void(QByteArray)> sendData,
 	Fn<void()> close,
-	Fn<QByteArray()> themeParams)
+	Fn<Webview::ThemeParams()> themeParams)
 : _userDataPath(userDataPath)
 , _handleLocalUri(std::move(handleLocalUri))
 , _sendData(std::move(sendData))
@@ -465,6 +465,7 @@ void Panel::hideWebviewProgress() {
 
 bool Panel::showWebview(
 		const QString &url,
+		const Webview::ThemeParams &params,
 		rpl::producer<QString> bottomText) {
 	if (!_webview && !createWebview()) {
 		return false;
@@ -472,6 +473,7 @@ bool Panel::showWebview(
 	const auto allowBack = false;
 	showWebviewProgress();
 	_widget->destroyLayer();
+	updateThemeParams(params);
 	_webview->window.navigate(url);
 	_widget->setBackAllowed(allowBack);
 	if (bottomText) {
@@ -523,6 +525,7 @@ bool Panel::createWebview() {
 			.userDataPath = _userDataPath,
 		});
 	const auto raw = &_webview->window;
+
 	QObject::connect(container, &QObject::destroyed, [=] {
 		if (_webview && &_webview->window == raw) {
 			_webview = nullptr;
@@ -741,11 +744,16 @@ void Panel::showCriticalError(const TextWithEntities &text) {
 	_widget->showInner(std::move(error));
 }
 
-void Panel::updateThemeParams(const QByteArray &json) {
+void Panel::updateThemeParams(const Webview::ThemeParams &params) {
 	if (!_webview || !_webview->window.widget()) {
 		return;
 	}
-	postEvent("theme_changed", "\"theme_params\": " + json);
+	_webview->window.updateTheme(
+		params.scrollBg,
+		params.scrollBgOver,
+		params.scrollBarBg,
+		params.scrollBarBgOver);
+	postEvent("theme_changed", "\"theme_params\": " + params.json);
 }
 
 void Panel::postEvent(const QString &event, const QString &data) {
@@ -803,6 +811,7 @@ rpl::lifetime &Panel::lifetime() {
 }
 
 std::unique_ptr<Panel> Show(Args &&args) {
+	const auto params = args.themeParams();
 	auto result = std::make_unique<Panel>(
 		args.userDataPath,
 		std::move(args.title),
@@ -810,7 +819,7 @@ std::unique_ptr<Panel> Show(Args &&args) {
 		std::move(args.sendData),
 		std::move(args.close),
 		std::move(args.themeParams));
-	if (!result->showWebview(args.url, std::move(args.bottom))) {
+	if (!result->showWebview(args.url, params, std::move(args.bottom))) {
 		const auto available = Webview::Availability();
 		if (available.error != Webview::Available::Error::None) {
 			result->showWebviewError(

Telegram/SourceFiles/ui/chat/attach/attach_bot_webview.h

@@ -17,6 +17,7 @@ class SeparatePanel;
 
 namespace Webview {
 struct Available;
+struct ThemeParams;
 } // namespace Webview
 
 namespace Ui::BotWebView {
@@ -36,7 +37,7 @@ public:
 		Fn<bool(QString)> handleLocalUri,
 		Fn<void(QByteArray)> sendData,
 		Fn<void()> close,
-		Fn<QByteArray()> themeParams);
+		Fn<Webview::ThemeParams()> themeParams);
 	~Panel();
 
 	void requestActivate();
@@ -44,6 +45,7 @@ public:
 
 	bool showWebview(
 		const QString &url,
+		const Webview::ThemeParams &params,
 		rpl::producer<QString> bottomText);
 
 	void showBox(object_ptr<BoxContent> box);
@@ -53,7 +55,7 @@ public:
 		const QString &text,
 		const Webview::Available &information);
 
-	void updateThemeParams(const QByteArray &json);
+	void updateThemeParams(const Webview::ThemeParams &params);
 
 	[[nodiscard]] rpl::lifetime &lifetime();
 
@@ -101,7 +103,7 @@ struct Args {
 	Fn<bool(QString)> handleLocalUri;
 	Fn<void(QByteArray)> sendData;
 	Fn<void()> close;
-	Fn<QByteArray()> themeParams;
+	Fn<Webview::ThemeParams()> themeParams;
 };
 [[nodiscard]] std::unique_ptr<Panel> Show(Args &&args);
 

Telegram/SourceFiles/window/themes/window_theme.cpp

@@ -32,6 +32,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "ui/style/style_palette_colorizer.h"
 #include "ui/ui_utility.h"
 #include "ui/boxes/confirm_box.h"
+#include "webview/webview_interface.h"
 #include "boxes/background_box.h"
 #include "core/application.h"
 #include "styles/style_widgets.h"
@@ -1491,7 +1492,7 @@ bool ReadPaletteValues(const QByteArray &content, Fn<bool(QLatin1String name, QL
 	return true;
 }
 
-[[nodiscard]] QByteArray WebViewParams() {
+[[nodiscard]] Webview::ThemeParams WebViewParams() {
 	const auto colors = std::vector<std::pair<QString, const style::color&>>{
 		{ "bg_color", st::windowBg },
 		{ "text_color", st::windowFg },
@@ -1514,7 +1515,14 @@ bool ReadPaletteValues(const QByteArray &content, Fn<bool(QLatin1String name, QL
 		};
 		object.insert(name, '#' + hex(r) + hex(g) + hex(b));
 	}
-	return QJsonDocument(object).toJson(QJsonDocument::Compact);
+	return {
+		.scrollBg = st::scrollBg->c,
+		.scrollBgOver = st::scrollBgOver->c,
+		.scrollBarBg = st::scrollBarBg->c,
+		.scrollBarBgOver = st::scrollBarBgOver->c,
+
+		.json = QJsonDocument(object).toJson(QJsonDocument::Compact),
+	};
 }
 
 } // namespace Theme

Telegram/SourceFiles/window/themes/window_theme.h

@@ -27,6 +27,10 @@ namespace Ui {
 struct ChatThemeBackground;
 } // namespace Ui
 
+namespace Webview {
+struct ThemeParams;
+} // namespace Webview
+
 namespace Window {
 namespace Theme {
 
@@ -293,7 +297,7 @@ bool ReadPaletteValues(
 	const QByteArray &content,
 	Fn<bool(QLatin1String name, QLatin1String value)> callback);
 
-[[nodiscard]] QByteArray WebViewParams();
+[[nodiscard]] Webview::ThemeParams WebViewParams();
 
 } // namespace Theme
 } // namespace Window

Telegram/lib_webview

@@ -1 +1 @@
-Subproject commit 0ec43c57bb4b22807d060cbe50e6a11d3a8a2182
+Subproject commit cc510d306b51ea83360fd0c0a41ec87fbf698535