Highlight CSS and JS selectors

package.json

@@ -155,6 +155,9 @@
   "bugs": "https://trello.com/b/ONaFg6wh/popcode",
   "license": "MIT",
   "dependencies": {
+    "@babel/parser": "^7.1.3",
+    "@babel/traverse": "^7.1.4",
+    "@babel/types": "^7.1.3",
     "@firebase/app": "^0.3.4",
     "@firebase/app-types": "^0.3.2",
     "@firebase/auth": "^0.7.6",

src/actions/index.js

@@ -22,7 +22,10 @@ import {
 } from './projects';
 
 import {
+  currentCursorChanged,
   focusLine,
+  editorBlurred,
+  editorFocused,
   editorFocusedRequestedLine,
   startDragColumnDivider,
   stopDragColumnDivider,
@@ -74,6 +77,10 @@ import {
   updateResizableFlex,
 } from './resizableFlex';
 
+import {
+  updateSelectorLocations,
+} from './selectorLocations';
+
 export {
   clearConsoleEntries,
   consoleInputChanged,
@@ -93,13 +100,16 @@ export {
   unhideComponent,
   toggleComponent,
   focusLine,
+  editorBlurred,
+  editorFocused,
   editorFocusedRequestedLine,
   previousConsoleHistory,
   nextConsoleHistory,
   startDragColumnDivider,
   stopDragColumnDivider,
   notificationTriggered,
   userDismissedNotification,
+  currentCursorChanged,
   updateNotificationMetadata,
   exportProject,
   projectExportDisplayed,
@@ -126,4 +136,5 @@ export {
   updateResizableFlex,
   startAccountMigration,
   dismissAccountMigration,
+  updateSelectorLocations,
 };

src/actions/selectorLocations.js

@@ -0,0 +1,7 @@
+import {createAction} from 'redux-actions';
+
+export const updateSelectorLocations = createAction(
+  'UPDATE_SELECTOR_LOCATIONS',
+  selectors => ({selectors}),
+  (_selectors, timestamp = Date.now()) => ({timestamp}),
+);

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

@@ -29,6 +29,9 @@ export default function EditorsColumn({
   requestedFocusedLine,
   onComponentHide,
   onComponentUnhide,
+  onEditorBlurred,
+  onEditorCursorChange,
+  onEditorFocused,
   onEditorInput,
   onRef,
   onRequestedLineFocused,
@@ -70,6 +73,9 @@ export default function EditorsColumn({
           requestedFocusedLine={requestedFocusedLine}
           source={currentProject.sources[language]}
           textSizeIsLarge={isTextSizeLarge}
+          onCursorChange={onEditorCursorChange}
+          onEditorBlurred={onEditorBlurred}
+          onEditorFocused={onEditorFocused}
           onInput={partial(
             onEditorInput,
             currentProject.projectKey,
@@ -144,6 +150,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

@@ -13,6 +13,7 @@ import PreviewFrame from './PreviewFrame';
 export default function Preview({
   compiledProjects,
   consoleEntries,
+  focusedSelector,
   showingErrors,
   onConsoleError,
   onConsoleLog,
@@ -29,6 +30,7 @@ export default function Preview({
     <PreviewFrame
       compiledProject={compiledProject}
       consoleEntries={consoleEntries}
+      focusedSelector={focusedSelector}
       isActive={key === compiledProjects.keySeq().last()}
       key={compiledProject.compiledProjectKey}
       onConsoleError={onConsoleError}
@@ -63,6 +65,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,
@@ -71,3 +74,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

@@ -14,6 +14,7 @@ import {
 import {
   getCompiledProjects,
   getConsoleHistory,
+  getFocusedSelector,
   isCurrentProjectSyntacticallyValid,
   isUserTyping,
 } from '../selectors';
@@ -22,6 +23,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/SelectorLocations.js

@@ -0,0 +1,6 @@
+import {Record, List} from 'immutable';
+
+export default Record({
+  javascript: new List(),
+  css: new List(),
+}, 'SelectorLocations');

src/records/UiState.js

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