Added foundation for displaying a rulesets applied counter

nullishzero · nullishzero · commit 91bb6548ded8 · 2013-05-22T22:21:47.000-07:00
diff --git a/src/chrome/content/toolbar_button.xul b/src/chrome/content/toolbar_button.xul
@@ -37,7 +37,8 @@
       oncontextmenu="this.open = true;"
       oncommand="this.open = true;"
       buttonstyle="pictures"
-      type="menu">
+      type="menu"
+      rulesetsApplied="0">
 
       <menupopup id="https-everywhere-context" onpopupshowing="show_applicable_list(this)">
         <!-- entries will be written here by ApplicableList.populate_menu() -->
diff --git a/src/chrome/content/toolbar_button_binding.xml b/src/chrome/content/toolbar_button_binding.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0"?>
+<!-- 
+Toolbar button needs to be extended to show a counter for the number of
+rulesets applied, and this can be done using XBL. 
+
+See: https://developer.mozilla.org/en-US/docs/XBL
+-->
+<bindings xmlns="http://www.mozilla.org/xbl"
+    xmlns:xbl="http://www.mozilla.org/xbl"
+    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <binding id="https-everywhere-binding">
+    <content>
+      <!-- ruleset counter (rscounter) and rulesets applied (rsapplied) -->
+      <xul:stack id="rscounter">
+        <xul:label id="rsapplied" xbl:inherits="value=rulesetsApplied" />
+      </xul:stack>
+
+      <!-- 
+      Https everywhere toolbar button is already defined; just use its settings. 
+      TODO: Look into any issues with oncommand/oncontext.
+      -->
+      <xul:toolbarbutton 
+          class="https-everywhere-button toolbarbutton-1 chromeclass-toolbar-additional"
+          flex="1" 
+          allowevents="true"
+          xbl:inherits="type,crop,image,label,accesskey,command,align,dir,pack,orient">
+
+        <children includes="menupopup" />
+      </xul:toolbarbutton>
+    </content>
+  </binding>
+</bindings>
diff --git a/src/chrome/skin/https-everywhere.css b/src/chrome/skin/https-everywhere.css
@@ -1,22 +1,50 @@
 #https-everywhere-button {
+  -moz-binding: url("chrome://https-everywhere/content/toolbar_button_binding.xml#https-everywhere-binding");
+  -moz-box-orient: horizontal;
+}
+
+#https-everywhere-button > .https-everywhere-button {
   list-style-image: url("chrome://https-everywhere/skin/https-everywhere-24.png");
   -moz-box-orient: horizontal;
 }
 
-toolbar[iconsize="small"] #https-everywhere-button {
+toolbar[iconsize="small"] #https-everywhere-button > .https-everywhere-button {
   list-style-image: url("chrome://https-everywhere/skin/https-everywhere-16.png");
   -moz-box-orient: horizontal;
 }
 
 /* Use CSS attribute selector for changing icon */
-#https-everywhere-button[status="disabled"] {
+#https-everywhere-button[status="disabled"] > .https-everywhere-button {
   list-style-image: url("chrome://https-everywhere/skin/https-everywhere-24-gray.png");
 }
 
-toolbar[iconsize="small"] #https-everywhere-button[status="disabled"] {
+toolbar[iconsize="small"] #https-everywhere-button[status="disabled"] > .https-everywhere-button {
   list-style-image: url("chrome://https-everywhere/skin/https-everywhere-16-gray.png");
 }
 
+/* ruleset counter */
+#rscounter {
+  margin: 3px -12px 0 -8px; 
+  display: block;
+  -moz-box-sizing: border-box;
+}
+
+/* rulesets applied label */
+#rsapplied {
+  -moz-box-sizing: border-box;
+  font-size: 12px;
+  color: #000;
+  background-color: #FFF;
+  border-width: 1px; 
+  border-style: solid;
+  padding: 1px 1px 1px 1px; 
+  visibility: hidden;
+}
+
+#https-everywhere-button:not([rulesetsApplied="0"]) #rsapplied {
+  visibility: visible;
+}
+
 #https-everywhere-button menuitem.active-item label {
   color: #9AD100;
   font-weight: bold;
