Refactor debug menu

Signed-off-by: Neil Guertin <neil.guertin@collabora.com>
Change-Id: I6e2520035d54b9de2b4cf8e015741aaae517fee1
This commit is contained in:
Neil Guertin 2023-12-26 10:48:06 -05:00 committed by Michael Meeks
parent c4470a9687
commit 6dcfc85f4f
6 changed files with 222 additions and 149 deletions

View file

@ -577,7 +577,7 @@ L.Map.include({
aboutDialogKeyHandler: function(event) {
if (event.key === 'd') {
this._docLayer.toggleTileDebugMode();
this._docLayer.toggleDebugMode();
} else if (event.key === 'l') {
// L toggges the Online logging level between the default (whatever
// is set in coolwsd.xml or on the coolwsd command line) and the
@ -610,7 +610,7 @@ L.Map.include({
aboutDialogClickHandler: function(event) {
if (event.detail === 3)
this._docLayer.toggleTileDebugMode();
this._docLayer.toggleDebugMode();
},
showLOAboutDialog: function() {

View file

@ -185,7 +185,7 @@ L.CalcTileLayer = L.CanvasTileLayer.extend({
var topLeftTwips = new L.Point(command.x, command.y);
var offset = new L.Point(command.width, command.height);
var bottomRightTwips = topLeftTwips.add(offset);
if (this._debug) {
if (this._debugTiles) {
this._debugAddInvalidationRectangle(topLeftTwips, bottomRightTwips, textMsg);
}
@ -215,7 +215,7 @@ L.CalcTileLayer = L.CanvasTileLayer.extend({
}
if (needsNewTiles && command.part === this._selectedPart
&& command.mode === this._selectedMode && this._debug)
&& command.mode === this._selectedMode && this._debugTiles)
{
this._debugAddInvalidationMessage(textMsg);
}

View file

@ -1938,39 +1938,6 @@ L.CanvasTileLayer = L.Layer.extend({
this._map.fire('tabstoplistupdate', json);
},
toggleTileDebugMode: function() {
this._debug = !this._debug;
if (!this._debug) {
this._map.removeLayer(this._debugInfo);
this._map.removeLayer(this._debugInfo2);
$('.leaflet-control-layers-expanded').css('display', 'none');
if (this._map._docLayer._docType === 'spreadsheet') {
var section = this._map._docLayer._painter._sectionContainer.getSectionWithName('calc grid');
if (section) {
section.setDrawingOrder(L.CSections.CalcGrid.drawingOrder);
section.sectionProperties.strokeStyle = '#c0c0c0';
}
this._map._docLayer._painter._sectionContainer.removeSection('splits');
this._map._docLayer._painter._sectionContainer.reNewAllSections(true /* redraw */);
}
} else {
if (this._debugInfo) {
this._map.addLayer(this._debugInfo);
this._map.addLayer(this._debugInfo2);
$('.leaflet-control-layers-expanded').css('display', 'block');
}
this._debugInit();
}
if (app.socket.traceEventRecordingToggle)
this._map.addLayer(this._debugTrace);
else
this._map.removeLayer(this._debugTrace);
// redraw canvas with changed debug overlays
this._painter.update();
},
_onCommandValuesMsg: function (textMsg) {
var jsonIdx = textMsg.indexOf('{');
if (jsonIdx === -1) {
@ -5143,6 +5110,47 @@ L.CanvasTileLayer = L.Layer.extend({
});
},
toggleDebugMode: function() {
this._debug = !this._debug;
if (this._debug) {
this._debugInit();
} else {
this._debugStop();
}
// redraw canvas with changed debug overlays
this._painter.update();
},
_debugInit: function() {
this._debugControl = L.control.layers({}, {}, {collapsed: false}).addTo(this._map);
this._debugLayers = [];
this._addDebugTools();
//this._debugControl.addTo(this._map);
if (this._map._docLayer._docType === 'spreadsheet') {
this._map._docLayer._painter._addSplitsSection();
this._map._docLayer._painter._sectionContainer.reNewAllSections(true /* redraw */);
}
},
_debugStop: function () {
for (var i=0; i<this._debugLayers.length; i++) {
this._map.removeLayer(this._debugLayers[i]);
}
this._debugControl.remove();
if (this._map._docLayer._docType === 'spreadsheet') {
var section = this._map._docLayer._painter._sectionContainer.getSectionWithName('calc grid');
if (section) {
section.setDrawingOrder(L.CSections.CalcGrid.drawingOrder);
section.sectionProperties.strokeStyle = '#c0c0c0';
}
this._map._docLayer._painter._sectionContainer.removeSection('splits');
this._map._docLayer._painter._sectionContainer.reNewAllSections(true /* redraw */);
}
},
_debugGetTimeArray: function() {
return {count: 0, ms: 0, best: Number.MAX_SAFE_INTEGER, worst: 0, date: 0};
},
@ -5154,113 +5162,178 @@ L.CanvasTileLayer = L.Layer.extend({
', recv-update: ' + this._debugLoadUpdate);
},
_debugInit: function() {
this._debugInvalidBounds = {};
this._debugInvalidBoundsMessage = {};
this._debugTimeout();
this._debugId = 0;
this._debugLoadTile = 0;
this._debugLoadDelta = 0;
this._debugLoadUpdate = 0;
this._debugInvalidateCount = 0;
this._debugRenderCount = 0;
this._debugDeltas = true;
this._debugDeltasDetail = false;
_addDebugTool: function (tool) {
var layer = new L.LayerGroup();
this._debugLayers.push(layer);
this._debugControl._addLayer(layer, tool.name, true);
if (!this._debugData) {
this._debugData = {};
this._debugDataNames = ['canonicalViewId', 'tileCombine', 'fromKeyInputToInvalidate', 'ping', 'loadCount', 'postMessage'];
for (var i = 0; i < this._debugDataNames.length; i++) {
this._debugData[this._debugDataNames[i]] = L.control.attribution({prefix: '', position: 'bottomleft'}).addTo(this._map);
this._map.on('layeradd', function(e) {
if (e.layer === layer) {
tool.onAdd();
}
this._debugInfo = new L.LayerGroup();
this._debugInfo2 = new L.LayerGroup();
this._debugAlwaysActive = new L.LayerGroup();
this._debugShowClipboard = new L.LayerGroup();
this._tilesDevicePixelGrid = new L.LayerGroup();
this._debugSidebar = new L.LayerGroup();
this._debugTyper = new L.LayerGroup();
this._debugTrace = new L.LayerGroup();
this._debugLogging = new L.LayerGroup();
this._debugTileDumping = new L.LayerGroup();
this._map.addLayer(this._debugInfo);
this._map.addLayer(this._debugInfo2);
var overlayMaps = {
'Tile overlays': this._debugInfo,
'Screen overlays': this._debugInfo2,
'Show Clipboard': this._debugShowClipboard,
'Always active': this._debugAlwaysActive,
'Typing': this._debugTyper,
'Tiles device pixel grid': this._tilesDevicePixelGrid,
'Sidebar Rerendering': this._debugSidebar,
'Performance Tracing': this._debugTrace,
'Protocol logging': this._debugLogging,
'Tile dumping': this._debugTileDumping
};
L.control.layers({}, overlayMaps, {collapsed: false}).addTo(this._map);
this._map.on('layeradd', function(e) {
if (e.layer === this._debugAlwaysActive) {
this._map._debugAlwaysActive = true;
} else if (e.layer === this._debugShowClipboard) {
this._map._textInput.debug(true);
} else 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(this._map);
}
} else if (e.layer === this._tilesDevicePixelGrid) {
this._map._docLayer._painter._addTilePixelGridSection();
this._map._docLayer._painter._sectionContainer.reNewAllSections(true);
} else if (e.layer === this._debugSidebar) {
this._map._debugSidebar = true;
} else if (e.layer === this._debugTrace) {
app.socket.setTraceEventLogging(true);
} else if (e.layer === this._debugLogging) {
window.setLogging(true);
L.Log.print();
} else if (e.layer === this._debugTileDumping) {
app.socket.sendMessage('toggletiledumping true');
}
}, this);
this._map.on('layerremove', function(e) {
if (e.layer === this._debugAlwaysActive) {
this._map._debugAlwaysActive = false;
} else if (e.layer === this._debugShowClipboard) {
this._map._textInput.debug(false);
} else if (e.layer === this._debugTyper) {
clearTimeout(this._debugTypeTimeoutId);
} else if (e.layer === this._debugInfo2) {
for (var i in this._debugData) {
this._debugData[i].remove();
}
} else if (e.layer === this._tilesDevicePixelGrid) {
this._map._docLayer._painter._sectionContainer.removeSection('tile pixel grid');
this._map._docLayer._painter._sectionContainer.reNewAllSections(true);
} else if (e.layer === this._debugSidebar) {
this._map._debugSidebar = false;
} else if (e.layer === this._debugTrace) {
app.socket.setTraceEventLogging(false);
} else if (e.layer === this._debugLogging) {
window.setLogging(false);
} else if (e.layer === this._debugTileDumping) {
app.socket.sendMessage('toggletiledumping false');
}
}, this);
}, this);
this._map.on('layerremove', function(e) {
if (e.layer === layer) {
tool.onRemove();
}
}, this);
if (tool.startsOn) {
this._map.addLayer(layer);
}
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;
return layer;
},
if (this._map._docLayer._docType === 'spreadsheet') {
this._map._docLayer._painter._addSplitsSection();
this._map._docLayer._painter._sectionContainer.reNewAllSections(true /* redraw */);
}
_addDebugTools: function () {
var self = this;
this._addDebugTool({
name: 'Screen Overlays',
startsOn: true,
onAdd: function () {
self._debugData = {};
self._debugDataNames = ['canonicalViewId', 'tileCombine', 'fromKeyInputToInvalidate', 'ping', 'loadCount', 'postMessage'];
self._debugRenderCount = 0;
self._debugTimePING = self._debugGetTimeArray();
self._debugPINGQueue = [];
for (var i = 0; i < self._debugDataNames.length; i++) {
self._debugData[self._debugDataNames[i]] = L.control.attribution({prefix: '', position: 'bottomleft'}).addTo(self._map);
self._debugData[self._debugDataNames[i]].addTo(self._map);
}
},
onRemove: function () {
for (var i in self._debugData) {
self._debugData[i].remove();
}
},
});
this._debugTileLayer = this._addDebugTool({
name: 'Tile Overlays',
startsOn: true,
onAdd: function () {
self._debugTiles = true;
self._debugInvalidBounds = {};
self._debugInvalidBoundsMessage = {};
self._debugId = 0;
self._debugLoadTile = 0;
self._debugLoadDelta = 0;
self._debugLoadUpdate = 0;
self._debugInvalidateCount = 0;
self._debugTimeKeypress = self._debugGetTimeArray();
self._debugKeypressQueue = [];
self._debugTimeout();
},
onRemove: function () {
self._debugTiles = false;
},
});
this._addDebugTool({
name: 'Typer',
startsOn: false,
onAdd: function () {
self._debugLorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
self._debugLorem += ' ' + self._debugLorem + '\n';
self._debugLoremPos = 0;
self._debugTypeTimeout();
},
onRemove: function () {
clearTimeout(self._debugTyperTimeoutId);
},
});
this._addDebugTool({
name: 'Always Active',
startsOn: false,
onAdd: function () {
self._map._debugAlwaysActive = true;
},
onRemove: function () {
self._map._debugAlwaysActive = false;
},
});
this._addDebugTool({
name: 'Show Clipboard',
startsOn: false,
onAdd: function () {
self._map._textInput.debug(true);
},
onRemove: function () {
self._map._textInput.debug(false);
},
});
this._addDebugTool({
name: 'Tiles device pixel grid',
startsOn: false,
onAdd: function () {
self._map._docLayer._painter._addTilePixelGridSection();
self._map._docLayer._painter._sectionContainer.reNewAllSections(true);
},
onRemove: function () {
self._map._docLayer._painter._sectionContainer.removeSection('tile pixel grid');
self._map._docLayer._painter._sectionContainer.reNewAllSections(true);
},
});
this._addDebugTool({
name: 'Sidebard Rendering',
startsOn: false,
onAdd: function () {
self._map._debugSidebar = true;
},
onRemove: function () {
self._map._debugSidebar = false;
},
});
this._addDebugTool({
name: 'Performance Tracing',
startsOn: app.socket.traceEventRecordingToggle,
onAdd: function () {
app.socket.setTraceEventLogging(true);
},
onRemove: function () {
app.socket.setTraceEventLogging(false);
},
});
this._addDebugTool({
name: 'Protocol Logging',
startsOn: true,
onAdd: function () {
window.setLogging(true);
L.Log.print();
},
onRemove: function () {
window.setLogging(false);
},
});
this._addDebugTool({
name: 'Tile Dumping',
startsOn: false,
onAdd: function () {
app.socket.sendMessage('toggletiledumping true');
},
onRemove: function () {
app.socket.sendMessage('toggletiledumping false');
},
});
this._addDebugTool({
name: 'Debug Deltas',
startsOn: true,
onAdd: function () {
self._debugDeltas = true;
self._debugDeltasDetail = true;
},
onRemove: function () {
self._debugDeltas = true;
self._debugDeltasDetail = true;
},
});
},
_debugSetPostMessage: function(type,msg) {
@ -5288,7 +5361,7 @@ L.CanvasTileLayer = L.Layer.extend({
this._debugInvalidBounds[this._debugId] = rect;
this._debugInvalidBoundsMessage[this._debugId] = command;
this._debugId++;
this._debugInfo.addLayer(rect);
this._debugTileLayer.addLayer(rect);
var oldestKeypress = this._debugKeypressQueue.shift();
if (oldestKeypress) {
@ -5321,7 +5394,7 @@ L.CanvasTileLayer = L.Layer.extend({
var opac = rect.options.fillOpacity;
if (opac <= 0.04) {
if (key < this._debugId - 5) {
this._debugInfo.removeLayer(rect);
this._debugTileLayer.removeLayer(rect);
delete this._debugInvalidBounds[key];
delete this._debugInvalidBoundsMessage[key];
} else {
@ -5344,7 +5417,7 @@ L.CanvasTileLayer = L.Layer.extend({
this.postKeyboardEvent('input', this._debugLorem.charCodeAt(this._debugLoremPos % this._debugLorem.length), 0);
}
this._debugLoremPos++;
this._debugTypeTimeoutId = setTimeout(L.bind(this._debugTypeTimeout, this), 50);
this._debugTyperTimeoutId = setTimeout(L.bind(this._debugTypeTimeout, this), 50);
},
/// onlyThread - takes annotation indicating which thread will be generated
@ -6394,7 +6467,7 @@ L.CanvasTileLayer = L.Layer.extend({
if (!this._map._fatal && app.idleHandler._active && app.socket.connected())
this._clientVisibleArea = newClientVisibleArea;
if (this._debug)
this._debugInfo.clearLayers();
this._debugTileLayer.clearLayers();
}
},

View file

@ -182,7 +182,7 @@ L.ImpressTileLayer = L.CanvasTileLayer.extend({
var topLeftTwips = new L.Point(command.x, command.y);
var offset = new L.Point(command.width, command.height);
var bottomRightTwips = topLeftTwips.add(offset);
if (this._debug) {
if (this._debugTiles) {
this._debugAddInvalidationRectangle(topLeftTwips, bottomRightTwips, textMsg);
}
var invalidBounds = new L.Bounds(topLeftTwips, bottomRightTwips);
@ -202,7 +202,7 @@ L.ImpressTileLayer = L.CanvasTileLayer.extend({
}
}
if (needsNewTiles && command.part === this._selectedPart && this._debug)
if (needsNewTiles && command.part === this._selectedPart && this._debugTiles)
{
this._debugAddInvalidationMessage(textMsg);
}

View file

@ -85,7 +85,7 @@ L.WriterTileLayer = L.CanvasTileLayer.extend({
var topLeftTwips = new L.Point(command.x, command.y);
var offset = new L.Point(command.width, command.height);
var bottomRightTwips = topLeftTwips.add(offset);
if (this._debug) {
if (this._debugTiles) {
this._debugAddInvalidationRectangle(topLeftTwips, bottomRightTwips, textMsg);
}
var invalidBounds = new L.Bounds(topLeftTwips, bottomRightTwips);
@ -105,7 +105,7 @@ L.WriterTileLayer = L.CanvasTileLayer.extend({
}
}
if (needsNewTiles && this._debug)
if (needsNewTiles && this._debugTiles)
{
this._debugAddInvalidationMessage(textMsg);
}

View file

@ -917,7 +917,7 @@ L.Map.Keyboard = L.Handler.extend({
} else if (e.altKey) {
switch (e.keyCode) {
case this.keyCodes.D: // Ctrl + Shift + Alt + d for tile debugging mode
this._map._docLayer.toggleTileDebugMode();
this._map._docLayer.toggleDebugMode();
}
}