Skip to content
Permalink
Browse files
Web Inspector: tint all pixels drawn by shader program when hovering …
…ShaderProgramTreeElement

https://bugs.webkit.org/show_bug.cgi?id=175223

Reviewed by Matt Baker.

Source/JavaScriptCore:

* inspector/protocol/Canvas.json:
Add `setShaderProgramHighlighted` command that will cause a blend to be applied to the
canvas if the given shader program is active immediately before `drawArrays` or `drawElements`
is called. The blend is removed and the previous value is applied once the draw is complete.

Source/WebCore:

Test: inspector/canvas/setShaderProgramHighlighted.html

* html/canvas/InspectorShaderProgram.h:
(WebCore::InspectorShaderProgram::highlighted):
(WebCore::InspectorShaderProgram::setHighlighted):

* html/canvas/WebGLRenderingContextBase.cpp:
(WebCore::InspectorScopedShaderProgramHighlight::InspectorScopedShaderProgramHighlight):
(WebCore::InspectorScopedShaderProgramHighlight::~InspectorScopedShaderProgramHighlight):
(WebCore::InspectorScopedShaderProgramHighlight::showHighlight):
(WebCore::InspectorScopedShaderProgramHighlight::hideHighlight):
(WebCore::InspectorScopedShaderProgramHighlight::saveBlendValue):
(WebCore::InspectorScopedShaderProgramHighlight::hasBufferBinding):
(WebCore::InspectorScopedShaderProgramHighlight::hasFramebufferParameterAttachment):
(WebCore::WebGLRenderingContextBase::drawArrays):
(WebCore::WebGLRenderingContextBase::drawElements):
If the current shader program has been marked as highlighted, apply a blend right before
`drawArrays` and `drawElements` is called, tinting the resulting pixels so that they are
visually distinguished from pixels drawn by other shader programs.

* inspector/InspectorCanvasAgent.h:
* inspector/InspectorCanvasAgent.cpp:
(WebCore::InspectorCanvasAgent::setShaderProgramHighlighted):
(WebCore::InspectorCanvasAgent::isShaderProgramHighlighted):

* inspector/InspectorInstrumentation.h:
* inspector/InspectorInstrumentation.cpp:
(WebCore::InspectorInstrumentation::isShaderProgramHighlighted):
(WebCore::InspectorInstrumentation::isShaderProgramHighlightedImpl):

Source/WebInspectorUI:

* UserInterface/Models/ShaderProgram.js:
(WI.ShaderProgram):
(WI.ShaderProgram.prototype.showHighlight):
(WI.ShaderProgram.prototype.hideHighlight):

* UserInterface/Views/ShaderProgramTreeElement.js:
(WI.ShaderProgramTreeElement.prototype.onattach):
(WI.ShaderProgramTreeElement.prototype._handleMouseOver):
(WI.ShaderProgramTreeElement.prototype._handleMouseOut):
Whenever a ShaderProgramTreeElement is hovered, highlight the corresponding shader program
by tinting the pixels it draws via a blend.

LayoutTests:

* inspector/canvas/setShaderProgramHighlighted-expected.txt: Added.
* inspector/canvas/setShaderProgramHighlighted.html: Added.


Canonical link: https://commits.webkit.org/199753@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@230127 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
dcrousso committed Mar 31, 2018
1 parent ab204e7 commit 871c5f431bafe7d2b9b48751cc9a69062336870e
@@ -1,3 +1,13 @@
2018-03-30 Devin Rousso <webkit@devinrousso.com>

Web Inspector: tint all pixels drawn by shader program when hovering ShaderProgramTreeElement
https://bugs.webkit.org/show_bug.cgi?id=175223

Reviewed by Matt Baker.

* inspector/canvas/setShaderProgramHighlighted-expected.txt: Added.
* inspector/canvas/setShaderProgramHighlighted.html: Added.

2018-03-30 Ryan Haddad <ryanhaddad@apple.com>

Skip http/tests/resourceLoadStatistics/prevalent-resource-with-user-interaction-timeout.html
@@ -0,0 +1,20 @@
Test highlighting of shader programs.


== Running test suite: Canvas.setShaderProgramHighlighted
-- Running test case: Canvas.setShaderProgramHighlighted.highlightedDrawArrays
data:image/png;base64,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

