Add a Live Scroll lock/unlock below Brew/Source Jump buttons.

The button displays the *next* state of the toggle. IE, if the current state is locked ( Live scrolling is active ) the icon is unlock with a corresponding mouse-over.

It may be desirable to invert this.

client/homebrew/editor/editor.jsx

@@ -28,7 +28,8 @@ let liveScroll = true;
 const isElementCodeMirror=(element)=>{
 	let el = element;
 	while( el.tagName != 'body' ) {
-		if( el.classList.contains('CodeMirror-code') || el.classList.contains('CodeMirror-line'))
+		if ( !el?.classList ) return false
+		if( el?.classList?.contains('CodeMirror-code') || el.classList.contains('CodeMirror-line'))
 			return true;
 		el = el.parentNode;
 	}
@@ -43,6 +44,7 @@ const Editor = createClass({
 				text  : '',
 				style : ''
 			},
+			liveScroll : true,
 
 			onTextChange  : ()=>{},
 			onStyleChange : ()=>{},
@@ -99,6 +101,9 @@ const Editor = createClass({
 		if(prevProps.moveSource !== this.props.moveSource) {
 			this.sourceJump();
 		};
+		if(prevProps.liveScroll !== this.props.liveScroll) {
+			liveScroll = !liveScroll;
+		};
 	},
 
 	handleControlKeys : function(e){
@@ -126,10 +131,7 @@ const Editor = createClass({
 		if ((e.shiftKey) && (!e.altKey) && (e.keyCode == J_KEY)) this.sourceJump();
 		// Toggle Live-scrolling on Shift-CTRL-ALT-J
 		if((e.shiftKey) && (e.altKey) && (e.keyCode == J_KEY)) {
-			console.log('Trying to flip the property?')
-			console.log(liveScroll);
 			liveScroll = !liveScroll;
-			console.log(liveScroll);
 		}
 
 		if( e.keyCode == J_KEY) {

shared/naturalcrit/splitPane/splitPane.jsx

@@ -20,6 +20,7 @@ const SplitPane = createClass({
 			isDragging        : false,
 			moveSource        : false,
 			moveBrew          : false,
+			liveScroll        : true,
 			showMoveArrows    : true
 		};
 	},
@@ -117,6 +118,20 @@ const SplitPane = createClass({
 					onClick={()=>this.setState({ moveBrew: !this.state.moveBrew })} >
 					<i className='fas fa-arrow-right' />
 				</div>
+				<div id='scrollToggleDiv' className='arrow unlock'
+					style={{ left: this.state.currentDividerPos-4 }}
+					onClick={()=>{
+						this.setState({ liveScroll: !this.state.liveScroll });
+						if(document.getElementById('scrollToggle').classList.contains('fa-unlock')) {
+							document.getElementById('scrollToggle').className = 'fas fa-lock';
+							document.getElementById('scrollToggleDiv').className = 'arrow lock';
+						} else {
+							document.getElementById('scrollToggle').className = 'fas fa-unlock';
+							document.getElementById('scrollToggleDiv').className = 'arrow unlock';
+						}
+					}} >
+					<i id='scrollToggle' className='fas fa-unlock' />
+				</div>
 			</>;
 		}
 	},
@@ -143,6 +158,7 @@ const SplitPane = createClass({
 				{React.cloneElement(this.props.children[0], {
 					moveBrew      : this.state.moveBrew,
 					moveSource    : this.state.moveSource,
+					liveScroll    : this.state.liveScroll,
 					setMoveArrows : this.setMoveArrows
 				})}
 			</Pane>

shared/naturalcrit/splitPane/splitPane.less

@@ -53,6 +53,14 @@
 			.tooltipRight('Jump to location in Preview');
 			top : 60px;
 		}
+		&.lock{
+			.tooltipRight('Lock cursor tracking between windows.');
+			top : 90px;
+		}
+		&.unlock{
+			.tooltipRight('Unlock cursor tracking between windows.');
+			top : 90px;
+		}
 		&:hover{
 			background-color: #666;
 		}