Merge branch 'gh-pages' of https://github.com/LivelyKernel/lively4-core into gh-pages

Author: JensLincke

src/client/reactive/active-expression-rewriting/active-expression-rewriting.js

@@ -220,12 +220,14 @@ const DependenciesToAExprs = {
   associate(dep, aexpr) {
     this._depsToAExprs.associate(dep, aexpr);
     dep.updateTracking();
+    debouncedUpdateDebuggingViews();
   },
 
   disconnectAllForAExpr(aexpr) {
     const deps = this.getDepsForAExpr(aexpr);
     this._depsToAExprs.removeAllLeftFor(aexpr);
     deps.forEach(dep => dep.updateTracking());
+    debouncedUpdateDebuggingViews();
   },
 
   getAETriplesForFile(url) {
@@ -271,9 +273,11 @@ const HooksToDependencies = {
 
   associate(hook, dep) {
     this._hooksToDeps.associate(hook, dep);
+    debouncedUpdateDebuggingViews();
   },
   remove(hook, dep) {
     this._hooksToDeps.remove(hook, dep);
+    debouncedUpdateDebuggingViews();
   },
 
   async getHookTriplesForFile(url) {
@@ -293,6 +297,7 @@ const HooksToDependencies = {
 
   disconnectAllForDependency(dep) {
     this._hooksToDeps.removeAllLeftFor(dep);
+    debouncedUpdateDebuggingViews();
   },
 
   getDepsForHook(hook) {
@@ -715,20 +720,23 @@ class TracingHandler {
     if(!hook) return;
     hook.addLocation(location || TracingHandler.findRegistrationLocation());
     hook.notifyDependencies();
+    debouncedUpdateDebuggingViews();
   }
 
   static globalUpdated(globalName, location) {
     const hook = SourceCodeHook.get(globalRef, globalName);
     if(!hook) return;
     hook.addLocation(location || TracingHandler.findRegistrationLocation());
     hook.notifyDependencies();
+    debouncedUpdateDebuggingViews();
   }
 
   static localUpdated(scope, varName, location) {
     const hook = SourceCodeHook.get(scope, varName);
     if(!hook) return;
     hook.addLocation(location || TracingHandler.findRegistrationLocation());
     hook.notifyDependencies();
+    debouncedUpdateDebuggingViews();
   }
 
   static async findRegistrationLocation() {
@@ -896,6 +904,32 @@ export function getGlobal(globalName) {
   }
 }
 
+const registeredDebuggingViews = [];
+
+const debouncedUpdateDebuggingViews = _.debounce(updateDebggingViews, 100);
+
+async function updateDebggingViews() {
+  for(let i = 0; i < registeredDebuggingViews.length; i++) {
+    if(!await registeredDebuggingViews[i]()) {
+      registeredDebuggingViews.splice(i, 1);
+      i--;
+    }
+  }
+}
+
+export async function registerFileForAEDebugging(url, context, triplesCallback) {
+  const callback = async () => {
+    if(context && (!context.valid || context.valid())) {
+      triplesCallback(await getDependencyTriplesForFile(url));
+      return true;
+    }
+    return false;
+  }
+  registeredDebuggingViews.push(callback);
+  
+  triplesCallback(await getDependencyTriplesForFile(url));
+}
+
 export async function getDependencyTriplesForFile(url) {
   const result = [];
   for (const hook of HooksToDependencies._hooksToDeps.getAllLeft()) {

src/components/widgets/lively-code-mirror.html

@@ -147,13 +147,13 @@
   */
 
   .activeExpressionGutter {
-    width: 10px;
+    width: 12px;
 
     transition: all 0.5s ease-in-out;
     transition-property: opacity;
 
     opacity: 0;
-    background-color: orange;/*lightgray;*/
+    background-color: lightgray;
     border-left: solid 0.3px gray;
     border-right: solid 0.3px gray;
   }
@@ -169,9 +169,9 @@
     transition: all 0.3s ease-in-out;
     transition-property: background-color, color;
 
-    background-color: rgba(0,255,165,0.5);
-    color: rgba(0,0,0,0.5);
-    text-align: center;
+    /* background-color: rgba(255,165,0,0.5);*/
+    color: rgba(0,0,255,1);
+    /*text-align: center;*/
     vertical-align: middle;
     line-height: normal;
     display: flex;
@@ -187,9 +187,9 @@
     transition: all 0.3s ease-in-out;
     transition-property: background-color, color;
 
-    background-color: rgba(255,165,0,0.5);
-    color: rgba(0,0,0,0.5);
-    text-align: center;
+    /* background-color: rgba(255,165,0,0.5);*/
+    color: rgba(255,0,0,1);
+    /*text-align: center;*/
     vertical-align: middle;
     line-height: normal;
     display: flex;

src/components/widgets/lively-code-mirror.js

@@ -30,7 +30,7 @@ let loadPromise = undefined;
 import { loc, range } from 'utils';
 import indentationWidth from 'src/components/widgets/indent.js';
 import { DependencyGraph } from 'src/client/dependency-graph/graph.js';
-import { getDependencyTriplesForFile } from 'src/client/reactive/active-expression-rewriting/active-expression-rewriting.js';
+import { getDependencyTriplesForFile, registerFileForAEDebugging } from 'src/client/reactive/active-expression-rewriting/active-expression-rewriting.js';
 import { AExprRegistry } from 'src/client/reactive/active-expression/active-expression.js';
 import ContextMenu from 'src/client/contextmenu.js';
 
@@ -223,6 +223,7 @@ export default class LivelyCodeMirror extends HTMLElement {
 
     await lively.sleep(0);
     this.editor.refresh();
+    this.updateAExprDependencies();
   }
 
   async editorLoaded() {
@@ -1411,10 +1412,15 @@ export default class LivelyCodeMirror extends HTMLElement {
     }
     // this.showAExprTextMarkers();
     await this.showAExprDependencyGutter();
-    const [depToAE, AEToDep] = await this.allDependenciesByLine();
-    this.editor.doc.clearGutter('activeExpressionGutter')
-    this.showAExprDependencyGutterMarkers(depToAE, false);
-    this.showAExprDependencyGutterMarkers(AEToDep, true);
+    
+    
+    registerFileForAEDebugging(this.fileURL(), this, (triplets) => {      
+      this.allDependenciesByLine(triplets).then(([depToAE, AEToDep]) => {
+        this.editor.doc.clearGutter('activeExpressionGutter');
+        this.showAExprDependencyGutterMarkers(depToAE, false);
+        this.showAExprDependencyGutterMarkers(AEToDep, true);        
+      });
+    });
   }
 
   async showAExprTextMarkers() {
@@ -1490,7 +1496,7 @@ export default class LivelyCodeMirror extends HTMLElement {
     }
   }
 
-  async allDependenciesByLine() {
+  async allDependenciesByLine(depsMapInFile) {
     const depToAE = new Map();
     const AEToDep = new Map();
 
@@ -1527,19 +1533,19 @@ export default class LivelyCodeMirror extends HTMLElement {
         if (!depToAE.get(dependencyLine)) {
           depToAE.set(dependencyLine, []);
         }
-        depToAE.get(dependencyLine).push({ location: AELocation, source: ae.meta().get("sourceCode"), events: relatedEvents.length });
+        // Group by AE to distinguish between mutltiple AE Objects in the same line?
+        depToAE.get(dependencyLine).push({ location: AELocation, source: ae.meta().get("sourceCode"), events: relatedEvents.length, aes: new Set([ae]) });
       }
 
       if (AELocation.file.includes(this.fileURL())) {
         // AE is in this file
         if (!AEToDep.get(AELine)) {
           AEToDep.set(AELine, []);
         }
-        AEToDep.get(AELine).push({ location: dependencyLoc, source: dependencySource, events: relatedEvents.length });
+        AEToDep.get(AELine).push({ location: dependencyLoc, source: dependencySource, events: relatedEvents.length, aes: new Set([ae]) });
       }
     };
 
-    const depsMapInFile = await getDependencyTriplesForFile(this.fileURL());
     for (const { hook, dependency, ae } of depsMapInFile) {
       const dependencyInfo = dependency.contextIdentifierValue();
       const locations = await hook.getLocations();
@@ -1584,6 +1590,10 @@ export default class LivelyCodeMirror extends HTMLElement {
   fileURL() {
     return lively.query(this, "lively-container").getURL().pathname;
   }
+  
+  valid() {
+    return !!lively.query(this, "lively-container");
+  }
 
   drawAExprGutter(line, dependencies, isAE) {
     this.editor.doc.setGutterMarker(line, 'activeExpressionGutter', this.drawAExprGutterMarker(dependencies, isAE));
@@ -1627,6 +1637,7 @@ export default class LivelyCodeMirror extends HTMLElement {
         if(dep.location.end.column > lastDep.location.end.column) {
           lastDep.location.end = dep.location.end;
         }
+        lastDep.aes = new Set([...lastDep.aes, ...dep.aes]);
       }
     });
 
@@ -1636,7 +1647,7 @@ export default class LivelyCodeMirror extends HTMLElement {
     };
 
     return <div class={"activeExpressionGutter-marker" + (isAE ? "-ae" : "-dep")} click={callback}>
-      {accumulated.length}
+      {isAE ? <b>AE</b> : <i class="fa fa-share-alt"></i>}
     </div>;
   }
 
@@ -1664,7 +1675,7 @@ export default class LivelyCodeMirror extends HTMLElement {
           lively.openBrowser(path, true, {start, end}, false, undefined, true);
         }
         menu.remove();
-      }, dep.events + " event" + (dep.events === 1 ? "" : "s"), this.faIcon(inThisFile ? 'location-arrow' : 'file-code-o')]);
+      }, dep.events + " event" + (dep.events === 1 ? "" : "s") + ", " + dep.aes.size + " instance" + (dep.aes.size === 1 ? "" : "s"), this.faIcon(inThisFile ? 'location-arrow' : 'file-code-o')]);
     });
 
     const menu = await ContextMenu.openIn(document.body, { clientX: markerBounds.left, clientY: markerBounds.bottom }, undefined, document.body, menuItems);