-- Running test case: Canvas.setShaderProgramHighlighted.highlightedDrawElements
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAAXNSR0IArs4c6QAABp1JREFUeAHt1MFtFUkQgGEbEQ1hbA4cCIADMXCFGPZAXJCOsQQW5vkZP7/qru6q+VZa7WLc0zVfjf7bm5ubu/t//UOAAIHtBd5sP6EBCRAg8FtAsHwKBAiUERCsMqsyKAECguUbIECgjIBglVmVQQkQECzfAAECZQQEq8yqDEqAgGD5BggQKCMgWGVWZVACBATLN0CAQBkBwSqzKoMSICBYvgECBMoICFaZVRmUAAHB8g0QIFBGQLDKrMqgBAgIlm+AAIEyAoJVZlUGJUBAsHwDBAiUERCsMqsyKAECguUbIECgjIBglVmVQQkQECzfAAECZQQEq8yqDEqAgGD5BggQKCMgWGVWZVACBATLN0CAQBkBwSqzKoMSICBYvgECBMoICFaZVRmUAAHB8g0QIFBGQLDKrMqgBAgIlm+AAIEyAoJVZlUGJUBAsHwDBAiUERCsMqsyKAECguUbIECgjIBglVmVQTsK/Pfxy/eO7zXrnW7vH3w36+GeS4DAeYGHUH38//OPD29v35//LT89FXh7+gN/JkBgnsDjUM27pe+TBavvbr3ZRgJCNWYZgjXG0VMInBUQqrMsV/9QsK6mc5DA8wJC9bxN5G8EK6LnLIETAaE6ARn8R8EaDOpxxxQQqpy9C1aOs1uaCghV7mIFK9fbbU0EhGrNIgVrjbtbiwoI1drFCdZaf7cXERCqPRYlWHvswRSbCgjVXosRrL32YZpNBIRqk0WcjCFYJyD+eGwBodp7/4K1935MlyQgVEnQwWsEKwjoeG0Boaq1P8GqtS/TDhIQqkGQyY8RrGRw160VEKq1/tHbBSsq6HwJAaEqsaYXhxSsF4n8QmUBoaq8vaezC9ZTEz9pICBUDZZ45hUE6wyKH9UVEKq6u7tkcsG6RMnvbC8gVNuvaMiAgjWE0UNWCQjVKvk19wrWGne3BgWEKghY9LhgFV3cUccWqqNu/td7C9ax91/m7YWqzKqmDipYU3k9PCogVFHBXucFq9c+27yNULVZ5dAXEayhnB4WFRCqqGDv84LVe79l3k6oyqxq6aCCtZTf5ULlG3iNgGC9RsvvDhMQqmGUh3qQYB1q3etfVqjW76DyBIJVeXuFZheqQsvaeFTB2ng5HUYTqg5b3OcdBGufXbSaRKharXOblxGsbVbRYxCh6rHHXd9CsHbdTLG5hKrYwoqOK1hFF7fL2EK1yyaOMYdgHWPPw99SqIaTeuAFAoJ1AZJf+SMgVH8s/F++gGDlm5e8UahKrq3d0ILVbqVjX0ioxnp6WkxAsGJ+bU8LVdvVln4xwSq9vvHDC9V4U08cJyBY4yxLP0moSq/vMMML1mFWff5Fheq8i5/uKSBYe+5l+lRCNZ3YBRMEBGsC6s6PFKqdt2O2lwQE6yWhJn8vVE0WefDXEKzmH4BQNV/wwV5PsJouXKiaLvbgryVYzT4AoWq2UK/zl4Bg/cVR9w9CVXd3Jr9cQLAut9ryN4Vqy7UYapKAYE2Cnf1YoZot7Pk7CgjWjlv5x0xC9Q8cf9VeQLCKrFioiizKmFMFBGsqb/zhQhU39IQ+AoK16S6FatPFGGupgGAt5X96uVA9NfETAg8CgvUgsfi/QrV4Aa4vISBYi9ckVIsX4PpSAoK1aF1CtQjetaUFBCt5fUKVDO66VgKClbROoUqCdk1rAcGavF6hmgzs8YcSEKxJ6xaqSbAee2gBwRq8fqEaDOpxBB4JCNYjjMj/ClVEz1kClwkI1mVOz/6WUD1L4y8IDBcQrCtJhepKOMcIBAQE65V4QvVKML9OYKCAYF2J+e3T13dXHnWMAIErBW7vz91dedYxAgQIpAq8Sb3NZQQIEAgICFYAz1ECBHIFBCvX220ECAQEBCuA5ygBArkCgpXr7TYCBAICghXAc5QAgVwBwcr1dhsBAgEBwQrgOUqAQK6AYOV6u40AgYCAYAXwHCVAIFdAsHK93UaAQEBAsAJ4jhIgkCsgWLnebiNAICAgWAE8RwkQyBUQrFxvtxEgEBAQrACeowQI5AoIVq632wgQCAgIVgDPUQIEcgUEK9fbbQQIBAQEK4DnKAECuQKClevtNgIEAgKCFcBzlACBXAHByvV2GwECAQHBCuA5SoBAroBg5Xq7jQCBgIBgBfAcJUAgV0Cwcr3dRoBAQECwAniOEiCQKyBYud5uI0AgICBYATxHCRDIFRCsXG+3ESAQEBCsAJ6jBAjkCghWrrfbCBAICAhWAM9RAgRyBQQr19ttBAgEBAQrgOcoAQK5Aj8BladHcpYMAQMAAAAASUVORK5CYII=

