Merge m-c to inbound, a=merge CLOSED TREE

--HG--
extra : commitid : GWqH03Ikv84

b2g/config/aries/sources.xml

@@ -15,7 +15,7 @@
   <project name="platform_build" path="build" remote="b2g" revision="8d83715f08b7849f16a0dfc88f78d5c3a89c0a54">
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="27bc9412ca607648bc398b25bb1ae25653b2b278"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="4019a15121359c470765dd06e94850dd64cdf8d9"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="fake-qemu-kernel" path="prebuilts/qemu-kernel" remote="b2g" revision="939b377d55a2f081d94029a30a75d05e5a20daf3"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="9a58f2e395da17c252f61f28900b5b09aeb813bd"/>

b2g/config/dolphin/sources.xml

@@ -15,7 +15,7 @@
   <project name="platform_build" path="build" remote="b2g" revision="8d83715f08b7849f16a0dfc88f78d5c3a89c0a54">
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="27bc9412ca607648bc398b25bb1ae25653b2b278"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="4019a15121359c470765dd06e94850dd64cdf8d9"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="fake-qemu-kernel" path="prebuilts/qemu-kernel" remote="b2g" revision="939b377d55a2f081d94029a30a75d05e5a20daf3"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="9a58f2e395da17c252f61f28900b5b09aeb813bd"/>

b2g/config/emulator-ics/sources.xml

@@ -19,7 +19,7 @@
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
   <project name="fake-dalvik" path="dalvik" remote="b2g" revision="ca1f327d5acc198bb4be62fa51db2c039032c9ce"/>
-  <project name="gaia.git" path="gaia" remote="mozillaorg" revision="27bc9412ca607648bc398b25bb1ae25653b2b278"/>
+  <project name="gaia.git" path="gaia" remote="mozillaorg" revision="4019a15121359c470765dd06e94850dd64cdf8d9"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="9a58f2e395da17c252f61f28900b5b09aeb813bd"/>
   <project name="rilproxy" path="rilproxy" remote="b2g" revision="5ef30994f4778b4052e58a4383dbe7890048c87e"/>
   <project name="platform_hardware_ril" path="hardware/ril" remote="b2g" revision="cb4604d5a578efd027277059ce3e0f6e3af59bd1"/>

b2g/config/emulator-jb/sources.xml

@@ -17,7 +17,7 @@
   </project>
   <project name="rilproxy" path="rilproxy" remote="b2g" revision="5ef30994f4778b4052e58a4383dbe7890048c87e"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="27bc9412ca607648bc398b25bb1ae25653b2b278"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="4019a15121359c470765dd06e94850dd64cdf8d9"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="9a58f2e395da17c252f61f28900b5b09aeb813bd"/>
   <project name="moztt" path="external/moztt" remote="b2g" revision="aa5b7b7f6ed207ea1adc4df11d1d8bdaeabadd85"/>
   <project name="apitrace" path="external/apitrace" remote="apitrace" revision="f009c98ba697582c857c5788e5cdf0640e287ae6"/>

b2g/config/emulator-kk/sources.xml

@@ -15,7 +15,7 @@
   <project name="platform_build" path="build" remote="b2g" revision="8d83715f08b7849f16a0dfc88f78d5c3a89c0a54">
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="27bc9412ca607648bc398b25bb1ae25653b2b278"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="4019a15121359c470765dd06e94850dd64cdf8d9"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="9a58f2e395da17c252f61f28900b5b09aeb813bd"/>
   <project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

b2g/config/emulator-l/sources.xml

@@ -15,7 +15,7 @@
   <project name="platform_build" path="build" remote="b2g" revision="c9d4fe680662ee44a4bdea42ae00366f5df399cf">
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="27bc9412ca607648bc398b25bb1ae25653b2b278"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="4019a15121359c470765dd06e94850dd64cdf8d9"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="9a58f2e395da17c252f61f28900b5b09aeb813bd"/>
   <project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

b2g/config/emulator/sources.xml

@@ -19,7 +19,7 @@
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
   <project name="fake-dalvik" path="dalvik" remote="b2g" revision="ca1f327d5acc198bb4be62fa51db2c039032c9ce"/>
-  <project name="gaia.git" path="gaia" remote="mozillaorg" revision="27bc9412ca607648bc398b25bb1ae25653b2b278"/>
+  <project name="gaia.git" path="gaia" remote="mozillaorg" revision="4019a15121359c470765dd06e94850dd64cdf8d9"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="9a58f2e395da17c252f61f28900b5b09aeb813bd"/>
   <project name="rilproxy" path="rilproxy" remote="b2g" revision="5ef30994f4778b4052e58a4383dbe7890048c87e"/>
   <project name="platform_hardware_ril" path="hardware/ril" remote="b2g" revision="cb4604d5a578efd027277059ce3e0f6e3af59bd1"/>

b2g/config/flame-kk/sources.xml

@@ -15,7 +15,7 @@
   <project name="platform_build" path="build" remote="b2g" revision="8d83715f08b7849f16a0dfc88f78d5c3a89c0a54">
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="27bc9412ca607648bc398b25bb1ae25653b2b278"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="4019a15121359c470765dd06e94850dd64cdf8d9"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="fake-qemu-kernel" path="prebuilts/qemu-kernel" remote="b2g" revision="939b377d55a2f081d94029a30a75d05e5a20daf3"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="9a58f2e395da17c252f61f28900b5b09aeb813bd"/>

b2g/config/gaia.json

@@ -1,9 +1,9 @@
 {
     "git": {
-        "git_revision": "27bc9412ca607648bc398b25bb1ae25653b2b278", 
+        "git_revision": "4019a15121359c470765dd06e94850dd64cdf8d9", 
         "remote": "https://git.mozilla.org/releases/gaia.git", 
         "branch": ""
     }, 
-    "revision": "2f649cee836b8510c54124d3be96ef12b3bce66e", 
+    "revision": "03c4db27ecf40f61c06113da6ab78710088f8701", 
     "repo_path": "integration/gaia-central"
 }

b2g/config/nexus-4-kk/sources.xml

@@ -15,7 +15,7 @@
   <project name="platform_build" path="build" remote="b2g" revision="8d83715f08b7849f16a0dfc88f78d5c3a89c0a54">
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="27bc9412ca607648bc398b25bb1ae25653b2b278"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="4019a15121359c470765dd06e94850dd64cdf8d9"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="fake-qemu-kernel" path="prebuilts/qemu-kernel" remote="b2g" revision="939b377d55a2f081d94029a30a75d05e5a20daf3"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="9a58f2e395da17c252f61f28900b5b09aeb813bd"/>

b2g/config/nexus-4/sources.xml

@@ -18,7 +18,7 @@
   <project name="rilproxy" path="rilproxy" remote="b2g" revision="5ef30994f4778b4052e58a4383dbe7890048c87e"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="fake-qemu-kernel" path="prebuilts/qemu-kernel" remote="b2g" revision="939b377d55a2f081d94029a30a75d05e5a20daf3"/>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="27bc9412ca607648bc398b25bb1ae25653b2b278"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="4019a15121359c470765dd06e94850dd64cdf8d9"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="9a58f2e395da17c252f61f28900b5b09aeb813bd"/>
   <project name="moztt" path="external/moztt" remote="b2g" revision="aa5b7b7f6ed207ea1adc4df11d1d8bdaeabadd85"/>
   <project name="apitrace" path="external/apitrace" remote="apitrace" revision="f009c98ba697582c857c5788e5cdf0640e287ae6"/>

b2g/config/nexus-5-l/sources.xml

