Revamp the client interface naming and other details.

The main change is to make the interface less implementation-defined,
so the UI decisions are left for the UI code, not baked into the
naming.

This also adds some of changes needed for #1209, but does not
implement it.

Author: cdsmith

docs/ClientInterface.md

@@ -24,7 +24,7 @@ running in.
 These are messages that are sent by the program to its parent frame, to be
 handled by the UI:
 
-### `{type: 'message', msgType: t, str: s}`
+### `{type: 'consoleOut', msgType: t, str: s}`
 
 This indicates output can be displayed in an information console.  Programs
 redirect stdout, stderr, and debug output to this.  The `type` attribute
@@ -34,47 +34,63 @@ is one of `log`, `warning`, or `error`.
 
 This indicates that the program has started running.
 
-### `{type: 'showCanvas'}
+### `{type: 'showGraphics'}
 
 This indicates that the program needs to be visible.  Until this message
 is sent, the UI may hide the frame where the program is running, assuming
 that it will not display anything.
 
-### `{type: 'initDebug'}`
+### `{type: 'debugReady'}`
 
 This indicates that the program is ready to handle messages from the
 inspection debugger.
 
-### `{type: 'openTreeDialog', nodeId: id, fullPic: pic}`
+### `{type: 'debugActive', fullPic: pic}`
 
 This indicates that the program has paused and is ready to communicate
-with the inspection debugger.  The `nodeId` attribute gives the id of
-the node in the expression tree that should be selected.  If present,
-the `fullPic` attribute gives the entire expression tree.  (See the
-later section for the structure of the expression tree.)
+with the inspection debugger.  The `fullPic` attribute gives the current
+expression tree.  (See the later section for the structure of the
+expression tree.)
 
-This may be called many times during a pause.  The first time, it
-always includes the `fullPic` attribute.  After that, `fullPic` may be
-omitted for performance, and should be assumed to be the same as the
-last call.
-
-### `{type: 'destroyTreeDialog'}`
+### `{type: 'debugFinished'}`
 
 This indicates that the program has stopped cooperating with the
 inspection debugger, and continued running.  The UI may wish to stop
 displaying debugger controls.
 
+### `{type: 'nodeClicked', nodeId: id}`
+
+This indicates that a node was clicked on the program output while
+debugging was active.  The UI can respond as it chooses.
+
+If id is -1, this indicates that the click wasn't on any node.
+
+### `{type: 'nodeHovered', nodeId: id}`
+
+This indicates that a node was hovered over with the pointer on the
+program output while debugging was active.  The UI can respond as it
+chooses.
+
+If id is -1, this indicates that the pointer is no longer hovering
+over any node.
+
 ## Messages from UI to program
 
 These are messages that are sent by the UI to the program, to
 influence its behavior.
 
-### `{type: 'canvasShown'}`
+### `{type: 'graphicsShown'}`
 
 This informs the program that its frame is now visible.  It may want to
 respond by continuing to run behavior that assumes it is visible.
 
-### `{type: 'highlight', nodeId: id}`
+### `{type: 'debugSelect', nodeId: id}`
+
+This instructs the program to select the portion of the picture
+corresponding to the `nodeId` attribute.  If the `nodeId` attribute is
+-1, then the selection should be cancelled.
+
+### `{type: 'debugHighlight', nodeId: id}`
 
 This instructs the program to highlight in its output the portion of
 the picture corresponding to the `nodeId` attribute.  If the `nodeId`
@@ -84,11 +100,11 @@ attribute is -1, then the highlight should be cancelled.
 
 This instructs the program to enter debug mode, freezing its normal
 functions and interacting with the debugger.  The program will respond
-by immediately sending a `openTreeDialog` message back, containing a
-`fullPic` attribute as well as `nodeId`.
+by immediately sending a `debugActive` message back with the current
+expression tree.
 
-### `{type: 'cancelDebug'}`
+### `{type: 'stopDebug'}`
 
 This instructs the program to leave debug mode and resume its normal
 functions.  The program will acknowledge that it has done so by sending
-a `destroyTreeDialog` message.
+a `debugFinished` message.

web/js/codeworld.js

@@ -815,7 +815,7 @@ function formatSource() {
 
 function stopRun() {
     if (window.debugActive) {
-        document.getElementById('runner').contentWindow.postMessage({type: 'cancelDebug'}, '*');
+        document.getElementById('runner').contentWindow.postMessage({type: 'stopDebug'}, '*');
         destroyTreeDialog();
     }
     window.cancelCompile();
@@ -834,32 +834,32 @@ window.addEventListener('message', event => {
                 showRequiredChecksInDialog(msg);
             }, 500);
         }
-    } else if (event.data.type === 'showCanvas') {
+    } else if (event.data.type === 'showGraphics') {
         const runner = document.getElementById('runner');
         runner.style.display = '';
         runner.focus();
         runner.contentWindow.focus();
-        runner.contentWindow.postMessage({type: 'canvasShown'}, '*');
-    } else if (event.data.type === 'message') {
+        runner.contentWindow.postMessage({type: 'graphicsShown'}, '*');
+    } else if (event.data.type === 'consoleOut') {
         if (event.data.str !== '') printMessage(event.data.msgType, event.data.str);
         if (event.data.msgType === 'error') markFailed();
     } else if (event.data.type === 'updateUI') {
         updateUI();
-    } else if (event.data.type === 'initDebug') {
+    } else if (event.data.type === 'debugReady') {
         window.debugAvailable = true;
         updateUI();
-    } else if (event.data.type === 'openTreeDialog') {
+    } else if (event.data.type === 'debugActive') {
         window.debugActive = true;
         updateUI();
-    } else if (event.data.type === 'destroyTreeDialog') {
+    } else if (event.data.type === 'debugFinished') {
         window.debugActive = false;
         updateUI();
     }
 });
 
 function inspect() {
     if (window.debugActive) {
-        document.getElementById('runner').contentWindow.postMessage({type: 'cancelDebug'}, '*');
+        document.getElementById('runner').contentWindow.postMessage({type: 'stopDebug'}, '*');
     } else {
         document.getElementById('runner').contentWindow.postMessage({type: 'startDebug'}, '*');
     }

web/js/debugmode.js

@@ -59,12 +59,14 @@
                     });
 
                     debugHighlightShape(true, nodeId);
