gabrielecirulli · gabrielecirulli · Jul 30, 2016 · Jul 27, 2016 · Jul 27, 2016 · Jul 27, 2016
diff --git a/lib/defaults.json b/lib/defaults.json
@@ -24,7 +24,7 @@
     "permissions": {
         "mark_as_read": {
             "permissions": ["history"],
-            "description": "<em>Mark As Read</em> uses the <a target=\"_blank\" href=\"http://developer.chrome.com/extensions/history.html\">chrome.history</a> API to add links that you mark as read to your browser history."
+            "description": "<em>Mark As Read</em> uses additional browser permissions to add links that you mark as read to your history."
         }
     },
     "tips": [

diff --git a/lib/extras/_theme.styl b/lib/extras/_theme.styl
@@ -183,6 +183,9 @@ $hnspecial-button
     line-height 1.5
     color menu-color
 
+    &.hnspecial-settings-menu-inner-transparent
+        background transparent
+
     strong
         font-weight 400
         color darken(menu-color, 20%)

diff --git a/lib/extras/background.js b/lib/extras/background.js
@@ -22,7 +22,6 @@
         }
         else
         {
-          console.log("stupid chrom");
           var search = require("sdk/places/history");
           search(
             params

diff --git a/lib/extras/permissions.html b/lib/extras/permissions.html
@@ -1,13 +1,15 @@
 <html class="hnspecial-theme hnspecial-permissions-iframe-inner">
   <head>
-    <link rel="stylesheet" type="text/css" href="/lib/extras/hn_theme.css">
+    <link rel="stylesheet" type="text/css" href="/lib/extras/hn_theme_base.css">
+    <link rel="stylesheet" type="text/css" href="/lib/extras/hn_theme_light.css">
   </head>
   <body>
-    <div class="hnspecial-settings-menu-inner">
+    <div class="hnspecial-settings-menu-inner hnspecial-settings-menu-inner-transparent">
       <p class="permissions-description"></p>
       <button id="toggle-permissions" class="hnspecial-button"><span class="permissions-state-inverse"></span> permissions</button>
     </div>
 
+    <script src="/lib/setup.js"></script>
     <script src="/lib/tools/utility.js"></script>
     <script src="/lib/extras/permissions.js"></script>
   </body>

diff --git a/lib/extras/permissions.js b/lib/extras/permissions.js
@@ -4,6 +4,11 @@ _.load(function () {
   var modulePermissionsDescription = null; // The description of the optional permissions
   var originalPermissionStatus = null;
   var isPermissionsEnabled = false;        // Are the permissions for this module enabled?
+  var theme = window.location.hash.match(/~(.*)/);
+
+  if (theme && theme[1] === "dark") {
+    _.injectStylesheet("lib/extras/hn_theme_dark.css");
+  }
 
   // Lookup the state of the current permission
   var checkPermissionState = function () {
@@ -62,7 +67,7 @@ _.load(function () {
     var permissions = JSON.parse(results).permissions;
 
     // What module are we requesting optional permissions for?
-    moduleName = window.location.hash.replace(/^#/, "");
+    moduleName = window.location.hash.replace(/^#|~.*/g, "");
 
     if (permissions[moduleName] !== undefined) {
       modulePermissions = permissions[moduleName].permissions;

diff --git a/lib/modules/dark_theme.js b/lib/modules/dark_theme.js
@@ -1,7 +1,3 @@
 HNSpecial.settings.registerModule( "dark_theme", function() {
-  var theme = document.createElement( "link" );
-  theme.rel = "stylesheet";
-  theme.type = "text/css";
-  theme.href = HNSpecial.browser.getUrl( "lib/extras/hn_theme_dark.css" );
-  document.getElementsByTagName( "head" )[ 0 ].appendChild( theme );
+  _.injectStylesheet("lib/extras/hn_theme_dark.css");
 } );
diff --git a/lib/modules/high_contrast.js b/lib/modules/high_contrast.js
@@ -1,7 +1,3 @@
 HNSpecial.settings.registerModule("high_contrast", function () {
-  var theme = document.createElement( "link" );
-  theme.rel = "stylesheet";
-  theme.type = "text/css";
-  theme.href = HNSpecial.browser.getUrl( "lib/extras/hn_theme_light_contrast.css" );
-  document.getElementsByTagName( "head" )[ 0 ].appendChild( theme );
+  _.injectStylesheet("lib/extras/hn_theme_light_contrast.css");
 });
diff --git a/lib/modules/visual_theme.js b/lib/modules/visual_theme.js
@@ -13,11 +13,7 @@ HNSpecial.settings.registerModule("visual_theme", function () {
     // Add this extension's CSS theme
     if( !HNSpecial.settings.moduleEnabled( "dark_theme" ) &&
         !HNSpecial.settings.moduleEnabled( "high_contrast" ) ) {
-      var theme = document.createElement("link");
-      theme.rel = "stylesheet";
-      theme.type = "text/css";
-      theme.href = HNSpecial.browser.getUrl( "lib/extras/hn_theme_light.css" );
-      document.getElementsByTagName('head')[0].appendChild(theme);
+      _.injectStylesheet("lib/extras/hn_theme_light.css");
     }
 
     // Store the topcolor so we can use it later

diff --git a/lib/settings.js b/lib/settings.js
@@ -1,20 +1,3 @@
-function BrowserAbstraction()
-{
-  this.firefoxOptions = self.options;
-}
-
-BrowserAbstraction.prototype.getUrl = function( name ) {
-  return HNSpecial.isChrome ?
-    chrome.runtime.getURL( name ) :
-    this.firefoxOptions.urlBase + name;
-};
-
-BrowserAbstraction.prototype.getDefaultOptions = function( cb ) {
-  return HNSpecial.isChrome ?
-    _.request( HNSpecial.browser.getUrl( "lib/defaults.json" ), "GET", cb ) :
-    cb( this.firefoxOptions.defaultOptions );
-};
-
 function Settings() {
   var self = this;
 
@@ -371,6 +354,8 @@ Settings.prototype.applyPermissions = function (permissions, map) {
 };
 
 Settings.prototype.setupOptionalPermissions = function (container, moduleName, moduleActivated) {
+  var self = this;
+
   if (HNSpecial.isChrome) {
     // Remove the iframe if it exists
     var element = document.getElementById("hnspecial-permissions-" + moduleName);
@@ -380,11 +365,13 @@ Settings.prototype.setupOptionalPermissions = function (container, moduleName, m
 
     var complete = function () {
       // Add the iframe, passing in the module name
+      var themeModifier = self.currentSettings.dark_theme ? "dark" : "light";
+
       var iframe = _.createElement("iframe", {
         classes: ["hnspecial-permissions-iframe"],
         attributes: {
           id: "hnspecial-permissions-" + moduleName,
-          src: HNSpecial.browser.getUrl("lib/extras/permissions.html#" + moduleName)
+          src: HNSpecial.browser.getUrl("lib/extras/permissions.html#" + moduleName + "~" + themeModifier)
         }
       });
       container.appendChild(iframe);
@@ -523,11 +510,5 @@ Settings.prototype.updateAndReload = function () {
 
 (function () {
   // Run the settings module as soon as possible
-  this.HNSpecial = {};
-
-  if( this.chrome !== undefined )
-    this.HNSpecial.isChrome = true;
-  this.HNSpecial.browser = new BrowserAbstraction();
-
   this.HNSpecial.settings = new Settings();
 }).call(this);
diff --git a/lib/setup.js b/lib/setup.js
@@ -0,0 +1,25 @@
+function BrowserAbstraction() {
+  this.firefoxOptions = self.options;
+}
+
+BrowserAbstraction.prototype.getUrl = function (name) {
+  return HNSpecial.isChrome ?
+    chrome.runtime.getURL( name ) :
+    this.firefoxOptions.urlBase + name;
+};
+
+BrowserAbstraction.prototype.getDefaultOptions = function (cb) {
+  return HNSpecial.isChrome ?
+    _.request( HNSpecial.browser.getUrl("lib/defaults.json"), "GET", cb ) :
+    cb(this.firefoxOptions.defaultOptions);
+};
+
+(function () {
+  this.HNSpecial = {};
+
+  if (this.chrome !== undefined) {
+    this.HNSpecial.isChrome = true;
+  }
+
+  this.HNSpecial.browser = new BrowserAbstraction();
+}).call(this);
diff --git a/lib/tools/utility.js b/lib/tools/utility.js
@@ -118,5 +118,13 @@
     }
   };
 
+  _.injectStylesheet = function (path) {
+    var theme = document.createElement("link");
+    theme.rel = "stylesheet";
+    theme.type = "text/css";
+    theme.href = HNSpecial.browser.getUrl(path);
+    document.getElementsByTagName("head")[0].appendChild(theme);
+  };
+
   this._ = _;
 }).call(this);
diff --git a/manifest.json b/manifest.json
@@ -32,6 +32,7 @@
     {
       "matches": [ "http://news.ycombinator.com/*", "https://news.ycombinator.com/*" ],
       "js": [
+        "lib/setup.js",
         "lib/tools/utility.js",
         "lib/settings.js",
         "lib/modules/visual_theme.js",