Commit 775ffb41 authored by Victor Porof's avatar Victor Porof
Browse files

Bug 933646 - Blackboxing a program in the shader editor should hide the... 

Bug 933646 - Blackboxing a program in the shader editor should hide the rendered geometry, r=rcampbell, a=bbajaj
parent 1cd63f42

browser/devtools/shadereditor/shadereditor.js

+21 −22
Original line number Diff line number Diff line
@@ -32,7 +32,6 @@ const EVENTS = { 


const STRINGS_URI = "chrome://browser/locale/devtools/shadereditor.properties"

const HIGHLIGHT_COLOR = [1, 0, 0, 1];

const BLACKBOX_COLOR = [0, 0, 0, 0];

const TYPING_MAX_DELAY = 500;

const SHADERS_AUTOGROW_ITEMS = 4;

const DEFAULT_EDITOR_CONFIG = {
@@ -174,25 +173,25 @@ let ShadersListView = Heritage.extend(WidgetMethods, { 
      showItemCheckboxes: true

    });



    this._onShaderSelect = this._onShaderSelect.bind(this);

    this._onShaderCheck = this._onShaderCheck.bind(this);

    this._onShaderMouseEnter = this._onShaderMouseEnter.bind(this);

    this._onShaderMouseLeave = this._onShaderMouseLeave.bind(this);

    this._onProgramSelect = this._onProgramSelect.bind(this);

    this._onProgramCheck = this._onProgramCheck.bind(this);

    this._onProgramMouseEnter = this._onProgramMouseEnter.bind(this);

    this._onProgramMouseLeave = this._onProgramMouseLeave.bind(this);



    this.widget.addEventListener("select", this._onShaderSelect, false);

    this.widget.addEventListener("check", this._onShaderCheck, false);

    this.widget.addEventListener("mouseenter", this._onShaderMouseEnter, true);

    this.widget.addEventListener("mouseleave", this._onShaderMouseLeave, true);

    this.widget.addEventListener("select", this._onProgramSelect, false);

    this.widget.addEventListener("check", this._onProgramCheck, false);

    this.widget.addEventListener("mouseenter", this._onProgramMouseEnter, true);

    this.widget.addEventListener("mouseleave", this._onProgramMouseLeave, true);

  },



  /**

   * Destruction function, called when the tool is closed.

   */

  destroy: function() {

    this.widget.removeEventListener("select", this._onShaderSelect, false);

    this.widget.removeEventListener("check", this._onShaderCheck, false);

    this.widget.removeEventListener("mouseenter", this._onShaderMouseEnter, true);

    this.widget.removeEventListener("mouseleave", this._onShaderMouseLeave, true);

    this.widget.removeEventListener("select", this._onProgramSelect, false);

    this.widget.removeEventListener("check", this._onProgramCheck, false);

    this.widget.removeEventListener("mouseenter", this._onProgramMouseEnter, true);

    this.widget.removeEventListener("mouseleave", this._onProgramMouseLeave, true);

  },



  /**
@@ -248,9 +247,9 @@ let ShadersListView = Heritage.extend(WidgetMethods, { 
  },



  /**

   * The select listener for the sources container.

   * The select listener for the programs container.

   */

  _onShaderSelect: function({ detail: sourceItem }) {

  _onProgramSelect: function({ detail: sourceItem }) {

    if (!sourceItem) {

      return;

    }
@@ -280,19 +279,19 @@ let ShadersListView = Heritage.extend(WidgetMethods, { 
  },



  /**

   * The check listener for the sources container.

   * The check listener for the programs container.

   */

  _onShaderCheck: function({ detail: { checked }, target }) {

  _onProgramCheck: function({ detail: { checked }, target }) {

    let sourceItem = this.getItemForElement(target);

    let attachment = sourceItem.attachment;

    attachment.isBlackBoxed = !checked;

    attachment.programActor[checked ? "unhighlight" : "highlight"](BLACKBOX_COLOR);

    attachment.programActor[checked ? "unblackbox" : "blackbox"]();

  },



  /**

   * The mouseenter listener for the sources container.

   * The mouseenter listener for the programs container.

   */

  _onShaderMouseEnter: function(e) {

  _onProgramMouseEnter: function(e) {

    let sourceItem = this.getItemForElement(e.target, { noSiblings: true });

    if (sourceItem && !sourceItem.attachment.isBlackBoxed) {

      sourceItem.attachment.programActor.highlight(HIGHLIGHT_COLOR);
@@ -305,9 +304,9 @@ let ShadersListView = Heritage.extend(WidgetMethods, { 
  },



  /**

   * The mouseleave listener for the sources container.

   * The mouseleave listener for the programs container.

   */

  _onShaderMouseLeave: function(e) {

  _onProgramMouseLeave: function(e) {

    let sourceItem = this.getItemForElement(e.target, { noSiblings: true });

    if (sourceItem && !sourceItem.attachment.isBlackBoxed) {

      sourceItem.attachment.programActor.unhighlight();

browser/devtools/shadereditor/test/browser.ini

+2 −0
Original line number Diff line number Diff line 
[DEFAULT]

support-files =

  doc_multiple-contexts.html

  doc_overlapping-geometry.html

  doc_shader-order.html

  doc_simple-canvas.html

  head.js
@@ -34,3 +35,4 @@ support-files = 
[browser_webgl-actor-test-14.js]

[browser_webgl-actor-test-15.js]

[browser_webgl-actor-test-16.js]

[browser_webgl-actor-test-17.js]

browser/devtools/shadereditor/test/browser_se_programs-blackbox.js

+26 −26
Original line number Diff line number Diff line
@@ -55,9 +55,9 @@ function ifWebGLSupported() { 
  is(getBlackBoxCheckbox(panel, 1).checked, true,

    "The second blackbox checkbox should still be checked.");



  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 0, a: 0 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 0, a: 255 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 255, b: 255, a: 255 }, true, "#canvas2");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 0, b: 0, a: 0 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 0, b: 0, a: 255 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 255, b: 255, a: 255 }, true, "#canvas2");

  ok(true, "The first program was correctly blackboxed.");
@@ -72,35 +72,35 @@ function ifWebGLSupported() { 
  is(getBlackBoxCheckbox(panel, 1).checked, false,

    "The second blackbox checkbox should now be unchecked.");



  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 0, a: 0 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 0, a: 0 }, true, "#canvas2");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 0, b: 0, a: 0 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 0, b: 0, a: 0 }, true, "#canvas2");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 0, a: 255 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 0, a: 255 }, true, "#canvas2");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 0, b: 0, a: 255 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 0, b: 0, a: 255 }, true, "#canvas2");

  ok(true, "The second program was correctly blackboxed.");



  ShadersListView._onShaderMouseEnter({ target: getItemLabel(panel, 0) });

  ShadersListView._onProgramMouseEnter({ target: getItemLabel(panel, 0) });



  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 0, a: 0 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 0, a: 0 }, true, "#canvas2");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 0, b: 0, a: 0 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 0, b: 0, a: 0 }, true, "#canvas2");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 0, a: 255 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 0, a: 255 }, true, "#canvas2");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 0, b: 0, a: 255 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 0, b: 0, a: 255 }, true, "#canvas2");

  ok(true, "Highlighting didn't work while blackboxed (1).");



  ShadersListView._onShaderMouseLeave({ target: getItemLabel(panel, 0) });

  ShadersListView._onShaderMouseEnter({ target: getItemLabel(panel, 1) });

  ShadersListView._onProgramMouseLeave({ target: getItemLabel(panel, 0) });

  ShadersListView._onProgramMouseEnter({ target: getItemLabel(panel, 1) });



  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 0, a: 0 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 0, a: 0 }, true, "#canvas2");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 0, b: 0, a: 0 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 0, b: 0, a: 0 }, true, "#canvas2");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 0, a: 255 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 0, a: 255 }, true, "#canvas2");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 0, b: 0, a: 255 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 0, b: 0, a: 255 }, true, "#canvas2");

  ok(true, "Highlighting didn't work while blackboxed (2).");



  ShadersListView._onShaderMouseLeave({ target: getItemLabel(panel, 1) });

  ShadersListView._onProgramMouseLeave({ target: getItemLabel(panel, 1) });



  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 0, a: 0 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 0, a: 0 }, true, "#canvas2");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 0, b: 0, a: 0 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 0, b: 0, a: 0 }, true, "#canvas2");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 0, a: 255 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 0, a: 255 }, true, "#canvas2");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 0, b: 0, a: 255 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 0, b: 0, a: 255 }, true, "#canvas2");

  ok(true, "Highlighting didn't work while blackboxed (3).");



  getBlackBoxCheckbox(panel, 0).click();
