Check state of 'document.designMode' in JavaScript

Question

I'm developing an add-on to execute a simple javascript that toggles designMode by clicking on a button. I know it's actually too simple, but there wasn't any add on to do what I'm doing. But now I want to make it a toggle instead of only setting it to on, by using an IF loop.

Here's my code:

var button = require("sdk/ui/button/action").ActionButton({
  id: "style-tab",
  label: "Edit Page",
 icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: function(){
    require("sdk/tabs").activeTab.attach({
      contentScript: 'document.designMode=\'on\';'
});


}
});

I thought I'd make it like this:

var button = require("sdk/ui/button/action").ActionButton({
  id: "style-tab",
  label: "Edit Page",
 icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: function(){
if (???????? == "off"){
    require("sdk/tabs").activeTab.attach({
      contentScript: 'document.designMode=\'on\';'
});
}
else {
   require("sdk/tabs").activeTab.attach({
      contentScript: 'document.designMode=\'off\';'
});
}
}
});

So what do I need to put at the question marks? I tried alot but nothing seems to work.

Thanks in advance.

Edit: Here's my add-on, still without toggle:

https://addons.mozilla.org/nl/firefox/addon/edit-any-page/

Answer 1

I say on click put in this script:

onClick: function(){
    require("sdk/tabs").activeTab.attach({
      contentScript: 'document.designMode = document.designMode == "on" ? "off" : "on";'
    });
}