+                    parent.postMessage({type: 'nodeHovered', nodeId: nodeId}, '*');
                 }
             });
 
             canvas.addEventListener('mouseout', evt => {
                 if (active) {
                     debugHighlightShape(true, -1);
+                    parent.postMessage({type: 'nodeHovered', nodeId: -1}, '*');
                 }
             });
 
@@ -75,14 +77,12 @@
                         y: evt.clientY
                     });
 
-                    if (nodeId >= 0) {
-                        parent.postMessage({type: 'openTreeDialog', nodeId: nodeId}, '*');
-                    }
+                    parent.postMessage({type: 'nodeClicked', nodeId: nodeId}, '*');
                 }
             });
 
             if (parent) {
-                parent.postMessage({type: 'initDebug'}, '*');
+                parent.postMessage({type: 'debugReady'}, '*');
             }
         }
     }
@@ -93,23 +93,27 @@
         debugSetActive(true);
         debugHighlightShape(true, -1);
 
-        parent.postMessage({type: 'openTreeDialog', fullPic: debugGetPicture(), nodeId: 0}, '*');
+        parent.postMessage({type: 'debugActive', fullPic: debugGetPicture()}, '*');
     }
 
     function stopDebug() {
         active = false;
         debugSetActive(false);
         debugHighlightShape(true, -1);
 
-        parent.postMessage({type: 'destroyTreeDialog'}, '*');
+        parent.postMessage({type: 'debugFinished'}, '*');
     }
 
     window.addEventListener('message', event => {
         if (!event.data.type) return;
 
-        if (event.data.type === 'highlight') {
+        if (event.data.type === 'debugHighlight') {
             if (active) debugHighlightShape(true, event.data.nodeId);
-        } else if (event.data.type === 'cancelDebug') {
+        } else if (event.data.type === 'debugSelect') {
+            if (active) {
+                // For now, do nothing.  Selection is not implemented.
+            }
+        } else if (event.data.type === 'stopDebug') {
             stopDebug();
         } else if (event.data.type === 'startDebug') {
             startDebug();

web/js/run.js

@@ -26,7 +26,7 @@ window.hasObservableOutput = false;
 window.addEventListener('message', event => {
     if (!event.data.type) return;
 
-    if (event.data.type === 'canvasShown') {
+    if (event.data.type === 'graphicsShown') {
         window.dispatchEvent(new Event('resize'));
     }
 });
@@ -52,7 +52,7 @@ function addMessage(type, str) {
         }
 
         if (window.parent) {
-            window.parent.postMessage({type: 'message', msgType: type, str: str}, '*');
+            window.parent.postMessage({type: 'consoleOut', msgType: type, str: str}, '*');
             return;
         }
     } catch (e) {
@@ -81,7 +81,7 @@ function showCanvas() {
             return;
         }
 
-        window.parent.postMessage({type: 'showCanvas'}, '*');
+        window.parent.postMessage({type: 'showGraphics'}, '*');
     } catch (e) {
         // Ignore, and assume the canvas is already shown.
     }

web/js/treedialog.js

@@ -191,12 +191,17 @@
 
     function highlight(nodeId) {
         const runner = document.getElementById('runner');
-        runner.contentWindow.postMessage({type: 'highlight', nodeId: nodeId}, '*');
+        runner.contentWindow.postMessage({type: 'debugHighlight', nodeId: nodeId}, '*');
+    }
+
+    function select(nodeId) {
+        const runner = document.getElementById('runner');
+        runner.contentWindow.postMessage({type: 'debugSelect', nodeId: nodeId}, '*');
     }
 
     function cancelDebug() {
         const runner = document.getElementById('runner');
-        runner.contentWindow.postMessage({type: 'cancelDebug'}, '*');
+        runner.contentWindow.postMessage({type: 'stopDebug'}, '*');
     }
 
     function initTreeDialog(pic) {
@@ -223,11 +228,13 @@
     }
     window.initTreeDialog = initTreeDialog;
 
-    function openTreeDialog(id) {
+    function selectNode(id) {
         if (!open) {
             openDialog();
         }
 
+        focus(id);
+
         const picture = getPicNode(id);
         currentPic = picture;
 
@@ -237,7 +244,6 @@
 
         dialog.dialog('option', 'title', picture.name);
     }
-    window.openTreeDialog = openTreeDialog;
 
     function closeTreeDialog() {
         closeDialog();
@@ -260,10 +266,14 @@
     window.addEventListener('message', event => {
         if (!event.data.type) return;
 
-        if (event.data.type === 'openTreeDialog') {
-            if (event.data.fullPic) initTreeDialog(event.data.fullPic);
-            openTreeDialog(event.data.nodeId);
-        } else if (event.data.type === 'destroyTreeDialog') {
+        if (event.data.type === 'debugActive') {
+            initTreeDialog(event.data.fullPic);
+            selectNode(0);
+        } if (event.data.type === 'nodeClicked') {
+            selectNode(event.data.nodeId);
+        } if (event.data.type === 'nodeHovered') {
+            // For now, do nothing.
+        } else if (event.data.type === 'debugFinished') {
             destroyTreeDialog();
         }
     });