@@ -15,7 +15,7 @@
   <project name="platform_build" path="build" remote="b2g" revision="c9d4fe680662ee44a4bdea42ae00366f5df399cf">
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="27bc9412ca607648bc398b25bb1ae25653b2b278"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="4019a15121359c470765dd06e94850dd64cdf8d9"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="fake-qemu-kernel" path="prebuilts/qemu-kernel" remote="b2g" revision="939b377d55a2f081d94029a30a75d05e5a20daf3"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="9a58f2e395da17c252f61f28900b5b09aeb813bd"/>

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

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");

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 () {

browser/base/content/browser.xul

@@ -704,7 +704,7 @@
                 <image id="plugins-notification-icon" class="notification-anchor-icon" role="button"
                        aria-label="&urlbar.pluginsNotificationAnchor.label;"/>
                 <image id="web-notifications-notification-icon" class="notification-anchor-icon" role="button"
-                       aria-label="&urlbar.webNotsNotificationAnchor2.label;"/>
+                       aria-label="&urlbar.webNotsNotificationAnchor3.label;"/>
                 <image id="webRTC-shareDevices-notification-icon" class="notification-anchor-icon" role="button"
                        aria-label="&urlbar.webRTCShareDevicesNotificationAnchor.label;"/>
                 <image id="webRTC-sharingDevices-notification-icon" class="notification-anchor-icon" role="button"
@@ -738,13 +738,11 @@
                    onclick="gIdentityHandler.handleIdentityButtonEvent(event);"
                    onkeypress="gIdentityHandler.handleIdentityButtonEvent(event);"
                    ondragstart="gIdentityHandler.onDragStart(event);">
-                <hbox id="identity-icons"
-                      consumeanchor="identity-box">
-                  <image id="tracking-protection-icon"/>
-                  <image id="page-proxy-favicon"
-                         onclick="PageProxyClickHandler(event);"
-                         pageproxystate="invalid"/>
-                </hbox>
+                <image id="identity-icon"
+                       consumeanchor="identity-box"
+                       onclick="PageProxyClickHandler(event);"/>
+                <image id="tracking-protection-icon"/>
+                <image id="connection-icon"/>
                 <hbox id="identity-icon-labels">
                   <label id="identity-icon-label" class="plain" flex="1"/>
                   <label id="identity-icon-country-label" class="plain"/>

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,

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");
     }
   }

browser/locales/en-US/chrome/browser/browser.dtd

@@ -201,7 +201,7 @@ These should match what Safari and other Apple applications use on OS X Lion. --
 <!ENTITY urlbar.passwordNotificationAnchor.label        "Check if you want to save your password">
 <!ENTITY urlbar.webappsNotificationAnchor.label         "View the app install message">
 <!ENTITY urlbar.pluginsNotificationAnchor.label         "Manage plugin usage on this page">
-<!ENTITY urlbar.webNotsNotificationAnchor2.label        "Change whether the site can receive notifications">
+<!ENTITY urlbar.webNotsNotificationAnchor3.label        "Change whether you can receive notifications from the site">
 
 <!ENTITY urlbar.webRTCShareDevicesNotificationAnchor.label      "Manage sharing your camera and/or microphone with the site">
 <!ENTITY urlbar.webRTCSharingDevicesNotificationAnchor.label    "You are sharing your camera and/or microphone with the site">

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;
 }

browser/themes/shared/identity-block/identity-icon.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="48" height="16" viewBox="0 0 32 16">
+  <defs>
+    <circle id="shape-circle-base" cx="8" cy="8" r="7" />
+    <g id="shape-i">
+      <circle cx="8" cy="5" r="1" />
+      <rect x="7" y="7" width="2" height="5" rx="1" ry="1" />
+    </g>
+    <mask id="mask-ring-cutout">
+      <rect width="16" height="16" fill="#000" />
+      <use xlink:href="#shape-circle-base" fill="#fff" />
+      <circle cx="8" cy="8" r="6" fill="#000" />
+    </mask>
+  </defs>
+
+  <view id="normal" viewBox="0 0 16 16"/>
+  <g>
+    <use xlink:href="#shape-circle-base" mask="url(#mask-ring-cutout)" fill="#999" />
+    <use xlink:href="#shape-i" fill="#999" />
+  </g>
+
+  <view id="hover" viewBox="16 0 16 16"/>
+  <g transform="translate(16)">
+    <use xlink:href="#shape-circle-base" fill="#4c9ed9" />
+    <use xlink:href="#shape-i" fill="#fff" />
+  </g>
+</svg>

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)

devtools/client/framework/gDevTools.jsm

@@ -82,8 +82,7 @@ DevTools.prototype = {
    * - invertIconForLightTheme: The icon can automatically have an inversion
    *         filter applied (default is false).  All builtin tools are true, but
    *         addons may omit this to prevent unwanted changes to the `icon`
-   *         image. See devtools/client/themes/filters.svg#invert for
-   *         the filter being applied to the images (boolean|optional)
+   *         image. filter: invert(1) is applied to the image (boolean|optional)
    * - url: URL pointing to a XUL/XHTML document containing the user interface
    *        (string|required)
    * - label: Localized name for the tool to be displayed to the user

devtools/client/jar.mn

@@ -162,10 +162,6 @@ devtools.jar:
     skin/images/controls@2x.png (themes/images/controls@2x.png)
     skin/images/animation-fast-track.svg (themes/images/animation-fast-track.svg)
     skin/images/performance-icons.svg (themes/images/performance-icons.svg)
-    skin/images/newtab.png (themes/images/newtab.png)
-    skin/images/newtab@2x.png (themes/images/newtab@2x.png)
-    skin/images/newtab-inverted.png (themes/images/newtab-inverted.png)
-    skin/images/newtab-inverted@2x.png (themes/images/newtab-inverted@2x.png)
 *   skin/widgets.css (themes/widgets.css)
     skin/images/power.svg (themes/images/power.svg)
     skin/images/filetypes/dir-close.svg (themes/images/filetypes/dir-close.svg)
@@ -288,7 +284,6 @@ devtools.jar:
     skin/floating-scrollbars-light.css (themes/floating-scrollbars-light.css)
 *   skin/inspector.css (themes/inspector.css)
     skin/images/profiler-stopwatch.svg (themes/images/profiler-stopwatch.svg)
-    skin/images/profiler-stopwatch-checked.svg (themes/images/profiler-stopwatch-checked.svg)
     skin/images/tool-options.svg (themes/images/tool-options.svg)
     skin/images/tool-webconsole.svg (themes/images/tool-webconsole.svg)
     skin/images/tool-canvas.svg (themes/images/tool-canvas.svg)

devtools/client/shared/widgets/spectrum-frame.xhtml

@@ -19,6 +19,6 @@
 </head>
 <body role="application">
   <div id="spectrum"></div>
-  <div id="eyedropper-button"></div>
+  <button id="eyedropper-button" class="devtools-button"></button>
 </body>
-</html>
+</html>

devtools/client/shared/widgets/spectrum.css

@@ -3,38 +3,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #eyedropper-button {
+  margin-inline-start: 5px;
+}
+
+#eyedropper-button::before {
   background-image: url("chrome://devtools/skin/images/command-eyedropper.png");
-  width: 16px;
-  height: 16px;
   background-size: 64px 16px;
   background-position: 0 center;
-  background-repeat: no-repeat;
-  -moz-margin-start: 5px;
-  border-radius: 2px;
-  cursor: pointer;
-}
-
-.theme-light #eyedropper-button {
-  filter: url(chrome://devtools/skin/images/filters.svg#invert);
-  border: 1px solid #AAA;
-}
-
-.theme-dark #eyedropper-button {
-  border: 1px solid #444;
-}
-
-#eyedropper-button:hover {
-  background-position: -16px center;
-}
-#eyedropper-button:hover:active {
-  background-position: -32px center;
-}
-#eyedropper-button[checked=true] {
-  background-position: -48px center;
 }
 
 @media (min-resolution: 1.1dppx) {
-  #eyedropper-button {
+  #eyedropper-button::before {
     background-image: url("chrome://devtools/skin/images/command-eyedropper@2x.png");
   }
 }

devtools/client/themes/animationinspector.css

@@ -133,11 +133,6 @@ body {
   background-image: url("images/rewind.png");
 }
 
-#element-picker[checked]::before {
-  background-position: -48px 0;
-  filter: none; /* Icon is blue when checked, don't invert for light theme */
-}
-
 .pause-button.paused::before {
   background-image: url("images/debugger-play.png");
 }
@@ -404,12 +399,12 @@ body {
 }
 
 .animation-target .node-highlighter:hover {
-  background-position: -32px 0;
+  filter: url(images/filters.svg#checked-icon-state);
 }
 
 .animation-target .node-highlighter:active,
 .animation-target .node-highlighter.selected {
-  background-position: -16px 0;
+  filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
 }
 
 /* Animation title gutter, contains the name, duration, iteration */

devtools/client/themes/canvasdebugger.css

@@ -42,10 +42,6 @@
   list-style-image: url("chrome://devtools/skin/images/profiler-stopwatch.svg");
 }
 
-#record-snapshot[checked] {
-  list-style-image: url("chrome://devtools/skin/images/profiler-stopwatch-checked.svg");
-}
-
 /* Snapshots items */
 
 .snapshot-item-thumbnail {
@@ -103,15 +99,8 @@
 }
 
 /* Debugging pane controls */