@@ -121,7 +121,7 @@ function ifWebGLSupported() { 
  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 255, b: 255, a: 255 }, true, "#canvas2");

  ok(true, "The two programs were correctly unblackboxed.");



  ShadersListView._onShaderMouseEnter({ target: getItemLabel(panel, 0) });

  ShadersListView._onProgramMouseEnter({ target: getItemLabel(panel, 0) });



  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 255, g: 0, b: 0, a: 255 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 255, b: 255, a: 255 }, true, "#canvas2");
@@ -129,8 +129,8 @@ function ifWebGLSupported() { 
  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 255, b: 255, a: 255 }, true, "#canvas2");

  ok(true, "The first program was correctly highlighted.");



  ShadersListView._onShaderMouseLeave({ target: getItemLabel(panel, 0) });

  ShadersListView._onShaderMouseEnter({ target: getItemLabel(panel, 1) });

  ShadersListView._onProgramMouseLeave({ target: getItemLabel(panel, 0) });

  ShadersListView._onProgramMouseEnter({ target: getItemLabel(panel, 1) });



  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 255, g: 255, b: 0, a: 255 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 255, g: 0, b: 0, a: 255 }, true, "#canvas2");
@@ -138,7 +138,7 @@ function ifWebGLSupported() { 
  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 255, g: 0, b: 0, a: 255 }, true, "#canvas2");

  ok(true, "The second program was correctly highlighted.");



  ShadersListView._onShaderMouseLeave({ target: getItemLabel(panel, 1) });

  ShadersListView._onProgramMouseLeave({ target: getItemLabel(panel, 1) });



  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 255, g: 255, b: 0, a: 255 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 255, b: 255, a: 255 }, true, "#canvas2");

