[Libreoffice-commits] online.git: Branch 'distro/collabora/collabora-online-1-9' - loleaflet/src
László Németh
laszlo.nemeth at collabora.com
Thu Oct 20 14:35:24 UTC 2016
loleaflet/src/core/Socket.js | 12 +++
loleaflet/src/layer/tile/GridLayer.js | 2
loleaflet/src/layer/tile/TileLayer.js | 111 +++++++++++++++++++++++-----------
3 files changed, 90 insertions(+), 35 deletions(-)
New commits:
commit 24fe9faf1bc590c1162b804a602947ae85c5e293
Author: László Németh <laszlo.nemeth at collabora.com>
Date: Thu Oct 20 14:55:07 2016 +0200
loleaflet: traffic log and automatic typing in tile debug mode
- show outgoing and incoming network messages with some
highlighting in Javascript console (default in tile
debug mode)
- add optional automatic typing
- add layer controls for overlays and automatic typing
- differentiate rectangle borders (newer is more opaque)
- fixes:
- fix function call at cancelled tiles
- hide all attribution control when disabling debug mode
diff --git a/loleaflet/src/core/Socket.js b/loleaflet/src/core/Socket.js
index 34608e9..3577502 100644
--- a/loleaflet/src/core/Socket.js
+++ b/loleaflet/src/core/Socket.js
@@ -53,6 +53,9 @@ L.Socket = L.Class.extend({
// Only attempt to log text frames, not binary ones.
if (typeof msg === 'string') {
L.Log.log(msg, L.OUTGOING, coords);
+ if (this._map._docLayer && this._map._docLayer._debug) {
+ console.log('%cOUTGOING%c: ' + msg.concat(' ').replace(' ', '%c ', 1), 'background:#fbb;color:black', 'color:red', 'color:black');
+ }
}
}
else {
@@ -65,6 +68,9 @@ L.Socket = L.Class.extend({
// Only attempt to log text frames, not binary ones.
if (typeof msg === 'string') {
L.Log.log(msg, L.OUTGOING, coords);
+ if (this._map._docLayer && this._map._docLayer._debug) {
+ console.log('%cOUTGOING%c: ' + msg.concat(' ').replace(' ', '%c ', 1), 'background:#fbb;color:black', 'color:red', 'color:black');
+ }
}
this.socket.send(msg);
@@ -126,6 +132,10 @@ L.Socket = L.Class.extend({
textMsg = String.fromCharCode.apply(null, imgBytes.subarray(0, index));
}
+ if (this._map._docLayer && this._map._docLayer._debug) {
+ console.log('%cINCOMING%c: ' + textMsg.concat(' ').replace(' ', '%c ', 1), 'background:#ddf;color:black', 'color:blue', 'color:black');
+ }
+
var command = this.parseServerCmd(textMsg);
if (textMsg.startsWith('loolserver ')) {
// This must be the first message, unless we reconnect.
@@ -214,7 +224,7 @@ L.Socket = L.Class.extend({
else if (textMsg.startsWith('pong ') && this._map._docLayer && this._map._docLayer._debug) {
var times = this._map._docLayer._debugTimePING;
var timeText = this._map._docLayer._debugSetTimes(times, +new Date() - this._map._docLayer._debugPINGQueue.shift());
- this._map._docLayer._debugDataPING.setPrefix('Server ping time: ' + timeText +
+ this._map._docLayer._debugData['ping'].setPrefix('Server ping time: ' + timeText +
'. Rendered tiles: ' + command.rendercount +
', last: ' + (command.rendercount - this._map._docLayer._debugRenderCount));
this._map._docLayer._debugRenderCount = command.rendercount;
diff --git a/loleaflet/src/layer/tile/GridLayer.js b/loleaflet/src/layer/tile/GridLayer.js
index 3141c65..9a62bc8 100644
--- a/loleaflet/src/layer/tile/GridLayer.js
+++ b/loleaflet/src/layer/tile/GridLayer.js
@@ -540,7 +540,7 @@ L.GridLayer = L.Layer.extend({
delete this._tiles[key];
if (this._debug) {
this._debugCancelledTiles++;
- this._debugShowTotalData();
+ this._debugShowTileData();
}
}
}
diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index 9672459..ba14abe 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -158,7 +158,9 @@ L.TileLayer = L.GridLayer.extend({
}
this._debug = map.options.debug;
- this._debugInit();
+ if (this._debug) {
+ this._debugInit();
+ }
this._searchResultsLayer = new L.LayerGroup();
map.addLayer(this._searchResultsLayer);
@@ -387,15 +389,16 @@ L.TileLayer = L.GridLayer.extend({
toggleTileDebugMode: function() {
this._invalidateClientVisibleArea();
this._debug = !this._debug;
- if (this._debugInfo) {
- this._map.removeLayer(this._debugInfo);
- }
if (!this._debug) {
- this._debugDataPING.setPrefix('');
- this._debugDataTileCombine.setPrefix('');
- this._debugDataFromKeyInputToInvalidate.setPrefix('');
+ map.removeLayer(this._debugInfo);
+ map.removeLayer(this._debugInfo2);
+ } else {
+ if (this._debugInfo) {
+ map.addLayer(this._debugInfo);
+ map.addLayer(this._debugInfo2);
+ }
+ this._debugInit();
}
- this._debugInit();
this._onMessage('invalidatetiles: EMPTY', null);
},
@@ -405,7 +408,7 @@ L.TileLayer = L.GridLayer.extend({
return;
}
var obj = JSON.parse(textMsg.substring(jsonIdx));
- if (obj.commandName == '.uno:DocumentRepair') {
+ if (obj.commandName === '.uno:DocumentRepair') {
this._onDocumentRepair(obj);
}
else if (obj.commandName === '.uno:CellCursor') {
@@ -1821,36 +1824,65 @@ L.TileLayer = L.GridLayer.extend({
},
_debugShowTileData: function() {
- this._debugDataLoadCount.setPrefix('Total of requested tiles: ' +
+ this._debugData['loadCount'].setPrefix('Total of requested tiles: ' +
this._debugInvalidateCount + ', received: ' + this._debugLoadCount +
', cancelled: ' + this._debugCancelledTiles);
},
_debugInit: function() {
- if (this._debug) {
+ this._debugTiles = {};
+ this._debugInvalidBounds = {};
+ this._debugInvalidBoundsMessage = {};
+ this._debugTimeout();
+ this._debugId = 0;
+ this._debugCancelledTiles = 0;
+ this._debugLoadCount = 0;
+ this._debugInvalidateCount = 0;
+ this._debugRenderCount = 0;
+ if (!this._debugData) {
+ this._debugData = {};
+ this._debugDataNames = ['tileCombine', 'fromKeyInputToInvalidate', 'ping', 'loadCount'];
+ for (var i = 0; i < this._debugDataNames.length; i++) {
+ this._debugData[this._debugDataNames[i]] = L.control.attribution({prefix: '', position: 'bottomleft'}).addTo(map);
+ }
this._debugInfo = new L.LayerGroup();
+ this._debugInfo2 = new L.LayerGroup();
+ this._debugTyper = new L.LayerGroup();
map.addLayer(this._debugInfo);
- this._debugTiles = {};
- this._debugInvalidBounds = {};
- this._debugInvalidBoundsMessage = {};
- this._debugTimeout();
- this._debugId = 0;
- this._debugCancelledTiles = 0;
- this._debugLoadCount = 0;
- this._debugInvalidateCount = 0;
- this._debugRenderCount = 0;
- if (!this._debugDataTileCombine) {
- this._debugDataTileCombine = L.control.attribution({prefix: '', position: 'bottomleft'}).addTo(map);
- this._debugDataFromKeyInputToInvalidate = L.control.attribution({prefix: '', position: 'bottomleft'}).addTo(map);
- this._debugDataPING = L.control.attribution({prefix: '', position: 'bottomleft'}).addTo(map);
- this._debugDataLoadCount = L.control.attribution({prefix: '', position: 'bottomleft'}).addTo(map);
-
+ map.addLayer(this._debugInfo2);
+ var overlayMaps = {
+ 'Tile overlays': this._debugInfo,
+ 'Screen overlays': this._debugInfo2,
+ 'Typing': this._debugTyper,
}
- this._debugTimePING = this._debugGetTimeArray();
- this._debugPINGQueue = [];
- this._debugTimeKeypress = this._debugGetTimeArray();
- this._debugKeypressQueue = [];
+ L.control.layers({}, overlayMaps, {collapsed: false}).addTo(map);
+
+ this._map.on('layeradd', function(e) {
+ if (e.layer === this._debugTyper) {
+ this._debugTypeTimeout();
+ } else if (e.layer === this._debugInfo2) {
+ for (var i = 0; i < this._debugDataNames.length; i++) {
+ this._debugData[this._debugDataNames[i]].addTo(map);
+ }
+ }
+ }, this);
+ map.on('layerremove', function(e) {
+ if (e.layer === this._debugTyper) {
+ clearTimeout(this._debugTypeTimeoutId);
+ } else if (e.layer === this._debugInfo2) {
+ for (var i in this._debugData) {
+ this._debugData[i].remove();
+ }
+ }
+ }, this);
}
+ this._debugTimePING = this._debugGetTimeArray();
+ this._debugPINGQueue = [];
+ this._debugTimeKeypress = this._debugGetTimeArray();
+ this._debugKeypressQueue = [];
+ this._debugLorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
+ this._debugLorem += ' ' + this._debugLorem + '\n';
+ this._debugLoremPos = 0;
},
_debugSetTimes: function(times, value) {
@@ -1879,7 +1911,7 @@ L.TileLayer = L.GridLayer.extend({
var oldestKeypress = this._debugKeypressQueue.shift();
if (oldestKeypress) {
var timeText = this._debugSetTimes(this._debugTimeKeypress, now - oldestKeypress);
- this._debugDataFromKeyInputToInvalidate.setPrefix('Elapsed time between key input and next invalidate: ' + timeText);
+ this._debugData['fromKeyInputToInvalidate'].setPrefix('Elapsed time between key input and next invalidate: ' + timeText);
}
// query server ping time after invalidation messages
@@ -1905,7 +1937,7 @@ L.TileLayer = L.GridLayer.extend({
messages += '' + i + ': ' + this._debugInvalidBoundsMessage[i] + ' <br>';
}
}
- this._debugDataTileCombine.setPrefix(messages);
+ this._debugData['tileCombine'].setPrefix(messages);
this._debugShowTileData();
},
@@ -1915,11 +1947,12 @@ L.TileLayer = L.GridLayer.extend({
var rect = this._debugInvalidBounds[key];
var opac = rect.options.fillOpacity;
if (opac <= 0.04) {
- rect.setStyle({fillOpacity: 0});
if (key < this._debugId - 5) {
this._debugInfo.removeLayer(rect);
delete this._debugInvalidBounds[key];
delete this._debugInvalidBoundsMessage[key];
+ } else {
+ rect.setStyle({fillOpacity: 0, opacity: 1 - (this._debugId - key) / 7});
}
} else {
rect.setStyle({fillOpacity: opac - 0.04});
@@ -1927,6 +1960,18 @@ L.TileLayer = L.GridLayer.extend({
}
this._debugTimeoutId = setTimeout(function () { map._docLayer._debugTimeout() }, 50);
}
+ },
+
+ _debugTypeTimeout: function() {
+ var letter = this._debugLorem.charCodeAt(this._debugLoremPos % this._debugLorem.length);
+ this._debugKeypressQueue.push(+new Date());
+ if (letter === '\n'.charCodeAt(0)) {
+ this._postKeyboardEvent('input', 0, 1280);
+ } else {
+ this._postKeyboardEvent('input', this._debugLorem.charCodeAt(this._debugLoremPos % this._debugLorem.length), 0);
+ }
+ this._debugLoremPos++;
+ this._debugTypeTimeoutId = setTimeout(function () { map._docLayer._debugTypeTimeout() }, 50);
}
});
More information about the Libreoffice-commits
mailing list