-
-#debugging-controls .devtools-toolbarbutton > .toolbarbutton-icon {
-  width: 16px;
-  height: 16px;
-}
-
 #resume {
   list-style-image: url(images/debugger-play.png);
-  -moz-image-region: rect(0px,32px,16px,16px);
 }
 
 #step-over {
@@ -129,7 +118,6 @@
 @media (min-resolution: 1.1dppx) {
   #resume {
     list-style-image: url(images/debugger-play@2x.png);
-    -moz-image-region: rect(0px,64px,32px,32px);
   }
 
   #step-over {
@@ -145,14 +133,6 @@
   }
 }
 
-#debugging-controls > toolbarbutton {
-  transition: opacity 0.15s ease-in-out;
-}
-
-#debugging-controls > toolbarbutton[disabled=true] {
-  opacity: 0.5;
-}
-
 #calls-slider {
   -moz-padding-end: 24px;
 }

devtools/client/themes/commandline.inc.css

@@ -52,7 +52,7 @@
 
 :root[devtoolstheme="light"] #developer-toolbar > toolbarbutton:not([checked=true]) > image,
 :root[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before  {
-  filter: url("chrome://devtools/skin/images/filters.svg#invert");
+  filter: invert(1);
 }
 
 .developer-toolbar-button > .toolbarbutton-icon,

devtools/client/themes/debugger.css

@@ -62,6 +62,10 @@
   min-width: 32px;
 }
 
+#sources-toolbar .devtools-toolbarbutton:not([label]) {
+  -moz-image-region: rect(0,16px,16px,0);
+}
+
 #black-box {
   list-style-image: url(images/debugger-blackbox.png);
 }
@@ -86,34 +90,33 @@
   list-style-image: url(images/debugger-toggleBreakpoints.png);
 }
 
+#toggle-breakpoints[checked] {
+  -moz-image-region: rect(0,32px,16px,16px) !important;
+}
+
+#toggle-breakpoints[checked] > image {
+  /* This button has a special checked image, don't make it blue */
+  filter: none;
+}
+
 @media (min-resolution: 1.1dppx) {
+  #sources-toolbar .devtools-toolbarbutton:not([label]) {
+    -moz-image-region: rect(0,32px,32px,0);
+  }
+
   #toggle-breakpoints {
     list-style-image: url(images/debugger-toggleBreakpoints@2x.png);
   }
+
+  #toggle-breakpoints[checked] {
+    -moz-image-region: rect(0,64px,32px,32px) !important;
+  }
 }
 
 #toggle-promise-debugger {
   /* TODO Bug 1186119: Add a toggle promise debugger image */
 }
 
-#sources-toolbar .devtools-toolbarbutton:not([label]) {
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-@media (min-resolution: 1.1dppx) {
-  #sources-toolbar .devtools-toolbarbutton:not([label]) {
-    -moz-image-region: rect(0px,32px,32px,0px);
-  }
-
-  #sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
-    -moz-image-region: rect(0px,64px,32px,32px);
-  }
-}
-
 #sources .black-boxed {
   color: rgba(128,128,128,0.4);
 }
@@ -219,21 +222,11 @@
 
 #trace {
   list-style-image: url(images/tracer-icon.png);
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#trace[checked] {
-  -moz-image-region: rect(0px,32px,16px,16px);
 }
 
 @media (min-resolution: 1.1dppx) {
   #trace {
     list-style-image: url(images/tracer-icon@2x.png);
-    -moz-image-region: rect(0px,32px,32px,0px);
-  }
-
-  #trace[checked] {
-    -moz-image-region: rect(0px,64px,32px,32px);
   }
 }
 
@@ -549,15 +542,8 @@
 
 /* Toolbar controls */
 
-#debugger-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
-#sources-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon {
-  width: 16px;
-  height: 16px;
-}
-
 #resume {
   list-style-image: url(images/debugger-pause.png);
-  -moz-image-region: rect(0px,16px,16px,0px);
 }
 
 #resume[checked] {
@@ -567,24 +553,13 @@
 @media (min-resolution: 1.1dppx) {
   #resume {
     list-style-image: url(images/debugger-pause@2x.png);
-    -moz-image-region: rect(0px,32px,32px,0px);
   }
 
   #resume[checked] {
     list-style-image: url(images/debugger-play@2x.png);
-    -moz-image-region: rect(0px,64px,32px,32px);
   }
 }
 
-#debugger-controls toolbarbutton {
-  transition: opacity 0.15s ease-in-out;
-}
-
-#debugger-controls toolbarbutton[disabled] {
-  opacity: .5;
-  transition: none;
-}
-
 #resume[break-on-next] {
   background: var(--theme-highlight-lightorange);
 }
@@ -616,34 +591,21 @@
 }
 
 #instruments-pane-toggle {
-  background: none;
-  box-shadow: none;
-  border: none;
   list-style-image: url(images/debugger-collapse.png);
-  -moz-image-region: rect(0px,16px,16px,0px);
 }
 
 #instruments-pane-toggle[pane-collapsed] {
   list-style-image: url(images/debugger-expand.png);
 }
 
-#instruments-pane-toggle:hover {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
 @media (min-resolution: 1.1dppx) {
   #instruments-pane-toggle {
     list-style-image: url(images/debugger-collapse@2x.png);
-    -moz-image-region: rect(0px,32px,32px,0px);
   }
 
   #instruments-pane-toggle[pane-collapsed] {
     list-style-image: url(images/debugger-expand@2x.png);
   }
-
-  #instruments-pane-toggle:hover {
-    -moz-image-region: rect(0px,64px,32px,32px);
-  }
 }
 
 /* Horizontal vs. vertical layout */

devtools/client/themes/images/filters.svg

@@ -3,13 +3,12 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <svg height="0" xmlns="http://www.w3.org/2000/svg">
-  <filter id="invert" x="0%" y="0%" width="100%" height="100%"
-          primitiveUnits="objectBoundingBox">
-    <feComponentTransfer>
-      <feFuncR type="table" tableValues=".1 0"/>
-      <feFuncG type="table" tableValues=".1 0"/>
-      <feFuncB type="table" tableValues=".1 0"/>
-    </feComponentTransfer>
+  <filter id="checked-icon-state">
+    <feColorMatrix in="SourceGraphic" type="matrix"
+      values="0 0 0 0 0.043
+              0 0 0 0 0.415
+              0 0 0 0 0.79
+              0 0 0 1 0"/>
   </filter>
 
   <!-- Web Audio Gradients -->

devtools/client/themes/images/profiler-stopwatch-checked.svg

@@ -1,17 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <g fill="#3bace5" fill-rule="evenodd">
-    <path d="m8,1c-3.9,0-7,3.1-7,7s3.1,7 7,7c3.9,0 7-3.1 7-7s-3.1-7-7-7zm-.1,12c-2.8,0-5-2.2-5-5 0-2.8 2.2-5 5-5s5,2.2 5,5c0,2.8-2.2,5-5,5z"/>
-    <path d="m8,6.9c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1-.6,0-1.1-.5-1.1-1.1 0-.6 .5-1.1 1.1-1.1z"/>
-    <path d="m11.3,4.6l-3.9,2.5 1.5,1.4 2.4-3.9z"/>
-    <path opacity=".4" d="m4.6,10c.7,1.2 2,2 3.4,2 1.5,0 2.7-.8 3.4-2h-6.8z"/>
-    <g opacity=".3">
-      <path d="m7.1,5.1l-.6-1.3-.9,.4 .7,1.3c.2-.1 .5-.3 .8-.4z"/>
-      <path d="m9.8,5.6l.7-1.4-.9-.4-.7,1.3c.3,.2 .6,.3 .9,.5z"/>
-      <path d="m10.8,7c.1,.3 .2,.7 .2,1h2v-1h-2.2z"/>
-      <path d="m5,8c0-.3 .1-.7 .2-1h-2.2l-.1,1h2.1z"/>
-    </g>
-  </g>
-</svg>

devtools/client/themes/images/pseudo-class.svg

@@ -1,29 +1,20 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="16" height="16" viewBox="0 0 16 16" color="#babec3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
-    <style>
-      use[id^="pseudo-class"]:not(:target) {
-        display: none;
-      }
-    </style>
     <rect id="class-block-maskBG" width="8" height="8" fill="#fff"/>
     <rect id="class-block" width="8" height="8" rx="1" ry="1"/>
     <mask id="mask-block-solid">
       <use xlink:href="#class-block-maskBG"/>
       <use xlink:href="#class-block" transform="translate(3 3)" fill="#000"/>
     </mask>