browser/devtools/shadereditor/test/browser_se_programs-highlight.js

+6 −6
Original line number Diff line number Diff line
@@ -35,7 +35,7 @@ function ifWebGLSupported() { 
  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 255, g: 255, b: 0, a: 255 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 255, b: 255, a: 255 }, true, "#canvas2");



  ShadersListView._onShaderMouseEnter({ target: getItemLabel(panel, 0) });

  ShadersListView._onProgramMouseEnter({ target: getItemLabel(panel, 0) });



  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 255, g: 0, b: 0, a: 255 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 255, b: 255, a: 255 }, true, "#canvas2");
@@ -43,8 +43,8 @@ function ifWebGLSupported() { 
  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 255, b: 255, a: 255 }, true, "#canvas2");

  ok(true, "The first program was correctly highlighted.");



  ShadersListView._onShaderMouseLeave({ target: getItemLabel(panel, 0) });

  ShadersListView._onShaderMouseEnter({ target: getItemLabel(panel, 1) });

  ShadersListView._onProgramMouseLeave({ target: getItemLabel(panel, 0) });

  ShadersListView._onProgramMouseEnter({ target: getItemLabel(panel, 1) });



  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 255, g: 255, b: 0, a: 255 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 255, g: 0, b: 0, a: 255 }, true, "#canvas2");
@@ -52,7 +52,7 @@ function ifWebGLSupported() { 
  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 255, g: 0, b: 0, a: 255 }, true, "#canvas2");

  ok(true, "The second program was correctly highlighted.");



  ShadersListView._onShaderMouseLeave({ target: getItemLabel(panel, 1) });

  ShadersListView._onProgramMouseLeave({ target: getItemLabel(panel, 1) });



  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 255, g: 255, b: 0, a: 255 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 255, b: 255, a: 255 }, true, "#canvas2");
