diff --git a/browser/base/content/browser-customization.js b/browser/base/content/browser-customization.js
index c265085b9f49..19db93e3a99c 100644
--- a/browser/base/content/browser-customization.js
+++ b/browser/base/content/browser-customization.js
@@ -60,9 +60,7 @@ var CustomizationHandler = {
if (aDetails.changed) {
gURLBar = document.getElementById("urlbar");
- gProxyFavIcon = document.getElementById("page-proxy-favicon");
gHomeButton.updateTooltip();
- gIdentityHandler._cacheElements();
XULBrowserWindow.init();
#ifndef XP_MACOSX
diff --git a/browser/base/content/browser-places.js b/browser/base/content/browser-places.js
index 553acdaa8033..d78860026fc1 100644
--- a/browser/base/content/browser-places.js
+++ b/browser/base/content/browser-places.js
@@ -370,7 +370,7 @@ var PlacesCommandHook = {
// Try to dock the panel to:
// 1. the bookmarks menu button
- // 2. the page-proxy-favicon
+ // 2. the identity icon
// 3. the content area
if (BookmarkingUI.anchor) {
StarUI.showEditBookmarkPopup(itemId, BookmarkingUI.anchor,
@@ -378,9 +378,9 @@ var PlacesCommandHook = {
return;
}
- let pageProxyFavicon = document.getElementById("page-proxy-favicon");
- if (isElementVisible(pageProxyFavicon)) {
- StarUI.showEditBookmarkPopup(itemId, pageProxyFavicon,
+ let identityIcon = document.getElementById("identity-icon");
+ if (isElementVisible(identityIcon)) {
+ StarUI.showEditBookmarkPopup(itemId, identityIcon,
"bottomcenter topright");
} else {
StarUI.showEditBookmarkPopup(itemId, aBrowser, "overlap");
@@ -446,7 +446,7 @@ var PlacesCommandHook = {
// Try to dock the panel to:
// 1. the bookmarks menu button
- // 2. the page-proxy-favicon
+ // 2. the identity icon
// 3. the content area
if (BookmarkingUI.anchor) {
StarUI.showEditBookmarkPopup(node, BookmarkingUI.anchor,
@@ -454,9 +454,9 @@ var PlacesCommandHook = {
return;
}
- let pageProxyFavicon = document.getElementById("page-proxy-favicon");
- if (isElementVisible(pageProxyFavicon)) {
- StarUI.showEditBookmarkPopup(node, pageProxyFavicon,
+ let identityIcon = document.getElementById("identity-icon");
+ if (isElementVisible(identityIcon)) {
+ StarUI.showEditBookmarkPopup(node, identityIcon,
"bottomcenter topright");
} else {
StarUI.showEditBookmarkPopup(node, aBrowser, "overlap");
diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
index 2a4eda272c8c..5c7822ea72a7 100644
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -95,7 +95,6 @@ XPCOMUtils.defineLazyGetter(this, "gBrowserBundle", function() {
const nsIWebNavigation = Ci.nsIWebNavigation;
var gLastBrowserCharset = null;
-var gProxyFavIcon = null;
var gLastValidURLStr = "";
var gInPrintPreviewMode = false;
var gContextMenu = null; // nsContextMenu instance
@@ -2562,11 +2561,7 @@ function SetPageProxyState(aState)
if (!gURLBar)
return;
- if (!gProxyFavIcon)
- gProxyFavIcon = document.getElementById("page-proxy-favicon");
-
gURLBar.setAttribute("pageproxystate", aState);
- gProxyFavIcon.setAttribute("pageproxystate", aState);
// the page proxy state is set to valid via OnLocationChange, which
// gets called when we switch tabs.
@@ -7001,38 +6996,15 @@ var gIdentityHandler = {
delete this._identityIconCountryLabel;
return this._identityIconCountryLabel = document.getElementById("identity-icon-country-label");
},
- get _identityIcons () {
- delete this._identityIcons;
- return this._identityIcons = document.getElementById("identity-icons");
- },
get _identityIcon () {
delete this._identityIcon;
- return this._identityIcon = document.getElementById("page-proxy-favicon");
+ return this._identityIcon = document.getElementById("identity-icon");
},
get _permissionList () {
delete this._permissionList;
return this._permissionList = document.getElementById("identity-popup-permission-list");
},
- /**
- * Rebuild cache of the elements that may or may not exist depending
- * on whether there's a location bar.
- */
- _cacheElements : function() {
- delete this._identityBox;
- delete this._identityIcons;
- delete this._identityIconLabel;
- delete this._identityIconCountryLabel;
- delete this._identityIcon;
- delete this._permissionList;
- this._identityBox = document.getElementById("identity-box");
- this._identityIcons = document.getElementById("identity-icons");
- this._identityIconLabel = document.getElementById("identity-icon-label");
- this._identityIconCountryLabel = document.getElementById("identity-icon-country-label");
- this._identityIcon = document.getElementById("page-proxy-favicon");
- this._permissionList = document.getElementById("identity-popup-permission-list");
- },
-
/**
* Handler for mouseclicks on the "More Information" button in the
* "identity-popup" panel.
@@ -7532,7 +7504,7 @@ var gIdentityHandler = {
this._identityBox.setAttribute("open", "true");
// Now open the popup, anchored off the primary chrome element
- this._identityPopup.openPopup(this._identityIcons, "bottomcenter topleft");
+ this._identityPopup.openPopup(this._identityIcon, "bottomcenter topleft");
},
onPopupShown(event) {
@@ -7575,7 +7547,7 @@ var gIdentityHandler = {
dt.setData("text/uri-list", value);
dt.setData("text/plain", value);
dt.setData("text/html", htmlString);
- dt.setDragImage(gProxyFavIcon, 16, 16);
+ dt.setDragImage(this._identityIcon, 16, 16);
},
updateSitePermissions: function () {
diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
index 0c6042cd458e..780bbcf18e46 100644
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -738,13 +738,11 @@
onclick="gIdentityHandler.handleIdentityButtonEvent(event);"
onkeypress="gIdentityHandler.handleIdentityButtonEvent(event);"
ondragstart="gIdentityHandler.onDragStart(event);">
-
-
-
-
+
+
+
diff --git a/browser/base/content/test/general/browser_insecureLoginForms.js b/browser/base/content/test/general/browser_insecureLoginForms.js
index c72ab3be3ee2..6110dd231b1a 100644
--- a/browser/base/content/test/general/browser_insecureLoginForms.js
+++ b/browser/base/content/test/general/browser_insecureLoginForms.js
@@ -41,8 +41,9 @@ add_task(function* test_simple() {
document.getElementById("identity-popup-security-expander").click();
if (expectWarning) {
- let identityBoxImage = gBrowser.ownerGlobal
- .getComputedStyle(document.getElementById("page-proxy-favicon"), "")
+ is_element_visible(document.getElementById("connection-icon"));
+ let connectionIconImage = gBrowser.ownerGlobal
+ .getComputedStyle(document.getElementById("connection-icon"), "")
.getPropertyValue("list-style-image");
let securityViewBG = gBrowser.ownerGlobal
.getComputedStyle(document.getElementById("identity-popup-securityView"), "")
@@ -50,7 +51,7 @@ add_task(function* test_simple() {
let securityContentBG = gBrowser.ownerGlobal
.getComputedStyle(document.getElementById("identity-popup-security-content"), "")
.getPropertyValue("background-image");
- is(identityBoxImage,
+ is(connectionIconImage,
"url(\"chrome://browser/skin/identity-mixed-active-loaded.svg\")",
"Using expected icon image in the identity block");
is(securityViewBG,
diff --git a/browser/base/content/test/general/head.js b/browser/base/content/test/general/head.js
index c59a718e3805..fba28a24011f 100644
--- a/browser/base/content/test/general/head.js
+++ b/browser/base/content/test/general/head.js
@@ -781,7 +781,8 @@ function assertMixedContentBlockingState(tabbrowser, states = {}) {
let doc = tabbrowser.ownerDocument;
let identityBox = gIdentityHandler._identityBox;
let classList = identityBox.classList;
- let identityBoxImage = tabbrowser.ownerGlobal.getComputedStyle(doc.getElementById("page-proxy-favicon"), "").
+ let connectionIcon = doc.getElementById("connection-icon");
+ let connectionIconImage = tabbrowser.ownerGlobal.getComputedStyle(connectionIcon, "").
getPropertyValue("list-style-image");
let stateSecure = gIdentityHandler._state & Ci.nsIWebProgressListener.STATE_IS_SECURE;
@@ -799,7 +800,7 @@ function assertMixedContentBlockingState(tabbrowser, states = {}) {
// HTTP request, there should be no MCB classes for the identity box and the non secure icon
// should always be visible regardless of MCB state.
ok(classList.contains("unknownIdentity"), "unknownIdentity on HTTP page");
- is(identityBoxImage, "url(\"chrome://browser/skin/identity-not-secure.svg\")", "Using 'non-secure' icon");
+ is_element_hidden(connectionIcon);
ok(!classList.contains("mixedActiveContent"), "No MCB icon on HTTP page");
ok(!classList.contains("mixedActiveBlocked"), "No MCB icon on HTTP page");
@@ -816,20 +817,21 @@ function assertMixedContentBlockingState(tabbrowser, states = {}) {
is(classList.contains("mixedDisplayContentLoadedActiveBlocked"), passiveLoaded && activeBlocked,
"identityBox has expected class for passiveLoaded && activeBlocked");
+ is_element_visible(connectionIcon);
if (activeLoaded) {
- is(identityBoxImage, "url(\"chrome://browser/skin/identity-mixed-active-loaded.svg\")",
+ is(connectionIconImage, "url(\"chrome://browser/skin/identity-mixed-active-loaded.svg\")",
"Using active loaded icon");
}
if (activeBlocked && !passiveLoaded) {
- is(identityBoxImage, "url(\"chrome://browser/skin/identity-mixed-active-blocked.svg\")",
+ is(connectionIconImage, "url(\"chrome://browser/skin/identity-mixed-active-blocked.svg\")",
"Using active blocked icon");
}
if (passiveLoaded && !(activeLoaded || activeBlocked)) {
- is(identityBoxImage, "url(\"chrome://browser/skin/identity-mixed-passive-loaded.svg\")",
+ is(connectionIconImage, "url(\"chrome://browser/skin/identity-mixed-passive-loaded.svg\")",
"Using passive loaded icon");
}
if (passiveLoaded && activeBlocked) {
- is(identityBoxImage, "url(\"chrome://browser/skin/identity-mixed-passive-loaded.svg\")",
+ is(connectionIconImage, "url(\"chrome://browser/skin/identity-mixed-passive-loaded.svg\")",
"Using active blocked and passive loaded icon");
}
}
diff --git a/browser/themes/shared/identity-block/identity-block.inc.css b/browser/themes/shared/identity-block/identity-block.inc.css
index fbff1230c069..48d041e32374 100644
--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -75,13 +75,42 @@
padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 4.01px);
}
+/* MAIN IDENTITY ICON */
+
+#identity-icon {
+ width: 16px;
+ height: 16px;
+ list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
+}
+
+#identity-box:hover > #identity-icon,
+#identity-box[open=true] > #identity-icon {
+ list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
+}
+
+#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
+ list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
+}
+
+#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
+ opacity: 0.3;
+}
+
+#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
+ -moz-image-region: inherit;
+ list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
+ width: 16px;
+ height: 16px;
+ opacity: 1;
+}
+
/* TRACKING PROTECTION ICON */
#tracking-protection-icon {
width: 16px;
height: 16px;
- margin-inline-start: 0;
- margin-inline-end: 2px;
+ margin-inline-start: 2px;
+ margin-inline-end: 0;
list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
opacity: 1;
}
@@ -95,57 +124,46 @@
}
#tracking-protection-icon:not([state]) {
- margin-inline-start: -18px;
+ margin-inline-end: -18px;
pointer-events: none;
opacity: 0;
/* Only animate the shield in, when it disappears hide it immediately. */
transition: none;
}
-#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon {
+#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
visibility: collapse;
}
-/* MAIN IDENTITY ICON */
+/* CONNECTION ICON */
-#page-proxy-favicon {
+#connection-icon {
width: 16px;
height: 16px;
- list-style-image: url(chrome://browser/skin/identity-not-secure.svg);
+ margin-inline-start: 2px;
+ visibility: collapse;
}
-.chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
- list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
-}
-
-.verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
-.verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
list-style-image: url(chrome://browser/skin/identity-secure.svg);
+ visibility: visible;
}
-.insecureLoginForms > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
-.mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
+#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
+ visibility: visible;
}
-.weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
-.mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
-.mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
+#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
+#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
+ visibility: visible;
}
-.mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
+#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
-}
-
-#page-proxy-favicon[pageproxystate="invalid"] {
- opacity: 0.3;
-}
-
-#urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon {
- -moz-image-region: inherit;
- list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
- width: 16px;
- height: 16px;
- opacity: 1;
+ visibility: visible;
}
diff --git a/browser/themes/shared/identity-block/identity-icon.svg b/browser/themes/shared/identity-block/identity-icon.svg
new file mode 100755
index 000000000000..531aec45e5f5
--- /dev/null
+++ b/browser/themes/shared/identity-block/identity-icon.svg
@@ -0,0 +1,31 @@
+
+
+
diff --git a/browser/themes/shared/jar.inc.mn b/browser/themes/shared/jar.inc.mn
index 0be6ec1f18d2..1bcb1895e0f1 100644
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -59,6 +59,7 @@
skin/classic/browser/heartbeat-icon.svg (../shared/heartbeat-icon.svg)
skin/classic/browser/heartbeat-star-lit.svg (../shared/heartbeat-star-lit.svg)
skin/classic/browser/heartbeat-star-off.svg (../shared/heartbeat-star-off.svg)
+ skin/classic/browser/identity-icon.svg (../shared/identity-block/identity-icon.svg)
skin/classic/browser/identity-not-secure.svg (../shared/identity-block/identity-not-secure.svg)
skin/classic/browser/identity-secure.svg (../shared/identity-block/identity-secure.svg)
skin/classic/browser/identity-mixed-active-blocked.svg (../shared/identity-block/identity-mixed-active-blocked.svg)