-    <g id="pseudo-class-shape">
-      <rect x=".5" y=".5" width="7" height="7" rx="1" ry="1" mask="url(#mask-block-solid)" fill="none" stroke="currentColor" stroke-width="1"/>
-      <use xlink:href="#class-block" mask="url(#mask-block-solid)" fill="currentColor" fill-opacity=".4"/>
-      <use xlink:href="#class-block" mask="url(#mask-block-solid)" fill="currentColor" transform="translate(4 4)"/>
-      <g transform="translate(8 8)" fill="currentColor">
-        <path d="M2.5,0C2.2,0,2,0.2,2,0.5C2,0.8,2.2,1,2.5,1C2.8,1,3,0.8,3,0.5 C3,0.2,2.8,0,2.5,0z M4.5,0C4.2,0,4,0.2,4,0.5C4,0.8,4.2,1,4.5,1C4.8,1,5,0.8,5,0.5C5,0.2,4.8,0,4.5,0z M0.5,6C0.8,6,1,5.8,1,5.5 C1,5.2,0.8,5,0.5,5C0.2,5,0,5.2,0,5.5C0,5.8,0.2,6,0.5,6z M0.5,4C0.8,4,1,3.8,1,3.5C1,3.2,0.8,3,0.5,3C0.2,3,0,3.2,0,3.5 C0,3.8,0.2,4,0.5,4z M7.5,2C7.2,2,7,2.2,7,2.5C7,2.8,7.2,3,7.5,3C7.8,3,8,2.8,8,2.5C8,2.2,7.8,2,7.5,2z M7.5,4C7.2,4,7,4.2,7,4.5 C7,4.8,7.2,5,7.5,5C7.8,5,8,4.8,8,4.5C8,4.2,7.8,4,7.5,4z M5.5,7C5.2,7,5,7.2,5,7.5C5,7.8,5.2,8,5.5,8C5.8,8,6,7.8,6,7.5 C6,7.2,5.8,7,5.5,7z M3.5,7C3.2,7,3,7.2,3,7.5C3,7.8,3.2,8,3.5,8C3.8,8,4,7.8,4,7.5C4,7.2,3.8,7,3.5,7z M0.5,2C0.8,2,1,1.8,1,1.5v-1 C1,0.2,0.8,0,0.5,0C0.2,0,0,0.2,0,0.5v1C0,1.8,0.2,2,0.5,2z M8,0.5C8,0.2,7.8,0,7.5,0h-1C6.2,0,6,0.2,6,0.5C6,0.8,6.2,1,6.5,1h1 C7.8,1,8,0.8,8,0.5z M7.5,6C7.2,6,7,6.2,7,6.5v1C7,7.8,7.2,8,7.5,8C7.8,8,8,7.8,8,7.5v-1C8,6.2,7.8,6,7.5,6z M1.5,7h-1 C0.2,7,0,7.2,0,7.5C0,7.8,0.2,8,0.5,8h1C1.8,8,2,7.8,2,7.5C2,7.2,1.8,7,1.5,7z"/>
-        <use xlink:href="#class-block" fill-opacity=".2"/>
-      </g>
-    </g>
   </defs>
-  <use xlink:href="#pseudo-class-shape" id="pseudo-class" color="#babec3"/>
-  <use xlink:href="#pseudo-class-shape" id="pseudo-class-checked" color="#3089C9"/>
+  <rect x=".5" y=".5" width="7" height="7" rx="1" ry="1" mask="url(#mask-block-solid)" fill="none" stroke="currentColor" stroke-width="1"/>
+  <use xlink:href="#class-block" mask="url(#mask-block-solid)" fill="currentColor" fill-opacity=".4"/>
+  <use xlink:href="#class-block" mask="url(#mask-block-solid)" fill="currentColor" transform="translate(4 4)"/>
+  <g transform="translate(8 8)" fill="currentColor">
+    <path d="M2.5,0C2.2,0,2,0.2,2,0.5C2,0.8,2.2,1,2.5,1C2.8,1,3,0.8,3,0.5 C3,0.2,2.8,0,2.5,0z M4.5,0C4.2,0,4,0.2,4,0.5C4,0.8,4.2,1,4.5,1C4.8,1,5,0.8,5,0.5C5,0.2,4.8,0,4.5,0z M0.5,6C0.8,6,1,5.8,1,5.5 C1,5.2,0.8,5,0.5,5C0.2,5,0,5.2,0,5.5C0,5.8,0.2,6,0.5,6z M0.5,4C0.8,4,1,3.8,1,3.5C1,3.2,0.8,3,0.5,3C0.2,3,0,3.2,0,3.5 C0,3.8,0.2,4,0.5,4z M7.5,2C7.2,2,7,2.2,7,2.5C7,2.8,7.2,3,7.5,3C7.8,3,8,2.8,8,2.5C8,2.2,7.8,2,7.5,2z M7.5,4C7.2,4,7,4.2,7,4.5 C7,4.8,7.2,5,7.5,5C7.8,5,8,4.8,8,4.5C8,4.2,7.8,4,7.5,4z M5.5,7C5.2,7,5,7.2,5,7.5C5,7.8,5.2,8,5.5,8C5.8,8,6,7.8,6,7.5 C6,7.2,5.8,7,5.5,7z M3.5,7C3.2,7,3,7.2,3,7.5C3,7.8,3.2,8,3.5,8C3.8,8,4,7.8,4,7.5C4,7.2,3.8,7,3.5,7z M0.5,2C0.8,2,1,1.8,1,1.5v-1 C1,0.2,0.8,0,0.5,0C0.2,0,0,0.2,0,0.5v1C0,1.8,0.2,2,0.5,2z M8,0.5C8,0.2,7.8,0,7.5,0h-1C6.2,0,6,0.2,6,0.5C6,0.8,6.2,1,6.5,1h1 C7.8,1,8,0.8,8,0.5z M7.5,6C7.2,6,7,6.2,7,6.5v1C7,7.8,7.2,8,7.5,8C7.8,8,8,7.8,8,7.5v-1C8,6.2,7.8,6,7.5,6z M1.5,7h-1 C0.2,7,0,7.2,0,7.5C0,7.8,0.2,8,0.5,8h1C1.8,8,2,7.8,2,7.5C2,7.2,1.8,7,1.5,7z"/>
+    <use xlink:href="#class-block" fill-opacity=".2"/>
+  </g>
 </svg>

devtools/client/themes/images/timeline-filter.svg

@@ -1,26 +1,6 @@
-<?xml version="1.0"?>
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
-  <style>
-    use:not(:target) {
-      display: none;
-    }
-    use {
-      fill: #babec3;
-    }
-    use[id$="-disabled"] {
-      fill-opacity: 0.5;
-    }
-    use[id$="-open"] {
-      fill: #3bace5;
-    }
-  </style>
-  <defs>
-    <path id="filter-shape" d="M 2,2 v 3 l 5,4 v 6 h 2 v -6 l 5,-4 v -3 L 14,2 z"/>
-  </defs>
-  <use id="filter" xlink:href="#filter-shape"/>
-  <use id="filter-disabled" xlink:href="#filter-shape"/>
-  <use id="filter-open" xlink:href="#filter-shape"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="#babec3" d="M2,2v3l5,4v6h2v-6l5,-4v-3L14,2z"/>
 </svg>

devtools/client/themes/inspector.css

@@ -44,39 +44,21 @@
 /* Expand/collapse panel toolbar button */
 
 #inspector-pane-toggle {
-  background: none;
-  box-shadow: none;
-  border: none;
   list-style-image: url(images/debugger-collapse.png);
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#inspector-pane-toggle > .toolbarbutton-icon {
-  width: 16px;
-  height: 16px;
 }
 
 #inspector-pane-toggle[pane-collapsed] {
   list-style-image: url(images/debugger-expand.png);
 }
 
-#inspector-pane-toggle:active {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
 @media (min-resolution: 1.1dppx) {
   #inspector-pane-toggle {
     list-style-image: url(images/debugger-collapse@2x.png);
-    -moz-image-region: rect(0px,32px,32px,0px);
   }
 
   #inspector-pane-toggle[pane-collapsed] {
     list-style-image: url(images/debugger-expand@2x.png);
   }
-
-  #inspector-pane-toggle:active {
-    -moz-image-region: rect(0px,64px,32px,32px);
-  }
 }
 
 /* Tooltip: Events */

