identity (ssl) support

css/theme.css

@@ -239,7 +239,6 @@ body:not(.loading) .stop-button {
   background-color: white;
   border-radius: var(--radius);
   margin: 4px 6px 3px;
-  padding: 0 6px 0 24px;
   border-style: solid;
   border-color: #B0AEB0;
   border-bottom-width: 1px;
@@ -257,6 +256,45 @@ body:not(.loading) .stop-button {
   vertical-align: bottom;
 }
 
+.identity {
+  width: 16px;
+  height: 16px;
+  margin: 0 6px;
+  background-position: -16px 0;
+}
+
+.identity:hover {
+  background-position: 0 0;
+}
+
+.identity {
+  background-image: url(../images/shared/identity-icons-generic.png);
+}
+
+body.ssl .identity {
+  background-image: url(../images/shared/identity-icons-https.png);
+}
+
+body.sslev .identity {
+  /* Extended Validation doesn't work yet: bug 764496 */
+  background-image: url(../images/shared/identity-icons-https-ev.png);
+}
+
+@media (min-resolution: 2dppx) {
+  .identity {
+    background-image: url(../images/shared/[email protected]);
+  }
+
+  body.ssl .identity {
+    background-image: url(../images/shared/[email protected]);
+  }
+
+  body.sslev .identity {
+    /* Extended Validation doesn't work yet: bug 764496 */
+    background-image: url(../images/shared/[email protected]);
+  }
+}
+
 /* iframes */
 
 body:not([os="osx"]) .iframes {

index.html

@@ -28,6 +28,7 @@
         <button class="reload-button"></button>
         <button class="stop-button"></button>
         <hbox class="urlbar" flex="1" align="center">
+          <div class="identity"></div>
           <input placeholder="Search or enter address" class="urlinput" flex="1">
         </hbox>
         <hbox class="searchbar" align="center">

js/gBrowser.js

@@ -66,6 +66,16 @@ let gBrowser = {
       return;
     }
 
+    if (tab.securityState == "secure") {
+      document.body.classList.add("ssl");
+      if (tab.securityExtendedValidation) {
+        document.body.classList.add("sslev");
+      }
+    } else {
+      document.body.classList.remove("ssl");
+      document.body.classList.remove("sslev");
+    }
+
     if (tab.hasIframe()) {
       let iframe = tab.iframe;
 

js/tab.js

@@ -112,6 +112,8 @@ Tab.prototype = {
   get title() { return this._title},
   get location() { return this._location},
   get favicon() { return this._favicon},
+  get securityState() { return this._securityState},
+  get securityExtendedValidation() { return this._securityExtendedValidation},
 
   updateDom: function() {
     if (this.loading) {
@@ -120,8 +122,6 @@ Tab.prototype = {
       this.dom.classList.remove("loading");
     }
 
-    console.log("title", this.title);
-    console.log("location", this.location);
     if (this.title) {
       this.dom.querySelector(".title").textContent = this.title;
     } else {
@@ -166,6 +166,8 @@ Tab.prototype = {
     this._title = "";
     this._location = "";
     this._favicon = "";
+    this._securityState = "unsecure";
+    this._securityExtendedValidation = false;
   },
 
   userInput: "",
@@ -196,6 +198,10 @@ Tab.prototype = {
       case "mozbrowseropenwindow":
         gBrowser.addTab(e.detail.url, true);
         break;
+      case "mozbrowsersecuritychange":
+        this._securityState = e.detail.state;
+        this._securityExtendedValidation = e.detail.extendedValidation;
+        break;
       default:
         somethingChanged = false;
     }