-- Running test case: Canvas.setShaderProgramHighlighted.unhighlightedDrawArrays
data:image/png;base64,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

-- Running test case: Canvas.setShaderProgramHighlighted.unhighlightedDrawElements
data:image/png;base64,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

-- Running test case: Canvas.setShaderProgramHighlighted.invalidProgramId
PASS: Should produce an error.
Error: No shader program for given identifier.

@@ -0,0 +1,158 @@
<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script src="resources/shaderProgram-utilities.js"></script>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec3 position;
void main(void) {
gl_Position = vec4(position, 1.0);
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;

void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<script>
function load() {
createProgram("webgl");
linkProgram("vertex-shader", "fragment-shader");
context.useProgram(program);

clearContext();

runTest();
}

function clearContext() {
context.clearColor(0.0, 0.0, 0.0, 1.0);
context.clear(context.COLOR_BUFFER_BIT);
}

function drawArrays() {
clearContext();

let vertexes = [
-0.5, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0,
];
let vertexBuffer = context.createBuffer();
context.bindBuffer(context.ARRAY_BUFFER, vertexBuffer);
context.bufferData(context.ARRAY_BUFFER, new Float32Array(vertexes), context.STATIC_DRAW);

let position = context.getAttribLocation(program, "position");
context.vertexAttribPointer(position, 3, context.FLOAT, false, 0, 0);
context.enableVertexAttribArray(position);

context.drawArrays(context.TRIANGLES, 0, 3);
}

function drawElements() {
clearContext();

let vertexes = [
0.5, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0,
];
let vertexBuffer = context.createBuffer();
context.bindBuffer(context.ARRAY_BUFFER, vertexBuffer);
context.bufferData(context.ARRAY_BUFFER, new Float32Array(vertexes), context.STATIC_DRAW);

let indexes = [0, 1, 2];
let indexBuffer = context.createBuffer();
context.bindBuffer(context.ELEMENT_ARRAY_BUFFER, indexBuffer);
context.bufferData(context.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexes), context.STATIC_DRAW);

let position = context.getAttribLocation(program, "position");
context.vertexAttribPointer(position, 3, context.FLOAT, false, 0, 0);
context.enableVertexAttribArray(position);

context.drawElements(context.TRIANGLES, indexes.length, context.UNSIGNED_SHORT, 0);
}