devtools/client/themes/memory.css

@@ -114,18 +114,6 @@ html, body, #app, #memory-tool {
   margin: 2px;
 }
 
-/**
- * TODO bug 1213100
- * Once we figure out how to store invertable buttons (pseudo element like in
- * this case?) we should add a .invertable class to handle this generally,
- * rather than the definitions in toolbars.css.
- *
- * @see bug 1173397 for another inverted related bug
- */
-.theme-light .devtools-toolbar > .devtools-toolbarbutton.take-snapshot::before {
-  filter: url(images/filters.svg#invert);
-}
-
 /**
  * Container (sidebar + main panel)
  */

devtools/client/themes/netmonitor.css

@@ -204,7 +204,7 @@ box.requests-menu-status:not([code]) {
 
 box.requests-menu-status[code="cached"] {
   border: 2px solid var(--theme-content-color2);
-  background-color: transparent;  
+  background-color: transparent;
 }
 
 box.requests-menu-status[code^="1"] {
@@ -399,39 +399,21 @@ box.requests-menu-status[code^="5"] {
 /* Network request details */
 
 #details-pane-toggle {
-  background: none;
-  box-shadow: none;
-  border-color: transparent;
   list-style-image: url("chrome://devtools/skin/images/debugger-collapse.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#details-pane-toggle > .toolbarbutton-icon {
-  width: 16px;
-  height: 16px;
 }
 
 #details-pane-toggle[pane-collapsed] {
   list-style-image: url("chrome://devtools/skin/images/debugger-expand.png");
 }
 
-#details-pane-toggle:active {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
 @media (min-resolution: 1.1dppx) {
   #details-pane-toggle {
     list-style-image: url("chrome://devtools/skin/images/debugger-collapse@2x.png");
-    -moz-image-region: rect(0px,32px,32px,0px);
   }
 
   #details-pane-toggle[pane-collapsed] {
     list-style-image: url("chrome://devtools/skin/images/debugger-expand@2x.png");
   }
-
-  #details-pane-toggle:active {
-    -moz-image-region: rect(0px,64px,32px,32px);
-  }
 }
 
 /* Network request details tabpanels */

devtools/client/themes/performance.css

@@ -42,16 +42,7 @@
 }
 
 #filter-button {
-  list-style-image: url(images/timeline-filter.svg#filter);
-  min-width: 24px;
-}
-
-#filter-button[disabled] {
-  list-style-image: url(images/timeline-filter.svg#filter-disabled);
-}
-
-#filter-button[open] {
-  list-style-image: url(images/timeline-filter.svg#filter-open);
+  list-style-image: url(images/timeline-filter.svg);
 }
 
 #performance-filter-menupopup > menuitem:before {
@@ -89,10 +80,6 @@
   list-style-image: url(images/profiler-stopwatch.svg);
 }
 
-#main-record-button[checked] {
-  list-style-image: url(images/profiler-stopwatch-checked.svg);
-}
-
 #main-record-button .button-icon {
   margin: 0;
 }

devtools/client/themes/ruleview.css

@@ -284,12 +284,12 @@
 }
 
 .ruleview-selectorhighlighter:hover {
-  background-position: -32px 0;
+  filter: url(images/filters.svg#checked-icon-state);
 }
 
 .ruleview-selectorhighlighter:active,
 .ruleview-selectorhighlighter.highlighted {
-  background-position: -16px 0;
+  filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
 }
 
 #ruleview-add-rule-button::before {
@@ -298,34 +298,13 @@
 }
 
 #pseudo-class-panel-toggle::before {
-  background-image: url("chrome://devtools/skin/images/pseudo-class.svg#pseudo-class");
+  background-image: url("chrome://devtools/skin/images/pseudo-class.svg");
   background-size: cover;
 }
-#pseudo-class-panel-toggle[checked]::before {
-  background-image: url("chrome://devtools/skin/images/pseudo-class.svg#pseudo-class-checked");
-  filter: none !important;
-}
 
-/**
- * These buttons are using opacity instead of background color to indicate
- * the state
- */
-#ruleview-add-rule-button,
-#pseudo-class-panel-toggle,
 .ruleview-overridden-rule-filter {
   opacity: 0.8;
 }
-
-#ruleview-add-rule-button:not([disabled]):hover,
-#pseudo-class-panel-toggle:hover,
-#pseudo-class-panel-toggle[checked],
 .ruleview-overridden-rule-filter:hover {
   opacity: 1;
 }
-
-#ruleview-add-rule-button,
-#pseudo-class-panel-toggle,
-#pseudo-class-panel-toggle:hover,
-#pseudo-class-panel-toggle[checked]::before {
-  background-color: transparent !important;
-}

devtools/client/themes/shadereditor.css

@@ -72,7 +72,7 @@
 
 /* Invert all toggle icons but the one in the active row for light theme */
 .theme-light .side-menu-widget-item:not(.selected) .checkbox-check {
-  filter: url(images/filters.svg#invert);
+  filter: invert(1);
 }
 
 /* Shader source editors */

devtools/client/themes/styleeditor.css

@@ -120,7 +120,7 @@
 
 /* Invert all toggle icons but the one in the active row for light theme */
 .theme-light .splitview-nav > li:not(.splitview-active) .stylesheet-enabled {
-  filter: url(images/filters.svg#invert);
+  filter: invert(1);
 }
 
 .splitview-nav > li > .stylesheet-enabled:focus,

devtools/client/themes/toolbars.css

@@ -54,22 +54,26 @@
 }
 
 /* Toolbar buttons */
+
 .devtools-menulist,
-.devtools-toolbarbutton {
+.devtools-toolbarbutton,
+.devtools-button {
   -moz-appearance: none;
-  -moz-box-align: center;
   background: transparent;
-  min-width: 78px;
   min-height: 18px;
-  padding: 1px;
   text-shadow: none;
   border: none;
   border-radius: 0;
-  margin: 2px 3px;
-  color: inherit;
+  color: var(--theme-body-color);
   transition: background 0.05s ease-in-out;
-  color: var(--theme-content-color1);
-  background-color: var(--theme-toolbar-background);
+}
+
+.devtools-menulist,
+.devtools-toolbarbutton {
+  -moz-box-align: center;
+  min-width: 78px;
+  padding: 1px;
+  margin: 2px 3px;
 }
 
 .devtools-menulist:-moz-focusring,
@@ -78,15 +82,66 @@
   outline-offset: -4px;
 }
 
-.devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] {
-  -moz-margin-end: 5px;
+.devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
+.devtools-button::before {
+  width: 16px;
+  height: 16px;
+  transition: opacity 0.05s ease-in-out;
+}
+
+/* HTML buttons */
+.devtools-button {
+  margin: 0;
+  padding: 0;
+  min-width: 32px;
+  /* The icon is absolutely positioned in the button using ::before */
+  position: relative;
+}
+
+.devtools-button::before {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -8px 0 0 -8px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  transition: opacity 0.05s ease-in-out;
+}
+
+/* Standalone buttons */
+.devtools-button[standalone],
+.devtools-button[data-standalone],
+.devtools-toolbarbutton[standalone],
+.devtools-toolbarbutton[data-standalone] {
   border-width: 1px;
   border-style: solid;
+  min-height: 32px;
+  background-color: var(--theme-toolbar-background);
 }
+
+.devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] {
+  -moz-margin-end: 5px;
+}
+
 .devtools-toolbarbutton[label][standalone] {
   min-height: 2em;
 }
 
+.theme-dark .devtools-menulist,
+.theme-dark .devtools-toolbarbutton,
+.theme-dark .devtools-button {
+  border-color: rgba(0, 0, 0, .4); /* Splitters */
+}
+
+.theme-light .devtools-menulist,
+.theme-light .devtools-toolbarbutton,
+.theme-light .devtools-button {
+  border-color: rgba(170, 170, 170, .5); /* Splitters */
+}
+
+/* Icon button styles */
 .devtools-toolbarbutton:not([label]),
 .devtools-toolbarbutton[text-as-image] {
   min-width: 32px;
@@ -98,11 +153,6 @@
   min-width: inherit;
 }
 
-/* Command buttons with menupopups should be styled slightly differently -
-   no background color and a bit more narrow */
-#toolbox-buttons .devtools-toolbarbutton:not([text-as-image]):not(:hover):not([open=true]) {
-  background: transparent;
-}
 #toolbox-buttons .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker {
   padding: 0 2px;
 }