@@ -60,7 +60,7 @@ function ifWebGLSupported() { 
  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 255, b: 255, a: 255 }, true, "#canvas2");

  ok(true, "The two programs were correctly unhighlighted.");



  ShadersListView._onShaderMouseEnter({ target: getBlackBoxCheckbox(panel, 0) });

  ShadersListView._onProgramMouseEnter({ target: getBlackBoxCheckbox(panel, 0) });



  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 255, g: 255, b: 0, a: 255 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 255, b: 255, a: 255 }, true, "#canvas2");
@@ -68,7 +68,7 @@ function ifWebGLSupported() { 
  yield ensurePixelIs(debuggee, { x: 127, y: 127 }, { r: 0, g: 255, b: 255, a: 255 }, true, "#canvas2");

  ok(true, "The two programs were left unchanged after hovering a blackbox checkbox.");



  ShadersListView._onShaderMouseLeave({ target: getBlackBoxCheckbox(panel, 0) });

  ShadersListView._onProgramMouseLeave({ target: getBlackBoxCheckbox(panel, 0) });



  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 255, g: 255, b: 0, a: 255 }, true, "#canvas1");

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 255, b: 255, a: 255 }, true, "#canvas2");

browser/devtools/shadereditor/test/browser_webgl-actor-test-06.js

+17 −5
Original line number Diff line number Diff line
@@ -2,8 +2,8 @@ 
   http://creativecommons.org/publicdomain/zero/1.0/ */



/**

 * Tests that the highlight/unhighlight operations on program actors

 * work as expected.

 * Tests that the highlight/unhighlight and blackbox/unblackbox operations on

 * program actors work as expected.

 */



function ifWebGLSupported() {
@@ -17,19 +17,31 @@ function ifWebGLSupported() { 
  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 255, g: 0, b: 0, a: 255 }, true);

  yield ensurePixelIs(debuggee, { x: 511, y: 511 }, { r: 0, g: 255, b: 0, a: 255 }, true);

  yield checkShaderSource("The shader sources are correct before highlighting.");

  ok(true, "The top left pixel color was correct before highlighting.");

  ok(true, "The corner pixel colors are correct before highlighting.");



  yield programActor.highlight([0, 0, 1, 1]);

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 255, a: 255 }, true);

  yield ensurePixelIs(debuggee, { x: 511, y: 511 }, { r: 0, g: 0, b: 255, a: 255 }, true);

  yield checkShaderSource("The shader sources are preserved after highlighting.");

  ok(true, "The top left pixel color is correct after highlighting.");

  ok(true, "The corner pixel colors are correct after highlighting.");



  yield programActor.unhighlight();

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 255, g: 0, b: 0, a: 255 }, true);

  yield ensurePixelIs(debuggee, { x: 511, y: 511 }, { r: 0, g: 255, b: 0, a: 255 }, true);

  yield checkShaderSource("The shader sources are correct after unhighlighting.");

  ok(true, "The top left pixel color is correct after unhighlighting.");

  ok(true, "The corner pixel colors are correct after unhighlighting.");



  yield programActor.blackbox();

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 0, g: 0, b: 0, a: 255 }, true);

  yield ensurePixelIs(debuggee, { x: 511, y: 511 }, { r: 0, g: 0, b: 0, a: 255 }, true);

  yield checkShaderSource("The shader sources are preserved after blackboxing.");

  ok(true, "The corner pixel colors are correct after blackboxing.");



  yield programActor.unblackbox();

  yield ensurePixelIs(debuggee, { x: 0, y: 0 }, { r: 255, g: 0, b: 0, a: 255 }, true);

  yield ensurePixelIs(debuggee, { x: 511, y: 511 }, { r: 0, g: 255, b: 0, a: 255 }, true);

  yield checkShaderSource("The shader sources are correct after unblackboxing.");

  ok(true, "The corner pixel colors are correct after unblackboxing.");



  function checkShaderSource(aMessage) {

    return Task.spawn(function() {