Desktop: Fixed dev tool support

ElectronClient/app/app.js

@@ -49,7 +49,7 @@ const appDefaultState = Object.assign({}, defaultState, {
 	windowContentSize: bridge().windowContentSize(),
 	watchedNoteFiles: [],
 	lastEditorScrollPercents: {},
-	noteDevToolsVisible: false,
+	devToolsVisible: false,
 });
 
 class Application extends BaseApplication {
@@ -221,7 +221,12 @@ class Application extends BaseApplication {
 
 			case 'NOTE_DEVTOOLS_TOGGLE':
 				newState = Object.assign({}, state);
-				newState.noteDevToolsVisible = !newState.noteDevToolsVisible;
+				newState.devToolsVisible = !newState.devToolsVisible;
+				break;
+
+			case 'NOTE_DEVTOOLS_SET':
+				newState = Object.assign({}, state);
+				newState.devToolsVisible = action.value;
 				break;
 
 			}
@@ -233,6 +238,14 @@ class Application extends BaseApplication {
 		return super.reducer(newState, action);
 	}
 
+	toggleDevTools(visible) {
+		if (visible) {
+			bridge().openDevTools();
+		} else {
+			bridge().closeDevTools();
+		}
+	}
+
 	async generalMiddleware(store, next, action) {
 		if (action.type == 'SETTING_UPDATE_ONE' && action.key == 'locale' || action.type == 'SETTING_UPDATE_ALL') {
 			setLocale(Setting.value('locale'));
@@ -274,12 +287,12 @@ class Application extends BaseApplication {
 		}
 
 		if (action.type.indexOf('NOTE_SELECT') === 0 || action.type.indexOf('FOLDER_SELECT') === 0) {
-			this.updateMenuItemStates();
+			this.updateMenuItemStates(newState);
 		}
 
-		if (action.type === 'NOTE_DEVTOOLS_TOGGLE') {
-			const menuItem = Menu.getApplicationMenu().getMenuItemById('help:toggleDevTools');
-			menuItem.checked = newState.noteDevToolsVisible;
+		if (['NOTE_DEVTOOLS_TOGGLE', 'NOTE_DEVTOOLS_SET'].indexOf(action.type) >= 0) {
+			this.toggleDevTools(newState.devToolsVisible);
+			this.updateMenuItemStates(newState);
 		}
 
 		return result;
@@ -1105,11 +1118,13 @@ class Application extends BaseApplication {
 		this.lastMenuScreen_ = screen;
 	}
 
-	async updateMenuItemStates() {
+	async updateMenuItemStates(state = null) {
 		if (!this.lastMenuScreen_) return;
-		if (!this.store()) return;
+		if (!this.store() && !state) return;
 
-		const selectedNoteIds = this.store().getState().selectedNoteIds;
+		if (!state) state = this.store().getState();
+
+		const selectedNoteIds = state.selectedNoteIds;
 		const note = selectedNoteIds.length === 1 ? await Note.load(selectedNoteIds[0]) : null;
 
 		for (const itemId of ['copy', 'paste', 'cut', 'selectAll', 'bold', 'italic', 'link', 'code', 'insertDateTime', 'commandStartExternalEditing', 'setTags', 'showLocalSearch']) {
@@ -1117,6 +1132,9 @@ class Application extends BaseApplication {
 			if (!menuItem) continue;
 			menuItem.enabled = !!note && note.markup_language === Note.MARKUP_LANGUAGE_MARKDOWN;
 		}
+
+		const menuItem = Menu.getApplicationMenu().getMenuItemById('help:toggleDevTools');
+		menuItem.checked = state.devToolsVisible;
 	}
 
 	updateTray() {
@@ -1187,8 +1205,8 @@ class Application extends BaseApplication {
 
 		reg.setShowErrorMessageBoxHandler((message) => { bridge().showErrorMessageBox(message); });
 
-		if (Setting.value('openDevTools')) {
-			bridge().window().webContents.openDevTools();
+		if (Setting.value('flagOpenDevTools')) {
+			bridge().openDevTools();
 		}
 
 		PluginManager.instance().dispatch_ = this.dispatch.bind(this);
@@ -1244,6 +1262,11 @@ class Application extends BaseApplication {
 			templates: templates,
 		});
 
+		this.store().dispatch({
+			type: 'NOTE_DEVTOOLS_SET',
+			value: Setting.value('flagOpenDevTools'),
+		});
+
 		// Note: Auto-update currently doesn't work in Linux: it downloads the update
 		// but then doesn't install it on exit.
 		if (shim.isWindows() || shim.isMac()) {

ElectronClient/app/bridge.js

@@ -43,6 +43,14 @@ class Bridge {
 		return this.window().setSize(width, height);
 	}
 
+	openDevTools() {
+		return this.window().webContents.openDevTools();
+	}
+
+	closeDevTools() {
+		return this.window().webContents.closeDevTools();
+	}
+
 	showSaveDialog(options) {
 		const {dialog} = require('electron');
 		if (!options) options = {};

ElectronClient/app/gui/MainScreen.jsx

@@ -605,7 +605,7 @@ class MainScreenComponent extends React.Component {
 				<VerticalResizer style={styles.verticalResizer} onDrag={this.sidebar_onDrag} />
 				<NoteList style={styles.noteList} />
 				<VerticalResizer style={styles.verticalResizer} onDrag={this.noteList_onDrag} />
-				<NoteText style={styles.noteText} keyboardMode={keyboardMode} visiblePanes={this.props.noteVisiblePanes} noteDevToolsVisible={this.props.noteDevToolsVisible} />
+				<NoteText style={styles.noteText} keyboardMode={keyboardMode} visiblePanes={this.props.noteVisiblePanes} />
 
 				{pluginDialog}
 			</div>
@@ -629,7 +629,6 @@ const mapStateToProps = state => {
 		noteListWidth: state.settings['style.noteList.width'],
 		selectedNoteId: state.selectedNoteIds.length === 1 ? state.selectedNoteIds[0] : null,
 		plugins: state.plugins,
-		noteDevToolsVisible: state.noteDevToolsVisible,
 		templates: state.templates,
 	};
 };

ElectronClient/app/gui/NoteText.jsx

@@ -455,19 +455,6 @@ class NoteTextComponent extends React.Component {
 	}
 
 	componentDidUpdate() {
-		// if (Setting.value('env') === 'dev' && this.webviewRef()) {
-		// 	this.webviewRef().openDevTools();
-		// 	return;
-		// }
-
-		if (this.webviewRef() && this.props.noteDevToolsVisible !== this.webviewRef().isDevToolsOpened()) {
-			if (this.props.noteDevToolsVisible) {
-				this.webviewRef().openDevTools();
-			} else {
-				this.webviewRef().closeDevTools();
-			}
-		}
-
 		const currentNoteId = this.state.note ? this.state.note.id : null;
 		if (this.lastComponentUpdateNoteId_ !== currentNoteId && this.editor_) {
 			this.editor_.editor.getSession().setMode(new CustomMdMode());

ElectronClient/app/gui/NoteTextViewer.jsx

@@ -160,7 +160,7 @@ class NoteTextViewerComponent extends React.Component {
 	// ----------------------------------------------------------------
 
 	render() {
-		const viewerStyle = Object.assign({}, this.props.viewerStyle, { borderTop: 'none' });
+		const viewerStyle = Object.assign({}, this.props.viewerStyle, { borderTop: 'none', borderRight: 'none', borderBottom: 'none' });
 		return <iframe className="noteTextViewer" ref={this.webviewRef_} style={viewerStyle} src="gui/note-viewer/index.html"></iframe>;
 	}
 }

ElectronClient/app/gui/ShareNoteDialog.tsx

@@ -210,8 +210,8 @@ export default function ShareNoteDialog(props:ShareNoteDialogProps) {
 				<div style={theme.dialogTitle}>{_('Share Notes')}</div>
 				{renderNoteList(notes)}
 				<button disabled={['creating', 'synchronizing'].indexOf(sharesState) >= 0} style={styles.copyShareLinkButton} onClick={shareLinkButton_click}>{_n('Copy Shareable Link', 'Copy Shareable Links', noteCount)}</button>
-				{encryptionWarningMessage}
 				<div style={theme.textStyle}>{statusMessage(sharesState)}</div>
+				{encryptionWarningMessage}
 				<DialogButtonRow theme={props.theme} onClick={buttonRow_click} okButtonShow={false} cancelButtonLabel={_('Close')}/>
 			</div>
 		</div>

ReactNativeClient/lib/BaseApplication.js

@@ -132,7 +132,7 @@ class BaseApplication {
 			}
 
 			if (arg == '--open-dev-tools') {
-				Setting.setConstant('openDevTools', true);
+				Setting.setConstant('flagOpenDevTools', true);
 				argv.splice(0, 1);
 				continue;
 			}

ReactNativeClient/lib/models/Setting.js

@@ -1028,7 +1028,7 @@ Setting.constants_ = {
 	profileDir: '',
 	templateDir: '',
 	tempDir: '',
-	openDevTools: false,
+	flagOpenDevTools: false,
 	syncVersion: 1,
 };