@@ -111,14 +161,11 @@
   display: none;
 }
 
-.devtools-toolbar .devtools-toolbarbutton {
-  border-width: 0;
-}
-
 .devtools-toolbarbutton > .toolbarbutton-icon {
   margin: 0;
 }
 
+/* Menu button styles (eg. web console filters) */
 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
   -moz-appearance: none;
   color: inherit;
@@ -152,13 +199,32 @@
   padding: 0 3px;
 }
 
-.theme-dark .devtools-menulist,
-.theme-dark .devtools-toolbarbutton {
-  border-color: rgba(0, 0, 0, .4); /* Splitters */
+/* Icon-only buttons */
+.devtools-button:empty::before,
+.devtools-toolbarbutton:not([label]):not([disabled]) > image {
+  opacity: 0.8;
 }
-.theme-light .devtools-menulist,
-.theme-light .devtools-toolbarbutton {
-  border-color: rgba(170, 170, 170, .5); /* Splitters */
+
+.devtools-button:hover:empty::before,
+.devtools-button[checked]:empty::before,
+.devtools-button[open]:empty::before,
+.devtools-toolbarbutton:not([label]):hover > image,
+.devtools-toolbarbutton:not([label])[checked=true] > image,
+.devtools-toolbarbutton:not([label])[open=true] > image {
+  opacity: 1;
+}
+
+.devtools-button:disabled,
+.devtools-button[disabled],
+.devtools-toolbarbutton[disabled] {
+  opacity: 0.5 !important;
+}
+
+.devtools-button[checked]:empty::before,
+.devtools-button[open]:empty::before,
+.devtools-toolbarbutton:not([label])[checked=true] > image,
+.devtools-toolbarbutton:not([label])[open=true] > image {
+  filter: url(images/filters.svg#checked-icon-state);
 }
 
 /* Text-only buttons */
@@ -173,68 +239,45 @@
   background-color: rgba(0, 0, 0, .2); /* Splitter */
 }
 
-/* Button States */
-.theme-dark .devtools-toolbarbutton:not([disabled]):hover,
+/* Text-only button states */
+.theme-dark .devtools-button:not(:empty):not([disabled]):hover,
 .theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover,
-.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover {
+.theme-dark .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover {
   background: rgba(0, 0, 0, .3); /* Splitters */
 }
-.theme-light .devtools-toolbarbutton:not([disabled]):hover,
+.theme-light .devtools-button:not(:empty):not([disabled]):hover,
 .theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover,
-.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover {
+.theme-light .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover {
   background: rgba(170, 170, 170, .3); /* Splitters */
 }
 
-.theme-dark .devtools-toolbarbutton:not([disabled]):hover:active,
+.theme-dark .devtools-button:not(:empty):not([disabled]):hover:active,
 .theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active,
-.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active {
+.theme-dark .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover:active {
   background: rgba(0, 0, 0, .4); /* Splitters */
 }
-.theme-light .devtools-toolbarbutton:not([disabled]):hover:active,
+.theme-light .devtools-button:not(:empty):not([disabled]):hover:active,
 .theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active,
-.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active {
+.theme-light .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover:active {
   background: rgba(170, 170, 170, .4); /* Splitters */
 }
 
-/* Menu type buttons and checked states */
-.theme-dark .devtools-toolbarbutton[checked=true],
-.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
+.theme-dark .devtools-toolbarbutton:not([disabled])[label][checked=true],
+.theme-dark .devtools-toolbarbutton:not([disabled])[label][open],
+.theme-dark .devtools-button:not(:empty)[checked=true],
+.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked=true] {
   background: rgba(29, 79, 115, .7); /* Select highlight blue */
   color: var(--theme-selection-color);
 }
-
-.theme-light .devtools-toolbarbutton[checked=true],
-.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
-  background: rgba(76, 158, 217, .2); /* Select highlight blue */
-}
-
-.theme-dark .devtools-menulist[open=true],
-.theme-dark .devtools-toolbarbutton[open=true],
-.theme-dark .devtools-toolbarbutton[open=true]:hover,
-.theme-dark .devtools-toolbarbutton[open=true]:hover:active,
-.theme-dark .devtools-toolbarbutton[checked=true]:hover {
-  background: rgba(29, 79, 115, .8); /* Select highlight blue */
-  color: var(--theme-selection-color);
-}
-
-.theme-light .devtools-menulist[open=true],
-.theme-light .devtools-toolbarbutton[open=true],
-.theme-light .devtools-toolbarbutton[open=true]:hover,
-.theme-light .devtools-toolbarbutton[open=true]:hover:active,
-.theme-light .devtools-toolbarbutton[checked=true]:hover {
-  background: rgba(76, 158, 217, .4); /* Select highlight blue */
+.theme-light .devtools-toolbarbutton:not([disabled])[label][checked=true],
+.theme-light .devtools-toolbarbutton:not([disabled])[label][open],
+.theme-light .devtools-button:not(:empty)[checked=true],
+.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked=true] {
+  background: rgba(76, 158, 217, .3); /* Select highlight blue */
 }
 
 .devtools-option-toolbarbutton {
-  -moz-appearance: none;
   list-style-image: url("chrome://devtools/skin/images/tool-options.svg");
-  background: none;
-  opacity: .8;
-  border: none;
-}
-
-.devtools-option-toolbarbutton[open=true] {
-  opacity: 1;
 }
 
 /* Toolbar button groups */
@@ -257,73 +300,6 @@
   -moz-margin-start: 1px;
 }
 
-/* HTML buttons, similar to toolbar buttons, but work in HTML documents */
-
-.devtools-button {
-  border: 0 solid var(--theme-splitter-color);
-  background: var(--theme-toolbar-background);
-  color: var(--theme-body-color);
-  margin: 0;
-  padding: 0;
-  min-width: 32px;
-  min-height: 18px;
-  /* The icon is absolutely positioned in the button using ::before */
-  position: relative;
-}
-
-.devtools-button[standalone], .devtools-button[data-standalone] {
-  min-height: 32px;
-  border-width: 1px;
-}
-
-/* Button States */
-.theme-dark .devtools-button:not([disabled]):hover {
-  background: rgba(0, 0, 0, .3); /* Splitters */
-}
-.theme-light .devtools-button:not([disabled]):hover {
-  background: rgba(170, 170, 170, .3); /* Splitters */
-}
-
-.theme-dark .devtools-button:not([disabled]):hover:active {
-  background: rgba(0, 0, 0, .4); /* Splitters */
-}
-.theme-light .devtools-button:not([disabled]):hover:active {
-  background: rgba(170, 170, 170, .4); /* Splitters */
-}
-
-/* Menu type buttons and checked states */
-.theme-dark .devtools-button[checked] {
-  background: rgba(29, 79, 115, .7) !important; /* Select highlight blue */
-  color: var(--theme-selection-color);
-}
-
-.theme-light .devtools-button[checked] {
-  background: rgba(76, 158, 217, .2) !important; /* Select highlight blue */
-}
-
-.devtools-button::before {
-  content: "";
-  display: block;
-  width: 16px;
-  height: 16px;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin: -8px 0 0 -8px;
-  background-repeat: no-repeat;
-}
-
-.devtools-button[disabled]::before,
-.devtools-button:disabled::before {
-  opacity: 0.5;
-}
-
-@media (min-resolution: 1.1dppx) {
-  .devtools-button::before {
-    background-size: 32px;
-  }
-}
-
 /* Text input */
 
 .devtools-textinput,
@@ -1000,27 +976,23 @@
 .theme-light .command-button-invertable:active > image,
 .theme-light .devtools-closebutton > image,
 .theme-light .devtools-toolbarbutton > image,
-.theme-light .devtools-option-toolbarbutton > image,
+.theme-light .devtools-button::before,
 .theme-light #breadcrumb-separator-normal,
 .theme-light .scrollbutton-up > .toolbarbutton-icon,
 .theme-light .scrollbutton-down > .toolbarbutton-icon,
 .theme-light #black-boxed-message-button .button-icon,
-.theme-light .notice-container button .button-icon,
 .theme-light #requests-menu-perf-notice-button .button-icon,
 .theme-light #requests-menu-network-summary-button .button-icon,
-.theme-light .event-tooltip-debugger-icon,
-.theme-light .devtools-button::before {
-  filter: url(images/filters.svg#invert);
+.theme-light #toggle-breakpoints[checked] > image,
+.theme-light .event-tooltip-debugger-icon {
+  filter: invert(1);
 }
 
 /* Since selected backgrounds are blue, we want to use the normal
  * (light) icons. */
 .theme-light .command-button-invertable[checked=true]:not(:active) > image,
 .theme-light .devtools-tab[icon-invertable][selected] > image,
-.theme-light .devtools-tab[icon-invertable][highlighted] > image,
-.theme-light #record-snapshot[checked] > image,
-.theme-light #profiler-start[checked] > image,
-.theme-light .notice-container button[checked] .button-icon {
+.theme-light .devtools-tab[icon-invertable][highlighted] > image {
   filter: none !important;
 }
 

devtools/client/themes/webaudioeditor.css

@@ -208,21 +208,6 @@ text {
   list-style-image: url(images/power.svg);
 }
 
-#audio-node-toolbar toolbarbutton[disabled] {
-  opacity: 0.5;
-  background-color: transparent;
-}
-
-#audio-node-toolbar toolbarbutton[checked] {
-  background-color: var(--theme-selection-background);
-}
-
-/* don't invert checked buttons so we can have white icons on light theme */
-#audio-node-toolbar toolbarbutton[checked] > .toolbarbutton-icon {
-  filter: none;
-}
-
-
 /**
  * Responsive Styles
  * `.devtools-responsive-container` takes care of most of

devtools/client/themes/webconsole.css

@@ -527,11 +527,12 @@ a {
 
 .elementNode:hover .open-inspector,
 .open-inspector:hover {
-  background-position: -32px 0;
+  filter: url(images/filters.svg#checked-icon-state);
 }
 
+.elementNode:hover .open-inspector:active,
 .open-inspector:active {
-  background-position: -16px 0;
+  filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
 }
 
 @media (max-width: 500px) {

devtools/client/themes/widgets.css

@@ -739,12 +739,35 @@
 }
 
 /* Variables and properties editing */
-
-.variables-view-delete {
-  background: url("chrome://devtools/skin/images/vview-delete.png");
-  background-size: cover;
+.variables-view-delete,
+.variables-view-edit,
+.variables-view-open-inspector {
   width: 16px;
   height: 16px;
+  background-size: cover;
+  cursor: pointer;
+}
+
+.variables-view-delete:hover,
+.variables-view-edit:hover,
+.variables-view-open-inspector:hover {
+  filter: url(images/filters.svg#checked-icon-state);
+}
+
+.variables-view-delete:active,
+.variables-view-edit:active,
+.variables-view-open-inspector:active {
+  filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
+}
+
+.variable-or-property:focus > .title > .variables-view-delete,
+.variable-or-property:focus > .title > .variables-view-edit,
+.variable-or-property:focus > .title > .variables-view-open-inspector {
+  filter: none;
+}
+
+.variables-view-delete {
+  background-image: url("chrome://devtools/skin/images/vview-delete.png");
 }
 
 @media (min-resolution: 1.1dppx) {
@@ -753,24 +776,8 @@
   }
 }
 
-.variables-view-delete:hover {
-  background-position: 16px;
-}
-
-.variables-view-delete:active {
-  background-position: 32px;
-}
-
-.variable-or-property:focus > .title > .variables-view-delete {
-  background-position: 0px;
-}
-
 .variables-view-edit {
-  background: url("chrome://devtools/skin/images/vview-edit.png");
-  background-size: cover;
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
+  background-image: url("chrome://devtools/skin/images/vview-edit.png");
 }
 
 @media (min-resolution: 1.1dppx) {
@@ -779,24 +786,8 @@
   }
 }
 
-.variables-view-edit:hover {
-  background-position: 16px;
-}
-
-.variables-view-edit:active {
-  background-position: 32px;
-}
-
-.variable-or-property:focus > .title > .variables-view-edit {
-  background-position: 0px;
-}
-
 .variables-view-open-inspector {
-  background: url("chrome://devtools/skin/images/vview-open-inspector.png");
-  background-size: cover;
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
+  background-image: url("chrome://devtools/skin/images/vview-open-inspector.png");
 }
 
 @media (min-resolution: 1.1dppx) {
@@ -805,17 +796,6 @@
   }
 }
 
-.variables-view-open-inspector:hover {
-  background-position: 16px;
-}
-
-.variables-view-open-inspector:active {
-  background-position: 32px;
-}
-
-.variable-or-property:focus > .title > .variables-view-open-inspector {
-  background-position: 0px;
-}
 
 /* Variables and properties input boxes */
 

dom/bluetooth/bluedroid/BluetoothPbapManager.cpp

@@ -866,6 +866,7 @@ BluetoothPbapManager::ReplyToAuthChallenge(const nsAString& aPassword)
   // Cancel authentication
   if (aPassword.IsEmpty()) {
     ReplyError(ObexResponseCode::Unauthorized);
+    return;
   }
 
   ReplyToConnect(aPassword);

dom/telephony/test/marionette/manifest.ini

@@ -25,7 +25,9 @@ qemu = true
 [test_emergency.js]
 [test_emergency_label.js]
 [test_gsm_cdma_incoming_basic_operations.js]
+disabled = Bug 1214537
 [test_gsm_cdma_outgoing_basic_operations.js]
+disabled = Bug 1214537
 [test_incall_mmi_call_hold.js]
 [test_incall_mmi_call_waiting.js]
 [test_incall_mmi_conference.js]

mobile/android/base/toolbar/BrowserToolbar.java

@@ -28,8 +28,10 @@ import org.mozilla.gecko.tabs.TabHistoryController;
 import org.mozilla.gecko.toolbar.ToolbarDisplayLayout.OnStopListener;
 import org.mozilla.gecko.toolbar.ToolbarDisplayLayout.OnTitleChangeListener;
 import org.mozilla.gecko.toolbar.ToolbarDisplayLayout.UpdateFlags;
+import org.mozilla.gecko.util.Clipboard;
 import org.mozilla.gecko.util.ColorUtils;
 import org.mozilla.gecko.util.HardwareUtils;
+import org.mozilla.gecko.util.MenuUtils;
 import org.mozilla.gecko.widget.themed.ThemedFrameLayout;
 import org.mozilla.gecko.widget.themed.ThemedImageButton;
 import org.mozilla.gecko.widget.themed.ThemedImageView;
@@ -44,7 +46,9 @@ import android.graphics.drawable.StateListDrawable;
 import android.text.TextUtils;
 import android.util.AttributeSet;
 import android.util.Log;
+import android.view.ContextMenu;
 import android.view.LayoutInflater;
+import android.view.MenuInflater;
 import android.view.MotionEvent;
 import android.view.View;
 import android.view.ViewTreeObserver.OnGlobalLayoutListener;
@@ -119,6 +123,7 @@ public abstract class BrowserToolbar extends ThemedRelativeLayout
     private MenuPopup menuPopup;
     protected final List<View> focusOrder;
 
+    private OnActivateListener activateListener;
     private OnFocusChangeListener focusChangeListener;
     private OnStartEditingListener startEditingListener;
     private OnStopEditingListener stopEditingListener;
@@ -208,6 +213,49 @@ public abstract class BrowserToolbar extends ThemedRelativeLayout
         prefs = new ToolbarPrefs();
         urlDisplayLayout.setToolbarPrefs(prefs);
         urlEditLayout.setToolbarPrefs(prefs);
+
+        setOnCreateContextMenuListener(new View.OnCreateContextMenuListener() {
+            @Override
+            public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
+                // NOTE: Use MenuUtils.safeSetVisible because some actions might
+                // be on the Page menu
+                MenuInflater inflater = activity.getMenuInflater();
+                inflater.inflate(R.menu.titlebar_contextmenu, menu);
+
+                String clipboard = Clipboard.getText();
+                if (TextUtils.isEmpty(clipboard)) {
+                    menu.findItem(R.id.pasteandgo).setVisible(false);
+                    menu.findItem(R.id.paste).setVisible(false);
+                }
+
+                Tab tab = Tabs.getInstance().getSelectedTab();
+                if (tab != null) {
+                    String url = tab.getURL();
+                    if (url == null) {
+                        menu.findItem(R.id.copyurl).setVisible(false);
+                        menu.findItem(R.id.add_to_launcher).setVisible(false);
+                    }
+
+                    MenuUtils.safeSetVisible(menu, R.id.subscribe, tab.hasFeeds());
+                    MenuUtils.safeSetVisible(menu, R.id.add_search_engine, tab.hasOpenSearch());
+                } else {
+                    // if there is no tab, remove anything tab dependent
+                    menu.findItem(R.id.copyurl).setVisible(false);
+                    menu.findItem(R.id.add_to_launcher).setVisible(false);
+                    MenuUtils.safeSetVisible(menu, R.id.subscribe, false);
+                    MenuUtils.safeSetVisible(menu, R.id.add_search_engine, false);
+                }
+            }
+        });
+
+        setOnClickListener(new OnClickListener() {
+            @Override
+            public void onClick(View v) {
+                if (activateListener != null) {
+                    activateListener.onActivate();
+                }
+            }
+        });
     }
 
     @Override