function test() {
let suite = InspectorTest.createAsyncSuite("Canvas.setShaderProgramHighlighted");

let shaderProgram = WI.canvasManager.shaderPrograms[0];
let originalContent = null;

function validTest({name, highlighted, evaluateString}) {
suite.addTestCase({
name,
test(resolve, reject) {
CanvasAgent.setShaderProgramHighlighted(shaderProgram.identifier, highlighted, (error) => {
if (error) {
reject(error);
return;
}

InspectorTest.evaluateInPage(evaluateString, (error) => {
if (error) {
reject(error);
return;
}

CanvasAgent.requestContent(shaderProgram.canvas.identifier)
.then(({content}) => InspectorTest.log(content))
.then(resolve, reject);
});
});
}
});
}

validTest({
name: "Canvas.setShaderProgramHighlighted.highlightedDrawArrays",
highlighted: true,
evaluateString: `drawArrays()`,
});

validTest({
name: "Canvas.setShaderProgramHighlighted.highlightedDrawElements",
highlighted: true,
evaluateString: `drawElements()`,
});

validTest({
name: "Canvas.setShaderProgramHighlighted.unhighlightedDrawArrays",
highlighted: false,
evaluateString: `drawArrays()`,
});

validTest({
name: "Canvas.setShaderProgramHighlighted.unhighlightedDrawElements",
highlighted: false,
evaluateString: `drawElements()`,
});

suite.addTestCase({
name: "Canvas.setShaderProgramHighlighted.invalidProgramId",
description: "Invalid program identifiers should cause an error.",
test(resolve, reject) {
const programId = "INVALID_PROGRAM_ID";
const highlighted = false;
CanvasAgent.setShaderProgramHighlighted(programId, highlighted, (error) => {
InspectorTest.expectThat(error, "Should produce an error.");
InspectorTest.log("Error: " + error);
resolve();
});
}
});

CanvasAgent.requestContent(shaderProgram.canvas.identifier, (error, content) => {
originalContent = content;

suite.runTestCasesAndFinish();
});
}
</script>
</head>
<body onload="load()">
<p>Test highlighting of shader programs.</p>
</body>
</html>
@@ -1,3 +1,15 @@
2018-03-30 Devin Rousso <webkit@devinrousso.com>

Web Inspector: tint all pixels drawn by shader program when hovering ShaderProgramTreeElement
https://bugs.webkit.org/show_bug.cgi?id=175223

Reviewed by Matt Baker.

* inspector/protocol/Canvas.json:
Add `setShaderProgramHighlighted` command that will cause a blend to be applied to the
canvas if the given shader program is active immediately before `drawArrays` or `drawElements`
is called. The blend is removed and the previous value is applied once the draw is complete.

2018-03-30 JF Bastien <jfbastien@apple.com>

WebAssembly: support DataView compilation
@@ -147,6 +147,14 @@
{ "name": "programId", "$ref": "ProgramId" },
{ "name": "disabled", "type": "boolean" }
]
},
{
"name": "setShaderProgramHighlighted",
"description": "Enable/disable highlighting of the given shader program.",
"parameters": [
{ "name": "programId", "$ref": "ProgramId" },
{ "name": "highlighted", "type": "boolean" }
]
}
],
"events": [
@@ -1,3 +1,40 @@
2018-03-30 Devin Rousso <webkit@devinrousso.com>

Web Inspector: tint all pixels drawn by shader program when hovering ShaderProgramTreeElement
https://bugs.webkit.org/show_bug.cgi?id=175223

Reviewed by Matt Baker.

Test: inspector/canvas/setShaderProgramHighlighted.html

* html/canvas/InspectorShaderProgram.h:
(WebCore::InspectorShaderProgram::highlighted):
(WebCore::InspectorShaderProgram::setHighlighted):

* html/canvas/WebGLRenderingContextBase.cpp:
(WebCore::InspectorScopedShaderProgramHighlight::InspectorScopedShaderProgramHighlight):
(WebCore::InspectorScopedShaderProgramHighlight::~InspectorScopedShaderProgramHighlight):
(WebCore::InspectorScopedShaderProgramHighlight::showHighlight):
(WebCore::InspectorScopedShaderProgramHighlight::hideHighlight):
(WebCore::InspectorScopedShaderProgramHighlight::saveBlendValue):
(WebCore::InspectorScopedShaderProgramHighlight::hasBufferBinding):
(WebCore::InspectorScopedShaderProgramHighlight::hasFramebufferParameterAttachment):
(WebCore::WebGLRenderingContextBase::drawArrays):
(WebCore::WebGLRenderingContextBase::drawElements):
If the current shader program has been marked as highlighted, apply a blend right before
`drawArrays` and `drawElements` is called, tinting the resulting pixels so that they are
visually distinguished from pixels drawn by other shader programs.

* inspector/InspectorCanvasAgent.h:
* inspector/InspectorCanvasAgent.cpp:
(WebCore::InspectorCanvasAgent::setShaderProgramHighlighted):
(WebCore::InspectorCanvasAgent::isShaderProgramHighlighted):

* inspector/InspectorInstrumentation.h:
* inspector/InspectorInstrumentation.cpp:
(WebCore::InspectorInstrumentation::isShaderProgramHighlighted):
(WebCore::InspectorInstrumentation::isShaderProgramHighlightedImpl):

2018-03-30 Wenson Hsieh <wenson_hsieh@apple.com>

[Extra zoom mode] Adopt list view controller UI for numeric input types

0 comments on commit 871c5f4

Please sign in to comment.