Desktop: New: Added option to open development tools, to make it easier to create custom CSS

ElectronClient/app/app.js

@@ -50,6 +50,7 @@ const appDefaultState = Object.assign({}, defaultState, {
 	windowContentSize: bridge().windowContentSize(),
 	watchedNoteFiles: [],
 	lastEditorScrollPercents: {},
+	noteDevToolsVisible: false,
 });
 
 class Application extends BaseApplication {
@@ -187,6 +188,12 @@ class Application extends BaseApplication {
 					newState.lastEditorScrollPercents = newPercents;
 					break;
 
+				case 'NOTE_DEVTOOLS_TOGGLE':
+
+					newState = Object.assign({}, state);
+					newState.noteDevToolsVisible = !newState.noteDevToolsVisible;
+					break;
+
 			}
 		} catch (error) {
 			error.message = 'In reducer: ' + error.message + ' Action: ' + JSON.stringify(action);
@@ -787,6 +794,17 @@ class Application extends BaseApplication {
 					label: _('Check for updates...'),
 					visible: shim.isMac() ? false : true,
 					click: () => _checkForUpdates(this)
+				}, {
+					type: 'separator',
+					screens: ['Main'],
+				}, {
+					label: _('Toggle development tools'),
+					visible: true,
+					click: () => {
+						this.dispatch({
+							type: 'NOTE_DEVTOOLS_TOGGLE',
+						});
+					},
 				}, {
 					type: 'separator',
 					visible: shim.isMac() ? false : true,

ElectronClient/app/gui/MainScreen.jsx

@@ -496,7 +496,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} visiblePanes={this.props.noteVisiblePanes} />
+				<NoteText style={styles.noteText} visiblePanes={this.props.noteVisiblePanes} noteDevToolsVisible={this.props.noteDevToolsVisible}/>
 
 				{pluginDialog}	
 			</div>
@@ -521,6 +521,7 @@ const mapStateToProps = (state) => {
 		noteListWidth: state.settings['style.noteList.width'],
 		selectedNoteId: state.selectedNoteIds.length === 1 ? state.selectedNoteIds[0] : null,
 		plugins: state.plugins,
+		noteDevToolsVisible: state.noteDevToolsVisible,
 	};
 };
 

ElectronClient/app/gui/NoteText.jsx

@@ -382,6 +382,22 @@ class NoteTextComponent extends React.Component {
 		ExternalEditWatcher.instance().off('noteChange', this.externalEditWatcher_noteChange);
 	}
 
+	componentDidUpdate(prevProps) {
+		if (this.webviewRef() && this.props.noteDevToolsVisible !== this.webviewRef().isDevToolsOpened()) {
+			if (this.props.noteDevToolsVisible) {
+				this.webviewRef().openDevTools();
+			} else {
+				this.webviewRef().closeDevTools();
+			}
+		}
+	}
+
+	webviewRef() {
+		if (!this.webviewRef_.current || !this.webviewRef_.current.wrappedInstance) return null;
+		if (!this.webviewRef_.current.wrappedInstance.domReady()) return null;
+		return this.webviewRef_.current.wrappedInstance;
+	}
+
 	async saveIfNeeded(saveIfNewNote = false) {
 		const forceSave = saveIfNewNote && (this.state.note && !this.state.note.id);
 

ElectronClient/app/gui/NoteTextViewer.jsx

@@ -9,6 +9,7 @@ class NoteTextViewerComponent extends React.Component {
 		super();
 
 		this.initialized_ = false;
+		this.domReady_ = false;
 
 		this.webviewRef_ = React.createRef();
 		this.webviewListeners_ = null;
@@ -18,6 +19,7 @@ class NoteTextViewerComponent extends React.Component {
 	}
 
 	webview_domReady(event) {
+		this.domReady_ = true;
 		if (this.props.onDomReady) this.props.onDomReady(event);
 	}
 
@@ -25,6 +27,10 @@ class NoteTextViewerComponent extends React.Component {
 		if (this.props.onIpcMessage) this.props.onIpcMessage(event);
 	}
 
+	domReady() {
+		return this.domReady_;
+	}
+
 	initWebview() {
 		const wv = this.webviewRef_.current;
 
@@ -65,6 +71,9 @@ class NoteTextViewerComponent extends React.Component {
 			const fn = this.webviewListeners_[n];
 			wv.removeEventListener(n, fn);
 		}
+
+		this.initialized_ = false;
+		this.domReady_ = false;
 	}
 
 	tryInit() {
@@ -116,6 +125,14 @@ class NoteTextViewerComponent extends React.Component {
 		return this.webviewRef_.current.openDevTools();
 	}
 
+	closeDevTools() {
+		return this.webviewRef_.current.closeDevTools();
+	}
+
+	isDevToolsOpened() {
+		return this.webviewRef_.current.isDevToolsOpened();
+	}
+
 	// ----------------------------------------------------------------
 	// Wrap WebView functions (END)
 	// ----------------------------------------------------------------