@@ -325,17 +373,6 @@ public abstract class BrowserToolbar extends ThemedRelativeLayout
         return urlDisplayLayout.dismissSiteIdentityPopup();
     }
 
-    @Override
-    public boolean onTouchEvent(MotionEvent event) {
-        // If the motion event has occurred below the toolbar (due to the scroll
-        // offset), let it pass through to the page.
-        if (event != null && event.getY() > getHeight() + ViewHelper.getTranslationY(this)) {
-            return false;
-        }
-
-        return super.onTouchEvent(event);
-    }
-
     @Override
     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
         super.onSizeChanged(w, h, oldw, oldh);
@@ -635,8 +672,8 @@ public abstract class BrowserToolbar extends ThemedRelativeLayout
         urlDisplayLayout.setTitle(title);
     }
 
-    public void setOnActivateListener(OnActivateListener listener) {
-        urlDisplayLayout.setOnActivateListener(listener);
+    public void setOnActivateListener(final OnActivateListener listener) {
+        activateListener = listener;
     }
 
     public void setOnCommitListener(OnCommitListener listener) {

mobile/android/base/toolbar/ToolbarDisplayLayout.java

@@ -15,19 +15,16 @@ import org.mozilla.gecko.BrowserApp;
 import org.mozilla.gecko.R;
 import org.mozilla.gecko.ReaderModeUtils;
 import org.mozilla.gecko.SiteIdentity;
-import org.mozilla.gecko.SiteIdentity.SecurityMode;
 import org.mozilla.gecko.SiteIdentity.MixedMode;
+import org.mozilla.gecko.SiteIdentity.SecurityMode;
 import org.mozilla.gecko.SiteIdentity.TrackingMode;
 import org.mozilla.gecko.Tab;
-import org.mozilla.gecko.Tabs;
 import org.mozilla.gecko.animation.PropertyAnimator;
 import org.mozilla.gecko.animation.ViewHelper;
 import org.mozilla.gecko.favicons.Favicons;
 import org.mozilla.gecko.toolbar.BrowserToolbarTabletBase.ForwardButtonAnimation;
-import org.mozilla.gecko.util.Clipboard;
 import org.mozilla.gecko.util.ColorUtils;
 import org.mozilla.gecko.util.HardwareUtils;
-import org.mozilla.gecko.util.MenuUtils;
 import org.mozilla.gecko.util.StringUtils;
 import org.mozilla.gecko.widget.themed.ThemedLinearLayout;
 import org.mozilla.gecko.widget.themed.ThemedTextView;
@@ -42,9 +39,7 @@ import android.text.TextUtils;
 import android.text.style.ForegroundColorSpan;
 import android.util.AttributeSet;
 import android.util.Log;
-import android.view.ContextMenu;
 import android.view.LayoutInflater;
-import android.view.MenuInflater;
 import android.view.View;
 import android.view.animation.AlphaAnimation;
 import android.view.animation.Animation;
@@ -146,8 +141,6 @@ public class ToolbarDisplayLayout extends ThemedLinearLayout
     private final ForegroundColorSpan mDomainColor;
     private final ForegroundColorSpan mPrivateDomainColor;
 
-    private BrowserToolbar.OnActivateListener mActivateListener;
-
     public ToolbarDisplayLayout(Context context, AttributeSet attrs) {
         super(context, attrs);
         setOrientation(HORIZONTAL);
@@ -239,56 +232,6 @@ public class ToolbarDisplayLayout extends ThemedLinearLayout
         mLockFadeIn.setDuration(lockAnimDuration);
         mTitleSlideLeft.setDuration(lockAnimDuration);
         mTitleSlideRight.setDuration(lockAnimDuration);
-
-        // Context menu
-        mTitle.setOnCreateContextMenuListener(new View.OnCreateContextMenuListener() {
-            @Override
-            public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
-                // NOTE: Use MenuUtils.safeSetVisible because some actions might
-                // be on the Page menu
-                MenuInflater inflater = mActivity.getMenuInflater();
-                inflater.inflate(R.menu.titlebar_contextmenu, menu);
-
-                String clipboard = Clipboard.getText();
-                if (TextUtils.isEmpty(clipboard)) {
-                    menu.findItem(R.id.pasteandgo).setVisible(false);
-                    menu.findItem(R.id.paste).setVisible(false);
-                }
-
-                Tab tab = Tabs.getInstance().getSelectedTab();
-                if (tab != null) {
-                    String url = tab.getURL();
-                    if (url == null) {
-                        menu.findItem(R.id.copyurl).setVisible(false);
-                        menu.findItem(R.id.add_to_launcher).setVisible(false);
-                    }
-
-                    MenuUtils.safeSetVisible(menu, R.id.subscribe, tab.hasFeeds());
-                    MenuUtils.safeSetVisible(menu, R.id.add_search_engine, tab.hasOpenSearch());
-                }
-                else {
-                    // if there is no tab, remove anything tab dependent
-                    menu.findItem(R.id.copyurl).setVisible(false);
-                    menu.findItem(R.id.add_to_launcher).setVisible(false);
-                    MenuUtils.safeSetVisible(menu, R.id.subscribe, false);
-                    MenuUtils.safeSetVisible(menu, R.id.add_search_engine, false);
-                }
-            }
-        });
-
-        // Edit activation
-        mTitle.setOnClickListener(new OnClickListener() {
-            @Override
-            public void onClick(View v) {
-                if (mActivateListener != null) {
-                    mActivateListener.onActivate();
-                }
-            }
-        });
-    }
-
-    public void setOnActivateListener(BrowserToolbar.OnActivateListener listener) {
-        mActivateListener = listener;
     }
 
     @Override

testing/marionette/client/marionette/runner/base.py

@@ -807,8 +807,6 @@ setReq.onerror = function() {
         need_external_ip = True
         if not self.marionette:
             self.start_marionette()
-            if self.emulator:
-                self.marionette.emulator.wait_for_homescreen(self.marionette)
             # Retrieve capabilities for later use
             if not self._capabilities:
                 self.capabilities

testing/marionette/client/marionette/tests/unit/test_chrome_element_css.py

@@ -10,10 +10,10 @@ class TestChromeElementCSS(MarionetteTestCase):
     def test_we_can_get_css_value_on_chrome_element(self):
         self.marionette.navigate("about:blank")
         with self.marionette.using_context("chrome"):
-            element = self.marionette.find_element("id", "page-proxy-favicon")
+            element = self.marionette.find_element("id", "identity-icon")
             favicon_image = element.value_of_css_property("list-style-image")
 
-            self.assertIn("identity-not-secure.svg", favicon_image)
+            self.assertIn("identity-icon.svg", favicon_image)
 
             element = self.marionette.find_element("id", "identity-box")
             background_colour = element.value_of_css_property("background-color")

testing/mozbase/mozrunner/mozrunner/devices/emulator.py

@@ -204,23 +204,6 @@ waitFor(
             pass
         print '...done'
 
-    # TODO this function is B2G specific and shouldn't live here
-    @uses_marionette
-    def wait_for_homescreen(self, marionette):
-        print 'waiting for homescreen...'
-
-        marionette.set_context(marionette.CONTEXT_CONTENT)
-        marionette.execute_async_script("""
-log('waiting for mozbrowserloadend');
-window.addEventListener('mozbrowserloadend', function loaded(aEvent) {
-  log('received mozbrowserloadend for ' + aEvent.target.src);
-  if (aEvent.target.src.indexOf('ftu') != -1 || aEvent.target.src.indexOf('homescreen') != -1 || aEvent.target.src.indexOf('verticalhome') != -1) {
-    window.removeEventListener('mozbrowserloadend', loaded);
-    marionetteScriptFinished();
-  }
-});""", script_timeout=300000)
-        print '...done'
-
     def _get_telnet_response(self, command=None):
         output = []
         assert(self.telnet)