Merge branch 'release-1.4' into dev

packages/app-cli/tests/support/plugins/toc/src/webview.js

@@ -1,6 +1,7 @@
 document.addEventListener('click', event => {
 	const element = event.target;
 	if (element.className === 'toc-item-link') {
+		console.debug('TOC Plugin Webview: Sending scrollToHash message', element.dataset.slug);
 		webviewApi.postMessage({
 			name: 'scrollToHash',
 			hash: element.dataset.slug,

packages/app-desktop/gui/MainScreen/MainScreen.tsx

@@ -30,6 +30,7 @@ import { themeStyle } from '@joplin/lib/theme';
 import validateLayout from '../ResizableLayout/utils/validateLayout';
 import iterateItems from '../ResizableLayout/utils/iterateItems';
 import removeItem from '../ResizableLayout/utils/removeItem';
+import Logger from '@joplin/lib/Logger';
 
 const { connect } = require('react-redux');
 const { PromptDialog } = require('../PromptDialog.min.js');
@@ -38,6 +39,8 @@ const PluginManager = require('@joplin/lib/services/PluginManager');
 const EncryptionService = require('@joplin/lib/services/EncryptionService');
 const ipcRenderer = require('electron').ipcRenderer;
 
+const logger = Logger.create('MainScreen');
+
 interface LayerModalState {
 	visible: boolean;
 	message: string;
@@ -564,6 +567,7 @@ class MainScreenComponent extends React.Component<Props, State> {
 	}
 
 	userWebview_message(event: any) {
+		logger.debug('Got message (WebView => Plugin) (2)', event);
 		PluginService.instance().pluginById(event.pluginId).viewController(event.viewId).emitMessage(event);
 	}
 

packages/app-desktop/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@joplin/app-desktop",
-  "version": "1.4.12",
+  "version": "1.4.13",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

packages/app-desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joplin/app-desktop",
-  "version": "1.4.12",
+  "version": "1.4.13",
   "description": "Joplin for Desktop",
   "main": "main.js",
   "private": true,

packages/app-desktop/services/plugins/PluginRunner.ts

@@ -6,8 +6,11 @@ import bridge from '../bridge';
 import Setting from '@joplin/lib/models/Setting';
 import { EventHandlers } from '@joplin/lib/services/plugins/utils/mapEventHandlersToIds';
 import shim from '@joplin/lib/shim';
+import Logger from '@joplin/lib/Logger';
 const ipcRenderer = require('electron').ipcRenderer;
 
+const logger = Logger.create('PluginRunner');
+
 enum PluginMessageTarget {
 	MainWindow = 'mainWindow',
 	Plugin = 'plugin',
@@ -127,7 +130,9 @@ export default class PluginRunner extends BasePluginRunner {
 				const mappedArgs = mapEventIdsToHandlers(plugin.id, message.args);
 				const fullPath = `joplin.${message.path}`;
 
-				this.logger().debug(`PluginRunner: execute call: ${fullPath}: ${mappedArgs}`);
+				// Don't log complete HTML code, which can be long, for setHtml calls
+				const debugMappedArgs = fullPath.includes('setHtml') ? '<hidden>' : mappedArgs;
+				logger.debug(`Got message (3): ${fullPath}: ${debugMappedArgs}`);
 
 				let result: any = null;
 				let error: any = null;

packages/app-desktop/services/plugins/UserWebview.tsx

@@ -7,7 +7,10 @@ import useSubmitHandler from './hooks/useSubmitHandler';
 import useHtmlLoader from './hooks/useHtmlLoader';
 import useWebviewToPluginMessages from './hooks/useWebviewToPluginMessages';
 import useScriptLoader from './hooks/useScriptLoader';
-const styled = require('styled-components').default;
+import Logger from '@joplin/lib/Logger';
+import styled from 'styled-components';
+
+const logger = Logger.create('UserWebview');
 
 export interface Props {
 	html: string;
@@ -72,6 +75,9 @@ function UserWebview(props: Props, ref: any) {
 	function postMessage(name: string, args: any = null) {
 		const win = frameWindow();
 		if (!win) return;
+
+		logger.debug('Got message', name, args);
+
 		win.postMessage({ target: 'webview', name, args }, '*');
 	}
 
@@ -112,6 +118,7 @@ function UserWebview(props: Props, ref: any) {
 
 	useWebviewToPluginMessages(
 		frameWindow(),
+		isReady,
 		props.onMessage,
 		props.pluginId,
 		props.viewId

packages/app-desktop/services/plugins/UserWebviewIndex.js

@@ -58,10 +58,10 @@ const webviewApi = {
 			setHtml: (args) => {
 				contentElement.innerHTML = args.html;
 
-				console.debug('UserWebView frame: setting html to', args.html);
+				// console.debug('UserWebviewIndex: setting html to', args.html);
 
 				window.requestAnimationFrame(() => {
-					console.debug('UserWebView frame: setting html callback', args.hash);
+					console.debug('UserWebviewIndex: setting html callback', args.hash);
 					window.postMessage({ target: 'UserWebview', message: 'htmlIsSet', hash: args.hash }, '*');
 				});
 			},
@@ -105,6 +105,7 @@ const webviewApi = {
 			if (!ipc[callName]) {
 				console.warn('Missing IPC function:', event.data);
 			} else {
+				console.debug('UserWebviewIndex: Got message', callName, args);
 				ipc[callName](args);
 			}
 		}));
@@ -115,7 +116,7 @@ const webviewApi = {
 		// Need to send it with a delay to make sure all listeners are
 		// ready when the message is sent.
 		window.requestAnimationFrame(() => {
-			console.debug('UserWebView frame: calling isReady');
+			console.debug('UserWebViewIndex: calling isReady');
 			window.postMessage({ target: 'UserWebview', message: 'ready' }, '*');
 		});
 	});

packages/app-desktop/services/plugins/hooks/useHtmlLoader.ts

@@ -39,7 +39,7 @@ export default function(frameWindow: any, isReady: boolean, postMessage: Functio
 
 		if (!isReady) return;
 
-		console.info('useHtmlLoader: setHtml', htmlHash, html);
+		console.info('useHtmlLoader: setHtml', htmlHash);
 
 		postMessage('setHtml', {
 			hash: htmlHash,

packages/app-desktop/services/plugins/hooks/useWebviewToPluginMessages.ts

@@ -1,11 +1,20 @@
+import Logger from '@joplin/lib/Logger';
 import { useEffect } from 'react';
 
-export default function(frameWindow: any, onMessage: Function, pluginId: string, viewId: string) {
+const logger = Logger.create('useWebviewToPluginMessages');
+
+export default function(frameWindow: any, isReady: boolean, onMessage: Function, pluginId: string, viewId: string) {
 	useEffect(() => {
 		if (!frameWindow) return () => {};
 
-		function onMessage(event: any) {
+		function onMessage_(event: any) {
 			if (!event.data || event.data.target !== 'plugin') return;
+
+			// The message is passed from one component or service to the next
+			// till it reaches its destination, so if something doesn't work
+			// follow the chain of messages searching for the string "Got message"
+			logger.debug('Got message (WebView => Plugin) (1)', pluginId, viewId, event.data.message);
+
 			onMessage({
 				pluginId: pluginId,
 				viewId: viewId,
@@ -13,10 +22,10 @@ export default function(frameWindow: any, onMessage: Function, pluginId: string,
 			});
 		}
 
-		frameWindow.addEventListener('message', onMessage);
+		frameWindow.addEventListener('message', onMessage_);
 
 		return () => {
-			frameWindow.removeEventListener('message', onMessage);
+			frameWindow.removeEventListener('message', onMessage_);
 		};
-	}, [onMessage, pluginId, viewId]);
+	}, [frameWindow, onMessage, isReady, pluginId, viewId]);
 }