debugger - Abstract out DebugCanvas so we can swap in WASM.
Bug: skia:
Change-Id: I4dcecbc7e74d61e519c72fc3e500343461cd5439
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/201202
Reviewed-by: Kevin Lubick <kjlubick@google.com>
Commit-Queue: Joe Gregorio <jcgregorio@google.com>
diff --git a/debugger-assets/Makefile b/debugger-assets/Makefile
index 57bec3b..df2baf0 100644
--- a/debugger-assets/Makefile
+++ b/debugger-assets/Makefile
@@ -3,6 +3,7 @@
# into third_party/bower_components via bower, or in node_modules.
CORE_SOURCE_FILES = node_modules/native-promise-only/npo.js \
third_party/bower_components/webcomponentsjs/webcomponents-lite.min.js \
+ ./res/js/debug-canvas.js \
../res/js/common.js
BOWER_DIR=third_party/bower_components
diff --git a/debugger-assets/res/imp/app.html b/debugger-assets/res/imp/app.html
index be0353a..2428c69 100644
--- a/debugger-assets/res/imp/app.html
+++ b/debugger-assets/res/imp/app.html
@@ -495,8 +495,7 @@
this.$.commands.addEventListener('op-toggled', function(e) {
// Toggle the op and the trigger a reload of the image.
- var value = e.detail.checked ? "1" : "0";
- sk.post("./cmd/" + e.detail.index + "/" + value, "").then(function() {
+ DebugCanvas.toggleOp(e.detail.index, e.detail.checked).then(function() {
this._setCacheBreakingURL();
}.bind(this)).catch(sk.errorMessage);
}.bind(this));
@@ -515,7 +514,7 @@
this.$.play.prePlayCallback(function() {
if (!this.$.colorBreakPoint.disabled && this.$.colorBreakPoint.checked) {
- sk.get("./break/" + this._targetItem + "/" + this.x + "/" + this.y).then(JSON.parse).then(function(json) {
+ DebugCanvas.setBreakpoint(this._targetItem, this.x, this.y).then(function(json) {
if (json.endOp != -1) {
this.$.prevColor.textContent = json.startColor + " -> " + json.endColor;
var item = this._findItemFromIndex(json.endOp);
@@ -609,7 +608,7 @@
if (e.target.selected == this._cmd.colorMode) {
return
}
- sk.post("./colorMode/" + e.target.selected, "").then(function() {
+ DebugCanvas.setColorMode(e.target.selected).then(function() {
// Reloads the image and the JSON for all the commands.
this._refreshPage();
}.bind(this)).catch(function(err) {
@@ -627,7 +626,7 @@
if (e.target.checked == (this._cmd.mode == "gpu")) {
return
}
- sk.post("./enableGPU/" + (e.target.checked ? 1 : 0), "").then(function() {
+ DebugCanvas.setGPU(e.target.checked).then(function() {
// Reloads the image and the JSON for all the commands.
this._refreshPage();
}.bind(this)).catch(function(err) {
@@ -662,7 +661,7 @@
if (this.$.gpuOpBounds.checked === this._cmd.drawGpuOpBounds) {
return
}
- sk.post("./gpuOpBounds/" + (this.$.gpuOpBounds.checked ? 1 : 0), "").then(function() {
+ DebugCanvas.setGPUBounds(this.$.gpuOpBounds.checked).then(function() {
// Reloads the image and the JSON for all the commands.
this._refreshPage();
}.bind(this)).catch(function(err) {
@@ -763,11 +762,11 @@
_refreshPage: function() {
this.$.img.classList.remove("hidden");
this._setCacheBreakingURL();
- sk.get("./info").then(JSON.parse).then(function(json) {
+ DebugCanvas.getInfo().then(function(json) {
this.skp_not_loaded = false;
this.set('info', json);
}.bind(this)).catch(sk.errorMessage);
- sk.get("./cmd").then(JSON.parse).then(function(json) {
+ DebugCanvas.getCmd().then(function(json) {
this._cmd = this._processCommands(json);
if (this.$.fast.value) {
this._fastFilter();
@@ -794,15 +793,13 @@
},
_clipHandler: function() {
- var alpha = this.$.clip.checked ? 128 : 0;
- sk.post("./clipAlpha/" + alpha).then(function() {
+ DebugCanvas.setClip(this.$.clip.checked).then(function() {
this._setCacheBreakingURL();
}.bind(this)).catch(sk.errorMessage);
},
_textBoundsHandler: function() {
- var checked = this.$.textBounds.checked ? 1 : 0;
- sk.post("./textBounds/" + checked).then(function() {
+ DebugCanvas.setTextBounds(this.$.textBounds.checked).then(function() {
this._setCacheBreakingURL();
}.bind(this)).catch(sk.errorMessage);
},
@@ -816,7 +813,7 @@
var op = this._filtered.commands[this._targetItem];
var path = "img/" + index + "?";
this.bitmap = op.details.bitmap ? (this._correctedOrigin() + op.details.bitmap.data) : "";
- sk.get("./info/" + index).then(JSON.parse).then(function(json) {
+ DebugCanvas.getInfo(index).then(function(json) {
this.set('info', json);
}.bind(this)).catch(sk.errorMessage);
this.$.img.src = this._correctedOrigin() + path + "?" + new Date().getTime();
diff --git a/debugger-assets/res/js/debug-canvas.js b/debugger-assets/res/js/debug-canvas.js
new file mode 100644
index 0000000..0bb7f33
--- /dev/null
+++ b/debugger-assets/res/js/debug-canvas.js
@@ -0,0 +1,100 @@
+// Abstracts out the server component in app.html.
+//
+
+var DebugCanvas = {
+ // setBreakpoint runs the skp starting at opOffset until the pixel
+ // located at (x,y) changes.
+ //
+ // Returns a promise that resolves with information on the changed pixel:
+ //
+ // {
+ // "startColor":[255,79,54,200],
+ // "endColor":[255,144,206,1],
+ // "endOp":340
+ // }
+ setBreakpoint: function(opOffset, x, y) {
+ return sk.get("./break/" + opOffset + "/" + x + "/" + y).then(JSON.parse);
+ },
+
+ // getInfo returns a promise that resolves with information on
+ // the view matrix and clip rect of the form:
+ //
+ // {
+ // "ViewMatrix":[[1,0,0],[0,1,0],[0,0,1]],
+ // "ClipRect":[0,0,256,256],
+ // }
+ getInfo: function(index) {
+ if (index === undefined) {
+ return sk.get("./info").then(JSON.parse);
+ } else {
+ return sk.get("./info/" + index).then(JSON.parse);
+ }
+ },
+
+ // getCmd returns a promise that resolves to a list of all the commands
+ // and the current state of the canvas:
+ //
+ // {
+ // mode: "cpu",
+ // drawGpuOpBounds: false,
+ // colorMode: 0,
+ // version: 1,
+ // commands: [{command: "BeginDrawPicture", visible: true}, ...]
+ // }
+ getCmd: function() {
+ return sk.get("./cmd").then(JSON.parse);
+ },
+
+ // Sets the clip.
+ //
+ // b is a boolean.
+ //
+ // Return a promise that resolves when the change is complete.
+ setClip: function(b) {
+ var alpha = b ? 128 : 0;
+ return sk.post("./clipAlpha/" + alpha);
+ },
+
+ // setTextBounds sets if text bounds are displayed.
+ //
+ // b is a boolean.
+ //
+ // Return a promise that resolves when the change is complete.
+ setTextBounds: function(b) {
+ var checked = b ? 1 : 0;
+ return sk.post("./textBounds/" + checked);
+ },
+
+ // toggleOp turns the op at index off or on based on the boolean 'b'.
+ //
+ // Returns a promise that resolved when the change is complete.
+ toggleOp: function(index, b) {
+ var value = b ? "1" : "0";
+ return sk.post("./cmd/" + index + "/" + value, "");
+ },
+
+ // setColorMode sets the color mode where mode is an integer, one of:
+ //
+ // 0 = Linear 32-bit
+ // 1 = sRGB 32-bit
+ // 2 = Linear half-precision float
+ //
+ // Returns a promise that resolved when the change is complete.
+ setColorMode: function(mode) {
+ return sk.post("./colorMode/" + mode, "");
+ },
+
+ // setGPU turns on or off the GPU based on the boolean b.
+ //
+ // Returns a promise that resolved when the change is complete.
+ setGPU: function(b) {
+ return sk.post("./enableGPU/" + (b ? 1 : 0), "");
+ },
+
+ // setGPUBounds turn on or off the display of the GPU bounds.
+ //
+ // Returns a promise that resolved when the change is complete.
+ setGPUBounds: function (b) {
+ return sk.post("./gpuOpBounds/" + (b ? 1 : 0), "");
+ },
+};
