const self = require("sdk/self");
const data = self.data;
const tabs = require("sdk/tabs");
const { ToggleButton } = require("sdk/ui/button/toggle");
var btn_config = {};
var btn;

// NOTE: The 18 and 36 icons are actually 16x16 and 32x32 respectively as
// FireFox will downscale 18x18 icons. I can't find any documentation on
// on why this happens or how to prevent this.
var icons = {
  'sleeping': {
    "18": './images/toolbar-inactive.png',
    "32": './images/menu-item.png',
    "36": './images/toolbar-inactive@2x.png',
    "64": './images/menu-item@2x.png'
  },
  // for all occasionas
  'active': {
    "18": './images/toolbar-active.png',
    "32": './images/menu-item.png',
    "36": './images/toolbar-active@2x.png',
    "64": './images/menu-item@2x.png'
  }
};

function tabToggle(tab) {
  if (btn.state(tab).checked) {
    tab.attach({
      contentScriptFile: data.url('embed.js')
    });
  } else {
    tab.attach({
      contentScript: [
        'var s = document.createElement("script");',
        's.setAttribute("src", "' + data.url('destroy.js') + '");',
        'document.body.appendChild(s);'
      ]
    });
  }
}

btn_config = {
  id: "hypothesis",
  label: "Annotate",
  icon: icons['sleeping'],
  onChange: function() {
    // delete the window-wide state default
    this.state('window', null);
    // but turn it back on for this tab
    if (!this.state(tabs.activeTab).checked === true) {
      this.state(tabs.activeTab, {
        checked: true,
        label: 'Annotating',
        icon: icons['active']
      });
    } else {
      this.state(tabs.activeTab, {
        checked: false,
        label: 'Annotate',
        icon: icons['sleeping']
      });
    }
    tabToggle(tabs.activeTab)
  }
};

if (undefined === ToggleButton) {
  btn = require("sdk/widget").Widget(btn_config);
} else {
  btn = ToggleButton(btn_config);
}

tabs.on('pageshow', tabToggle);
tabs.on('open', function(tab) {
  // h is off by default on new tabs
  btn.state(tab).checked = false;
});

if (self.loadReason === 'install') {
  tabs.open({
    url: 'https://hypothes.is/welcome',
    onPageShow: function(tab) {
      btn.click();
    }
  });
}

@@ -784,59 +784,22 @@
 ion 
-tabToggle(tab) %7B%0A  if (btn.state(tab).checked
+enable(tab
 ) %7B%0A
-  
   ta
@@ -801,34 +801,32 @@
 %0A  tab.attach(%7B%0A
-  
     contentScrip
@@ -859,27 +859,39 @@
 )%0A  
- 
- 
 %7D);%0A
-  %7D else
+%7D%0A%0Afunction disable(tab)
  %7B%0A
-  
   ta
@@ -905,18 +905,16 @@
 h(%7B%0A    
-  
 contentS
@@ -922,18 +922,16 @@
 ript: %5B%0A
-  
       'v
@@ -969,26 +969,24 @@
 script%22);',%0A
-  
       's.set
@@ -1045,18 +1045,16 @@
 ,%0A      
-  
 'documen
@@ -1085,24 +1085,16 @@
     
-  %5D%0A  
+%5D%0A
   %7D);%0A
-  %7D%0A
 %7D%0A%0Ab
@@ -1495,24 +1495,54 @@
 %5D%0A      %7D);%0A
+      enable(tabs.activeTab);%0A
     %7D else %7B
@@ -1678,21 +1678,15 @@
     
-%7D%0A    tabTogg
+  disab
 le(t
@@ -1699,16 +1699,23 @@
 tiveTab)
+;%0A    %7D
 %0A  %7D%0A%7D;%0A
@@ -1869,19 +1869,110 @@
 w', 
-tabToggle);
+function(tab) %7B%0A  if (btn.state(tab).checked) %7B%0A    enable(tab);%0A  %7D else %7B%0A    disable(tab);%0A  %7D%0A%7D);%0A
 %0Atab
@@ -2188,27 +2188,24 @@
 w: function(
-tab
 ) %7B%0A      bt

Handle Welcome page toggling better