Merge mozilla-central to mozilla-inbound

browser/app/profile/firefox.js

@@ -1454,3 +1454,6 @@ pref("signon.schemeUpgrades", true);
 // Enable the "Simplify Page" feature in Print Preview
 pref("print.use_simplify_page", true);
 
+// Space separated list of URLS that are allowed to send objects (instead of
+// only strings) through webchannels.
+pref("webchannel.allowObject.urlWhitelist", "https://accounts.firefox.com https://content.cdn.mozilla.net https://hello.firefox.com https://input.mozilla.org https://support.mozilla.org https://install.mozilla.org");

browser/base/content/test/general/browser_fxa_oauth.html

@@ -8,6 +8,8 @@
 <script>
   window.onload = function(){
     var event = new window.CustomEvent("WebChannelMessageToChrome", {
+      // Note: This intentionally sends an object instead of a string, to ensure both work
+      // (see browser_fxa_oauth_with_keys.html for the other test)
       detail: {
         id: "oauth_client_id",
         message: {

browser/base/content/test/general/browser_fxa_oauth.js

@@ -309,9 +309,17 @@ function test() {
   waitForExplicitFinish();
 
   Task.spawn(function () {
-    for (let test of gTests) {
-      info("Running: " + test.desc);
-      yield test.run();
+    const webchannelWhitelistPref = "webchannel.allowObject.urlWhitelist";
+    let origWhitelist = Services.prefs.getCharPref(webchannelWhitelistPref);
+    let newWhitelist = origWhitelist + " http://example.com";
+    Services.prefs.setCharPref(webchannelWhitelistPref, newWhitelist);
+    try {
+      for (let test of gTests) {
+        info("Running: " + test.desc);
+        yield test.run();
+      }
+    } finally {
+      Services.prefs.clearUserPref(webchannelWhitelistPref);
     }
   }).then(finish, ex => {
     Assert.ok(false, "Unexpected Exception: " + ex);

browser/base/content/test/general/browser_fxa_oauth_with_keys.html

@@ -8,7 +8,9 @@
 <script>
   window.onload = function(){
     var event = new window.CustomEvent("WebChannelMessageToChrome", {
-      detail: {
+      // Note: This intentionally sends a string instead of an object, to ensure both work
+      // (see browser_fxa_oauth.html for the other test)
+      detail: JSON.stringify({
         id: "oauth_client_id",
         message: {
           command: "oauth_complete",
@@ -21,7 +23,7 @@
             keys: { kAr: { k: 'kAr' }, kBr: { k: 'kBr' }},
           },
         },
-      },
+      }),
     });
 
     window.dispatchEvent(event);

browser/base/content/test/general/browser_fxa_web_channel.html

@@ -32,7 +32,7 @@
 
   function test_profile_change() {
     var event = new window.CustomEvent("WebChannelMessageToChrome", {
-      detail: {
+      detail: JSON.stringify({
         id: webChannelId,
         message: {
           command: "profile:change",
@@ -40,7 +40,7 @@
             uid: "abc123",
           },
         },
-      },
+      }),
     });
 
     window.dispatchEvent(event);
@@ -48,7 +48,7 @@
 
   function test_login() {
     var event = new window.CustomEvent("WebChannelMessageToChrome", {
-      detail: {
+      detail: JSON.stringify({
         id: webChannelId,
         message: {
           command: "fxaccounts:login",
@@ -63,7 +63,7 @@
           },
           messageId: 1,
         },
-      },
+      }),
     });
 
     window.dispatchEvent(event);
@@ -75,17 +75,17 @@
       // fxaccounts_webchannel_response_echo WebChannel. The tests are
       // listening for events and do the appropriate checks.
       var event = new window.CustomEvent("WebChannelMessageToChrome", {
-        detail: {
+        detail: JSON.stringify({
           id: 'fxaccounts_webchannel_response_echo',
           message: e.detail.message,
-        }
+        })
       });
 
       window.dispatchEvent(event);
     }, true);
 
     var event = new window.CustomEvent("WebChannelMessageToChrome", {
-      detail: {
+      detail: JSON.stringify({
         id: webChannelId,
         message: {
           command: "fxaccounts:can_link_account",
@@ -94,7 +94,7 @@
           },
           messageId: 2,
         },
-      },
+      }),
     });
 
     window.dispatchEvent(event);
@@ -102,7 +102,7 @@
 
   function test_logout() {
     var event = new window.CustomEvent("WebChannelMessageToChrome", {
-      detail: {
+      detail: JSON.stringify({
         id: webChannelId,
         message: {
           command: "fxaccounts:logout",
@@ -111,7 +111,7 @@
           },
           messageId: 3,
         },
-      },
+      }),
     });
 
     window.dispatchEvent(event);
@@ -119,7 +119,7 @@
 
   function test_delete() {
     var event = new window.CustomEvent("WebChannelMessageToChrome", {
-      detail: {
+      detail: JSON.stringify({
         id: webChannelId,
         message: {
           command: "fxaccounts:delete",
@@ -128,7 +128,7 @@
           },
           messageId: 4,
         },
-      },
+      }),
     });
 
     window.dispatchEvent(event);

browser/base/content/test/general/browser_remoteTroubleshoot.js

@@ -7,6 +7,7 @@ var {WebChannel} = Cu.import("resource://gre/modules/WebChannel.jsm", {});
 const TEST_URL_TAIL = "example.com/browser/browser/base/content/test/general/test_remoteTroubleshoot.html"
 const TEST_URI_GOOD = Services.io.newURI("https://" + TEST_URL_TAIL, null, null);
 const TEST_URI_BAD = Services.io.newURI("http://" + TEST_URL_TAIL, null, null);
+const TEST_URI_GOOD_OBJECT = Services.io.newURI("https://" + TEST_URL_TAIL + "?object", null, null);
 
 // Creates a one-shot web-channel for the test data to be sent back from the test page.
 function promiseChannelResponse(channelID, originOrPermission) {
@@ -78,4 +79,15 @@ add_task(function*() {
   // Now a http:// URI - should get nothing even with the permission setup.
   got = yield promiseNewChannelResponse(TEST_URI_BAD);
   Assert.ok(got.message === undefined, "should have failed to get any data");
+
+  // Check that the page can send an object as well if it's in the whitelist
+  let webchannelWhitelistPref = "webchannel.allowObject.urlWhitelist";
+  let origWhitelist = Services.prefs.getCharPref(webchannelWhitelistPref);
+  let newWhitelist = origWhitelist + " https://example.com";
+  Services.prefs.setCharPref(webchannelWhitelistPref, newWhitelist);
+  registerCleanupFunction(() => {
+    Services.prefs.clearUserPref(webchannelWhitelistPref);
+  });
+  got = yield promiseNewChannelResponse(TEST_URI_GOOD_OBJECT);
+  Assert.ok(got.message, "should have gotten some data back");
 });

browser/base/content/test/general/browser_web_channel.html

@@ -33,6 +33,9 @@
       case "bubbles":
         test_bubbles();
         break;
+      case "object":
+        test_object();
+        break;
       default:
         throw new Error(`INVALID TEST NAME ${testName}`);
         break;
@@ -41,14 +44,14 @@
 
   function test_generic() {
     var event = new window.CustomEvent("WebChannelMessageToChrome", {
-      detail: {
+      detail: JSON.stringify({
         id: "generic",
         message: {
           something: {
             nested: "hello",
           },
         }
-      }
+      })
     });
 
     window.dispatchEvent(event);
@@ -56,23 +59,23 @@
 
   function test_twoWay() {
     var firstMessage = new window.CustomEvent("WebChannelMessageToChrome", {
-      detail: {
+      detail: JSON.stringify({
         id: "twoway",
         message: {
           command: "one",
         },
-      }
+      })
     });
 
     window.addEventListener("WebChannelMessageToContent", function(e) {
       var secondMessage = new window.CustomEvent("WebChannelMessageToChrome", {
-        detail: {
+        detail: JSON.stringify({
           id: "twoway",
           message: {
             command: "two",
             detail: e.detail.message,
           },
-        },
+        }),
       });
 
       if (!e.detail.message.error) {
@@ -85,17 +88,17 @@
 
   function test_multichannel() {
     var event1 = new window.CustomEvent("WebChannelMessageToChrome", {
-      detail: {
+      detail: JSON.stringify({
         id: "wrongchannel",
         message: {},
-      }
+      })
     });
 
     var event2 = new window.CustomEvent("WebChannelMessageToChrome", {
-      detail: {
+      detail: JSON.stringify({
         id: "multichannel",
         message: {},
-      }
+      })
     });
 
     window.dispatchEvent(event1);
@@ -132,12 +135,12 @@
 
   function test_bubbles() {
     var event = new window.CustomEvent("WebChannelMessageToChrome", {
-      detail: {
+      detail: JSON.stringify({
         id: "not_a_window",
         message: {
           command: "start"
         }
-      }
+      })
     });
 
     var nonWindowTarget = document.getElementById("not_a_window");
@@ -150,12 +153,32 @@
     nonWindowTarget.dispatchEvent(event);
   }
 
+  function test_object() {
+    let objectMessage = new window.CustomEvent("WebChannelMessageToChrome", {
+      detail: {
+        id: "objects",
+        message: { type: "object" }
+      }
+    });
+
+    let stringMessage = new window.CustomEvent("WebChannelMessageToChrome", {
+      detail: JSON.stringify({
+        id: "objects",
+        message: { type: "string" }
+      })
+    });
+    // Test fails if objectMessage is received, we send stringMessage to know
+    // when we should stop listening for objectMessage
+    window.dispatchEvent(objectMessage);
+    window.dispatchEvent(stringMessage);
+  }
+
   function echoEventToChannel(e, channelId) {
     var echoedEvent = new window.CustomEvent("WebChannelMessageToChrome", {
-      detail: {
+      detail: JSON.stringify({
         id: channelId,
         message: e.detail.message,
-      }
+      })
     });
 
     e.target.dispatchEvent(echoedEvent);

browser/base/content/test/general/browser_web_channel.js

@@ -44,8 +44,8 @@ var gTests = [
         let channel = new WebChannel("twoway", Services.io.newURI(HTTP_PATH, null, null));
 
         channel.listen(function (id, message, sender) {
-          is(id, "twoway");
-          ok(message.command);
+          is(id, "twoway", "bad id");
+          ok(message.command, "command not ok");
 
           if (message.command === "one") {
             channel.send({ data: { nested: true } }, sender);
@@ -74,8 +74,8 @@ var gTests = [
         });
 
         iframeChannel.listen(function (id, message, sender) {
-          is(id, "twoway");
-          ok(message.command);
+          is(id, "twoway", "bad id (2)");
+          ok(message.command, "command not ok (2)");
 
           if (message.command === "one") {
             iframeChannel.send({ data: { nested: true } }, sender);
@@ -328,6 +328,75 @@ var gTests = [
       });
     }
   },
+  {
+    desc: "WebChannel disallows non-string message from non-whitelisted origin",
+    run: function* () {
+      /**
+       * This test ensures that non-string messages can't be sent via WebChannels.
+       * We create a page (on a non-whitelisted origin) which should send us two
+       * messages immediately. The first message has an object for it's detail,
+       * and the second has a string. We check that we only get the second
+       * message.
+       */
+      let channel = new WebChannel("objects", Services.io.newURI(HTTP_PATH, null, null));
+      let testDonePromise = new Promise((resolve, reject) => {
+        channel.listen((id, message, sender) => {
+          is(id, "objects");
+          is(message.type, "string");
+          resolve();
+        });
+      });
+      yield BrowserTestUtils.withNewTab({
+        gBrowser,
+        url: HTTP_PATH + HTTP_ENDPOINT + "?object"
+      }, function* () {
+        yield testDonePromise;
+        channel.stopListening();
+      });
+    }
+  },
+  {
+    desc: "WebChannel allows both string and non-string message from whitelisted origin",
+    run: function* () {
+      /**
+       * Same process as above, but we whitelist the origin before loading the page,
+       * and expect to get *both* messages back (each exactly once).
+       */
+      let channel = new WebChannel("objects", Services.io.newURI(HTTP_PATH, null, null));
+
+      let testDonePromise = new Promise((resolve, reject) => {
+        let sawObject = false;
+        let sawString = false;
+        channel.listen((id, message, sender) => {
+          is(id, "objects");
+          if (message.type === "object") {
+            ok(!sawObject);
+            sawObject = true;
+          } else if (message.type === "string") {
+            ok(!sawString);
+            sawString = true;
+          } else {
+            reject(new Error(`Unknown message type: ${message.type}`))
+          }
+          if (sawObject && sawString) {
+            resolve();
+          }
+        });
+      });
+      const webchannelWhitelistPref = "webchannel.allowObject.urlWhitelist";
+      let origWhitelist = Services.prefs.getCharPref(webchannelWhitelistPref);
+      let newWhitelist = origWhitelist + " " + HTTP_PATH;
+      Services.prefs.setCharPref(webchannelWhitelistPref, newWhitelist);
+      yield BrowserTestUtils.withNewTab({
+        gBrowser,
+        url: HTTP_PATH + HTTP_ENDPOINT + "?object"
+      }, function* () {
+        yield testDonePromise;
+        Services.prefs.setCharPref(webchannelWhitelistPref, origWhitelist);
+        channel.stopListening();
+      });
+    }
+  }
 ]; // gTests
 
 function test() {

browser/base/content/test/general/browser_web_channel_iframe.html

@@ -28,23 +28,23 @@
 
   function test_iframe() {
     var firstMessage = new window.CustomEvent("WebChannelMessageToChrome", {
-      detail: {
+      detail: JSON.stringify({
         id: "twoway",
         message: {
           command: "one",
         },
-      }
+      })
     });
 
     window.addEventListener("WebChannelMessageToContent", function(e) {
       var secondMessage = new window.CustomEvent("WebChannelMessageToChrome", {
-        detail: {
+        detail: JSON.stringify({
           id: "twoway",
           message: {
             command: "two",
             detail: e.detail.message,
           },
-        },
+        }),
       });
 
       if (!e.detail.message.error) {
@@ -58,12 +58,12 @@
 
   function test_iframe_pre_redirect() {
     var firstMessage = new window.CustomEvent("WebChannelMessageToChrome", {
-      detail: {
+      detail: JSON.stringify({
         id: "pre_redirect",
         message: {
           command: "redirecting",
         },
-      },
+      }),
     });
     window.dispatchEvent(firstMessage);
     document.location = REDIRECTED_IFRAME_SRC_ROOT + "?iframe_post_redirect";
@@ -72,10 +72,10 @@
   function test_iframe_post_redirect() {
     window.addEventListener("WebChannelMessageToContent", function(e) {
       var echoMessage = new window.CustomEvent("WebChannelMessageToChrome", {
-        detail: {
+        detail: JSON.stringify({
           id: "post_redirect",
           message: e.detail.message,
-        },
+        }),
       });
 
       window.dispatchEvent(echoMessage);
@@ -83,12 +83,12 @@
 
     // Let the test parent know the page has loaded and is ready to echo events
     var loadedMessage = new window.CustomEvent("WebChannelMessageToChrome", {
-      detail: {
+      detail: JSON.stringify({
         id: "post_redirect",
         message: {
           command: "loaded",
         },
-      },
+      }),
     });
     window.dispatchEvent(loadedMessage);
   }

browser/base/content/test/general/test_remoteTroubleshoot.html

@@ -1,17 +1,26 @@
 <!DOCTYPE HTML>
 <html>
 <script>
+// This test is run multiple times, once with only strings allowed through the
+// WebChannel, and once with objects allowed. This function allows us to handle
+// both cases without too much pain.
+function makeDetails(object) {
+  if (window.location.search.indexOf("object") >= 0) {
+    return object;
+  }
+  return JSON.stringify(object)
+}
 // Add a listener for responses to our remote requests.
 window.addEventListener("WebChannelMessageToContent", function (event) {
   if (event.detail.id == "remote-troubleshooting") {
     // Send what we got back to the test.
     var backEvent = new window.CustomEvent("WebChannelMessageToChrome", {
-      detail: {
+      detail: makeDetails({
         id: "test-remote-troubleshooting-backchannel",
         message: {
           message: event.detail.message,
         },
-      },
+      }),
     });
     window.dispatchEvent(backEvent);
     // and stick it in our DOM just for good measure/diagnostics.
@@ -23,12 +32,12 @@ window.addEventListener("WebChannelMessageToContent", function (event) {
 // Make a request for the troubleshooting data as we load.
 window.onload = function() {
   var event = new window.CustomEvent("WebChannelMessageToChrome", {
-    detail: {
+    detail: makeDetails({
       id: "remote-troubleshooting",
       message: {
         command: "request",
       },
-    },
+    }),
   });
   window.dispatchEvent(event);
 }

browser/components/newtab/tests/browser/browser_newtabwebchannel.js

@@ -152,12 +152,14 @@ add_task(function* webchannel_switch() {
   }
 
   let replyCount = 0;
-  let replyPromise = new Promise(resolve => {
-    NewTabWebChannel.on("reply", function() {
-      replyCount += 1;
-      resolve();
-    }.bind(this));
-  });
+  function newReplyPromise() {
+    return new Promise(resolve => {
+      NewTabWebChannel.on("reply", function() {
+        replyCount += 1;
+        resolve();
+      });
+    });
+  }
 
   let unloadPromise = new Promise(resolve => {
     NewTabWebChannel.once("targetUnload", function() {
@@ -188,9 +190,20 @@ add_task(function* webchannel_switch() {
   is(NewTabWebChannel.numBrowsers, 1, "Correct number of targets");
 
   NewTabWebChannel.broadcast("respond", null);
-  yield replyPromise;
+  yield newReplyPromise();
   is(replyCount, 1, "only current channel is listened to for replies");
 
+  const webchannelWhitelistPref = "webchannel.allowObject.urlWhitelist";
+  let origWhitelist = Services.prefs.getCharPref(webchannelWhitelistPref);
+  let newWhitelist = origWhitelist + " http://mochi.test:8888";
+  Services.prefs.setCharPref(webchannelWhitelistPref, newWhitelist);
+  try {
+    NewTabWebChannel.broadcast("respond_object", null);
+    yield newReplyPromise();
+  } finally {
+    Services.prefs.clearUserPref(webchannelWhitelistPref);
+  }
+
   for (let tab of tabs) {
     yield BrowserTestUtils.removeTab(tab);
   }

browser/components/newtab/tests/browser/newtabmessages_places.html

@@ -11,20 +11,20 @@
           switch (e.detail.message.type) {
             case "RECEIVE_FRECENT":
               reply = new window.CustomEvent("WebChannelMessageToChrome", {
-                detail: {
+                detail: JSON.stringify({
                   id: "newtab",
                   message: JSON.stringify({type: "numItemsAck", data: e.detail.message.data.length}),
-                }
+                })
               });
               window.dispatchEvent(reply);
               break;
             case "RECEIVE_PLACES_CHANGE":
               if (e.detail.message.data.type === "clearHistory") {
                 reply = new window.CustomEvent("WebChannelMessageToChrome", {
-                  detail: {
+                  detail: JSON.stringify({
                     id: "newtab",
                     message: JSON.stringify({type: "clearHistoryAck", data: e.detail.message.data.type}),
-                  }
+                  })
                 });
                 window.dispatchEvent(reply);
               }
@@ -36,10 +36,10 @@
       document.onreadystatechange = function () {
         if (document.readyState === "complete") {
           let msg = new window.CustomEvent("WebChannelMessageToChrome", {
-            detail: {
+            detail: JSON.stringify({
               id: "newtab",
               message: JSON.stringify({type: "REQUEST_FRECENT"}),
-            }
+            })
           });
           window.dispatchEvent(msg);
         }

browser/components/newtab/tests/browser/newtabmessages_prefs.html

@@ -8,10 +8,10 @@
             window.addEventListener("WebChannelMessageToContent", function(e) {
                 if (e.detail.message && e.detail.message.type === "RECEIVE_PREFS") {
                     let reply = new window.CustomEvent("WebChannelMessageToChrome", {
-                        detail: {
+                        detail: JSON.stringify({
                             id: "newtab",
                             message: JSON.stringify({type: "responseAck"}),
-                        }
+                        })
                     });
                     window.dispatchEvent(reply);
                 }
@@ -19,10 +19,10 @@
 
             document.onreadystatechange = function () {
                 let msg = new window.CustomEvent("WebChannelMessageToChrome", {
-                    detail: {
+                    detail: JSON.stringify({
                         id: "newtab",
                         message: JSON.stringify({type: "REQUEST_PREFS"}),
-                    }
+                    })
                 });
                 window.dispatchEvent(msg);
             };

browser/components/newtab/tests/browser/newtabmessages_preview.html

@@ -11,10 +11,10 @@
         if (e.detail.message && e.detail.message.type === "RECEIVE_THUMB") {
           if (e.detail.message.data.imgData && e.detail.message.data.url === thumbURL) {
             let reply = new window.CustomEvent("WebChannelMessageToChrome", {
-              detail: {
+              detail: JSON.stringify({
                 id: "newtab",
                 message: JSON.stringify({type: "responseAck"}),
-              }
+              })
             });
             window.dispatchEvent(reply);
           }
@@ -24,10 +24,10 @@
       document.onreadystatechange = function () {
         if (document.readyState === "complete") {
           let msg = new window.CustomEvent("WebChannelMessageToChrome", {
-            detail: {
+            detail: JSON.stringify({
               id: "newtab",
               message: JSON.stringify({type: "REQUEST_THUMB", data: thumbURL}),
-            }
+            })
           });
           window.dispatchEvent(msg);
         }

browser/components/newtab/tests/browser/newtabwebchannel_basic.html

@@ -7,21 +7,25 @@
         <script>
             document.onreadystatechange = function () {
                 let msg = new window.CustomEvent("WebChannelMessageToChrome", {
-                    detail: {
+                    detail: JSON.stringify({
                         id: "newtab",
                         message: JSON.stringify({type: "foo", data: "bar"}),
-                    }
+                    })
                 });
                 window.dispatchEvent(msg);
             };
 
             window.addEventListener("WebChannelMessageToContent", function(e) {
-                if (e.detail.message && e.detail.message.type === "respond") {
+                if (e.detail.message && e.detail.message.type.startsWith("respond")) {
+                    var detail = {
+                        id: "newtab",
+                        message: JSON.stringify({type: "reply", data: "quuz"}),
+                    };
+                    if (e.detail.message.type !== "respond_object") {
+                        detail = JSON.stringify(detail);
+                    }
                     let reply = new window.CustomEvent("WebChannelMessageToChrome", {
-                        detail: {
-                            id: "newtab",
-                            message: JSON.stringify({type: "reply", data: "quuz"}),
-                        }
+                        detail: detail
                     });
                     window.dispatchEvent(reply);
                 }

browser/extensions/loop/chrome/content/shared/js/activeRoomStore.js

@@ -495,11 +495,11 @@ loop.store.ActiveRoomStore = function (mozL10n) {
 
         // Now send a message to the chrome to see if it can handle this room.
         window.dispatchEvent(new window.CustomEvent("WebChannelMessageToChrome", { 
-          detail: { 
+          detail: JSON.stringify({ 
             id: "loop-link-clicker", 
             message: { 
               command: "checkWillOpenRoom", 
-              roomToken: this._storeState.roomToken } } }));}.
+              roomToken: this._storeState.roomToken } }) }));}.
 
 
 
@@ -621,11 +621,11 @@ loop.store.ActiveRoomStore = function (mozL10n) {
 
       // Now we're set up, dispatch an event.
       window.dispatchEvent(new window.CustomEvent("WebChannelMessageToChrome", { 
-        detail: { 
+        detail: JSON.stringify({ 
           id: "loop-link-clicker", 
           message: { 
             command: "openRoom", 
-            roomToken: this._storeState.roomToken } } }));}, 
+            roomToken: this._storeState.roomToken } }) }));}, 
 
 
 

browser/extensions/loop/chrome/content/shared/test/activeRoomStore_test.js

@@ -890,11 +890,11 @@ describe("loop.store.ActiveRoomStore", function () {
         sinon.assert.calledOnce(window.dispatchEvent);
         sinon.assert.calledWithExactly(window.dispatchEvent, new window.CustomEvent(
         "WebChannelMessageToChrome", { 
-          detail: { 
+          detail: JSON.stringify({ 
             id: "loop-link-clicker", 
             message: { 
               command: "openRoom", 
-              roomToken: "fakeToken" } } }));});
+              roomToken: "fakeToken" } }) }));});
 
 
 

browser/extensions/loop/chrome/test/mochitest/browser_LoopRooms_channel.js

@@ -15,6 +15,7 @@ const TEST_URI =
   "example.com/browser/browser/extensions/loop/chrome/test/mochitest/test_loopLinkClicker_channel.html";
 const TEST_URI_GOOD = Services.io.newURI("https://" + TEST_URI, null, null);
 const TEST_URI_BAD = Services.io.newURI("http://" + TEST_URI, null, null);
+const TEST_URI_GOOD_OBJECT = Services.io.newURI("https://" + TEST_URI + "?object", null, null);
 
 const ROOM_TOKEN = "fake1234";
 const LINKCLICKER_URL_PREFNAME = "loop.linkClicker.url";
@@ -165,4 +166,18 @@ add_task(function* test_loopRooms_webchannel_openRoom() {
 
   Assert.equal(got.message.response, true, "should have got a response of true");
   Assert.equal(got.message.alreadyOpen, true, "should indicate the room is already open");
+
+  // Ensure this still works properly when passing an object through the WebChannel
+  let webchannelWhitelistPref = "webchannel.allowObject.urlWhitelist";
+  let origWhitelist = Services.prefs.getCharPref(webchannelWhitelistPref);
+  let newWhitelist = origWhitelist + " https://example.com";
+  Services.prefs.setCharPref(webchannelWhitelistPref, newWhitelist);
+  registerCleanupFunction(() => {
+    Services.prefs.clearUserPref(webchannelWhitelistPref);
+  });
+  got = yield promiseNewChannelResponse(TEST_URI_GOOD_OBJECT, gGoodBackChannel, "openRoom");
+
+  Assert.equal(got.message.response, true, "should have got a response of true with objects");
+  Assert.equal(got.message.alreadyOpen, true, "should indicate the room is already open with objects");
+
 });

browser/extensions/loop/chrome/test/mochitest/test_loopLinkClicker_channel.html

@@ -2,18 +2,27 @@
 <html>
 <script>
 "use strict";
+// This test is run multiple times, once with only strings allowed through the
+// WebChannel, and once with objects allowed. This function allows us to handle
+// both cases without too much pain.
+function makeDetails(object) {
+  if (window.location.search.indexOf("object") >= 0) {
+    return object;
+  }
+  return JSON.stringify(object)
+}
 
 // Add a listener for responses to our remote requests.
 window.addEventListener("WebChannelMessageToContent", function (event) {
   if (event.detail.id == "loop-link-clicker") {
     // Send what we got back to the test.
     var backEvent = new window.CustomEvent("WebChannelMessageToChrome", {
-      detail: {
+      detail: makeDetails({
         id: "test-loop-link-clicker-backchannel",
         message: {
           message: event.detail.message
         }
-      }
+      })
     });
     window.dispatchEvent(backEvent);
     // and stick it in our DOM just for good measure/diagnostics.
@@ -27,13 +36,13 @@ window.onload = function() {
   var hash = window.location.hash;
 
   var event = new window.CustomEvent("WebChannelMessageToChrome", {
-    detail: {
+    detail: makeDetails({
       id: "loop-link-clicker",
       message: {
         command: hash.substring(1, hash.length),
         roomToken: "fake1234"
       }
-    }
+    })
   });
   window.dispatchEvent(event);
 };

devtools/client/aboutdebugging/test/browser_addons_debug_bootstrapped.js

@@ -2,6 +2,9 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
+// Avoid test timeouts that can occur while waiting for the "addon-console-works" message.
+requestLongerTimeout(2);
+
 const ADDON_ID = "test-devtools@mozilla.org";
 const ADDON_NAME = "test-devtools";
 

devtools/client/canvasdebugger/canvasdebugger.xul

@@ -34,7 +34,7 @@
           <toolbarbutton id="import-snapshot"
                          class="devtools-toolbarbutton"
                          oncommand="SnapshotsListView._onImportButtonClick()"
-                         label="&canvasDebuggerUI.importSnapshot;"/>
+                         tooltiptext="&canvasDebuggerUI.importSnapshot;"/>
         </hbox>
       </toolbar>
       <vbox id="snapshots-list" flex="1"/>

devtools/client/debugger/test/mochitest/browser_dbg_sources-webext-contentscript.js

@@ -42,7 +42,7 @@ function test() {
     gDebugger = gPanel.panelWin;
     gSources = gDebugger.DebuggerView.Sources;
 
-    is(gSources.values.length, 1, "Should have 1 source");
+    is(gSources.values.length, 2, "Should have 2 sources");
 
     let item = gSources.getItemForAttachment(attachment => {
       return attachment.source.url.includes("moz-extension");

devtools/client/framework/menu.js

@@ -64,7 +64,17 @@ Menu.prototype.insert = function (pos, menuItem) {
  */
 Menu.prototype.popup = function (screenX, screenY, toolbox) {
   let doc = toolbox.doc;
-  let popup = doc.createElement("menupopup");
+  let popupset = doc.querySelector("popupset");
+  // See bug 1285229, on Windows, opening the same popup multiple times in a
+  // row ends up duplicating the popup. The newly inserted popup doesn't
+  // dismiss the old one. So remove any previously displayed popup before
+  // opening a new one.
+  let popup = popupset.querySelector("menupopup[menu-api=\"true\"]");
+  if (popup) {
+    popup.hidePopup();
+  }
+
+  popup = doc.createElement("menupopup");
   popup.setAttribute("menu-api", "true");
 
   if (this.id) {
@@ -86,7 +96,7 @@ Menu.prototype.popup = function (screenX, screenY, toolbox) {
     }
   });
 
-  doc.querySelector("popupset").appendChild(popup);
+  popupset.appendChild(popup);
   popup.openPopupAtScreen(screenX, screenY, true);
 };
 

devtools/client/framework/toolbox.xul

@@ -3,6 +3,7 @@
    - 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/. -->
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/toolbox.css" type="text/css"?>
 <?xml-stylesheet href="resource://devtools/client/shared/components/notification-box.css" type="text/css"?>
 
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>

devtools/client/inspector/markup/markup.js

@@ -2645,25 +2645,23 @@ function MarkupElementContainer(markupView, node) {
 }
 
 MarkupElementContainer.prototype = Heritage.extend(MarkupContainer.prototype, {
-  _buildEventTooltipContent: function (target, tooltip) {
+  _buildEventTooltipContent: Task.async(function* (target, tooltip) {
     if (target.hasAttribute("data-event")) {
-      tooltip.hide(target);
+      yield tooltip.hide();
 
-      this.node.getEventListenerInfo().then(listenerInfo => {
-        let toolbox = this.markup._inspector.toolbox;
-        setEventTooltip(tooltip, listenerInfo, toolbox);
-        // Disable the image preview tooltip while we display the event details
-        this.markup._disableImagePreviewTooltip();
-        tooltip.once("hidden", () => {
-          // Enable the image preview tooltip after closing the event details
-          this.markup._enableImagePreviewTooltip();
-        });
-        tooltip.show(target);
+      let listenerInfo = yield this.node.getEventListenerInfo();
+
+      let toolbox = this.markup._inspector.toolbox;
+      setEventTooltip(tooltip, listenerInfo, toolbox);
+      // Disable the image preview tooltip while we display the event details
+      this.markup._disableImagePreviewTooltip();
+      tooltip.once("hidden", () => {
+        // Enable the image preview tooltip after closing the event details
+        this.markup._enableImagePreviewTooltip();
       });
-      return true;
+      tooltip.show(target);
     }
-    return undefined;
-  },
+  }),
 
   /**
    * Generates the an image preview for this Element. The element must be an

devtools/client/inspector/markup/test/browser_markup_load_01.js

@@ -58,7 +58,7 @@ function* chooseWithInspectElementContextMenu(selector, testActor) {
     button: 2
   }, gBrowser.selectedBrowser);
 
-  yield testActor.synthesizeKey({key: "Q", options: {}});
+  yield EventUtils.synthesizeKey("Q", {});
 }
 
 function waitForLinkedBrowserEvent(tab, event) {

devtools/client/inspector/markup/test/helper_events_test_runner.js

@@ -102,7 +102,7 @@ function* checkEventsForNode(test, inspector, testActor) {
     EventUtils.synthesizeMouseAtCenter(header, {}, type.ownerGlobal);
     yield tooltip.once("event-tooltip-ready");
 
-    let editor = tooltip.eventEditors.get(contentBox).editor;
+    let editor = tooltip.eventTooltip._eventEditors.get(contentBox).editor;
     is(editor.getText(), expected[i].handler,
        "handler matches for " + cssSelector);
   }

devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-02.js

@@ -12,7 +12,7 @@
  *
  * This file tests that:
  * - clicking the context menu item shows the tooltip
- * - pressing "Escape" while the tooltip is showing hides the tooltip
+ * - the tooltip content matches the property name for which the context menu was opened
  */
 
 "use strict";
@@ -36,10 +36,7 @@ add_task(function* () {
   yield addTab("data:text/html;charset=utf8," + encodeURIComponent(TEST_DOC));
   let {inspector, view} = yield openRuleView();
   yield selectNode("div", inspector);
-  yield testShowAndHideMdnTooltip(view);
-});
 
-function* testShowMdnTooltip(view) {
   setBaseCssDocsUrl(URL_ROOT);
 
   info("Setting the popupNode for the MDN docs tooltip");
@@ -57,30 +54,8 @@ function* testShowMdnTooltip(view) {
   menuitemShowMdnDocs.click();
   yield onShown;
   ok(true, "The MDN docs tooltip was shown");
-}
-
-/**
- * Test that:
- *  - the MDN tooltip is shown when we click the context menu item
- *  - the tooltip's contents have been initialized (we don't fully
- *  test this here, as it's fully tested with the tooltip test code)
- *  - the tooltip is hidden when we press Escape
- */
-function* testShowAndHideMdnTooltip(view) {
-  yield testShowMdnTooltip(view);
 
   info("Quick check that the tooltip contents are set");
-  let cssDocs = view.tooltips.cssDocs;
-
-  // FIXME: Remove the comment below when bug 1246896 is fixed.
-  /* eslint-disable mozilla/no-cpows-in-tests */
-  let tooltipDocument = cssDocs.tooltip.content.contentDocument;
-  let h1 = tooltipDocument.getElementById("property-name");
+  let h1 = cssDocs.tooltip.container.querySelector(".mdn-property-name");
   is(h1.textContent, PROPERTYNAME, "The MDN docs tooltip h1 is correct");
-
-  info("Simulate pressing the 'Escape' key");
-  let onHidden = cssDocs.tooltip.once("hidden");
-  EventUtils.sendKey("escape");
-  yield onHidden;
-  ok(true, "The MDN docs tooltip was hidden on pressing 'escape'");
-}
+});

devtools/client/inspector/rules/test/browser_rules_css-docs-tooltip_closes-on-escape.js

@@ -0,0 +1,51 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Test that the CssDocs tooltip of the ruleview can be closed when pressing the Escape
+ * key.
+ */
+
+"use strict";
+
+const {setBaseCssDocsUrl} =
+  require("devtools/client/shared/widgets/MdnDocsWidget");
+
+const PROPERTYNAME = "color";
+
+const TEST_URI = `
+  <html>
+    <body>
+      <div style="color: red">
+        Test "Show MDN Docs" closes on escape
+      </div>
+    </body>
+  </html>
+`;
+
+/**
+ * Test that the tooltip is hidden when we press Escape
+ */
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
+  yield selectNode("div", inspector);
+
+  setBaseCssDocsUrl(URL_ROOT);
+
+  info("Retrieve a valid anchor for the CssDocs tooltip");
+  let {nameSpan} = getRuleViewProperty(view, "element", PROPERTYNAME);
+
+  info("Showing the MDN docs tooltip");
+  let onShown = view.tooltips.cssDocs.tooltip.once("shown");
+  view.tooltips.cssDocs.show(nameSpan, PROPERTYNAME);
+  yield onShown;
+  ok(true, "The MDN docs tooltip was shown");
+
+  info("Simulate pressing the 'Escape' key");
+  let onHidden = view.tooltips.cssDocs.tooltip.once("hidden");
+  EventUtils.sendKey("escape");
+  yield onHidden;
+  ok(true, "The MDN docs tooltip was hidden on pressing 'escape'");
+});

devtools/client/inspector/shared/style-inspector-overlays.js

@@ -19,10 +19,12 @@ const {
   setImageTooltip,
   setBrokenImageTooltip,
 } = require("devtools/client/shared/widgets/tooltip/ImageTooltipHelper");
+const {
+  CssDocsTooltip,
+} = require("devtools/client/shared/widgets/tooltip/CssDocsTooltip");
 const {
   SwatchColorPickerTooltip,
   SwatchCubicBezierTooltip,
-  CssDocsTooltip,
   SwatchFilterTooltip
 } = require("devtools/client/shared/widgets/Tooltip");
 const EventEmitter = require("devtools/shared/event-emitter");
@@ -276,10 +278,10 @@ TooltipsOverlay.prototype = {
       return;
     }
 
-    let panelDoc = this.view.inspector.panelDoc;
+    let { toolbox } = this.view.inspector;
 
     // Image, fonts, ... preview tooltip
-    this.previewTooltip = new HTMLTooltip(this.view.inspector.toolbox, {
+    this.previewTooltip = new HTMLTooltip(toolbox, {
       type: "arrow",
       useXulWrapper: true
     });
@@ -287,11 +289,10 @@ TooltipsOverlay.prototype = {
       this._onPreviewTooltipTargetHover.bind(this));
 
     // MDN CSS help tooltip
-    this.cssDocs = new CssDocsTooltip(panelDoc);
+    this.cssDocs = new CssDocsTooltip(toolbox);
 
     if (this.isRuleView) {
       // Color picker tooltip
-      let { toolbox } = this.view.inspector;
       this.colorPicker = new SwatchColorPickerTooltip(toolbox);
       // Cubic bezier tooltip
       this.cubicBezier = new SwatchCubicBezierTooltip(toolbox);
@@ -393,7 +394,7 @@ TooltipsOverlay.prototype = {
       this.cubicBezier.hide();
     }
 
-    if (this.isRuleView && this.cssDocs.tooltip.isShown()) {
+    if (this.isRuleView && this.cssDocs.tooltip.isVisible()) {
       this.cssDocs.hide();
     }
 

devtools/client/jar.mn

@@ -128,7 +128,6 @@ devtools.jar:
     content/framework/connect/connect.js (framework/connect/connect.js)
     content/shared/widgets/graphs-frame.xhtml (shared/widgets/graphs-frame.xhtml)
     content/shared/widgets/cubic-bezier.css (shared/widgets/cubic-bezier.css)
-    content/shared/widgets/mdn-docs-frame.xhtml (shared/widgets/mdn-docs-frame.xhtml)
     content/shared/widgets/mdn-docs.css (shared/widgets/mdn-docs.css)
     content/shared/widgets/filter-widget.css (shared/widgets/filter-widget.css)
     content/shared/widgets/spectrum.css (shared/widgets/spectrum.css)
@@ -151,6 +150,7 @@ devtools.jar:
     skin/light-theme.css (themes/light-theme.css)
     skin/firebug-theme.css (themes/firebug-theme.css)
     skin/toolbars.css (themes/toolbars.css)
+    skin/toolbox.css (themes/toolbox.css)
     skin/tooltips.css (themes/tooltips.css)
     skin/variables.css (themes/variables.css)
     skin/images/add.svg (themes/images/add.svg)
@@ -201,7 +201,6 @@ devtools.jar:
     skin/performance.css (themes/performance.css)
     skin/memory.css (themes/memory.css)
     skin/promisedebugger.css (themes/promisedebugger.css)
-    skin/images/timeline-filter.svg (themes/images/timeline-filter.svg)
     skin/scratchpad.css (themes/scratchpad.css)
     skin/shadereditor.css (themes/shadereditor.css)
     skin/storage.css (themes/storage.css)
@@ -217,8 +216,7 @@ devtools.jar:
     skin/images/magnifying-glass-light@2x.png (themes/images/magnifying-glass-light@2x.png)
     skin/images/filter.svg (themes/images/filter.svg)
     skin/images/search.svg (themes/images/search.svg)
-    skin/images/itemToggle.png (themes/images/itemToggle.png)
-    skin/images/itemToggle@2x.png (themes/images/itemToggle@2x.png)
+    skin/images/itemToggle.svg (themes/images/itemToggle.svg)
     skin/images/itemArrow-dark-rtl.svg (themes/images/itemArrow-dark-rtl.svg)
     skin/images/itemArrow-dark-ltr.svg (themes/images/itemArrow-dark-ltr.svg)
     skin/images/itemArrow-rtl.svg (themes/images/itemArrow-rtl.svg)
@@ -227,24 +225,15 @@ devtools.jar:
     skin/images/dropmarker.svg (themes/images/dropmarker.svg)
     skin/layout.css (themes/layout.css)
     skin/images/geometry-editor.svg (themes/images/geometry-editor.svg)
-    skin/images/debugger-pause.png (themes/images/debugger-pause.png)
-    skin/images/debugger-pause@2x.png (themes/images/debugger-pause@2x.png)
-    skin/images/debugger-play.png (themes/images/debugger-play.png)
-    skin/images/debugger-play@2x.png (themes/images/debugger-play@2x.png)
-    skin/images/fast-forward.png (themes/images/fast-forward.png)
-    skin/images/fast-forward@2x.png (themes/images/fast-forward@2x.png)
-    skin/images/rewind.png (themes/images/rewind.png)
-    skin/images/rewind@2x.png (themes/images/rewind@2x.png)
-    skin/images/debugger-step-in.png (themes/images/debugger-step-in.png)
-    skin/images/debugger-step-in@2x.png (themes/images/debugger-step-in@2x.png)
-    skin/images/debugger-step-out.png (themes/images/debugger-step-out.png)
-    skin/images/debugger-step-out@2x.png (themes/images/debugger-step-out@2x.png)
-    skin/images/debugger-step-over.png (themes/images/debugger-step-over.png)
-    skin/images/debugger-step-over@2x.png (themes/images/debugger-step-over@2x.png)
-    skin/images/debugger-blackbox.png (themes/images/debugger-blackbox.png)
-    skin/images/debugger-blackbox@2x.png (themes/images/debugger-blackbox@2x.png)
-    skin/images/debugger-prettyprint.png (themes/images/debugger-prettyprint.png)
-    skin/images/debugger-prettyprint@2x.png (themes/images/debugger-prettyprint@2x.png)
+    skin/images/pause.svg (themes/images/pause.svg)
+    skin/images/play.svg (themes/images/play.svg)
+    skin/images/fast-forward.svg (themes/images/fast-forward.svg)
+    skin/images/rewind.svg (themes/images/rewind.svg)
+    skin/images/debugger-step-in.svg (themes/images/debugger-step-in.svg)
+    skin/images/debugger-step-out.svg (themes/images/debugger-step-out.svg)
+    skin/images/debugger-step-over.svg (themes/images/debugger-step-over.svg)
+    skin/images/debugger-blackbox.svg (themes/images/debugger-blackbox.svg)
+    skin/images/debugger-prettyprint.svg (themes/images/debugger-prettyprint.svg)
     skin/images/debugger-toggleBreakpoints.svg (themes/images/debugger-toggleBreakpoints.svg)
     skin/images/tracer-icon.png (themes/images/tracer-icon.png)
     skin/images/tracer-icon@2x.png (themes/images/tracer-icon@2x.png)
@@ -342,6 +331,7 @@ devtools.jar:
     skin/images/security-state-secure.svg (themes/images/security-state-secure.svg)
     skin/images/security-state-weak.svg (themes/images/security-state-weak.svg)
     skin/images/diff.svg (themes/images/diff.svg)
+    skin/images/import.svg (themes/images/import.svg)
     skin/images/pane-collapse.svg (themes/images/pane-collapse.svg)
     skin/images/pane-expand.svg (themes/images/pane-expand.svg)
 

devtools/client/memory/components/toolbar.js

@@ -272,9 +272,7 @@ module.exports = createClass({
               className: "devtools-toolbarbutton import-snapshot devtools-button",
               onClick: onImportClick,
               title: L10N.getStr("import-snapshot"),
-              "data-text-only": true,
-            },
-            L10N.getStr("import-snapshot")
+            }
           )
         ),
 

devtools/client/performance/performance.xul

@@ -92,7 +92,7 @@
                          tooltiptext="&performanceUI.recordButton.tooltip;"/>
           <toolbarbutton id="import-button"
                          class="devtools-toolbarbutton"
-                         label="&performanceUI.importButton;"/>
+                         tooltiptext="&performanceUI.importButton;"/>
         </hbox>
       </toolbar>
       <vbox id="recordings-list" class="theme-sidebar" flex="1"/>

devtools/client/shared/test/browser_mdn-docs-01.js

@@ -20,12 +20,8 @@
 
 "use strict";
 
-const {CssDocsTooltip} = require("devtools/client/shared/widgets/Tooltip");
 const {setBaseCssDocsUrl, MdnDocsWidget} = require("devtools/client/shared/widgets/MdnDocsWidget");
 
-// frame to load the tooltip into
-const MDN_DOCS_TOOLTIP_FRAME = "chrome://devtools/content/shared/widgets/mdn-docs-frame.xhtml";
-
 /**
  * Test properties
  *
@@ -45,14 +41,16 @@ const BASIC_EXPECTED_SYNTAX = [{type: "comment", text: "/* The part we want   */
                                {type: "property-value", text: "is-the-part-we-want"},
                                {type: "text", text: ";"}];
 
-const URI_PARAMS = "?utm_source=mozilla&utm_medium=firefox-inspector&utm_campaign=default";
+const URI_PARAMS =
+  "?utm_source=mozilla&utm_medium=firefox-inspector&utm_campaign=default";
 
 add_task(function* () {
   setBaseCssDocsUrl(TEST_URI_ROOT);
 
   yield addTab("about:blank");
-  let [host, win, doc] = yield createHost("bottom", MDN_DOCS_TOOLTIP_FRAME);
-  let widget = new MdnDocsWidget(win.document);
+  let [host, win] = yield createHost("bottom", "data:text/html," +
+    "<div class='mdn-container'></div>");
+  let widget = new MdnDocsWidget(win.document.querySelector("div"));
 
   yield testTheBasics(widget);
 

devtools/client/shared/test/browser_mdn-docs-02.js

@@ -21,11 +21,10 @@
 
 "use strict";
 
-const {CssDocsTooltip} = require("devtools/client/shared/widgets/Tooltip");
-const {setBaseCssDocsUrl, MdnDocsWidget} = require("devtools/client/shared/widgets/MdnDocsWidget");
-
-// frame to load the tooltip into
-const MDN_DOCS_TOOLTIP_FRAME = "chrome://devtools/content/shared/widgets/mdn-docs-frame.xhtml";
+const {
+  setBaseCssDocsUrl,
+  MdnDocsWidget
+} = require("devtools/client/shared/widgets/MdnDocsWidget");
 
 const BASIC_EXPECTED_SUMMARY = "A summary of the property.";
 const BASIC_EXPECTED_SYNTAX = [{type: "comment", text: "/* The part we want   */"},
@@ -100,8 +99,9 @@ add_task(function* () {
   setBaseCssDocsUrl(TEST_URI_ROOT);
 
   yield addTab("about:blank");
-  let [host, win, doc] = yield createHost("bottom", MDN_DOCS_TOOLTIP_FRAME);
-  let widget = new MdnDocsWidget(win.document);
+  let [host, win] = yield createHost("bottom", "data:text/html," +
+    "<div class='mdn-container'></div>");
+  let widget = new MdnDocsWidget(win.document.querySelector("div"));
 
   for (let {desc, docsPageUrl, expectedContents} of TEST_DATA) {
     info(desc);
@@ -112,21 +112,10 @@ add_task(function* () {
   gBrowser.removeCurrentTab();
 });
 
-function* testNonExistentPage(widget) {
-  info("Test a property for which we don't have a page");
-  yield widget.loadCssDocs("i-dont-exist.html");
-  checkTooltipContents(widget.elements, {
-    propertyName: "i-dont-exist.html",
-    summary: ERROR_MESSAGE,
-    syntax: ""
-  });
-}
-
 /*
  * Utility function to check content of the tooltip.
  */
 function checkTooltipContents(doc, expected) {
-
   is(doc.heading.textContent,
      expected.propertyName,
      "Property name is correct");

devtools/client/shared/widgets/MdnDocsWidget.js

@@ -29,6 +29,8 @@ const defer = require("devtools/shared/defer");
 const {getCSSLexer} = require("devtools/shared/css-lexer");
 const {gDevTools} = require("devtools/client/framework/devtools");
 
+const XHTML_NS = "http://www.w3.org/1999/xhtml";
+
 // Parameters for the XHR request
 // see https://developer.mozilla.org/en-US/docs/MDN/Kuma/API#Document_parameters
 const XHR_PARAMS = "?raw&macros";
@@ -87,7 +89,7 @@ function appendSyntaxHighlightedCSS(cssText, parentElement) {
    * Create a SPAN node with the given text content and class.
    */
   function createStyledNode(textContent, className) {
-    let newNode = doc.createElement("span");
+    let newNode = doc.createElementNS(XHTML_NS, "span");
     newNode.classList.add(className);
     newNode.textContent = textContent;
     return newNode;
@@ -224,9 +226,7 @@ exports.getCssDocs = getCssDocs;
 
 /**
  * The MdnDocsWidget is used by tooltip code that needs to display docs
- * from MDN in a tooltip. The tooltip code loads a document that contains the
- * basic structure of a docs tooltip (loaded from mdn-docs-frame.xhtml),
- * and passes this document into the widget's constructor.
+ * from MDN in a tooltip.
  *
  * In the constructor, the widget does some general setup that's not
  * dependent on the particular item we need docs for.
@@ -234,22 +234,31 @@ exports.getCssDocs = getCssDocs;
  * After that, when the tooltip code needs to display docs for an item, it
  * asks the widget to retrieve the docs and update the document with them.
  *
- * @param {Document} tooltipDocument
- * A DOM document. The widget expects the document to have a particular
- * structure.
+ * @param {Element} tooltipContainer
+ * A DOM element where the MdnDocs widget markup should be created.
  */
-function MdnDocsWidget(tooltipDocument) {
+function MdnDocsWidget(tooltipContainer) {
+  tooltipContainer.innerHTML =
+    `<header>
+       <h1 class="mdn-property-name theme-fg-color5"></h1>
+     </header>
+     <div class="mdn-property-info">
+       <div class="mdn-summary"></div>
+       <pre class="mdn-syntax devtools-monospace"></pre>
+     </div>
+     <footer>
+       <a class="mdn-visit-page theme-link" href="#">Visit MDN (placeholder)</a>
+     </footer>`;
+
   // fetch all the bits of the document that we will manipulate later
   this.elements = {
-    heading: tooltipDocument.getElementById("property-name"),
-    summary: tooltipDocument.getElementById("summary"),
-    syntax: tooltipDocument.getElementById("syntax"),
-    info: tooltipDocument.getElementById("property-info"),
-    linkToMdn: tooltipDocument.getElementById("visit-mdn-page")
+    heading: tooltipContainer.querySelector(".mdn-property-name"),
+    summary: tooltipContainer.querySelector(".mdn-summary"),
+    syntax: tooltipContainer.querySelector(".mdn-syntax"),
+    info: tooltipContainer.querySelector(".mdn-property-info"),
+    linkToMdn: tooltipContainer.querySelector(".mdn-visit-page")
   };
 
-  this.doc = tooltipDocument;
-
   // get the localized string for the link text
   this.elements.linkToMdn.textContent =
     l10n.strings.GetStringFromName("docsTooltip.visitMDN");
@@ -357,7 +366,6 @@ MdnDocsWidget.prototype = {
 
   destroy: function () {
     this.elements = null;
-    this.doc = null;
   }
 };
 

devtools/client/shared/widgets/Tooltip.js

@@ -9,7 +9,6 @@ const defer = require("devtools/shared/defer");
 const {Spectrum} = require("devtools/client/shared/widgets/Spectrum");
 const {CubicBezierWidget} =
       require("devtools/client/shared/widgets/CubicBezierWidget");
-const {MdnDocsWidget} = require("devtools/client/shared/widgets/MdnDocsWidget");
 const {CSSFilterEditorWidget} = require("devtools/client/shared/widgets/FilterWidget");
 const {TooltipToggle} = require("devtools/client/shared/widgets/tooltip/TooltipToggle");
 const EventEmitter = require("devtools/shared/event-emitter");
@@ -33,9 +32,7 @@ XPCOMUtils.defineLazyModuleGetter(this, "VariablesViewController",
   "resource://devtools/client/shared/widgets/VariablesViewController.jsm");
 
 const XHTML_NS = "http://www.w3.org/1999/xhtml";
-const MDN_DOCS_FRAME = "chrome://devtools/content/shared/widgets/mdn-docs-frame.xhtml";
 const ESCAPE_KEYCODE = Ci.nsIDOMKeyEvent.DOM_VK_ESCAPE;
-const RETURN_KEYCODE = Ci.nsIDOMKeyEvent.DOM_VK_RETURN;
 const POPUP_EVENTS = ["shown", "hidden", "showing", "hiding"];
 
 /**
@@ -553,32 +550,6 @@ Tooltip.prototype = {
     this.content = iframe;
 
     return def.promise;
-  },
-
-  /**
-   * Set the content of this tooltip to the MDN docs widget.
-   *
-   * This is called when the tooltip is first constructed.
-   *
-   * @return {promise} A promise which is resolved with an MdnDocsWidget.
-   *
-   * It loads the tooltip's structure from a separate XHTML file
-   * into an iframe. When the iframe is loaded it constructs
-   * an MdnDocsWidget and passes that into resolve.
-   *
-   * The caller can use the MdnDocsWidget to update the tooltip's
-   * UI with new content each time the tooltip is shown.
-   */
-  setMdnDocsContent: function () {
-    let dimensions = {width: "410", height: "300"};
-    return this.setIFrameContent(dimensions, MDN_DOCS_FRAME).then(onLoaded);
-
-    function onLoaded(iframe) {
-      let win = iframe.contentWindow.wrappedJSObject;
-      // create an MdnDocsWidget, initializing it with the content document
-      let widget = new MdnDocsWidget(win.document);
-      return widget;
-    }
   }
 };
 
@@ -1004,45 +975,6 @@ Heritage.extend(SwatchBasedEditorTooltip.prototype, {
   }
 });
 
-/**
- * Tooltip for displaying docs for CSS properties from MDN.
- *
- * @param {XULDocument} doc
- */
-function CssDocsTooltip(doc) {
-  this.tooltip = new Tooltip(doc, {
-    consumeOutsideClick: true,
-    closeOnKeys: [ESCAPE_KEYCODE, RETURN_KEYCODE],
-    noAutoFocus: false
-  });
-  this.widget = this.tooltip.setMdnDocsContent();
-}
-
-module.exports.CssDocsTooltip = CssDocsTooltip;
-
-CssDocsTooltip.prototype = {
-  /**
-   * Load CSS docs for the given property,
-   * then display the tooltip.
-   */
-  show: function (anchor, propertyName) {
-    function loadCssDocs(widget) {
-      return widget.loadCssDocs(propertyName);
-    }
-
-    this.widget.then(loadCssDocs);
-    this.tooltip.show(anchor, "topcenter bottomleft");
-  },
-
-  hide: function () {
-    this.tooltip.hide();
-  },
-
-  destroy: function () {
-    this.tooltip.destroy();
-  }
-};
-
 /**
  * The swatch-based css filter tooltip class is a specific class meant to be
  * used along with rule-view's generated css filter swatches.

devtools/client/shared/widgets/mdn-docs-frame.xhtml

@@ -1,33 +0,0 @@
-<?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/. -->
-<!DOCTYPE html>
-
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-  <link rel="stylesheet" href="chrome://devtools/content/shared/widgets/mdn-docs.css" type="text/css"/>
-  <script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
-</head>
-<body class="theme-body">
-
-  <div id = "container">
-
-    <header>
-      <h1 id="property-name" class="theme-fg-color5"></h1>
-    </header>
-
-    <div id="property-info">
-      <div id="summary"></div>
-      <pre id="syntax" class="devtools-monospace"></pre>
-    </div>
-
-    <footer>
-      <a id="visit-mdn-page" class="theme-link" href="#">Visit MDN (placeholder)</a>
-    </footer>
-
-  </div>
-
-</body>
-</html>

devtools/client/shared/widgets/mdn-docs.css

@@ -2,40 +2,38 @@
  * 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/. */
 
-#visit-mdn-page {
-  display: inline-block;
-  padding: 1em 0;
-}
-
-html, body, #container {
-  height: 100%;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-#container {
+.mdn-container {
+  height: 300px;
+  margin: 4px;
+  overflow: auto;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
 }
 
-header, footer {
+.mdn-container header,
+.mdn-container footer {
   flex: 1;
   padding: 0 1em;
 }
 
-#property-info {
+.mdn-property-info {
   flex: 10;
   padding: 0 1em;
   overflow: auto;
   transition: opacity 400ms ease-in;
 }
 
-#syntax {
+.mdn-syntax {
   margin-top: 1em;
 }
 
 .devtools-throbber {
-  opacity: 0;
   align-self: center;
+  opacity: 0;
+}
+
+.mdn-visit-page {
+  display: inline-block;
+  padding: 1em 0;
 }

devtools/client/shared/widgets/tooltip/CssDocsTooltip.js

@@ -0,0 +1,95 @@
+/* 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/. */
+
+"use strict";
+
+const {HTMLTooltip} = require("devtools/client/shared/widgets/HTMLTooltip");
+const {MdnDocsWidget} = require("devtools/client/shared/widgets/MdnDocsWidget");
+const XHTML_NS = "http://www.w3.org/1999/xhtml";
+
+loader.lazyRequireGetter(this, "KeyShortcuts",
+  "devtools/client/shared/key-shortcuts", true);
+
+const TOOLTIP_WIDTH = 418;
+const TOOLTIP_HEIGHT = 308;
+
+/**
+ * Tooltip for displaying docs for CSS properties from MDN.
+ *
+ * @param {Toolbox} toolbox
+ *        Toolbox used to create the tooltip.
+ */
+function CssDocsTooltip(toolbox) {
+  this.tooltip = new HTMLTooltip(toolbox, {
+    type: "arrow",
+    consumeOutsideClicks: true,
+    autofocus: true,
+    useXulWrapper: true,
+    stylesheet: "chrome://devtools/content/shared/widgets/mdn-docs.css",
+  });
+  this.widget = this.setMdnDocsContent();
+
+  // Initialize keyboard shortcuts
+  this.shortcuts = new KeyShortcuts({ window: toolbox.doc.defaultView });
+  this._onShortcut = this._onShortcut.bind(this);
+
+  this.shortcuts.on("Escape", this._onShortcut);
+  this.shortcuts.on("Return", this._onShortcut);
+}
+
+module.exports.CssDocsTooltip = CssDocsTooltip;
+
+CssDocsTooltip.prototype = {
+  /**
+   * Load CSS docs for the given property,
+   * then display the tooltip.
+   */
+  show: function (anchor, propertyName) {
+    this.tooltip.once("shown", () => {
+      this.widget.loadCssDocs(propertyName);
+    });
+    this.tooltip.show(anchor);
+  },
+
+  hide: function () {
+    this.tooltip.hide();
+  },
+
+  _onShortcut: function (shortcut, event) {
+    if (!this.tooltip.isVisible()) {
+      return;
+    }
+
+    event.stopPropagation();
+    if (shortcut === "Return") {
+      // If user is pressing return, do not prevent default and delay hiding the tooltip
+      // in case the focus is on the "Visit MDN page" link.
+      this.tooltip.doc.defaultView.setTimeout(this.hide.bind(this), 0);
+    } else {
+      // For any other key, preventDefault() and hide straight away.
+      event.preventDefault();
+      this.hide();
+    }
+  },
+
+  /**
+   * Set the content of this tooltip to the MDN docs widget. This is called when the
+   * tooltip is first constructed.
+   * The caller can use the MdnDocsWidget to update the tooltip's  UI with new content
+   * each time the tooltip is shown.
+   *
+   * @return {MdnDocsWidget} the created MdnDocsWidget instance.
+   */
+  setMdnDocsContent: function () {
+    let container = this.tooltip.doc.createElementNS(XHTML_NS, "div");
+    container.setAttribute("class", "mdn-container theme-body");
+    this.tooltip.setContent(container, {width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT});
+    return new MdnDocsWidget(container);
+  },
+
+  destroy: function () {
+    this.shortcuts.destroy();
+    this.tooltip.destroy();
+  }
+};

devtools/client/shared/widgets/tooltip/EventTooltipHelper.js

@@ -42,7 +42,10 @@ function EventTooltip(tooltip, eventListenerInfos, toolbox) {
   this._tooltip = tooltip;
   this._eventListenerInfos = eventListenerInfos;
   this._toolbox = toolbox;
-  this._tooltip.eventEditors = new WeakMap();
+  this._eventEditors = new WeakMap();
+
+  // Used in tests: add a reference to the EventTooltip instance on the HTMLTooltip.
+  this._tooltip.eventTooltip = this;
 
   this._headerClicked = this._headerClicked.bind(this);
   this._debugClicked = this._debugClicked.bind(this);
@@ -145,7 +148,7 @@ EventTooltip.prototype = {
       // Content
       let content = doc.createElementNS(XHTML_NS, "div");
       let editor = new Editor(config);
-      this._tooltip.eventEditors.set(content, {
+      this._eventEditors.set(content, {
         editor: editor,
         handler: listener.handler,
         searchString: listener.searchString,
@@ -192,13 +195,13 @@ EventTooltip.prototype = {
 
       content.setAttribute("open", "");
 
-      let eventEditors = this._tooltip.eventEditors.get(content);
+      let eventEditor = this._eventEditors.get(content);
 
-      if (eventEditors.appended) {
+      if (eventEditor.appended) {
         return;
       }
 
-      let {editor, handler} = eventEditors;
+      let {editor, handler} = eventEditor;
 
       let iframe = doc.createElementNS(XHTML_NS, "iframe");
       iframe.setAttribute("style", "width: 100%; height: 100%; border-style: none;");
@@ -207,7 +210,7 @@ EventTooltip.prototype = {
         let tidied = beautify.js(handler, { "indent_size": 2 });
         editor.setText(tidied);
 
-        eventEditors.appended = true;
+        eventEditor.appended = true;
 
         let container = header.parentElement.getBoundingClientRect();
         if (header.getBoundingClientRect().top < container.top) {
@@ -225,7 +228,7 @@ EventTooltip.prototype = {
     let header = event.currentTarget;
     let content = header.nextElementSibling;
 
-    let {uri, searchString, dom0} = this._tooltip.eventEditors.get(content);
+    let {uri, searchString, dom0} = this._eventEditors.get(content);
 
     if (uri && uri !== "?") {
       // Save a copy of toolbox as it will be set to null when we hide the tooltip.
@@ -290,11 +293,12 @@ EventTooltip.prototype = {
       let boxes = this.container.querySelectorAll(".event-tooltip-content-box");
 
       for (let box of boxes) {
-        let {editor} = this._tooltip.eventEditors.get(box);
+        let {editor} = this._eventEditors.get(box);
         editor.destroy();
       }
 
-      this._tooltip.eventEditors = null;
+      this._eventEditors = null;
+      this._tooltip.eventTooltip = null;
     }
 
     let headerNodes = this.container.querySelectorAll(".event-header");

devtools/client/shared/widgets/tooltip/moz.build

@@ -5,6 +5,7 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
+    'CssDocsTooltip.js',
     'EventTooltipHelper.js',
     'ImageTooltipHelper.js',
     'TooltipToggle.js',

devtools/client/styleeditor/styleeditor.xul

@@ -97,12 +97,10 @@
              <xul:hbox class="devtools-toolbarbutton-group">
               <xul:toolbarbutton class="style-editor-newButton devtools-toolbarbutton"
                           accesskey="&newButton.accesskey;"
-                          tooltiptext="&newButton.tooltip;"
-                          label="&newButton.label;"/>
+                          tooltiptext="&newButton.tooltip;"/>
               <xul:toolbarbutton class="style-editor-importButton devtools-toolbarbutton"
                           accesskey="&importButton.accesskey;"
-                          tooltiptext="&importButton.tooltip;"
-                          label="&importButton.label;"/>
+                          tooltiptext="&importButton.tooltip;"/>
             </xul:hbox>
             <xul:spacer/>
             <xul:toolbarbutton id="style-editor-options"

devtools/client/themes/animationinspector.css

@@ -7,34 +7,25 @@
 .theme-dark {
   --even-animation-timeline-background-color: rgba(255,255,255,0.03);
   --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
-  --pause-image: url(chrome://devtools/skin/images/debugger-pause.png);
-  --pause-image-2x: url(chrome://devtools/skin/images/debugger-pause@2x.png);
-  --rewind-image: url(chrome://devtools/skin/images/rewind.png);
-  --rewind-image-2x: url(chrome://devtools/skin/images/rewind@2x.png);
-  --play-image: url(chrome://devtools/skin/images/debugger-play.png);
-  --play-image-2x: url(chrome://devtools/skin/images/debugger-play@2x.png);
+  --pause-image: url(chrome://devtools/skin/images/pause.svg);
+  --rewind-image: url(chrome://devtools/skin/images/rewind.svg);
+  --play-image: url(chrome://devtools/skin/images/play.svg);
 }
 
 .theme-light {
   --even-animation-timeline-background-color: rgba(128,128,128,0.03);
   --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
-  --pause-image: url(chrome://devtools/skin/images/debugger-pause.png);
-  --pause-image-2x: url(chrome://devtools/skin/images/debugger-pause@2x.png);
-  --rewind-image: url(chrome://devtools/skin/images/rewind.png);
-  --rewind-image-2x: url(chrome://devtools/skin/images/rewind@2x.png);
-  --play-image: url(chrome://devtools/skin/images/debugger-play.png);
-  --play-image-2x: url(chrome://devtools/skin/images/debugger-play@2x.png);
+  --pause-image: url(chrome://devtools/skin/images/pause.svg);
+  --rewind-image: url(chrome://devtools/skin/images/rewind.svg);
+  --play-image: url(chrome://devtools/skin/images/play.svg);
 }
 
 .theme-firebug {
   --even-animation-timeline-background-color: rgba(128,128,128,0.03);
   --command-pick-image: url(chrome://devtools/skin/images/firebug/command-pick.svg);
   --pause-image: url(chrome://devtools/skin/images/firebug/pause.svg);
-  --pause-image-2x: url(chrome://devtools/skin/images/firebug/pause.svg);
   --rewind-image: url(chrome://devtools/skin/images/firebug/rewind.svg);
-  --rewind-image-2x: url(chrome://devtools/skin/images/firebug/rewind.svg);
   --play-image: url(chrome://devtools/skin/images/firebug/play.svg);
-  --play-image-2x: url(chrome://devtools/skin/images/firebug/play.svg);
 }
 
 :root {
@@ -184,20 +175,6 @@ body {
   background-image: var(--play-image);
 }
 
-@media (min-resolution: 1.1dppx) {
-  .pause-button::before {
-    background-image: var(--pause-image-2x);
-  }
-
-  .pause-button.paused::before {
-    background-image: var(--play-image-2x);
-  }
-
-  #rewind-timeline::before {
-    background-image: var(--rewind-image-2x);
-  }
-}
-
 #timeline-rate select.devtools-button {
   -moz-appearance: none;
   text-align: center;

devtools/client/themes/canvasdebugger.css

@@ -51,6 +51,10 @@
   list-style-image: url("chrome://devtools/skin/images/profiler-stopwatch.svg");
 }
 
+#import-snapshot {
+  list-style-image: url("images/import.svg");
+}
+
 /* Snapshots items */
 
 .snapshot-item-thumbnail {
@@ -109,37 +113,19 @@
 
 /* Debugging pane controls */
 #resume {
-  list-style-image: url(images/debugger-play.png);
+  list-style-image: url(images/play.svg);
 }
 
 #step-over {
-  list-style-image: url(images/debugger-step-over.png);
+  list-style-image: url(images/debugger-step-over.svg);
 }
 
 #step-in {
-  list-style-image: url(images/debugger-step-in.png);
+  list-style-image: url(images/debugger-step-in.svg);
 }
 
 #step-out {
-  list-style-image: url(images/debugger-step-out.png);
-}
-
-@media (min-resolution: 1.1dppx) {
-  #resume {
-    list-style-image: url(images/debugger-play@2x.png);
-  }
-
-  #step-over {
-    list-style-image: url(images/debugger-step-over@2x.png);
-  }
-
-  #step-in {
-    list-style-image: url(images/debugger-step-in@2x.png);
-  }
-
-  #step-out {
-    list-style-image: url(images/debugger-step-out@2x.png);
-  }
+  list-style-image: url(images/debugger-step-out.svg);
 }
 
 #calls-slider {
@@ -196,16 +182,8 @@
 }
 
 .selected .call-item-gutter {
-  background-image: url("images/editor-debug-location.png");
-  background-repeat: no-repeat;
-  background-position: 6px center;
-  background-size: 12px;
-}
-
-@media (min-resolution: 1.1dppx) {
-  .selected .call-item-gutter {
-    background-image: url("images/editor-debug-location@2x.png");
-  }
+  background-color: #2cbb0f;
+  color: white;
 }
 
 .call-item-index {

devtools/client/themes/debugger.css

@@ -94,24 +94,8 @@
   min-width: 32px;
 }
 
-:root:not(.theme-firebug) #sources-toolbar .devtools-toolbarbutton:not([label]) {
-  -moz-image-region: rect(0,16px,16px,0);
-}
-
-@media (min-resolution: 1.1dppx) {
-  :root:not(.theme-firebug) #sources-toolbar .devtools-toolbarbutton:not([label]) {
-    -moz-image-region: rect(0,32px,32px,0);
-  }
-}
-
 #black-box {
-  list-style-image: url(images/debugger-blackbox.png);
-}
-
-@media (min-resolution: 1.1dppx) {
-  #black-box {
-    list-style-image: url(images/debugger-blackbox@2x.png);
-  }
+  list-style-image: url(images/debugger-blackbox.svg);
 }
 
 .theme-firebug #black-box {
@@ -119,13 +103,7 @@
 }
 
 #pretty-print {
-  list-style-image: url(images/debugger-prettyprint.png);
-}
-
-@media (min-resolution: 1.1dppx) {
-  #pretty-print {
-    list-style-image: url(images/debugger-prettyprint@2x.png);
-  }
+  list-style-image: url(images/debugger-prettyprint.svg);
 }
 
 .theme-firebug #pretty-print {
@@ -134,16 +112,16 @@
 
 #toggle-breakpoints {
   list-style-image: url(images/debugger-toggleBreakpoints.svg);
-  -moz-image-region: rect(0,32px,16px,16px) !important;
+  -moz-image-region: rect(0,32px,16px,16px);
 }
 
 .theme-firebug #toggle-breakpoints {
   list-style-image: url(images/firebug/debugger-toggleBreakpoints.svg);
-  -moz-image-region: unset !important;
+  -moz-image-region: unset;
 }
 
 #toggle-breakpoints[checked] {
-  -moz-image-region: rect(0,16px,16px,0) !important;
+  -moz-image-region: rect(0,16px,16px,0);
 }
 
 #toggle-breakpoints[checked] > image {
@@ -172,17 +150,9 @@
 #black-boxed-message-button > .button-box > .button-icon {
   width: 16px;
   height: 16px;
-  background-image: url(images/debugger-blackbox.png);
+  background-image: url(images/debugger-blackbox.svg);
   background-position: 0 0;
-  background-size: 32px 16px;
-  background-repeat: no-repeat;
-  margin-inline-end: 5px;
-}
-
-@media (min-resolution: 1.1dppx) {
-  #black-boxed-message-button > .button-box > .button-icon {
-    background-image: url(images/debugger-blackbox@2x.png);
-  }
+  background-size: cover;
 }
 
 /* Black box message and source progress meter */
@@ -572,21 +542,11 @@
 /* Toolbar controls */
 
 #resume {
-  list-style-image: url(images/debugger-pause.png);
+  list-style-image: url(images/pause.svg);
 }
 
 #resume[checked] {
-  list-style-image: url(images/debugger-play.png);
-}
-
-@media (min-resolution: 1.1dppx) {
-  #resume {
-    list-style-image: url(images/debugger-pause@2x.png);
-  }
-
-  #resume[checked] {
-    list-style-image: url(images/debugger-play@2x.png);
-  }
+  list-style-image: url(images/play.svg);
 }
 
 .theme-firebug #resume {
@@ -602,29 +562,15 @@
 }
 
 #step-over {
-  list-style-image: url(images/debugger-step-over.png);
+  list-style-image: url(images/debugger-step-over.svg);
 }
 
 #step-in {
-  list-style-image: url(images/debugger-step-in.png);
+  list-style-image: url(images/debugger-step-in.svg);
 }
 
 #step-out {
-  list-style-image: url(images/debugger-step-out.png);
-}
-
-@media (min-resolution: 1.1dppx) {
-  #step-over {
-    list-style-image: url(images/debugger-step-over@2x.png);
-  }
-
-  #step-in {
-    list-style-image: url(images/debugger-step-in@2x.png);
-  }
-
-  #step-out {
-    list-style-image: url(images/debugger-step-out@2x.png);
-  }
+  list-style-image: url(images/debugger-step-out.svg);
 }
 
 .theme-firebug #step-over {

devtools/client/themes/firebug-theme.css

@@ -244,9 +244,6 @@
   min-width: 24px;
 }
 
-.theme-firebug #command-button-frames {
-  min-width: 32px;
-}
 
 .theme-firebug #element-picker {
   min-height: 21px;

devtools/client/themes/images/add.svg

@@ -1,9 +1,6 @@
 <!-- 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">
-  <g fill="#babec3">
-    <rect x="3" y="7" width="10" height="2" />
-    <rect x="7" y="3" width="2" height="10" />
-  </g>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <path d="M8.5 8.5V14a.5.5 0 1 1-1 0V8.5H2a.5.5 0 0 1 0-1h5.5V2a.5.5 0 0 1 1 0v5.5H14a.5.5 0 1 1 0 1H8.5z"/>
+</svg>

devtools/client/themes/images/clear.svg

@@ -1,7 +1,7 @@
 <!-- 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" fill="#babec3">
-  <path d="M6 3h3V2c0-.003-3 0-3 0-.002 0 0 1 0 1zm-5 .5c0-.276.226-.5.494-.5h12.012c.273 0 .494.232.494.5 0 .276-.226.5-.494.5H1.494C1.22 4 1 3.768 1 3.5zM5 3V2c0-.553.444-1 1-1h3c.552 0 1 .443 1 1v1H5z"/>
-  <path d="M5 13h1V7H5v6zm4 0h1V7H9v6zm3-8v8.998c-.046.553-.45 1.002-1 1.002H4c-.55 0-.954-.456-1-1.002V5h9zm-5 8h1V7H7v6z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <path d="M5 3h3V2c0-.003-3 0-3 0-.002 0 0 1 0 1zm-5 .5A.5.5 0 0 1 .494 3h12.012a.5.5 0 0 1 0 1H.494A.502.502 0 0 1 0 3.5zM4 3V2c0-.553.444-1 1-1h3c.552 0 1 .443 1 1v1H4zM5 11V6a.5.5 0 0 0-1 0v5a.5.5 0 1 0 1 0zM7 11V6a.5.5 0 0 0-1 0v5a.5.5 0 1 0 1 0zM9 11V6a.5.5 0 0 0-1 0v5a.5.5 0 1 0 1 0z"/>
+  <path d="M3 4v9h7V4H3zm0-1h7a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/>
 </svg>

devtools/client/themes/images/command-noautohide.svg

@@ -1,8 +1,6 @@
 <!-- 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 30 29" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
-  <g fill-rule="evenodd">
-    <path d="M3 1v11c0-1.104-.896-2-2-2h11c-1.104 0-2 .896-2 2V1c0 1.104.896 2 2 2H1c1.104 0 2-.896 2-2zM0 1c0-.553.447-1 1-1h11c.553 0 1 .447 1 1v11c0 .553-.447 1-1 1H1c-.553 0-1-.447-1-1V1zM20 1v11c0-1.104-.896-2-2-2h11c-1.104 0-2 .896-2 2V1c0 1.104.896 2 2 2H18c1.104 0 2-.896 2-2zm-3 0c0-.553.447-1 1-1h11c.553 0 1 .447 1 1v11c0 .553-.447 1-1 1H18c-.553 0-1-.447-1-1V1zM20 17v11c0-1.104-.896-2-2-2h11c-1.104 0-2 .896-2 2V17c0 1.104.896 2 2 2H18c1.104 0 2-.896 2-2zm-3 0c0-.553.447-1 1-1h11c.553 0 1 .447 1 1v11c0 .553-.447 1-1 1H18c-.553 0-1-.447-1-1V17zM3 17v11c0-1.104-.896-2-2-2h11c-1.104 0-2 .896-2 2V17c0 1.104.896 2 2 2H1c1.104 0 2-.896 2-2zm-3 0c0-.553.447-1 1-1h11c.553 0 1 .447 1 1v11c0 .553-.447 1-1 1H1c-.553 0-1-.447-1-1V17z"/>
-  </g>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <path d="M2 1.99v4.02C2 6 2 6 1.99 6h4.02C6 6 6 6 6 6.01V1.99C6 2 6 2 6.01 2H1.99C2 2 2 2 2 1.99zm-1 0c0-.546.451-.99.99-.99h4.02c.546 0 .99.451.99.99v4.02c0 .546-.451.99-.99.99H1.99A.996.996 0 0 1 1 6.01V1.99zM10 1.99v4.02C10 6 10 6 9.99 6h4.02C14 6 14 6 14 6.01V1.99c0 .01 0 .01.01.01H9.99C10 2 10 2 10 1.99zm-1 0c0-.546.451-.99.99-.99h4.02c.546 0 .99.451.99.99v4.02c0 .546-.451.99-.99.99H9.99A.996.996 0 0 1 9 6.01V1.99zM10 9.99v4.02c0-.01 0-.01-.01-.01h4.02c-.01 0-.01 0-.01.01V9.99c0 .01 0 .01.01.01H9.99c.01 0 .01 0 .01-.01zm-1 0c0-.546.451-.99.99-.99h4.02c.546 0 .99.451.99.99v4.02c0 .546-.451.99-.99.99H9.99a.996.996 0 0 1-.99-.99V9.99zM2 9.99v4.02C2 14 2 14 1.99 14h4.02C6 14 6 14 6 14.01V9.99c0 .01 0 .01.01.01H1.99C2 10 2 10 2 9.99zm-1 0c0-.546.451-.99.99-.99h4.02c.546 0 .99.451.99.99v4.02c0 .546-.451.99-.99.99H1.99a.996.996 0 0 1-.99-.99V9.99z"/>
+</svg>

devtools/client/themes/images/command-paintflashing.svg

@@ -1,7 +1,7 @@
 <!-- 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" viewBox="0 0 16 16" fill="whitesmoke">
-  <path opacity="0.5" d="M4 11h10v3H4z"/>
-  <path d="M4.7 6.1h7.6c.4 0 .7-.1.7-.5s-.3-.5-.7-.5H8.9V2.3c0-.4-.1-.7-.5-.7s-.5.4-.5.7v2.8H4.7c-.4 0-.7.1-.7.5s.3.5.7.5zM13.3 6.8H3.9c-.4 0-.8.4-.8.9v6.2c0 .4.3.9.8.9h9.4c.4 0 .8-.4.8-.9V7.7s-.6-.9-.8-.9zm-.2 7h-9v-6h9v6z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <path d="M3 6.997v6.006c0-.006.003-.003.002-.003h9.996c-.001 0 .002-.003.002.003V6.997c0 .006-.003.003-.002.003H3.002C3.003 7 3 7.003 3 6.997zm-1 0C2 6.447 2.456 6 3.002 6h9.996C13.55 6 14 6.453 14 6.997v6.006c0 .55-.456.997-1.002.997H3.002A1.004 1.004 0 0 1 2 13.003V6.997zM8.5 4V1.5a.5.5 0 0 0-1 0V4H4a.5.5 0 0 0 0 1h8a.5.5 0 1 0 0-1H8.5z"/>
+  <path fill-opacity=".3" d="M13 10v3H3v-3z"/>
 </svg>

devtools/client/themes/images/command-pick.svg

@@ -1,8 +1,9 @@
 <!-- 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" viewBox="0 0 16 16" fill="whitesmoke">
-  <path opacity="0.5" d="M8.1 8l1.5 5.5 3.7-3z"/>
-  <path d="M12.7 2H.8c-.4 0-.8.5-.8.9v8.8c0 .5.4 1.3.8 1.3h6.5l.1-1H1V3h12v5.4l1 .8V2.9c0-.4-.8-.9-1.3-.9zM11.2 12.2l2.4 2.3.7-.6-2.4-2.4z"/>
-  <path d="M8.8 7.6c-.4-.1-.9-.1-1.2.2-.2.3-.1 1-.1 1l2.1 5.4 4.7-3.8-5.5-2.8zm-.5.7l4.4 2.2-2.8 2.2-1.6-4.4z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <path d="M15 7.667V3.002A1.01 1.01 0 0 0 13.993 2H2.007C1.45 2 1 2.449 1 3.002v9.996C1 13.544 1.45 14 2.007 14h6.818l-.37-1H2V3h12v4.334l1 .333z"/>
+  <path fill-opacity=".3" d="M9 8l1.981 5.843 4.044-3.966z"/>
+  <path d="M8.526 8.16l1.982 5.844a.5.5 0 0 0 .824.196l4.043-3.966a.5.5 0 0 0-.202-.835L9.15 7.523a.5.5 0 0 0-.623.638zm.948-.32l-.623.637 6.025 1.877-.201-.834-4.044 3.966.824.197-1.981-5.844z"/>
+  <path d="M12.674 12.39l1.973 1.964a.5.5 0 1 0 .706-.708L13.38 11.68a.5.5 0 0 0-.706.709z"/>
 </svg>

devtools/client/themes/images/command-scratchpad.svg

@@ -1,7 +1,7 @@
 <!-- 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" viewBox="0 0 16 16" fill="whitesmoke">
-  <path d="M13.2 3h-1.3v-.8c0-.3-.3-.6-.6-.6s-.6.3-.6.6V3H7.8v-.8c0-.3-.3-.6-.6-.6s-.7.2-.7.6V3H3.7v-.8c0-.3-.3-.6-.6-.6s-.6.2-.6.6V3H.8c-.4 0-.8.4-.8.9v10.2c0 .4.3.9.8.9h12.4c.4 0 .8-.4.8-.9V3.9s-.6-.9-.8-.9zM13 14H1V3.9h12V14z"/>
-  <path d="M8.7 12.1h-6c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h6c.3 0 .5.2.5.5s-.3.5-.5.5zM11.5 9.9H5.4c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h6.1c.3 0 .5.2.5.5s-.2.5-.5.5zM7.7 7.8H3c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h4.7c.3 0 .5.2.5.5s-.2.5-.5.5z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <path d="M5 1.5a.5.5 0 0 0-1 0v2a.5.5 0 0 0 1 0v-2zM8.5 3.5v-2a.5.5 0 0 0-1 0v2a.5.5 0 0 0 1 0zM12 3.5v-2a.5.5 0 1 0-1 0v2a.5.5 0 1 0 1 0zM5 7h4a.5.5 0 0 0 0-1H5a.5.5 0 0 0 0 1zM5 11h2a.5.5 0 1 0 0-1H5a.5.5 0 1 0 0 1zM6 9h5a.5.5 0 1 0 0-1H6a.5.5 0 0 0 0 1z"/>
+  <path d="M3 3.996v9.008c0-.003 0-.004.002-.004h9.996c-.001 0 .002-.003.002.004V3.996c0 .003 0 .004-.002.004H3.002C3.003 4 3 4.003 3 3.996zm-1 0C2 3.446 2.456 3 3.002 3h9.996A.998.998 0 0 1 14 3.996v9.008c0 .55-.456.996-1.002.996H3.002A.998.998 0 0 1 2 13.004V3.996z"/>
 </svg>

devtools/client/themes/images/debugger-blackbox.svg

@@ -0,0 +1,7 @@
+<!-- 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" fill="whitesmoke">
+  <circle cx="8" cy="8.5" r="1.5"/>
+  <path d="M15.498 8.28l-.001-.03v-.002-.004l-.002-.018-.004-.031c0-.002 0-.002 0 0l-.004-.035.006.082c-.037-.296-.133-.501-.28-.661-.4-.522-.915-1.042-1.562-1.604-1.36-1.182-2.74-1.975-4.178-2.309a6.544 6.544 0 0 0-2.755-.042c-.78.153-1.565.462-2.369.91C3.252 5.147 2.207 6 1.252 7.035c-.216.233-.36.398-.499.577-.338.437-.338 1 0 1.437.428.552.941 1.072 1.59 1.635 1.359 1.181 2.739 1.975 4.177 2.308.907.21 1.829.223 2.756.043.78-.153 1.564-.462 2.369-.91 1.097-.612 2.141-1.464 3.097-2.499.217-.235.36-.398.498-.578.12-.128.216-.334.248-.554 0 .01 0 .01-.008.04l.013-.079-.001.011.003-.031.001-.017v.005l.001-.02v.008l.002-.03.001-.05-.001-.044v-.004-.004zm-.954.045v.007l.001.004V8.33v.012l-.001.01v-.005-.005l.002-.015-.001.008c-.002.014-.002.014 0 0l-.007.084c.003-.057-.004-.041-.014-.031-.143.182-.27.327-.468.543-.89.963-1.856 1.752-2.86 2.311-.724.404-1.419.677-2.095.81a5.63 5.63 0 0 1-2.374-.036c-1.273-.295-2.523-1.014-3.774-2.101-.604-.525-1.075-1.001-1.457-1.496-.054-.07-.054-.107 0-.177.117-.152.244-.298.442-.512.89-.963 1.856-1.752 2.86-2.311.724-.404 1.419-.678 2.095-.81a5.631 5.631 0 0 1 2.374.036c1.272.295 2.523 1.014 3.774 2.101.603.524 1.074 1 1.457 1.496.035.041.043.057.046.076 0 .01 0 .01.008.043l-.009-.047.003.02-.002-.013v-.008.016c0-.004 0-.004 0 0v-.004z"/>
+</svg>

devtools/client/themes/images/debugger-prettyprint.svg

@@ -0,0 +1,6 @@
+<!-- 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" fill="whitesmoke">
+  <path d="M5.5 2C3.565 2 2.806 3.12 3.065 4.587c.239 1.346.117 1.76-.435 2.39l-.054.06c-.252.288-.39.474-.523.74L1.94 8l.112.224c.132.265.27.45.523.739l.054.06c.552.63.674 1.044.435 2.39C2.802 12.904 3.527 14 5.5 14a.5.5 0 1 0 0-1c-1.291 0-1.614-.487-1.45-1.413.292-1.65.081-2.37-.669-3.223l-.053-.06c-.2-.229-.296-.357-.38-.528v.448c.084-.17.18-.299.38-.528l.053-.06c.75-.854.961-1.573.67-3.223C3.89 3.515 4.24 3 5.5 3a.5.5 0 1 0 0-1zM10.5 3c1.26 0 1.609.515 1.45 1.413-.292 1.65-.081 2.37.669 3.223l.053.06c.2.229.296.357.38.528v-.448c-.084.17-.18.299-.38.528l-.053.06c-.75.854-.961 1.573-.67 3.223.165.926-.158 1.413-1.449 1.413a.5.5 0 1 0 0 1c1.973 0 2.698-1.096 2.435-2.587-.239-1.346-.117-1.76.435-2.39l.054-.06c.252-.288.39-.474.523-.74L14.06 8l-.112-.224c-.132-.265-.27-.45-.523-.739l-.054-.06c-.552-.63-.674-1.044-.435-2.39C13.194 3.12 12.435 2 10.5 2a.5.5 0 0 0 0 1z"/>
+</svg>

devtools/client/themes/images/debugger-step-in.svg

@@ -0,0 +1,6 @@
+<!-- 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" fill="whitesmoke">
+  <path d="M1.5 14.042h4.095a.5.5 0 0 0 0-1H1.5a.5.5 0 1 0 0 1zM7.5 3v6.983L4.364 6.657a.5.5 0 0 0-.728.686l4 4.243a.51.51 0 0 0 .021.02.5.5 0 0 0 .71-.024l3.997-4.239a.5.5 0 1 0-.728-.686L8.5 9.983V2.5a.5.5 0 0 0-.536-.5H1.536C1.24 2 1 2.224 1 2.5s.24.5.536.5H7.5zM10.5 14.042h4.095a.5.5 0 0 0 0-1H10.5a.5.5 0 1 0 0 1z"/>
+</svg>

devtools/client/themes/images/debugger-step-out.svg

@@ -0,0 +1,6 @@
+<!-- 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" fill="whitesmoke">
+  <path d="M5 13.5H1a.5.5 0 1 0 0 1h4a.5.5 0 1 0 0-1zM12 13.5H8a.5.5 0 1 0 0 1h4a.5.5 0 1 0 0-1zM6.11 5.012A.427.427 0 0 1 6.21 5h7.083L9.646 1.354a.5.5 0 1 1 .708-.708l4.5 4.5a.498.498 0 0 1 0 .708l-4.5 4.5a.5.5 0 0 1-.708-.708L13.293 6H6.5v5.5a.5.5 0 1 1-1 0v-6a.5.5 0 0 1 .61-.488z"/>
+</svg>

devtools/client/themes/images/debugger-step-over.svg

@@ -0,0 +1,7 @@
+<!-- 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" fill="whitesmoke">
+  <path d="M13.297 6.912C12.595 4.39 10.167 2.5 7.398 2.5A5.898 5.898 0 0 0 1.5 8.398a.5.5 0 0 0 1 0A4.898 4.898 0 0 1 7.398 3.5c2.75 0 5.102 2.236 5.102 4.898v.004L8.669 7.029a.5.5 0 0 0-.338.942l4.462 1.598a.5.5 0 0 0 .651-.34.506.506 0 0 0 .02-.043l2-5a.5.5 0 1 0-.928-.372l-1.24 3.098z"/>
+  <circle cx="7" cy="12" r="1"/>
+</svg>

devtools/client/themes/images/debugger-toggleBreakpoints.svg

@@ -1,6 +1,6 @@
 <!-- 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="32" height="16" fill="#babec3">
-  <path d="M1 5c-.553 0-1 .45-1 .99v4.02c0 .546.447.99 1 .99h12l3-3-3-3H1zm16 6c-.553 0-1-.45-1-.99V5.99c0-.546.45-.99 1.008-.99h8.577l3.208-3.207.707-.707L30.914 2.5l-.707.707-11 11-.707.707-1.414-1.414.707-.707L19.586 11H17zm12 0l3-3-2.18-2.697L24 11h5z"/>
+<svg width="32" height="16" viewBox="0 0 32 16" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <path d="M3.233 11.25l-.417 1H1.712C.763 12.25 0 11.574 0 10.747V6.503C0 5.675.755 5 1.712 5h4.127l-.417 1H1.597C1.257 6 1 6.225 1 6.503v4.244c0 .277.267.503.597.503h1.636zM7.405 11.02L7 12.056c.865.01 2.212-.024 2.315-.04.112-.016.112-.016.185-.035.075-.02.156-.046.251-.082.152-.056.349-.138.592-.244.415-.182.962-.435 1.612-.744l.138-.066a179.35 179.35 0 0 0 2.255-1.094c1.191-.546 1.191-2.074-.025-2.632l-.737-.34A3547.554 3547.554 0 0 0 9.732 5c-.029.11-.065.222-.11.336l-.232.596c.894.408 4.56 2.107 4.56 2.107.458.21.458.596 0 .806L9.197 11.02H7.405zM20.462 14.192l5-12a.5.5 0 0 0-.924-.384l-5 12a.5.5 0 0 0 .924.384zM19.233 11.25l-.417 1h-1.104c-.949 0-1.712-.676-1.712-1.503V6.503C16 5.675 16.755 5 17.712 5h4.127l-.417 1h-3.825c-.34 0-.597.225-.597.503v4.244c0 .277.267.503.597.503h1.636zM23.405 11.02L23 12.056c.865.01 2.212-.024 2.315-.04.112-.016.112-.016.185-.035.075-.02.156-.046.251-.082.152-.056.349-.138.592-.244.415-.182.962-.435 1.612-.744l.138-.066a179.35 179.35 0 0 0 2.255-1.094c1.191-.546 1.191-2.074-.025-2.632l-.737-.34A3547.554 3547.554 0 0 0 25.732 5c-.029.11-.065.222-.11.336l-.232.596c.894.408 4.56 2.107 4.56 2.107.458.21.458.596 0 .806l-4.753 2.174h-1.792z"/>
 </svg>

devtools/client/themes/images/diff.svg

@@ -1,7 +1,9 @@
 <!-- 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 height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#babec3">
-  <path d="M10.2 4.1c-.6 0-1.2.2-1.8.4-.6-.4-1.4-.6-2.2-.6-2.5 0-4.6 2.1-4.6 4.6s2.1 4.6 4.6 4.6c.9 0 1.6-.2 2.3-.7.5.2 1.1.4 1.7.4 2.4 0 4.3-1.9 4.3-4.3.1-2.4-1.9-4.4-4.3-4.4zm-4 7.9c-1.9 0-3.5-1.6-3.5-3.5S4.2 5 6.2 5c.3 0 .7 0 1 .1-.8.9-1.4 2.1-1.4 3.4 0 1.3.6 2.5 1.5 3.3-.4.1-.8.2-1.1.2zm2.1-.7c-.9-.6-1.4-1.6-1.4-2.8 0-1.1.6-2.1 1.4-2.8.8.6 1.4 1.6 1.4 2.8 0 1.1-.6 2.1-1.4 2.8z"/>
-  <path d="M7.6 8c-.2 0-.3-.1-.4-.2-.1-.2 0-.4.2-.5l1.1-.6c.2-.1.4 0 .5.2.1.2 0 .4-.2.5l-1.1.5c0 .1-.1.1-.1.1zM7.6 9.1c-.1 0-.3-.1-.4-.2-.1-.2 0-.4.2-.5l1.1-.6c.3-.1.5 0 .6.2.1.2 0 .4-.2.5l-1.1.6h-.2zM7.8 10.3c-.1 0-.3-.1-.4-.2-.1-.2 0-.4.2-.5L8.8 9c.2-.1.4 0 .5.2.1.2 0 .4-.2.5l-1.1.6h-.2z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <path d="M6 13A5 5 0 1 0 6 3a5 5 0 0 0 0 10zm0-.91a4.09 4.09 0 1 1 0-8.18 4.09 4.09 0 0 1 0 8.18z"/>
+  <path d="M10 13a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0-.91a4.09 4.09 0 1 1 0-8.18 4.09 4.09 0 0 1 0 8.18z"/>
+  <path d="M7.146 8.854l1 1a.5.5 0 0 0 .708-.708l-1-1a.5.5 0 1 0-.708.708zM7.146 6.854l1 1a.5.5 0 1 0 .708-.708l-1-1a.5.5 0 1 0-.708.708z"/>
+  <path d="M12.656 11.723c-2.044 1.169-3.872 1.015-4.282.577-.41-.438 2.115-1.269 2.115-3.925 0-2.657-2.115-4.827-2.115-4.827s2.919-.47 4.282.624c1.364 1.094 2.12 1.975 1.85 3.828-.103.703.194 2.555-1.85 3.723z" fill-opacity=".3"/>
 </svg>

devtools/client/themes/images/dock-bottom.svg

@@ -1,6 +1,6 @@
 <!-- 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" fill="whitesmoke">
-  <path d="M11.9 13.5V3.9c0-.3-.3-.7-.7-.7H2c-.3 0-.7.2-.7.7v9.6c0 .3.3.7.7.7h9.2c.6-.1.7-.6.7-.7zM2.1 9.3V4h9v5.3h-9zm0 3.9v-3h9v3h-9z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <path d="M10.004 3H.996C.999 3 1 3 1 3.002v9.996c0-.001.003.002-.004.002h9.008c-.003 0-.004 0-.004-.002V3.002c0 .001-.003-.002.004-.002zm0-1c.55 0 .996.456.996 1.002v9.996A.998.998 0 0 1 10.004 14H.996C.446 14 0 13.544 0 12.998V3.002A.998.998 0 0 1 .996 2h9.008zm-.41 8H.996v1h9.01v-1h-.41z"/>
 </svg>

devtools/client/themes/images/dock-side.svg

@@ -1,6 +1,3 @@
-<!-- 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" fill="whitesmoke">
-  <path d="M-1.5 3.2h-9.6c-.1 0-.2.1-.2.2V13c0 .1.1.2.2.2h9.6c.1 0 .2-.1.2-.2V3.4c0-.1-.1-.2-.2-.2zm-3.6 8.9h-5V4.4h5v7.7zm3.2-.1h-2.7V4.4h2.7V12zM11.1 3.2H.9c-.3 0-.7.3-.7.7v9.2c0 .3.2.7.7.7h10.2c.3 0 .7-.3.7-.7V3.9c-.1-.6-.6-.7-.7-.7zM6.9 13H1.1V4H7v9zm4 0h-3V4h3v9z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <path d="M1 2.996v9.008c0-.003 0-.004.002-.004h9.996c-.001 0 .002-.003.002.004V2.996c0 .003 0 .004-.002.004H1.002C1.003 3 1 3.003 1 2.996zm-1 0C0 2.446.456 2 1.002 2h9.996A.998.998 0 0 1 12 2.996v9.008c0 .55-.456.996-1.002.996H1.002A.998.998 0 0 1 0 12.004V2.996zm8 .413V12h1V3H8v.41z"/>
 </svg>

devtools/client/themes/images/dock-undock.svg

@@ -1,7 +1,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" width="16" height="16" viewBox="0 0 16 16" fill="whitesmoke">
-  <path d="M4.3 2.8v5.9c0 .2.2.4.5.4h5.7c.2 0 .5-.2.5-.4V2.8c0-.2-.2-.4-.5-.4H4.8c-.4 0-.5.3-.5.4zm5.8 2.8v2.6h-5V5.6h5zm0-2.5V5h-5V3.1h5z"/>
-  <path d="M7.1 9.9v2.2h-5V9.7h1.2V9H2.1V7h1.2v-.7H1.7c-.4 0-.5.3-.5.4v5.9c0 .2.2.4.5.4h5.7c.2 0 .5-.2.5-.4V9.9h-.8z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <path d="M13.003 1.941H6.997c.008 0 .003.004.003.008v6.102c0 .004.004.008-.003.008h6.006c-.008 0-.003-.004-.003-.008V1.949c0-.004-.004-.008.003-.008zm0-.941c.55 0 .997.43.997.95v6.1c0 .525-.453.95-.997.95H6.997C6.447 9 6 8.57 6 8.05v-6.1c0-.525.453-.95.997-.95h6.006z"/>
+  <path d="M9 9.91v-.278h1v1.183c0 .516-.453.935-.997.935H2.997c-.55 0-.997-.43-.997-.95V4.7c0-.525.444-.95 1.006-.95h2.288v.941H3.006C3 4.691 3 4.691 3 4.7v6.102c0 .004.004.008-.003.008h6.006c-.004 0-.003-.001-.003.006v-.248-.657-.278h1v1.183c0 .516-.453.935-.997.935H2.997c-.55 0-.997-.43-.997-.95V4.7c0-.525.444-.95 1.006-.95h2.288v.941H3.006C3 4.691 3 4.691 3 4.7v6.102c0 .004.004.008-.003.008h6.006c-.004 0-.003-.001-.003.006v-.248-.657z"/>
+  <path d="M12.52 5H6.976v1h6.046V5zM6.5 7H2.975v1H7V7z"/>
 </svg>

devtools/client/themes/images/fast-forward.svg

@@ -0,0 +1,6 @@
+<!-- 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" fill="whitesmoke">
+  <path d="M4 12.5l8-5-8-5v10zm-1 0v-10a1 1 0 0 1 1.53-.848l8 5a1 1 0 0 1 0 1.696l-8 5A1 1 0 0 1 3 12.5zM15 12.497l-.04-7.342-.01-1.658A.488.488 0 0 0 14.474 3a.488.488 0 0 0-.473.503l.05 9a.488.488 0 0 0 .477.497.488.488 0 0 0 .473-.503z"/>
+</svg>

devtools/client/themes/images/filter.svg

@@ -2,6 +2,6 @@
    - 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" fill="#aaa">
-  <path fill-opacity="0.3" d="M6.6 8.4c0-.6-1.7.3-1.7-.3C4.9 7.7 2.4 4 2.4 4h11.3s-2.5 3.4-2.5 4.1c0 .3-2.1-.1-2.1.3v5.9H7s-.4-3.9-.4-5.9z"/>
-  <path d="M2 2v2.3l2.7 4.5h1.6v5.5s1.1.6 1.8.6c.5 0 1.8-.6 1.8-.6V8.8h1.6L14 4.3V2H2zm10.8 2l-2.1 3.6H8.5v5.9c-.1 0-.1.1-.2.1-.2.1-.3.1-.3.1s-.1 0-.2-.1c-.1 0-.2-.1-.3-.1V7.6H5.4L3.2 4v-.8h9.5V4z"/>
+  <path fill-opacity=".3" d="M6.6 8.4c0-.6-1.7.3-1.7-.3 0-.4-1.7-2.7-1.7-2.7H13s-1.8 2-1.8 2.7c0 .3-2.1-.1-2.1.3v6.1H7s-.4-4.1-.4-6.1z"/>
+  <path d="M2 2v2.3L4.7 9H6v5.4l2.1 1 1.8-.9V9h1.3L14 4.3V2H2zm11 2l-2.2 4H9v5.8l-.9.4-1.1-.5V8H5.2L3 4V3h10v1z"/>
 </svg>

devtools/client/themes/images/import.svg

@@ -0,0 +1,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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <path d="M7.864 1.417c-.123-.13-.305-.185-.48-.144-.173.04-.312.172-.363.343-.05.17-.007.357.116.487l4 4.243c.19.2.506.21.707.02.2-.188.21-.505.02-.706l-4-4.243z"/>
+  <path d="M7.136 1.414l-4 4.243c-.19.2-.18.518.02.707.202.19.52.18.708-.02l4-4.244c.123-.13.166-.316.115-.487-.052-.17-.19-.302-.365-.343-.174-.04-.356.014-.48.144zM1.5 8c-.276 0-.5.224-.5.5v5c0 .2.224.5.5.5h12c.276 0 .5-.3.5-.5v-5c0-.276-.224-.5-.5-.5h-3c-.28 0-.5.224-.5.5s.22.5.5.5H13v4H2V9h2.5c.27 0 .5-.224.5-.5S4.77 8 4.5 8h-3z"/>
+  <path d="M7 2v9c0 .276.224.5.5.5s.5-.224.5-.5V2c0-.276-.224-.5-.5-.5S7 1.724 7 2z"/>
+</svg>

devtools/client/themes/images/itemToggle.svg

@@ -0,0 +1,7 @@
+<!-- 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" fill="whitesmoke">
+  <circle cx="8" cy="8.5" r="1.5"/>
+  <path d="M15.498 8.28l-.001-.03v-.002-.004l-.002-.018-.004-.031c0-.002 0-.002 0 0l-.004-.035.006.082c-.037-.296-.133-.501-.28-.661-.4-.522-.915-1.042-1.562-1.604-1.36-1.182-2.74-1.975-4.178-2.309a6.544 6.544 0 0 0-2.755-.042c-.78.153-1.565.462-2.369.91C3.252 5.147 2.207 6 1.252 7.035c-.216.233-.36.398-.499.577-.338.437-.338 1 0 1.437.428.552.941 1.072 1.59 1.635 1.359 1.181 2.739 1.975 4.177 2.308.907.21 1.829.223 2.756.043.78-.153 1.564-.462 2.369-.91 1.097-.612 2.141-1.464 3.097-2.499.217-.235.36-.398.498-.578.12-.128.216-.334.248-.554 0 .01 0 .01-.008.04l.013-.079-.001.011.003-.031.001-.017v.005l.001-.02v.008l.002-.03.001-.05-.001-.044v-.004-.004zm-.954.045v.007l.001.004V8.33v.012l-.001.01v-.005-.005l.002-.015-.001.008c-.002.014-.002.014 0 0l-.007.084c.003-.057-.004-.041-.014-.031-.143.182-.27.327-.468.543-.89.963-1.856 1.752-2.86 2.311-.724.404-1.419.677-2.095.81a5.63 5.63 0 0 1-2.374-.036c-1.273-.295-2.523-1.014-3.774-2.101-.604-.525-1.075-1.001-1.457-1.496-.054-.07-.054-.107 0-.177.117-.152.244-.298.442-.512.89-.963 1.856-1.752 2.86-2.311.724-.404 1.419-.678 2.095-.81a5.631 5.631 0 0 1 2.374.036c1.272.295 2.523 1.014 3.774 2.101.603.524 1.074 1 1.457 1.496.035.041.043.057.046.076 0 .01 0 .01.008.043l-.009-.047.003.02-.002-.013v-.008.016c0-.004 0-.004 0 0v-.004z"/>
+</svg>

devtools/client/themes/images/pane-collapse.svg

@@ -1,6 +1,9 @@
 <!-- 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" fill="#babec3">
-  <path d="M2 2h12v12H2V2zm1 1h7v10H3V3zm6 5l-4 3V5l4 3z" fill-rule="evenodd"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <path fill-opacity=".3" d="M12 3h2v10h-2z"/>
+  <path d="M2 3.002v9.996c0-.004.006.002.007.002h11.986c.005 0 .007-.002.007-.002V3.002c0 .004-.006-.002-.007-.002H2.007C2.002 3 2 3.002 2 3.002zm-1 0C1 2.45 1.45 2 2.007 2h11.986A1.01 1.01 0 0 1 15 3.002v9.996C15 13.55 14.55 14 13.993 14H2.007A1.01 1.01 0 0 1 1 12.998V3.002zm10 .453V13h1V3h-1v.455z"/>
+  <path d="M5 10.25l3-1.875L5 6.5v3.75zm-1 0V6.5a1 1 0 0 1 1.53-.848l3 1.875a1 1 0 0 1 0 1.696l-3 1.875A1 1 0 0 1 4 10.25z"/>
+  <path fill-opacity=".3" d="M4.5 10.75V6L9 8.375z"/>
 </svg>

devtools/client/themes/images/pane-expand.svg

@@ -1,6 +1,9 @@
 <!-- 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" fill="#babec3">
-  <path d="M2 2h12v12H2V2zm1 1h7v10H3V3zm1 5l4 3V5L4 8z" fill-rule="evenodd"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <path fill-opacity=".3" d="M12 3h2v10h-2z"/>
+  <path d="M2 3.002v9.996c0-.004.006.002.007.002h11.986c.005 0 .007-.002.007-.002V3.002c0 .004-.006-.002-.007-.002H2.007C2.002 3 2 3.002 2 3.002zm-1 0C1 2.45 1.45 2 2.007 2h11.986A1.01 1.01 0 0 1 15 3.002v9.996C15 13.55 14.55 14 13.993 14H2.007A1.01 1.01 0 0 1 1 12.998V3.002zm10 .453V13h1V3h-1v.455z"/>
+  <path d="M8 6.5L5 8.375l3 1.875V6.5zm1 0v3.75a1 1 0 0 1-1.53.848l-3-1.875a1 1 0 0 1 0-1.696l3-1.875A1 1 0 0 1 9 6.5z"/>
+  <path fill-opacity=".3" d="M8.5 6v4.75L4 8.375z"/>
 </svg>

devtools/client/themes/images/pause.svg

@@ -0,0 +1,6 @@
+<!-- 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" fill="whitesmoke">
+  <path d="M5 12.503l.052-9a.5.5 0 0 0-1-.006l-.052 9a.5.5 0 0 0 1 .006zM12 12.497l-.05-9A.488.488 0 0 0 11.474 3a.488.488 0 0 0-.473.503l.05 9a.488.488 0 0 0 .477.497.488.488 0 0 0 .473-.503z"/>
+</svg>

devtools/client/themes/images/performance-icons.svg

@@ -1,45 +1,42 @@
 <!-- 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="16px" height="16px">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="whitesmoke">
   <style>
-    g {
-      fill: #babec3;
-    }
     g:not(:target) {
       display: none;
     }
   </style>
   <g id="overview-markers">
-    <rect x="0px" y="3px" width="5px" height="2.5px" rx="1" ry="1"/>
-    <rect x="7px" y="3px" width="9px" height="2.5px" rx="1" ry="1"/>
-    <rect x="0px" y="7px" width="9px" height="2.5px" rx="1" ry="1"/>
-    <rect x="10px" y="7px" width="6px" height="2.5px" rx="1" ry="1"/>
-    <rect x="4px" y="11px" width="5px" height="2.5px" rx="1" ry="1"/>
-    <rect x="12px" y="11px" width="4px" height="2.5px" rx="1" ry="1"/>
+    <rect x="0" y="4" width="5" height="1"/>
+    <rect x="7" y="4" width="9" height="1"/>
+    <rect x="0" y="8" width="8" height="1"/>
+    <rect x="10" y="8" width="6" height="1"/>
+    <rect x="0" y="12" width="9" height="1"/>
+    <rect x="12" y="12" width="4" height="1"/>
   </g>
   <g id="overview-frames">
-    <rect x="1px" y="4px" width="2px" height="12px" rx="1" ry="1"/>
-    <rect x="5px" y="12px" width="2px" height="4px" rx="1" ry="1"/>
-    <rect x="9px" y="9px" width="2px" height="7px" rx="1" ry="1"/>
-    <rect x="13px" y="7px" width="2px" height="9px" rx="1" ry="1"/>
+    <rect x="1" y="4" width="2" height="12" rx="1" ry="1"/>
+    <rect x="5" y="12" width="2" height="4" rx="1" ry="1"/>
+    <rect x="9" y="9" width="2" height="7" rx="1" ry="1"/>
+    <rect x="13" y="7" width="2" height="9" rx="1" ry="1"/>
   </g>
   <g id="details-waterfall">
-    <rect x="0px" y="3px" width="9px" height="2.5px" rx="1" ry="1"/>
-    <rect x="5px" y="7px" width="8px" height="2.5px" rx="1" ry="1"/>
-    <rect x="7px" y="11px" width="9px" height="2.5px" rx="1" ry="1"/>
+    <rect x="0" y="4" width="9" height="1"/>
+    <rect x="5" y="8" width="8" height="1"/>
+    <rect x="7" y="12" width="9" height="1"/>
   </g>
   <g id="details-call-tree">
-    <rect x="0px" y="3px" width="16px" height="2px" rx="1" ry="1"/>
-    <rect x="0px" y="6px" width="8px" height="2px" rx="1" ry="1"/>
-    <rect x="0px" y="9px" width="11px" height="2px" rx="1" ry="1"/>
-    <rect x="0px" y="12px" width="6px" height="2px" rx="1" ry="1"/>
+    <rect x="1" y="4" width="10" height="1"/>
+    <rect x="5" y="7" width="10" height="1"/>
+    <rect x="1" y="10" width="10" height="1"/>
+    <rect x="5" y="13" width="10" height="1"/>
   </g>
   <g id="details-flamegraph">
-    <rect x="0px" y="3px" width="16px" height="2px" rx="1" ry="1"/>
-    <rect x="0px" y="6px" width="8px" height="2px" rx="1" ry="1"/>
-    <rect x="10px" y="6px" width="6px" height="2px" rx="1" ry="1"/>
-    <rect x="2px" y="9px" width="6px" height="2px" rx="1" ry="1"/>
-    <rect x="5px" y="12px" width="3px" height="2px" rx="1" ry="1"/>
+    <rect x="0" y="4" width="16" height="1"/>
+    <rect x="0" y="7" width="8" height="1"/>
+    <rect x="10" y="7" width="6" height="1"/>
+    <rect x="2" y="10" width="6" height="1"/>
+    <rect x="5" y="13" width="3" height="1"/>
   </g>
 </svg>

devtools/client/themes/images/play.svg

@@ -0,0 +1,6 @@
+<!-- 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" fill="whitesmoke">
+  <path d="M4 12.5l8-5-8-5v10zm-1 0v-10a1 1 0 0 1 1.53-.848l8 5a1 1 0 0 1 0 1.696l-8 5A1 1 0 0 1 3 12.5z" fill-rule="evenodd"/>
+</svg>

devtools/client/themes/images/power.svg

@@ -1,14 +1,7 @@
-<!--
-Logo from raphaeljs.com, MIT License
-
-Copyright © 2008 Dmitry Baranovskiy
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-The software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
--->
-<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-  <path stroke="#babec3" stroke-width="0" fill="#babec3" d="m10.89891,2.50043c-0.49827,-0.24134 -1.09841,-0.03411 -1.34129,0.46514c-0.24185,0.49928 -0.03311,1.09942 0.46517,1.34128c1.56306,0.76071 2.64193,2.36094 2.64092,4.21555c-0.00501,2.58626 -2.09749,4.6787 -4.68322,4.68321c-2.58623,-0.005 -4.67869,-2.09746 -4.68371,-4.68321c-0.001,-1.85561 1.07834,-3.45731 2.64294,-4.21654c0.49928,-0.24185 0.7065,-0.84201 0.46514,-1.34129c-0.24185,-0.49825 -0.84098,-0.70697 -1.34029,-0.46513c-2.23396,1.08135 -3.77446,3.37351 -3.77545,6.02296c0.00099,3.69518 2.99518,6.68989 6.69138,6.69088c3.6957,-0.00099 6.69037,-2.9957 6.69089,-6.69088c-0.00102,-2.64846 -1.53948,-4.9391 -3.77247,-6.02197zm-2.91842,4.9346c0.55398,0 1.00309,-0.44861 1.00309,-1.00357l0,-4.68373c0,-0.55446 -0.44911,-1.00309 -1.00309,-1.00309c-0.555,0 -1.00358,0.44911 -1.00358,1.00309l0,4.68321c0,0.55499 0.44858,1.00409 1.00358,1.00409z"/>
+<!-- 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" fill="whitesmoke">
+  <path d="M8 14.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0-1a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z"/>
+  <path d="M8.5 7.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
 </svg>

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

@@ -1,17 +1,11 @@
 <!-- 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="#babec3" 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>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <g fill-rule="evenodd">
+    <path d="M15 9.004C14.51 12.394 11.578 15 8.035 15 4.15 15 1 11.866 1 8s3.15-7 7.036-7c1.941 0 3.7.783 4.972 2.048l-.709.709A6.027 6.027 0 0 0 8.036 2c-3.33 0-6.03 2.686-6.03 6s2.7 6 6.03 6a6.023 6.023 0 0 0 5.946-4.993l1.017-.003z"/>
+    <path d="M4.137 9H3.1a5.002 5.002 0 0 0 9.8 0h-.965a4.023 4.023 0 0 1-3.9 3 4.023 4.023 0 0 1-3.898-3z" fill-opacity=".5"/>
+    <path d="M8.036 11a2.994 2.994 0 0 0 2.987-3c0-1.657-1.338-3-2.987-3a2.994 2.994 0 0 0-2.988 3c0 1.657 1.338 3 2.988 3zm0-1c1.11 0 2.011-.895 2.011-2s-.9-2-2.011-2c-1.111 0-2.012.895-2.012 2s.9 2 2.012 2z"/>
+    <path d="M10.354 6.354l4-4a.5.5 0 0 0-.708-.708l-4 4a.5.5 0 1 0 .708.708z"/>
   </g>
 </svg>

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

@@ -1,20 +1,7 @@
 <!-- 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" color="#babec3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <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>
-  </defs>
-  <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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="whitesmoke">
+  <path d="M11 7V5.5c0-.3-.2-.5-.5-.5h-5c-.3 0-.5.2-.5.5v5c0 .3.2.5.5.5h1.9V7.5c0-.3.2-.5.5-.5H11zM3 7H.8c-.1 0-.6 0-.7-.7-.1-.2-.1-.4-.1-.6v-5C0 .5 0 .3.2.1.4 0 .6 0 .7 0h5.2c.3 0 .6 0 .8.2.2.1.3.3.3.5V3H3v4zM1 6h1V2.7c0-.2.1-.4.2-.5.3-.2.6-.2.8-.2h3V1H1v5z"/>
+  <path d="M9 9h1v1H9V9zm5 1h-1V9h1v1zm-2 0h-1V9h1v1zm3-1h1v1h-1V9zm1 5h-1v-1h1v1zm0-2h-1v-1h1v1zm-1 3h1v1h-1v-1zm-1 1h-1v-1h1v1zm-2 0h-1v-1h1v1zm-3-1h1v1H9v-1zm1-1H9v-1h1v1zm0-2H9v-1h1v1z"/>
 </svg>

devtools/client/themes/images/rewind.svg

@@ -0,0 +1,6 @@
+<!-- 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" fill="whitesmoke">
+  <path d="M13 2.5l-8 5 8 5v-10zm1 0v10a1 1 0 0 1-1.53.848l-8-5a1 1 0 0 1 0-1.696l8-5A1 1 0 0 1 14 2.5zM2 12.497l-.04-7.342-.01-1.658A.488.488 0 0 0 1.474 3 .488.488 0 0 0 1 3.503l.05 9a.488.488 0 0 0 .477.497.488.488 0 0 0 .473-.503z"/>
+</svg>

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

@@ -1,6 +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">
-  <path fill="#babec3" d="M2,2v3l5,4v6h2v-6l5,-4v-3L14,2z"/>
-</svg>

devtools/client/themes/images/tool-canvas.svg

@@ -1,7 +1,9 @@
 <!-- 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" fill="whitesmoke">
-  <path opacity="0.5" d="M3.7 3.6H2.1c-.1 0-.1.1-.1.1v1.6c0 .1.1.1.1.1h1.6c.1 0 .1-.1.1-.1V3.7c.1-.1 0-.1-.1-.1zM3.7 7.3H2.1c-.1 0-.1.1-.1.1V9c0 .1.1.1.1.1h1.6c.1 0 .1-.1.1-.1V7.5c.1-.1 0-.2-.1-.2zM3.7 11.1H2.1c-.1 0-.1.1-.1.1v1.6c0 .1.1.1.1.1h1.6c.1 0 .1-.1.1-.1v-1.6c.1 0 0-.1-.1-.1zM6.1 5.5H4.5c-.1 0-.1.1-.1.1v1.6c0 .1.1.1.1.1h1.6c.1 0 .1-.1.1-.1l-.1-1.7c.2 0 .1 0 0 0zM6.1 9.2H4.5c-.1 0-.1.1-.1.1V11c0 .1.1.1.1.1h1.6c.1 0 .1-.1.1-.1V9.4c.1-.1 0-.2-.1-.2zM8.3 3.6H6.7c-.1 0-.1.1-.1.1v1.6c0 .1.1.1.1.1h1.6c.1 0 .1-.1.1-.1V3.7c.1-.1 0-.1-.1-.1zM8.3 7.3H6.7c-.1 0-.1.1-.1.1V9c0 .1.1.1.1.1h1.6c.1 0 .1-.1.1-.1V7.5c.1-.1 0-.2-.1-.2zM8.3 11.1H6.7c-.1 0-.1.1-.1.1v1.6c0 .1.1.1.1.1h1.6c.1 0 .1-.1.1-.1v-1.6c.1 0 0-.1-.1-.1zM10.6 5.5H9c-.1 0-.1.1-.1.1v1.6c0 .1.1.1.1.1h1.6c.1 0 .1-.1.1-.1V5.6c0-.1 0-.1-.1-.1zM10.6 9.2H9c-.1 0-.1.1-.1.1V11c0 .1.1.1.1.1h1.6c.1 0 .1-.1.1-.1V9.4c0-.1 0-.2-.1-.2zM12.9 3.6h-1.6c-.1 0-.1.1-.1.1v1.6c0 .1.1.1.1.1h1.6c.1.1.1 0 .1-.1V3.7c0-.1 0-.1-.1-.1zM12.9 7.3h-1.6c-.1 0-.1.1-.1.1V9c0 .1.1.1.1.1h1.6c.1.1.1.1.1 0V7.5c0-.1 0-.2-.1-.2zM12.9 11.1h-1.6c-.1 0-.1.1-.1.1v1.6c0 .1.1.1.1.1h1.6c.1 0 .1-.1.1-.1v-1.6s0-.1-.1-.1z"/>
-  <path d="M13.2 2.8H1.8c-.4 0-.8.4-.8.9v9.2c0 .4.3.9.8.9h11.4c.4 0 .8-.4.8-.9V3.7c0-.7-.6-.9-.8-.9zm-.2 10H2v-9h11v9z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <g fill-rule="evenodd">
+    <path d="M1 2.007C1 1.45 1.45 1 2.007 1h11.986C14.55 1 15 1.45 15 2.007v11.986C15 14.55 14.55 15 13.993 15H2.007C1.45 15 1 14.55 1 13.993V2.007zM2 2h12v12H2V2z"/>
+    <path d="M3 3h2v2H3zM11 3h2v2h-2zM7 3h2v2H7zM3 7h2v2H3zM11 7h2v2h-2zM7 7h2v2H7zM5 5h2v2H5zM9 5h2v2H9zM3 11h2v2H3zM11 11h2v2h-2zM7 11h2v2H7zM5 9h2v2H5zM9 9h2v2H9z" opacity="0.5"/>
+  </g>
 </svg>

devtools/client/themes/images/tool-debugger-paused.svg

@@ -1,7 +1,6 @@
 <!-- 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" fill="#5FC749">
-  <path d="M8.2 1.7C4.8 1.7 2 4.4 2 7.9s2.7 6.3 6.3 6.3c3.5 0 6.3-2.7 6.3-6.3-.1-3.4-2.9-6.2-6.4-6.2zm0 11.4C5.3 13.1 3 10.8 3 7.9s2.3-5.2 5.2-5.2 5.2 2.3 5.2 5.2c0 3-2.2 5.2-5.2 5.2z"/>
-  <path d="M11.4 7.5L10 6.2c-.1-.1-.2-.1-.4-.1H5.7c-.1 0-.2.1-.2.2v3.2c0 .1.1.4.2.4h4c.1 0 .2-.1.2-.1l1.5-1.7c.2-.1.2-.4 0-.6z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#5FC749">
+  <path d="M2 5v6c0 .109.039.342.144.553.15.297.374.447.856.447h9l-.78.375 4-5v1.25l-4-5L12 4H3c-.482 0-.707.15-.856.447A1.403 1.403 0 0 0 2 5zM1 5s0-2 2-2h9l4 5-4 5H3c-2 0-2-2-2-2V5z"/>
 </svg>

devtools/client/themes/images/tool-debugger.svg

@@ -1,7 +1,6 @@
 <!-- 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" fill="whitesmoke">
-  <path d="M8.2 1.7C4.8 1.7 2 4.4 2 7.9s2.7 6.3 6.3 6.3c3.5 0 6.3-2.7 6.3-6.3-.1-3.4-2.9-6.2-6.4-6.2zm0 11.4C5.3 13.1 3 10.8 3 7.9 3 5 5.3 2.7 8.2 2.7c2.9 0 5.2 2.3 5.2 5.2 0 3-2.2 5.2-5.2 5.2z"/>
-  <path d="M6.5 5.3c-.2 0-.4.2-.4.4v4.5c0 .2.3.4.5.4s.5-.2.5-.4V5.7c0-.2-.3-.4-.5-.4M9.5 5.3c-.2 0-.4.2-.4.4v4.5c0 .2.3.4.5.4s.5-.2.5-.4V5.7c0-.2-.3-.4-.5-.4"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <path d="M2 5v6c0 .109.039.342.144.553.15.297.374.447.856.447h9l-.78.375 4-5v1.25l-4-5L12 4H3c-.482 0-.707.15-.856.447A1.403 1.403 0 0 0 2 5zM1 5s0-2 2-2h9l4 5-4 5H3c-2 0-2-2-2-2V5z"/>
 </svg>

devtools/client/themes/images/tool-dom.svg

@@ -1,6 +1,6 @@
 <!-- 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 height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="whitesmoke">
-  <path d="M.2 6.3l3.5 3.6c.1.1.3.2.5.2h.9c.3 0 .5-.2.6-.4.1-.2.1-.5-.1-.7l-3-3.1 3-2.9c.2-.2.3-.5.2-.7-.2-.4-.5-.5-.7-.5h-.9c-.2 0-.4 0-.5.2L.2 5.4c-.3.2-.3.6 0 .9M15.8 9.7l-3.5-3.6c-.1-.1-.3-.2-.5-.2h-.9c-.3 0-.5.2-.6.4-.1.2-.1.5.1.7l3 3.1-3 2.9c-.2.2-.3.5-.2.7.1.3.3.4.6.4h.9c.2 0 .3-.1.5-.2l3.5-3.4c.4-.1.4-.5.1-.8"/>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <path d="M6.052 1.13L1.164 5.57a.5.5 0 0 0 0 .74l5 4.56a.5.5 0 0 0 .673-.74l-5-4.559v.74l4.887-4.44a.5.5 0 0 0-.672-.741zM10.948 14.87l4.888-4.44a.5.5 0 0 0 0-.74l-5-4.56a.5.5 0 1 0-.673.74l5 4.559v-.74l-4.887 4.44a.5.5 0 0 0 .672.741z"/>
+</svg>

devtools/client/themes/images/tool-inspector.svg

@@ -1,6 +1,7 @@
 <!-- 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" fill="whitesmoke">
-  <path d="M14.3 7.7H13V4.8c0-.7-.6-.9-.8-.9H8.3V2.4c.1-.3-.2-.6-.5-.6s-.6.3-.6.6v1.5H2.9c-.5 0-.9.4-.9.9v3H.7c-.3 0-.6.3-.6.6s.3.6.6.6H2v3c0 .4.3.9.8.9h4.3v1.3c0 .3.3.6.6.6s.6-.3.6-.6v-1.3h3.9c.4 0 .8-.4.8-.9V8.9h1.2c.3 0 .6-.3.6-.6s-.2-.6-.5-.6zM12 11.9H3v-7h9v7z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="whitesmoke">
+  <path d="M3 3.995v8.01c0-.01.005-.005.002-.005h9.996c-.001 0 .002-.003.002.005v-8.01c0 .01-.005.005-.002.005H3.002C3.003 4 3 4.003 3 3.995zm-1 0C2 3.445 2.456 3 3.002 3h9.996C13.55 3 14 3.456 14 3.995v8.01c0 .55-.456.995-1.002.995H3.002A1.005 1.005 0 0 1 2 12.005v-8.01z"/>
+  <path d="M8.5 3.5V2a.5.5 0 0 0-1 0v1.5a.5.5 0 0 0 1 0zM1 8.5h1a.5.5 0 0 0 0-1H1a.5.5 0 0 0 0 1zM14 8.5h1a.5.5 0 1 0 0-1h-1a.5.5 0 1 0 0 1zM8.5 14v-1.5a.5.5 0 1 0-1 0V14a.5.5 0 1 0 1 0z"/>
 </svg>