Element highlighter

package.json

@@ -298,6 +298,7 @@
     "null-loader": "^0.1.1",
     "postcss-cssnext": "^3.0.2",
     "raw-loader": "^0.5.1",
+    "react-addons-perf": "^15.4.2",
     "redux-saga-test-plan": "^3.0.2",
     "script-ext-html-webpack-plugin": "^2.0.1",
     "sinon": "^5.0.7",

src/actions/index.js

@@ -22,7 +22,10 @@ import {
 } from './projects';
 
 import {
+  currentCursorChanged,
   focusLine,
+  editorBlurred,
+  editorFocused,
   editorFocusedRequestedLine,
   startDragColumnDivider,
   stopDragColumnDivider,
@@ -93,13 +96,16 @@ export {
   unhideComponent,
   toggleComponent,
   focusLine,
+  editorBlurred,
+  editorFocused,
   editorFocusedRequestedLine,
   previousConsoleHistory,
   nextConsoleHistory,
   startDragColumnDivider,
   stopDragColumnDivider,
   notificationTriggered,
   userDismissedNotification,
+  currentCursorChanged,
   updateNotificationMetadata,
   exportProject,
   projectExportDisplayed,

src/actions/ui.js

@@ -12,6 +12,15 @@ export const editorFocusedRequestedLine = createAction(
   'EDITOR_FOCUSED_REQUESTED_LINE',
 );
 
+export const editorFocused = createAction(
+  'EDITOR_FOCUSED',
+  (source, cursor, language) => ({source, cursor, language}),
+);
+
+export const editorBlurred = createAction(
+  'EDITOR_BLURRED',
+);
+
 export const startDragColumnDivider = createAction(
   'START_DRAG_COLUMN_DIVIDER',
 );
@@ -34,6 +43,15 @@ export const userDismissedNotification = createAction(
   type => ({type}),
 );
 
+export const currentCursorChanged = createAction(
+  'CURRENT_CURSOR_CHANGED',
+  (source, cursor, language) => ({source, cursor, language}),
+);
+
+export const currentFocusedSelectorChanged = createAction(
+  'CURRENT_FOCUSED_SELECTOR_CHANGED',
+);
+
 export const updateNotificationMetadata = createAction(
   'UPDATE_NOTIFICATION_METADATA',
   (type, metadata) => ({type, metadata}),

src/components/Editor.jsx

@@ -129,9 +129,27 @@ class Editor extends React.Component {
 
   _startNewSession(source) {
     const session = createAceSessionWithoutWorker(this.props.language, source);
+    const cursor = session.selection.lead;
     session.on('change', () => {
       this.props.onInput(this._editor.getValue());
     });
+    session.selection.on('changeCursor', () => {
+      this.props.onCursorChange(
+        this._editor.getValue(),
+        cursor,
+        this.props.language,
+      );
+    });
+    this._editor.on('blur', () => {
+      this.props.onEditorBlurred();
+    });
+    this._editor.on('focus', () => {
+      this.props.onEditorFocused(
+        this._editor.getValue(),
+        cursor,
+        this.props.language,
+      );
+    });
     session.setAnnotations(this.props.errors);
     this._editor.setSession(session);
     this._editor.moveCursorTo(0, 0);
@@ -147,6 +165,9 @@ Editor.propTypes = {
   requestedFocusedLine: PropTypes.instanceOf(EditorLocation),
   source: PropTypes.string.isRequired,
   textSizeIsLarge: PropTypes.bool.isRequired,
+  onCursorChange: PropTypes.func.isRequired,
+  onEditorBlurred: PropTypes.func.isRequired,
+  onEditorFocused: PropTypes.func.isRequired,
   onInput: PropTypes.func.isRequired,
   onRequestedLineFocused: PropTypes.func.isRequired,
 };

src/components/EditorsColumn.jsx

@@ -24,6 +24,9 @@ export default function EditorsColumn({
   requestedFocusedLine,
   onComponentHide,
   onComponentUnhide,
+  onEditorBlurred,
+  onEditorCursorChange,
+  onEditorFocused,
   onEditorInput,
   onRef,
   onRequestedLineFocused,
@@ -65,6 +68,9 @@ export default function EditorsColumn({
           requestedFocusedLine={requestedFocusedLine}
           source={currentProject.sources[language]}
           textSizeIsLarge={isTextSizeLarge}
+          onCursorChange={onEditorCursorChange}
+          onEditorBlurred={onEditorBlurred}
+          onEditorFocused={onEditorFocused}
           onInput={partial(
             onEditorInput,
             currentProject.projectKey,
@@ -133,6 +139,9 @@ EditorsColumn.propTypes = {
   style: PropTypes.object.isRequired,
   onComponentHide: PropTypes.func.isRequired,
   onComponentUnhide: PropTypes.func.isRequired,
+  onEditorBlurred: PropTypes.func.isRequired,
+  onEditorCursorChange: PropTypes.func.isRequired,
+  onEditorFocused: PropTypes.func.isRequired,
   onEditorInput: PropTypes.func.isRequired,
   onRef: PropTypes.func.isRequired,
   onRequestedLineFocused: PropTypes.func.isRequired,

src/components/Preview.jsx

@@ -8,6 +8,7 @@ import PreviewFrame from './PreviewFrame';
 export default function Preview({
   compiledProjects,
   consoleEntries,
+  focusedSelector,
   showingErrors,
   onConsoleError,
   onConsoleLog,
@@ -24,6 +25,7 @@ export default function Preview({
     <PreviewFrame
       compiledProject={compiledProject}
       consoleEntries={consoleEntries}
+      focusedSelector={focusedSelector}
       isActive={key === compiledProjects.keySeq().last()}
       key={compiledProject.compiledProjectKey}
       onConsoleError={onConsoleError}
@@ -57,6 +59,7 @@ export default function Preview({
 Preview.propTypes = {
   compiledProjects: ImmutablePropTypes.iterable.isRequired,
   consoleEntries: ImmutablePropTypes.iterable.isRequired,
+  focusedSelector: PropTypes.string,
   showingErrors: PropTypes.bool.isRequired,
   onConsoleError: PropTypes.func.isRequired,
   onConsoleLog: PropTypes.func.isRequired,
@@ -65,3 +68,7 @@ Preview.propTypes = {
   onRefreshClick: PropTypes.func.isRequired,
   onRuntimeError: PropTypes.func.isRequired,
 };
+
+Preview.defaultProps = {
+  focusedSelector: null,
+};

src/components/PreviewFrame.jsx

@@ -47,6 +47,7 @@ class PreviewFrame extends React.Component {
     const {consoleEntries, isActive} = this.props;
 
     if (this._channel && isActive) {
+      this._postFocusedSelectorToFrame(this.props.focusedSelector);
       for (const [key, {expression}] of consoleEntries) {
         if (!prevConsoleEntries.has(key) && expression) {
           this._evaluateConsoleExpression(key, expression);
@@ -135,6 +136,13 @@ class PreviewFrame extends React.Component {
     this.props.onConsoleLog(printedValue, compiledProjectKey);
   }
 
+  _postFocusedSelectorToFrame(selector) {
+    this._channel.notify({
+      method: 'highlightElement',
+      params: selector,
+    });
+  }
+
   _attachToFrame(frame) {
     if (!frame) {
       if (this._channel) {
@@ -168,11 +176,16 @@ class PreviewFrame extends React.Component {
 PreviewFrame.propTypes = {
   compiledProject: PropTypes.instanceOf(CompiledProjectRecord).isRequired,
   consoleEntries: ImmutablePropTypes.iterable.isRequired,
+  focusedSelector: PropTypes.string,
   isActive: PropTypes.bool.isRequired,
   onConsoleError: PropTypes.func.isRequired,
   onConsoleLog: PropTypes.func.isRequired,
   onConsoleValue: PropTypes.func.isRequired,
   onRuntimeError: PropTypes.func.isRequired,
 };
 
+PreviewFrame.defaultProps = {
+  focusedSelector: null,
+};
+
 export default PreviewFrame;

src/containers/EditorsColumn.js

@@ -9,10 +9,13 @@ import {
   isTextSizeLarge,
 } from '../selectors';
 import {
+  currentCursorChanged,
   editorFocusedRequestedLine,
   hideComponent,
   updateProjectSource,
   unhideComponent,
+  editorBlurred,
+  editorFocused,
 } from '../actions';
 
 function mapStateToProps(state) {
@@ -41,6 +44,33 @@ function mapDispatchToProps(dispatch) {
     onRequestedLineFocused() {
       dispatch(editorFocusedRequestedLine());
     },
+
+    onEditorCursorChange(source, cursor, language) {
+      dispatch(
+        currentCursorChanged(
+          source,
+          cursor,
+          language,
+        ),
+      );
+    },
+
+    onEditorBlurred() {
+      dispatch(
+        editorBlurred(),
+      );
+    },
+
+    onEditorFocused(source, cursor, language) {
+      dispatch(
+        editorFocused(
+          source,
+          cursor,
+          language,
+        ),
+      );
+    },
+
   };
 }
 

src/containers/Preview.js

@@ -12,6 +12,7 @@ import {
 import {
   getCompiledProjects,
   getConsoleHistory,
+  getFocusedSelector,
   isCurrentProjectSyntacticallyValid,
   isUserTyping,
 } from '../selectors';
@@ -20,6 +21,7 @@ function mapStateToProps(state) {
   return {
     compiledProjects: getCompiledProjects(state),
     consoleEntries: getConsoleHistory(state),
+    focusedSelector: getFocusedSelector(state),
     showingErrors: (
       !isUserTyping(state) &&
         !isCurrentProjectSyntacticallyValid(state)

src/preview.js

@@ -3,8 +3,11 @@ import handleConsoleExpressions
   from './previewSupport/handleConsoleExpressions';
 import handleConsoleLogs from './previewSupport/handleConsoleLogs';
 import overrideAlert from './previewSupport/overrideAlert';
+import handleElementHighlights from './previewSupport/handleElementHighlights';
 
 handleErrors();
 handleConsoleExpressions();
 handleConsoleLogs();
 overrideAlert();
+handleElementHighlights();
+

src/previewSupport/handleElementHighlights.js

@@ -0,0 +1,65 @@
+import throttle from 'lodash-es/throttle';
+
+import channel from './channel';
+
+const RESIZE_THROTTLE = 250;
+let highlightSelector = null;
+
+const handleWindowResize = throttle(() => {
+  updateCovers(highlightSelector);
+}, RESIZE_THROTTLE);
+
+window.addEventListener('resize', handleWindowResize);
+
+function getOffsetFromBody(element) {
+  if (element === document.body) {
+    return {top: 0, left: 0};
+  }
+  const {top, left} = getOffsetFromBody(element.offsetParent);
+  return {top: top + element.offsetTop, left: left + element.offsetLeft};
+}
+
+function removeCovers() {
+  const highlighterElements =
+    document.querySelectorAll('.__popcode-highlighter');
+  for (const highlighterElement of highlighterElements) {
+    highlighterElement.remove();
+  }
+}
+
+function addCovers(selector) {
+  const elements = document.querySelectorAll(selector);
+  for (const element of elements) {
+    const cover = document.createElement('div');
+    const rect = element.getBoundingClientRect();
+    let offset = {top: rect.top, left: rect.left};
+    if (element.offsetParent === null) {
+      cover.style.position = 'fixed';
+    } else if (element !== document.body ||
+      element !== document.documentElement) {
+      offset = getOffsetFromBody(element);
+    }
+    document.body.appendChild(cover);
+    cover.classList = '__popcode-highlighter';
+    cover.style.left = `${offset.left}px`;
+    cover.style.top = `${offset.top}px`;
+    cover.style.width = `${element.offsetWidth}px`;
+    cover.style.height = `${element.offsetHeight}px`;
+    cover.classList.add('fade');
+  }
+}
+
+function updateCovers(selector) {
+  removeCovers();
+  if (selector !== null) {
+    highlightSelector = selector;
+    addCovers(selector);
+  }
+}
+
+export default function handleElementHighlights() {
+  channel.bind(
+    'highlightElement',
+    (_trans, selector) => updateCovers(selector),
+  );
+}

src/records/UiState.js

@@ -10,4 +10,5 @@ export default Record({
   openTopBarMenu: null,
   requestedFocusedLine: null,
   saveIndicatorShown: false,
+  focusedSelector: null,
 }, 'UiState');

src/reducers/ui.js

@@ -66,6 +66,17 @@ export default function ui(stateIn, action) {
     case 'EDITOR_FOCUSED_REQUESTED_LINE':
       return state.set('requestedFocusedLine', null);
 
+    case 'CURRENT_FOCUSED_SELECTOR_CHANGED':
+      return state.setIn(
+        ['focusedSelector'], action.payload,
+      );
+
+    case 'EDITOR_BLURRED':
+      return state.setIn(
+        ['focusedSelector'],
+        null,
+      );
+
     case 'START_DRAG_COLUMN_DIVIDER':
       return state.set('isDraggingColumnDivider', true);