Merge pull request #1402 from peuter/replay-fixes2

Replay fixes

client/source/class/cv/io/Client.js

@@ -242,6 +242,7 @@ qx.Class.define('cv.io.Client', {
       if (value === true) {
         this.__lastError = null;
       }
+      this.record('connected', value);
     },
 
     setInitialAddresses(addresses) {

source/class/cv/io/AbstractClient.js

@@ -30,13 +30,24 @@ qx.Class.define('cv.io.AbstractClient', {
   ***********************************************
   */
   properties: {
+    connected: {
+      check: 'Boolean',
+      init: false,
+      event: 'changeConnected',
+      apply: '_applyConnected'
+    },
     dataReceived: {
       check: 'Boolean',
       init: false
     },
     name: {
       check: 'String',
       nullable: true
+    },
+    server: {
+      check: 'String',
+      nullable: true,
+      event: 'changedServer'
     }
   },
 
@@ -51,6 +62,10 @@ qx.Class.define('cv.io.AbstractClient', {
     setResourcePath(name, path) {
       this._resources[name] = path;
       this.fireDataEvent('resourcePathAdded', name);
+    },
+
+    _applyConnected(connected) {
+      this.record('connected', connected);
     }
   }
 });

source/class/cv/io/Mockup.js

@@ -70,24 +70,6 @@ qx.Class.define('cv.io.Mockup', {
     }
   },
 
-  /*
-  ******************************************************
-    PROPERTIES
-  ******************************************************
-  */
-  properties: {
-    server: {
-      check: 'String',
-      init: 'Mockup'
-    },
-
-    connected: {
-      check: 'Boolean',
-      init: true,
-      event: 'changeConnected'
-    }
-  },
-
   /*
   ******************************************************
     MEMBERS

source/class/cv/io/System.js

@@ -44,28 +44,6 @@ qx.Class.define('cv.io.System', {
     qx.event.message.Bus.subscribe('cv.ui.structure.tile.currentPage', this._onPageChange, this);
   },
 
-  /*
-  ***********************************************
-   PROPERTIES
-  ***********************************************
-  */
-  properties: {
-    connected: {
-      check: 'Boolean',
-      init: true,
-      event: 'changeConnected'
-    },
-
-    /**
-     * The server the client is currently speaking to
-     */
-    server: {
-      check: 'String',
-      nullable: true,
-      event: 'changedServer'
-    }
-  },
-
   /*
   ***********************************************
     MEMBERS

source/class/cv/io/mqtt/Client.js

@@ -39,25 +39,6 @@ qx.Class.define('cv.io.mqtt.Client', {
     this.__memberLookup = {};
   },
 
-  /*
-  ***********************************************
-    PROPERTIES
-  ***********************************************
-  */
-  properties: {
-    connected: {
-      check: 'Boolean',
-      init: false,
-      event: 'changeConnected'
-    },
-
-    server: {
-      check: 'String',
-      nullable: true,
-      event: 'changedServer'
-    }
-  },
-
   /*
   ***********************************************
     MEMBERS

source/class/cv/io/openhab/Rest.js

@@ -39,26 +39,6 @@ qx.Class.define('cv.io.openhab.Rest', {
     this.__memberLookup = {};
   },
 
-  /*
-  ***********************************************
-    PROPERTIES
-  ***********************************************
-  */
-  properties: {
-
-    connected: {
-      check: 'Boolean',
-      init: false,
-      event: 'changeConnected'
-    },
-
-    server: {
-      check: 'String',
-      nullable: true,
-      event: 'changedServer'
-    }
-  },
-
   /*
   ***********************************************
     MEMBERS

source/class/cv/report/Record.js

@@ -312,8 +312,8 @@ qx.Class.define('cv.report.Record', {
           button: nativeEvent.button,
           clientX: Math.round(nativeEvent.clientX),
           clientY: Math.round(nativeEvent.clientY),
-          currentTarget: nativeEvent.currentTarget ? this.__getDomPath(nativeEvent.currentTarget) : undefined,
-          relatedTarget: nativeEvent.relatedTarget ? this.__getDomPath(nativeEvent.relatedTarget) : undefined,
+          currentTarget: this.__getDomPath(nativeEvent.currentTarget) ?? undefined,
+          relatedTarget: this.__getDomPath(nativeEvent.relatedTarget) ?? undefined,
           pageX: nativeEvent.pageX ? Math.round(nativeEvent.pageX) : undefined,
           pageY: nativeEvent.pageY ? Math.round(nativeEvent.pageY) : undefined,
           returnValue: nativeEvent.returnValue,
@@ -405,6 +405,7 @@ qx.Class.define('cv.report.Record', {
       // get path
       const path = this.__getDomPath(ev.target);
       if (!path) {
+        this.debug('path to event target not found, skip recording ' + ev.type + ' event');
         return;
       }
       this.debug('recording ' + ev.type + ' on ' + path);
@@ -425,37 +426,49 @@ qx.Class.define('cv.report.Record', {
       this.record(cv.report.Record.USER, 'scroll', data);
     },
 
+    /**
+     * @param el {Element|Node|Window|undefined}
+     * @return {string} CSS selector to element
+     */
     __getDomPath(el) {
+      if (!el) {
+        return '';
+      }
       if (el === window) {
         return 'Window';
       } else if (el === document) {
         return 'document';
       }
       const stack = [];
-      while (el.parentNode !== null) {
-        let sibCount = 0;
+      const origEl = el;
+      while (el.parentElement !== null) {
         let sibIndex = 0;
-        for (let i = 0; i < el.parentNode.childNodes.length; i++) {
-          const sib = el.parentNode.childNodes[i];
-          if (sib.nodeName === el.nodeName) {
-            if (sib === el) {
-              sibIndex = sibCount;
-            }
-            sibCount++;
+        for (let i = 0; i < el.parentElement.children.length; i++) {
+          const sib = el.parentElement.children[i];
+          if (sib === el) {
+            sibIndex = i + 1;
+            break;
           }
         }
         if (el.hasAttribute('id') && el.id !== '') {
           stack.unshift(el.nodeName.toLowerCase() + '#' + el.id);
-          return stack.join('>');
-        } else if (sibCount > 1) {
-          stack.unshift(el.nodeName.toLowerCase() + ':nth-child(' + (sibIndex + 1) + ')');
-        } else {
-          stack.unshift(el.nodeName.toLowerCase());
+          const sel = stack.join('>');
+          if (document.querySelector(sel) !== origEl) {
+            this.debug('wrong selector: ' + sel + ', looking for', origEl, 'found', document.querySelector(sel));
+            return '';
+          }
+          return sel;
         }
-        el = el.parentNode;
+        stack.unshift(el.nodeName.toLowerCase() + ':nth-child(' + sibIndex + ')');
+        el = el.parentElement;
       }
 
-      return stack.slice(1).join('>'); // removes the html element
+      const sel = stack.slice(1).join('>'); // removes the html element
+      if (document.querySelector(sel) !== origEl) {
+        this.debug('wrong selector: ' + sel + ', looking for', origEl, 'found', document.querySelector(sel));
+        return '';
+      }
+      return sel;
     },
 
     getData(dontStop) {

source/class/cv/report/Replay.js

@@ -238,8 +238,9 @@ qx.Class.define('cv.report.Replay', {
               // workaround for mouse clicks on <a> elemente e.g. in the breadcrumb navigation
               // check for last pointerdown event, if id was on same element we have a click
               for (let i = this.__currentIndex - 1; i > 0; i--) {
-                if (this.__log[i].d.native.type === 'pointerdown') {
-                  if (this.__log[i].i === record.i) {
+                const entry = this.__log[i];
+                if (entry.c === 'user' && entry.d.native.type === 'pointerdown') {
+                  if (entry.i === record.i) {
                     // same element
                     target.click();
                   }
@@ -293,6 +294,10 @@ qx.Class.define('cv.report.Replay', {
         client = cv.io.BackendConnections.getClient(record.o.name);
       }
       switch (record.i) {
+        case 'connected':
+          client.setConnected(record.d);
+          break;
+
         case 'read':
           if (client instanceof cv.io.openhab.Rest) {
             client.handleMessage(record.d);
@@ -304,6 +309,7 @@ qx.Class.define('cv.report.Replay', {
             this.error('long-polling transport should not record \'backend\' log events. Skip replaying');
           }
           break;
+
         default:
           if (typeof client[record.i] === 'function') {
             client[record.i](record.d);

source/class/cv/ui/structure/tile/components/Chart.js

@@ -21,6 +21,7 @@
 /**
  * Shows an chart.
  * @asset(libs/d3.min.js)
+ * @asset(libs/d3.min.js.map)
  * @ignore(d3)
  */
 qx.Class.define('cv.ui.structure.tile.components.Chart', {
@@ -297,9 +298,9 @@ qx.Class.define('cv.ui.structure.tile.components.Chart', {
         this._tooltip.style.display = 'none';
         this._element.appendChild(this._tooltip);
 
-        svg.on('pointerenter', this._onPointerEntered.bind(this));
-        svg.on('pointermove', this._onPointerMoved.bind(this));
-        svg.on('pointerleave', this._onPointerLeft.bind(this));
+        svg.on('pointerenter', ev => this._onPointerEntered(ev));
+        svg.on('pointermove', ev => this._onPointerMoved(ev));
+        svg.on('pointerleave', ev => this._onPointerLeft(ev));
       }
       svg.on(
         'touchmove',

source/class/cv/ui/structure/tile/components/Flow.js

@@ -251,7 +251,9 @@ qx.Class.define('cv.ui.structure.tile.components.Flow', {
     },
 
     _endDrag(ev) {
-      this._element.removeEventListener('pointermove', this.drag);
+      if (this.drag) {
+        this._element.removeEventListener('pointermove', this.drag);
+      }
       this._element.removeEventListener('touchmove', this._cancelEvent);
     },
 

source/resource/libs/EventRecorder.js

@@ -39,7 +39,7 @@ var EVENT_RECORDER = null;
             if (EVENT_RECORDER) {
               EVENT_RECORDER(ev);
             }
-            listener(ev);
+            listener.call(this, ev);
           };
           this.$$wrappers[type][listener.$$WRID] = wrapper;
 

source/resource/structures/tile/templates.xml

@@ -330,7 +330,7 @@
             </cv-row>
             <cv-chart background="true" show-grid="false" show-y-axis="false"
                       show-x-axis="false" slot-y-format="" slot-series="month" slot-refresh="300" colspan="3"
-                      rowspan="3" slot-x-format="%d. %b" slot-min="0">
+                      rowspan="3" slot-x-format="%d. %b" slot-min="">
                 <slot name="dataset">NEEDS DATASET</slot>
                 <slot name="liveUpdateAddress">NEEDS ADDRESS</slot>
             </cv-chart>
@@ -341,7 +341,7 @@
                     </label>
                 </header>
                 <cv-chart slot-y-format="%.2f m³" slot-series="month" slot-refresh="300"
-                          slot-x-format="%d. %b" slot-selection="all" slot-min="0">
+                          slot-x-format="%d. %b" slot-selection="all" slot-min="">
                     <slot name="dataset">NEEDS DATASET</slot>
                 </cv-chart>
             </cv-popup>