Merge mozilla-central to b2g-inbound

accessible/mac/mozAccessible.mm

@@ -516,7 +516,7 @@ GetClosestInterestingAccessible(id anObject)
 struct RoleDescrMap
 {
   NSString* role;
-  const nsString& description;
+  const nsString description;
 };
 
 static const RoleDescrMap sRoleDescrMap[] = {

b2g/app/b2g.js

@@ -350,6 +350,11 @@ pref("dom.w3c_touch_events.enabled", 1);
 pref("dom.w3c_touch_events.safetyX", 0); // escape borders in units of 1/240"
 pref("dom.w3c_touch_events.safetyY", 120); // escape borders in units of 1/240"
 
+// W3C draft pointer events
+pref("dom.w3c_pointer_events.enabled", false);
+// W3C touch-action css property (related to touch and pointer events)
+pref("layout.css.touch_action.enabled", false);
+
 #ifdef MOZ_SAFE_BROWSING
 // Safe browsing does nothing unless this pref is set
 pref("browser.safebrowsing.enabled", false);

b2g/dev/app/mulet.js

@@ -18,3 +18,8 @@ pref("devtools.toolbox.sidebar.width", 800);
 pref("browser.tabs.remote.autostart", false);
 pref("browser.tabs.remote.autostart.1", false);
 pref("browser.tabs.remote.autostart.2", false);
+
+// W3C draft pointer events
+pref("dom.w3c_pointer_events.enabled", false);
+// W3C touch-action css property (related to touch and pointer events)
+pref("layout.css.touch_action.enabled", false);

browser/app/profile/firefox.js

@@ -505,10 +505,17 @@ pref("dom.disable_window_move_resize",            false);
 // prevent JS from monkeying with window focus, etc
 pref("dom.disable_window_flip",                   true);
 
-// Disable touch events on Desktop Firefox by default until they are properly
-// supported (bug 736048)
+// Disable touch events on Desktop Firefox by default
+// until they are properly supported (bug 736048)
 pref("dom.w3c_touch_events.enabled",        0);
 
+#ifdef NIGHTLY_BUILD
+// W3C draft pointer events
+pref("dom.w3c_pointer_events.enabled", true);
+// W3C touch-action css property (related to touch and pointer events)
+pref("layout.css.touch_action.enabled", true);
+#endif
+
 // popups.policy 1=allow,2=reject
 pref("privacy.popups.policy",               1);
 pref("privacy.popups.usecustom",            true);
@@ -1462,7 +1469,7 @@ pref("devtools.performance.ui.show-idle-blocks", true);
 pref("devtools.performance.ui.enable-memory", false);
 pref("devtools.performance.ui.enable-allocations", false);
 pref("devtools.performance.ui.enable-framerate", true);
-pref("devtools.performance.ui.show-jit-optimizations", false);
+pref("devtools.performance.ui.enable-jit-optimizations", false);
 
 // Enable experimental options in the UI only in Nightly
 #if defined(NIGHTLY_BUILD)

browser/base/content/newtab/customize.js

@@ -22,70 +22,95 @@ let gCustomize = {
       this._nodes[idSuffix] = document.getElementById("newtab-customize-" + idSuffix);
     }
 
-    this._nodes.button.addEventListener("click", e => this.showPanel());
-    this._nodes.blank.addEventListener("click", e => {
-      gAllPages.enabled = false;
-    });
-    this._nodes.classic.addEventListener("click", e => {
-      gAllPages.enabled = true;
-
-      if (this._nodes.enhanced.getAttribute("selected")) {
-        gAllPages.enhanced = true;
-      } else {
-        gAllPages.enhanced = false;
-      }
-    });
-    this._nodes.enhanced.addEventListener("click", e => {
-      if (!gAllPages.enabled) {
-        gAllPages.enabled = true;
-        return;
-      }
-      gAllPages.enhanced = !gAllPages.enhanced;
-    });
-    this._nodes.learn.addEventListener("click", e => {
-      window.open(TILES_INTRO_LINK,'new_window');
-      this._onHidden();
-    });
+    this._nodes.button.addEventListener("click", e => this.showPanel(e));
+    this._nodes.blank.addEventListener("click", this);
+    this._nodes.classic.addEventListener("click", this);
+    this._nodes.enhanced.addEventListener("click", this);
+    this._nodes.learn.addEventListener("click", this);
 
     this.updateSelected();
   },
 
-  _onHidden: function() {
-    let nodes = gCustomize._nodes;
-    nodes.overlay.addEventListener("transitionend", function onTransitionEnd() {
-      nodes.overlay.removeEventListener("transitionend", onTransitionEnd);
-      nodes.overlay.style.display = "none";
+  hidePanel: function() {
+    this._nodes.overlay.addEventListener("transitionend", function onTransitionEnd() {
+      gCustomize._nodes.overlay.removeEventListener("transitionend", onTransitionEnd);
+      gCustomize._nodes.overlay.style.display = "none";
     });
-    nodes.overlay.style.opacity = 0;
-    nodes.panel.removeEventListener("popuphidden", gCustomize._onHidden);
-    nodes.panel.hidden = true;
-    nodes.button.removeAttribute("active");
+    this._nodes.overlay.style.opacity = 0;
+    this._nodes.button.removeAttribute("active");
+    this._nodes.panel.removeAttribute("open");
+    document.removeEventListener("click", this);
+    document.removeEventListener("keydown", this);
   },
 
-  showPanel: function() {
-    this._nodes.overlay.style.display = "block";
-    setTimeout(() => {
-      // Wait for display update to take place, then animate.
-      this._nodes.overlay.style.opacity = 0.8;
-    }, 0);
-
-    let nodes = this._nodes;
-    let {button, panel} = nodes;
-    if (button.hasAttribute("active")) {
-      return Promise.resolve(nodes);
+  showPanel: function(event) {
+    if (this._nodes.panel.getAttribute("open") == "true") {
+      return;
     }
 
-    panel.hidden = false;
-    panel.openPopup(button);
-    button.setAttribute("active", true);
-    panel.addEventListener("popuphidden", this._onHidden);
+    let {panel, button, overlay} = this._nodes;
+    overlay.style.display = "block";
+    panel.setAttribute("open", "true");
+    button.setAttribute("active", "true");
+    setTimeout(() => {
+      // Wait for display update to take place, then animate.
+      overlay.style.opacity = 0.8;
+    }, 0);
 
-    return new Promise(resolve => {
-      panel.addEventListener("popupshown", function onShown() {
-        panel.removeEventListener("popupshown", onShown);
-        resolve(nodes);
-      });
-    });
+    document.addEventListener("click", this);
+    document.addEventListener("keydown", this);
+
+    // Stop the event propogation to prevent panel from immediately closing
+    // via the document click event that we just added.
+    event.stopPropagation();
+  },
+
+  handleEvent: function(event) {
+    switch (event.type) {
+      case "click":
+        this.onClick(event);
+        break;
+      case "keydown":
+        this.onKeyDown(event);
+        break;
+    }
+  },
+
+  onClick: function(event) {
+    if (event.currentTarget == document) {
+      if (!this._nodes.panel.contains(event.target)) {
+        this.hidePanel();
+      }
+    }
+    switch (event.currentTarget.id) {
+      case "newtab-customize-blank":
+        sendAsyncMessage("NewTab:Customize", {enabled: false, enhanced: false});
+        break;
+      case "newtab-customize-classic":
+        if (this._nodes.enhanced.getAttribute("selected")){
+          sendAsyncMessage("NewTab:Customize", {enabled: true, enhanced: true});
+        } else {
+          sendAsyncMessage("NewTab:Customize", {enabled: true, enhanced: false});
+        }
+        break;
+      case "newtab-customize-enhanced":
+        sendAsyncMessage("NewTab:Customize", {enabled: true, enhanced: !gAllPages.enhanced});
+        break;
+      case "newtab-customize-learn":
+        this.showLearn();
+        break;
+    }
+  },
+
+  onKeyDown: function(event) {
+    if (event.keyCode == event.DOM_VK_ESCAPE) {
+      this.hidePanel();
+    }
+  },
+
+  showLearn: function() {
+    window.open(TILES_INTRO_LINK, 'new_window');
+    this.hidePanel();
   },
 
   updateSelected: function() {

browser/base/content/newtab/newTab.css

@@ -481,10 +481,38 @@ input[type=button] {
   transition: opacity .07s linear;
 }
 
+.newtab-customize-panel-container {
+  position: absolute;
+  margin-right: 40px;
+}
+
 #newtab-customize-panel {
-  z-index: 101;
-  margin-top: -5px;
+  z-index: 999;
+  margin-top: 55px;
   min-width: 270px;
+  position: absolute;
+  top: 100%;
+  right: -25px;
+  background-color: white;
+  border-radius: 6px;
+  filter: drop-shadow(0 0 1px rgba(0,0,0,0.4)) drop-shadow(0 3px 4px rgba(0,0,0,0.4));
+  transition: all 200ms ease-in-out;
+  transform-origin: top right;
+  transform: translate(-30px, -20px) scale(0) translate(30px, 20px);
+}
+
+#newtab-customize-panel[open="true"] {
+  transform: translate(-30px, -20px) scale(1) translate(30px, 20px);
+}
+
+#newtab-customize-panel-anchor {
+  width: 18px;
+  height: 18px;
+  background-color: white;
+  transform: rotate(45deg);
+  position: absolute;
+  top: -6px;
+  right: 15px;
 }
 
 #newtab-customize-title {
@@ -499,6 +527,7 @@ input[type=button] {
   max-width: 300px;
   overflow: hidden;
   display: table-cell;
+  border-top: none;
 }
 
 #newtab-customize-title > label {
@@ -518,6 +547,7 @@ input[type=button] {
   -moz-padding-start: 40px;
   font-size: 14px;
   cursor: pointer;
+  max-width: 300px;
 }
 
 .newtab-customize-panel-item:not(:first-child),
@@ -544,10 +574,8 @@ input[type=button] {
 
 .newtab-customize-panel-item,
 .newtab-customize-complex-option {
-  width: 100%;
   display: block;
   text-align: start;
-  max-width: 300px;
   background-color: #F9F9F9;
 }
 
@@ -615,6 +643,7 @@ input[type=button] {
   padding: 0px 15px 15px 15px;
   -moz-padding-start: 40px;
   display: block;
+  max-width: 300px;
 }
 
 .newtab-customize-panel-subitem > label {
@@ -788,7 +817,7 @@ input[type=button] {
 
 .newtab-intro-image-customize {
   box-shadow: 3px 3px 5px #888;
-  margin: 0 !important;
+  margin-top: 0px;
   background-color: #FFF;
   float: left;
   z-index: 101;
@@ -799,7 +828,7 @@ input[type=button] {
 
 .newtab-intro-image-customize #newtab-customize-title {
   display: block;
-  max-height: 72px;
+  max-height: 40px;
 }
 
 .newtab-intro-image-customize .newtab-customize-panel-item:not([selected]):hover {

browser/base/content/newtab/newTab.xul

@@ -22,8 +22,6 @@
             xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
             title="&newtab.pageTitle;">
 
-  <div id="newtab-customize-overlay"></div>
-
   <xul:panel id="newtab-search-panel" orient="vertical" type="arrow"
              noautohide="true" hidden="true">
     <xul:hbox id="newtab-search-manage">
@@ -31,27 +29,32 @@
     </xul:hbox>
   </xul:panel>
 
-  <xul:panel id="newtab-customize-panel" orient="vertical" type="arrow"
-             noautohide="true" hidden="true">
-    <xul:hbox id="newtab-customize-title" class="newtab-customize-panel-item">
-      <xul:label>&newtab.customize.cog.title2;</xul:label>
-    </xul:hbox>
-    <xul:vbox class="newtab-customize-complex-option">
-      <xul:hbox id="newtab-customize-classic" class="newtab-customize-panel-superitem newtab-customize-panel-item selectable">
-        <xul:label>&newtab.customize.classic;</xul:label>
-      </xul:hbox>
-      <xul:hbox id="newtab-customize-enhanced" class="newtab-customize-panel-subitem">
-        <xul:label class="checkbox"></xul:label>
-        <xul:label>&newtab.customize.cog.enhanced;</xul:label>
-      </xul:hbox>
-    </xul:vbox>
-    <xul:hbox id="newtab-customize-blank" class="newtab-customize-panel-item selectable">
-      <xul:label>&newtab.customize.blank2;</xul:label>
-    </xul:hbox>
-    <xul:hbox id="newtab-customize-learn" class="newtab-customize-panel-item">
-      <xul:label>&newtab.customize.cog.learn;</xul:label>
-    </xul:hbox>
-  </xul:panel>
+  <div class="newtab-customize-panel-container">
+    <div id="newtab-customize-panel" orient="vertical">
+        <div id="newtab-customize-panel-anchor"></div>
+        <div id="newtab-customize-title" class="newtab-customize-panel-item">
+            <label>&newtab.customize.cog.title2;</label>
+        </div>
+
+        <div class="newtab-customize-complex-option">
+            <div id="newtab-customize-classic" class="newtab-customize-panel-superitem newtab-customize-panel-item selectable">
+                <label>&newtab.customize.classic;</label>
+            </div>
+            <div id="newtab-customize-enhanced" class="newtab-customize-panel-subitem">
+                <label class="checkbox"></label>
+                <label>&newtab.customize.cog.enhanced;</label>
+            </div>
+        </div>
+        <div id="newtab-customize-blank" class="newtab-customize-panel-item selectable">
+            <label>&newtab.customize.blank2;</label>
+        </div>
+        <div id="newtab-customize-learn" class="newtab-customize-panel-item">
+            <label>&newtab.customize.cog.learn;</label>
+        </div>
+    </div>
+  </div>
+
+  <div id="newtab-customize-overlay"></div>
 
   <div id="newtab-intro-mask">
     <div id="newtab-intro-modal">
@@ -126,7 +129,6 @@
       <div id="newtab-margin-bottom"/>
 
     </div>
-
     <input id="newtab-customize-button" type="button" title="&newtab.customize.title;"/>
   </div>
 

browser/base/content/test/general/browser.ini

@@ -351,6 +351,7 @@ skip-if = buildapp == 'mulet' || e10s # Bug 1101973 - breaks the next test in e1
 skip-if = buildapp == 'mulet'
 [browser_private_no_prompt.js]
 skip-if = buildapp == 'mulet'
+[browser_PageMetaData_pushstate.js]
 [browser_relatedTabs.js]
 [browser_remoteTroubleshoot.js]
 support-files =
@@ -418,7 +419,11 @@ skip-if = e10s # Bug 1100664 - test relies on linkedBrowser.docShell
 [browser_tabs_owner.js]
 [browser_testOpenNewRemoteTabsFromNonRemoteBrowsers.js]
 run-if = e10s
-[browser_trackingUI.js]
+[browser_trackingUI_1.js]
+support-files =
+  trackingPage.html
+  benignPage.html
+[browser_trackingUI_2.js]
 support-files =
   trackingPage.html
   benignPage.html

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

@@ -0,0 +1,32 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+add_task(function* () {
+  let rooturi = "https://example.com/browser/toolkit/modules/tests/browser/";
+  yield BrowserTestUtils.openNewForegroundTab(gBrowser, rooturi + "metadata_simple.html");
+  let result = yield ContentTask.spawn(gBrowser.selectedBrowser, {}, function* () {
+    return PageMetadata.getData(content.document);
+  });
+  // result should have description
+  is(result.url, rooturi + "metadata_simple.html", "metadata url is correct");
+  is(result.title, "Test Title", "metadata title is correct");
+  is(result.description, "A very simple test page", "description is correct");
+
+  result = yield ContentTask.spawn(gBrowser.selectedBrowser, {}, function* () {
+    content.history.pushState({}, "2", "2.html");
+    return PageMetadata.getData(content.document);
+  });
+  // result should not have description
+  is(result.url, rooturi + "2.html", "metadata url is correct");
+  is(result.title, "Test Title", "metadata title is correct");
+  ok(!result.description, "description is undefined");
+
+  let documentURI = yield ContentTask.spawn(gBrowser.selectedBrowser, {}, function* () {
+    return content.document.documentURI;
+  });
+  is(gBrowser.currentURI.spec, rooturi + "2.html", "gBrowser has correct url");
+  is(documentURI, rooturi + "2.html", "content.document has correct url");
+
+  gBrowser.removeTab(gBrowser.selectedTab);
+});

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

@@ -6,50 +6,8 @@
 // and has the correct state when tracking content is blocked (Bug 1043801)
 
 var PREF = "privacy.trackingprotection.enabled";
-var TABLE = "urlclassifier.trackingTable";
-
-// Update tracking database
-function doUpdate() {
-  // Add some URLs to the tracking database (to be blocked)
-  var testData = "tracking.example.com/";
-  var testUpdate =
-    "n:1000\ni:test-track-simple\nad:1\n" +
-    "a:524:32:" + testData.length + "\n" +
-    testData;
-
-  var dbService = Cc["@mozilla.org/url-classifier/dbservice;1"]
-                  .getService(Ci.nsIUrlClassifierDBService);
-
-  let deferred = Promise.defer();
-
-  var listener = {
-    QueryInterface: function(iid)
-    {
-      if (iid.equals(Ci.nsISupports) ||
-          iid.equals(Ci.nsIUrlClassifierUpdateObserver))
-        return this;
-
-      throw Cr.NS_ERROR_NO_INTERFACE;
-    },
-    updateUrlRequested: function(url) { },
-    streamFinished: function(status) { },
-    updateError: function(errorCode) {
-      ok(false, "Couldn't update classifier.");
-      deferred.resolve();
-    },
-    updateSuccess: function(requestedTimeout) {
-      deferred.resolve();
-    }
-  };
-
-  dbService.beginUpdate(listener, "test-track-simple", "");
-  dbService.beginStream("", "");
-  dbService.updateStream(testUpdate);
-  dbService.finishStream();
-  dbService.finishUpdate();
-
-  return deferred.promise;
-}
+var BENIGN_PAGE = "http://tracking.example.org/browser/browser/base/content/test/general/benignPage.html";
+var TRACKING_PAGE = "http://tracking.example.org/browser/browser/base/content/test/general/trackingPage.html";
 
 function testBenignPage(gTestBrowser)
 {
@@ -64,38 +22,43 @@ function* testTrackingPage(gTestBrowser)
   var notification = PopupNotifications.getNotification("bad-content", gTestBrowser);
   isnot(notification, null, "Tracking Content Doorhanger did appear when protection was ON and tracking was present");
   notification.reshow();
+  var notificationElement = PopupNotifications.panel.firstChild;
 
   // Wait for the method to be attached after showing the popup
   yield promiseWaitForCondition(() => {
-    return PopupNotifications.panel.firstChild.disableTrackingContentProtection;
+    return notificationElement.disableTrackingContentProtection;
   });
 
-
   // Make sure the state of the doorhanger includes blocking tracking elements
-  is(PopupNotifications.panel.firstChild.isTrackingContentBlocked,
-     Ci.nsIWebProgressListener.STATE_BLOCKED_TRACKING_CONTENT,
+  ok(notificationElement.isTrackingContentBlocked,
      "Tracking Content is being blocked");
 
   // Make sure the notification has no trackingblockdisabled attribute
-  ok(!PopupNotifications.panel.firstChild.hasAttribute("trackingblockdisabled"),
+  ok(!notificationElement.hasAttribute("trackingblockdisabled"),
     "Doorhanger must have no trackingblockdisabled attribute");
-
-  // Disable Tracking Content Protection for the page (which reloads the page)
-  PopupNotifications.panel.firstChild.disableTrackingContentProtection();
 }
 
-function testTrackingPageWhitelisted(gTestBrowser)
+function* testTrackingPageWhitelisted(gTestBrowser)
 {
   // Make sure the doorhanger appears
   var notification = PopupNotifications.getNotification("bad-content", gTestBrowser);
   isnot(notification, null, "Tracking Content Doorhanger did appear when protection was ON and tracking was present but white-listed");
   notification.reshow();
+  var notificationElement = PopupNotifications.panel.firstChild;
+
+  // Wait for the method to be attached after showing the popup
+  yield promiseWaitForCondition(() => {
+    return notificationElement.disableTrackingContentProtection;
+  });
+
+  var notificationElement = PopupNotifications.panel.firstChild;
+
   // Make sure the state of the doorhanger does NOT include blocking tracking elements
-  is(PopupNotifications.panel.firstChild.isTrackingContentBlocked, 0,
+  ok(!notificationElement.isTrackingContentBlocked,
     "Tracking Content is NOT being blocked");
 
   // Make sure the notification has the trackingblockdisabled attribute set to true
-  is(PopupNotifications.panel.firstChild.getAttribute("trackingblockdisabled"), "true",
+  is(notificationElement.getAttribute("trackingblockdisabled"), "true",
     "Doorhanger must have [trackingblockdisabled='true'] attribute");
 }
 
@@ -116,13 +79,10 @@ function testBenignPageOFF(gTestBrowser)
 add_task(function* () {
   registerCleanupFunction(function() {
     Services.prefs.clearUserPref(PREF);
-    Services.prefs.clearUserPref(TABLE);
     gBrowser.removeCurrentTab();
   });
 
-  // Populate and use 'test-track-simple' for tracking protection lookups
-  Services.prefs.setCharPref(TABLE, "test-track-simple");
-  yield doUpdate();
+  yield updateTrackingProtectionDatabase();
 
   let tab = gBrowser.selectedTab = gBrowser.addTab();
 
@@ -130,26 +90,30 @@ add_task(function* () {
   Services.prefs.setBoolPref(PREF, true);
 
   // Point tab to a test page NOT containing tracking elements
-  yield promiseTabLoadEvent(tab, "http://tracking.example.org/browser/browser/base/content/test/general/benignPage.html");
+  yield promiseTabLoadEvent(tab, BENIGN_PAGE);
   testBenignPage(gBrowser.getBrowserForTab(tab));
 
   // Point tab to a test page containing tracking elements
-  yield promiseTabLoadEvent(tab, "http://tracking.example.org/browser/browser/base/content/test/general/trackingPage.html");
+  yield promiseTabLoadEvent(tab, TRACKING_PAGE);
+
+  // Tracking content must be blocked
   yield testTrackingPage(gBrowser.getBrowserForTab(tab));
 
+  // Disable Tracking Content Protection for the page (which reloads the page)
+  PopupNotifications.panel.firstChild.disableTrackingContentProtection();
+
   // Wait for tab to reload following tracking-protection page white-listing
   yield promiseTabLoadEvent(tab);
+
   // Tracking content must be white-listed (NOT blocked)
-  testTrackingPageWhitelisted(gBrowser.getBrowserForTab(tab));
+  yield testTrackingPageWhitelisted(gBrowser.getBrowserForTab(tab));
 
-  // Disable Tracking Protection
-  Services.prefs.setBoolPref(PREF, false);
+  // Re-enable Tracking Content Protection for the page (which reloads the page)
+  PopupNotifications.panel.firstChild.enableTrackingContentProtection();
 
-  // Point tab to a test page containing tracking elements
-  yield promiseTabLoadEvent(tab, "http://tracking.example.org/browser/browser/base/content/test/general/trackingPage.html");
-  testTrackingPageOFF(gBrowser.getBrowserForTab(tab));
+  // Wait for tab to reload following tracking-protection page white-listing
+  yield promiseTabLoadEvent(tab);
 
-  // Point tab to a test page NOT containing tracking elements
-  yield promiseTabLoadEvent(tab, "http://tracking.example.org/browser/browser/base/content/test/general/benignPage.html");
-  testBenignPageOFF(gBrowser.getBrowserForTab(tab));
+  // Tracking content must be blocked
+  yield testTrackingPage(gBrowser.getBrowserForTab(tab));
 });

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

@@ -0,0 +1,46 @@
+/* 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/. */
+
+// Test that the Tracking Protection Doorhanger does not ever appear
+// when the feature is off (Bug 1043801)
+
+var PREF = "privacy.trackingprotection.enabled";
+var BENIGN_PAGE = "http://tracking.example.org/browser/browser/base/content/test/general/benignPage.html";
+var TRACKING_PAGE = "http://tracking.example.org/browser/browser/base/content/test/general/trackingPage.html";
+
+function testTrackingPageOFF(gTestBrowser)
+{
+  // Make sure the doorhanger does NOT appear
+  var notification = PopupNotifications.getNotification("bad-content", gTestBrowser);
+  is(notification, null, "Tracking Content Doorhanger did NOT appear when protection was OFF and tracking was present");
+}
+
+function testBenignPageOFF(gTestBrowser)
+{
+  // Make sure the doorhanger does NOT appear
+  var notification = PopupNotifications.getNotification("bad-content", gTestBrowser);
+  is(notification, null, "Tracking Content Doorhanger did NOT appear when protection was OFF and tracking was NOT present");
+}
+
+add_task(function* () {
+  registerCleanupFunction(function() {
+    Services.prefs.clearUserPref(PREF);
+    gBrowser.removeCurrentTab();
+  });
+
+  yield updateTrackingProtectionDatabase();
+
+  let tab = gBrowser.selectedTab = gBrowser.addTab();
+
+  // Disable Tracking Protection
+  Services.prefs.setBoolPref(PREF, false);
+
+  // Point tab to a test page containing tracking elements
+  yield promiseTabLoadEvent(tab, TRACKING_PAGE);
+  testTrackingPageOFF(gBrowser.getBrowserForTab(tab));
+
+  // Point tab to a test page NOT containing tracking elements
+  yield promiseTabLoadEvent(tab, BENIGN_PAGE);
+  testBenignPageOFF(gBrowser.getBrowserForTab(tab));
+});

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

@@ -660,6 +660,55 @@ function promiseIndicatorWindow() {
   return promiseWindow("chrome://browser/content/webrtcIndicator.xul");
 }
 
+/**
+ * Add some entries to a test tracking protection database, and reset
+ * back to the default database after the test ends.
+ */
+function updateTrackingProtectionDatabase() {
+  let TABLE = "urlclassifier.trackingTable";
+  Services.prefs.setCharPref(TABLE, "test-track-simple");
+
+  registerCleanupFunction(function() {
+    Services.prefs.clearUserPref(TABLE);
+  });
+
+  // Add some URLs to the tracking database (to be blocked)
+  let testData = "tracking.example.com/";
+  let testUpdate =
+    "n:1000\ni:test-track-simple\nad:1\n" +
+    "a:524:32:" + testData.length + "\n" +
+    testData;
+
+  return new Promise((resolve, reject) => {
+    let dbService = Cc["@mozilla.org/url-classifier/dbservice;1"]
+                    .getService(Ci.nsIUrlClassifierDBService);
+    let listener = {
+      QueryInterface: iid => {
+        if (iid.equals(Ci.nsISupports) ||
+            iid.equals(Ci.nsIUrlClassifierUpdateObserver))
+          return listener;
+
+        throw Cr.NS_ERROR_NO_INTERFACE;
+      },
+      updateUrlRequested: url => { },
+      streamFinished: status => { },
+      updateError: errorCode => {
+        ok(false, "Couldn't update classifier.");
+        resolve();
+      },
+      updateSuccess: requestedTimeout => {
+        resolve();
+      }
+    };
+
+    dbService.beginUpdate(listener, "test-track-simple", "");
+    dbService.beginStream("", "");
+    dbService.updateStream(testUpdate);
+    dbService.finishStream();
+    dbService.finishUpdate();
+  });
+}
+
 function assertWebRTCIndicatorStatus(expected) {
   let ui = Cu.import("resource:///modules/webrtcUI.jsm", {}).webrtcUI;
   let expectedState = expected ? "visible" : "hidden";

browser/base/content/test/newtab/head.js

@@ -742,26 +742,36 @@ function whenSearchInitDone() {
  *        Can be any of("blank"|"classic"|"enhanced")
  */
 function customizeNewTabPage(aTheme) {
-  let document = getContentDocument();
-  let panel = document.getElementById("newtab-customize-panel");
-  let customizeButton = document.getElementById("newtab-customize-button");
+  let promise = ContentTask.spawn(gBrowser.selectedBrowser, aTheme, function*(aTheme) {
 
-  // Attache onShown the listener on panel
-  panel.addEventListener("popupshown", function onShown() {
-    panel.removeEventListener("popupshown", onShown);
+    let document = content.document;
+    let panel = document.getElementById("newtab-customize-panel");
+    let customizeButton = document.getElementById("newtab-customize-button");
 
-    // Get the element for the specific option and click on it,
-    // then trigger an escape to close the panel
-    document.getElementById("newtab-customize-" + aTheme).click();
-    executeSoon(() => { panel.hidePopup(); });
+    function panelOpened(opened) {
+      return new Promise( (resolve) => {
+        let options = {attributes: true, oldValue: true};
+        let observer = new content.MutationObserver(function(mutations) {
+          mutations.forEach(function(mutation) {
+            document.getElementById("newtab-customize-" + aTheme).click();
+            observer.disconnect();
+            if (opened == panel.hasAttribute("open")) {
+              resolve();
+            }
+          });
+        });
+        observer.observe(panel, options);
+      });
+    }
+
+    let opened = panelOpened(true);
+    customizeButton.click();
+    yield opened;
+
+    let closed = panelOpened(false);
+    customizeButton.click();
+    yield closed;
   });
 
-  // Attache the listener for panel closing, this will resolve the promise
-  panel.addEventListener("popuphidden", function onHidden() {
-    panel.removeEventListener("popuphidden", onHidden);
-    executeSoon(TestRunner.next);
-  });
-
-  // Click on the customize button to display the panel
-  customizeButton.click();
+  promise.then(TestRunner.next);
 }

browser/base/content/urlbarBindings.xml

@@ -2303,8 +2303,8 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
       </field>
       <property name="isTrackingContentBlocked" readonly="true">
         <getter><![CDATA[
-          return this.notification.options.state &
-            Ci.nsIWebProgressListener.STATE_BLOCKED_TRACKING_CONTENT;
+          return !!(this.notification.options.state &
+            Ci.nsIWebProgressListener.STATE_BLOCKED_TRACKING_CONTENT);
         ]]></getter>
       </property>
       <constructor><![CDATA[

browser/components/loop/content/js/contacts.js

@@ -485,9 +485,9 @@ loop.contacts = (function(_, mozL10n) {
             message: mozL10n.get("confirm_delete_contact_alert"),
             okButton: mozL10n.get("confirm_delete_contact_remove_button"),
             cancelButton: mozL10n.get("confirm_delete_contact_cancel_button")
-          }, (err, result) => {
-            if (err) {
-              throw err;
+          }, (error, result) => {
+            if (error) {
+              throw error;
             }
 
             if (!result) {

browser/components/loop/content/js/roomViews.js

@@ -92,9 +92,10 @@ loop.roomViews = (function(mozL10n) {
       event.preventDefault();
 
       var origin = event.currentTarget.dataset.provider;
-      var provider = this.props.socialShareProviders.filter(function(provider) {
-        return provider.origin == origin;
-      })[0];
+      var provider = this.props.socialShareProviders
+                         .filter(function(socialProvider) {
+                           return socialProvider.origin == origin;
+                         })[0];
 
       this.props.dispatcher.dispatch(new sharedActions.ShareRoomUrl({
         provider: provider,
@@ -304,12 +305,12 @@ loop.roomViews = (function(mozL10n) {
           this.props.mozLoop.getSelectedTabMetadata(function(metadata) {
             var previewImage = metadata.favicon || "";
             var description = metadata.title || metadata.description;
-            var url = metadata.url;
+            var metaUrl = metadata.url;
             this.setState({
               availableContext: {
                 previewImage: previewImage,
                 description: description,
-                url: url
+                url: metaUrl
               }
            });
           }.bind(this));

browser/components/loop/content/shared/js/views.js

@@ -391,14 +391,14 @@ loop.shared.views = (function(_, l10n) {
 
       // Suppress OT GuM custom dialog, see bug 1018875
       this.listenTo(this.publisher, "accessDialogOpened accessDenied",
-                    function(event) {
-                      event.preventDefault();
+                    function(ev) {
+                      ev.preventDefault();
                     });
 
-      this.listenTo(this.publisher, "streamCreated", function(event) {
+      this.listenTo(this.publisher, "streamCreated", function(ev) {
         this.setState({
-          audio: {enabled: event.stream.hasAudio},
-          video: {enabled: event.stream.hasVideo}
+          audio: {enabled: ev.stream.hasAudio},
+          video: {enabled: ev.stream.hasVideo}
         });
       }.bind(this));
 

browser/components/loop/ui/index.html

@@ -9,9 +9,12 @@
     <link rel="stylesheet" type="text/css" href="../content/shared/css/reset.css">
     <link rel="stylesheet" type="text/css" href="../content/shared/css/common.css">
     <link rel="stylesheet" type="text/css" href="../content/shared/css/conversation.css">
-    <link rel="stylesheet" type="text/css" href="../content/css/panel.css">
-    <link rel="stylesheet" type="text/css" href="../content/css/contacts.css">
-    <link rel="stylesheet" type="text/css" href="../content/css/webapp.css">
+    <link class="fx-embedded-panel" rel="stylesheet" type="text/css"
+          href="../content/css/panel.css">
+    <link class="fx-embedded-panel" rel="stylesheet" type="text/css"
+          href="../content/css/contacts.css">
+    <link class="standalone" rel="stylesheet" type="text/css"
+          href="../content/css/webapp.css">
     <link rel="stylesheet" type="text/css" href="ui-showcase.css">
  </head>
   <body>

browser/components/loop/ui/react-frame-component.js

@@ -29,31 +29,55 @@ window.Frame = React.createClass({
     head: React.PropTypes.node,
     width: React.PropTypes.number,
     height: React.PropTypes.number,
-    onContentsRendered: React.PropTypes.func
+    onContentsRendered: React.PropTypes.func,
+    className: React.PropTypes.string,
+    /* By default, <link rel="stylesheet> nodes from the containing frame's
+       head will be cloned into this iframe.  However, if the link also has
+       a "class" attribute, we only clone it if that class attribute is the
+       same as cssClass.  This allows us to avoid injecting stylesheets that
+       aren't intended for this rendering of this component. */
+    cssClass: React.PropTypes.string
   },
   render: function() {
     return React.createElement("iframe", {
       style: this.props.style,
       head: this.props.head,
       width: this.props.width,
-      height: this.props.height
+      height: this.props.height,
+      className: this.props.className
     });
   },
   componentDidMount: function() {
     this.renderFrameContents();
   },
   renderFrameContents: function() {
-    var doc = this.getDOMNode().contentDocument;
-    if (doc && doc.readyState === "complete") {
+    function isStyleSheet(node) {
+      return node.tagName.toLowerCase() === "link" &&
+        node.getAttribute("rel") === "stylesheet";
+    }
+
+    var childDoc = this.getDOMNode().contentDocument;
+    if (childDoc && childDoc.readyState === "complete") {
       // Remove this from the queue.
       window.queuedFrames.splice(window.queuedFrames.indexOf(this), 1);
 
-      var iframeHead = doc.querySelector("head");
+      var iframeHead = childDoc.querySelector("head");
       var parentHeadChildren = document.querySelector("head").children;
 
       [].forEach.call(parentHeadChildren, function(parentHeadNode) {
+
+        // if this node is a CSS stylesheet...
+        if (isStyleSheet(parentHeadNode)) {
+          // and it has a class different from the one that this frame does,
+          // return immediately instead of appending it.
+          if (parentHeadNode.hasAttribute("class") && this.props.cssClass &&
+            parentHeadNode.getAttribute("class") !== this.props.cssClass) {
+            return;
+          }
+        }
+
         iframeHead.appendChild(parentHeadNode.cloneNode(true));
-      });
+      }.bind(this));
 
       var contents = React.createElement("div",
         undefined,
@@ -61,14 +85,14 @@ window.Frame = React.createClass({
         this.props.children
       );
 
-      React.render(contents, doc.body, this.fireOnContentsRendered.bind(this));
+      React.render(contents, childDoc.body, this.fireOnContentsRendered);
 
       // Set the RTL mode. We assume for now that rtl is the only query parameter.
       //
       // See also "ShowCase" in ui-showcase.jsx
       if (document.location.search === "?rtl=1") {
-        doc.documentElement.setAttribute("lang", "ar");
-        doc.documentElement.setAttribute("dir", "rtl");
+        childDoc.documentElement.setAttribute("lang", "ar");
+        childDoc.documentElement.setAttribute("dir", "rtl");
       }
     } else {
       // Queue it, only if it isn't already. We do need to set the timeout
@@ -76,7 +100,7 @@ window.Frame = React.createClass({
       if (window.queuedFrames.indexOf(this) === -1) {
         window.queuedFrames.push(this);
       }
-      setTimeout(this.renderFrameContents.bind(this), 0);
+      setTimeout(this.renderFrameContents, 0);
     }
   },
   /**

browser/components/loop/ui/ui-showcase.css

@@ -57,7 +57,9 @@ body {
   margin: 0 auto; /* width is usually set programmatically */
 }
 
-.showcase > section .comp.dashed {
+.showcase > section .comp.dashed,
+.showcase > section .comp > iframe.dashed
+{
   border: 1px dashed #ccc;
 }
 

browser/components/loop/ui/ui-showcase.js

@@ -100,9 +100,9 @@
    * @returns {loop.store.ActiveRoomStore}
    */
   function makeActiveRoomStore(options) {
-    var dispatcher = new loop.Dispatcher();
+    var roomDispatcher = new loop.Dispatcher();
 
-    var store = new loop.store.ActiveRoomStore(dispatcher, {
+    var store = new loop.store.ActiveRoomStore(roomDispatcher, {
       mozLoop: navigator.mozLoop,
       sdkDriver: mockSDK
     });
@@ -370,7 +370,9 @@
     propTypes: {
       width: React.PropTypes.number,
       height: React.PropTypes.number,
-      onContentsRendered: React.PropTypes.func
+      onContentsRendered: React.PropTypes.func,
+      dashed: React.PropTypes.bool,
+      cssClass: React.PropTypes.string
     },
 
     makeId: function(prefix) {
@@ -378,6 +380,15 @@
     },
 
     render: function() {
+      var height = this.props.height;
+      var width = this.props.width;
+
+      // make room for a 1-pixel border on each edge
+      if (this.props.dashed) {
+        height += 2;
+        width += 2;
+      }
+
       var cx = React.addons.classSet;
       return (
         React.createElement("div", {className: "example"}, 
@@ -385,10 +396,11 @@
             this.props.summary, 
             React.createElement("a", {href: this.makeId("#")}, " ¶")
           ), 
-          React.createElement("div", {className: cx({comp: true, dashed: this.props.dashed}), 
-               style: this.props.style}, 
-            React.createElement(Frame, {width: this.props.width, height: this.props.height, 
-                   onContentsRendered: this.props.onContentsRendered}, 
+          React.createElement("div", {className: "comp"}, 
+            React.createElement(Frame, {width: width, height: height, 
+                   onContentsRendered: this.props.onContentsRendered, 
+                   className: cx({dashed: this.props.dashed}), 
+                   cssClass: this.props.cssClass}, 
               this.props.children
             )
           )
@@ -815,8 +827,9 @@
           ), 
 
           React.createElement(Section, {name: "StandaloneRoomView"}, 
-            React.createElement(FramedExample, {width: 644, height: 483, 
-              summary: "Standalone room conversation (ready)"}, 
+            React.createElement(FramedExample, {width: 644, height: 483, dashed: true, 
+                           cssClass: "standalone", 
+                           summary: "Standalone room conversation (ready)"}, 
               React.createElement("div", {className: "standalone"}, 
                 React.createElement(StandaloneRoomView, {
                   dispatcher: dispatcher, 
@@ -826,8 +839,9 @@
               )
             ), 
 
-            React.createElement(FramedExample, {width: 644, height: 483, 
+            React.createElement(FramedExample, {width: 644, height: 483, dashed: true, 
               summary: "Standalone room conversation (joined)", 
+              cssClass: "standalone", 
               onContentsRendered: joinedRoomStore.forcedUpdate}, 
               React.createElement("div", {className: "standalone"}, 
                 React.createElement(StandaloneRoomView, {
@@ -838,7 +852,8 @@
               )
             ), 
 
-            React.createElement(FramedExample, {width: 644, height: 483, 
+            React.createElement(FramedExample, {width: 644, height: 483, dashed: true, 
+                           cssClass: "standalone", 
                            onContentsRendered: updatingActiveRoomStore.forcedUpdate, 
                            summary: "Standalone room conversation (has-participants, 644x483)"}, 
                 React.createElement("div", {className: "standalone"}, 
@@ -852,7 +867,8 @@
                 )
             ), 
 
-            React.createElement(FramedExample, {width: 644, height: 483, 
+            React.createElement(FramedExample, {width: 644, height: 483, dashed: true, 
+                           cssClass: "standalone", 
                            onContentsRendered: localFaceMuteRoomStore.forcedUpdate, 
                            summary: "Standalone room conversation (local face mute, has-participants, 644x483)"}, 
               React.createElement("div", {className: "standalone"}, 
@@ -865,7 +881,8 @@
               )
             ), 
 
-            React.createElement(FramedExample, {width: 644, height: 483, 
+            React.createElement(FramedExample, {width: 644, height: 483, dashed: true, 
+                           cssClass: "standalone", 
                            onContentsRendered: remoteFaceMuteRoomStore.forcedUpdate, 
                            summary: "Standalone room conversation (remote face mute, has-participants, 644x483)"}, 
               React.createElement("div", {className: "standalone"}, 
@@ -878,7 +895,8 @@
               )
             ), 
 
-            React.createElement(FramedExample, {width: 800, height: 660, 
+            React.createElement(FramedExample, {width: 800, height: 660, dashed: true, 
+                           cssClass: "standalone", 
                            onContentsRendered: updatingSharingRoomStore.forcedUpdate, 
               summary: "Standalone room convo (has-participants, receivingScreenShare, 800x660)"}, 
                 React.createElement("div", {className: "standalone"}, 
@@ -894,7 +912,8 @@
                 )
             ), 
 
-            React.createElement(FramedExample, {width: 644, height: 483, 
+            React.createElement(FramedExample, {width: 644, height: 483, dashed: true, 
+                           cssClass: "standalone", 
                            summary: "Standalone room conversation (full - FFx user)"}, 
               React.createElement("div", {className: "standalone"}, 
                 React.createElement(StandaloneRoomView, {
@@ -904,8 +923,9 @@
               )
             ), 
 
-            React.createElement(FramedExample, {width: 644, height: 483, 
-              summary: "Standalone room conversation (full - non FFx user)"}, 
+            React.createElement(FramedExample, {width: 644, height: 483, dashed: true, 
+                           cssClass: "standalone", 
+                           summary: "Standalone room conversation (full - non FFx user)"}, 
               React.createElement("div", {className: "standalone"}, 
                 React.createElement(StandaloneRoomView, {
                   dispatcher: dispatcher, 
@@ -914,8 +934,9 @@
               )
             ), 
 
-            React.createElement(FramedExample, {width: 644, height: 483, 
-              summary: "Standalone room conversation (feedback)"}, 
+            React.createElement(FramedExample, {width: 644, height: 483, dashed: true, 
+                           cssClass: "standalone", 
+                           summary: "Standalone room conversation (feedback)"}, 
               React.createElement("div", {className: "standalone"}, 
                 React.createElement(StandaloneRoomView, {
                   dispatcher: dispatcher, 
@@ -925,7 +946,8 @@
               )
             ), 
 
-            React.createElement(FramedExample, {width: 644, height: 483, 
+            React.createElement(FramedExample, {width: 644, height: 483, dashed: true, 
+                           cssClass: "standalone", 
                            summary: "Standalone room conversation (failed)"}, 
               React.createElement("div", {className: "standalone"}, 
                 React.createElement(StandaloneRoomView, {
@@ -937,7 +959,7 @@
           ), 
 
           React.createElement(Section, {name: "StandaloneRoomView (Mobile)"}, 
-            React.createElement(FramedExample, {width: 600, height: 480, 
+            React.createElement(FramedExample, {width: 600, height: 480, cssClass: "standalone", 
                            onContentsRendered: updatingActiveRoomStore.forcedUpdate, 
                            summary: "Standalone room conversation (has-participants, 600x480)"}, 
                 React.createElement("div", {className: "standalone"}, 
@@ -953,7 +975,7 @@
           ), 
 
           React.createElement(Section, {name: "TextChatView (standalone)"}, 
-            React.createElement(FramedExample, {width: 200, height: 400, 
+            React.createElement(FramedExample, {width: 200, height: 400, cssClass: "standalone", 
                           summary: "Standalone Text Chat conversation (200 x 400)"}, 
               React.createElement("div", {className: "standalone text-chat-example"}, 
                 React.createElement(TextChatView, {
@@ -995,7 +1017,7 @@
 
     // Wait until all the FramedExamples have been fully loaded.
     setTimeout(function waitForQueuedFrames() {
-      if (window.queuedFrames.length != 0) {
+      if (window.queuedFrames.length !== 0) {
         setTimeout(waitForQueuedFrames, 500);
         return;
       }

browser/components/loop/ui/ui-showcase.jsx

@@ -370,7 +370,9 @@
     propTypes: {
       width: React.PropTypes.number,
       height: React.PropTypes.number,
-      onContentsRendered: React.PropTypes.func
+      onContentsRendered: React.PropTypes.func,
+      dashed: React.PropTypes.bool,
+      cssClass: React.PropTypes.string
     },
 
     makeId: function(prefix) {
@@ -378,6 +380,15 @@
     },
 
     render: function() {
+      var height = this.props.height;
+      var width = this.props.width;
+
+      // make room for a 1-pixel border on each edge
+      if (this.props.dashed) {
+        height += 2;
+        width += 2;
+      }
+
       var cx = React.addons.classSet;
       return (
         <div className="example">
@@ -385,10 +396,11 @@
             {this.props.summary}
             <a href={this.makeId("#")}>&nbsp;¶</a>
           </h3>
-          <div className={cx({comp: true, dashed: this.props.dashed})}
-               style={this.props.style}>
-            <Frame width={this.props.width} height={this.props.height}
-                   onContentsRendered={this.props.onContentsRendered}>
+          <div className="comp">
+            <Frame width={width} height={height}
+                   onContentsRendered={this.props.onContentsRendered}
+                   className={cx({dashed: this.props.dashed})}
+                   cssClass={this.props.cssClass}>
               {this.props.children}
             </Frame>
           </div>
@@ -815,8 +827,9 @@
           </Section>
 
           <Section name="StandaloneRoomView">
-            <FramedExample width={644} height={483}
-              summary="Standalone room conversation (ready)">
+            <FramedExample width={644} height={483} dashed={true}
+                           cssClass="standalone"
+                           summary="Standalone room conversation (ready)">
               <div className="standalone">
                 <StandaloneRoomView
                   dispatcher={dispatcher}
@@ -826,8 +839,9 @@
               </div>
             </FramedExample>
 
-            <FramedExample width={644} height={483}
+            <FramedExample width={644} height={483} dashed={true}
               summary="Standalone room conversation (joined)"
+              cssClass="standalone"
               onContentsRendered={joinedRoomStore.forcedUpdate}>
               <div className="standalone">
                 <StandaloneRoomView
@@ -838,7 +852,8 @@
               </div>
             </FramedExample>
 
-            <FramedExample width={644} height={483}
+            <FramedExample width={644} height={483} dashed={true}
+                           cssClass="standalone"
                            onContentsRendered={updatingActiveRoomStore.forcedUpdate}
                            summary="Standalone room conversation (has-participants, 644x483)">
                 <div className="standalone">
@@ -852,7 +867,8 @@
                 </div>
             </FramedExample>
 
-            <FramedExample width={644} height={483}
+            <FramedExample width={644} height={483} dashed={true}
+                           cssClass="standalone"
                            onContentsRendered={localFaceMuteRoomStore.forcedUpdate}
                            summary="Standalone room conversation (local face mute, has-participants, 644x483)">
               <div className="standalone">
@@ -865,7 +881,8 @@
               </div>
             </FramedExample>
 
-            <FramedExample width={644} height={483}
+            <FramedExample width={644} height={483} dashed={true}
+                           cssClass="standalone"
                            onContentsRendered={remoteFaceMuteRoomStore.forcedUpdate}
                            summary="Standalone room conversation (remote face mute, has-participants, 644x483)">
               <div className="standalone">
@@ -878,7 +895,8 @@
               </div>
             </FramedExample>
 
-            <FramedExample width={800} height={660}
+            <FramedExample width={800} height={660} dashed={true}
+                           cssClass="standalone"
                            onContentsRendered={updatingSharingRoomStore.forcedUpdate}
               summary="Standalone room convo (has-participants, receivingScreenShare, 800x660)">
                 <div className="standalone">
@@ -894,7 +912,8 @@
                 </div>
             </FramedExample>
 
-            <FramedExample width={644} height={483}
+            <FramedExample width={644} height={483} dashed={true}
+                           cssClass="standalone"
                            summary="Standalone room conversation (full - FFx user)">
               <div className="standalone">
                 <StandaloneRoomView
@@ -904,8 +923,9 @@
               </div>
             </FramedExample>
 
-            <FramedExample width={644} height={483}
-              summary="Standalone room conversation (full - non FFx user)">
+            <FramedExample width={644} height={483} dashed={true}
+                           cssClass="standalone"
+                           summary="Standalone room conversation (full - non FFx user)">
               <div className="standalone">
                 <StandaloneRoomView
                   dispatcher={dispatcher}
@@ -914,8 +934,9 @@
               </div>
             </FramedExample>
 
-            <FramedExample width={644} height={483}
-              summary="Standalone room conversation (feedback)">
+            <FramedExample width={644} height={483} dashed={true}
+                           cssClass="standalone"
+                           summary="Standalone room conversation (feedback)">
               <div className="standalone">
                 <StandaloneRoomView
                   dispatcher={dispatcher}
@@ -925,7 +946,8 @@
               </div>
             </FramedExample>
 
-            <FramedExample width={644} height={483}
+            <FramedExample width={644} height={483} dashed={true}
+                           cssClass="standalone"
                            summary="Standalone room conversation (failed)">
               <div className="standalone">
                 <StandaloneRoomView
@@ -937,7 +959,7 @@
           </Section>
 
           <Section name="StandaloneRoomView (Mobile)">
-            <FramedExample width={600} height={480}
+            <FramedExample width={600} height={480} cssClass="standalone"
                            onContentsRendered={updatingActiveRoomStore.forcedUpdate}
                            summary="Standalone room conversation (has-participants, 600x480)">
                 <div className="standalone">
@@ -953,7 +975,7 @@
           </Section>
 
           <Section name="TextChatView (standalone)">
-            <FramedExample width={200} height={400}
+            <FramedExample width={200} height={400} cssClass="standalone"
                           summary="Standalone Text Chat conversation (200 x 400)">
               <div className="standalone text-chat-example">
                 <TextChatView

browser/components/nsBrowserGlue.js

@@ -17,6 +17,9 @@ Cu.import("resource://gre/modules/Services.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "AboutHome",
                                   "resource:///modules/AboutHome.jsm");
 
+XPCOMUtils.defineLazyModuleGetter(this, "AboutNewTab",
+                                  "resource:///modules/AboutNewTab.jsm");
+
 XPCOMUtils.defineLazyModuleGetter(this, "UITour",
                                   "resource:///modules/UITour.jsm");
 
@@ -690,6 +693,7 @@ BrowserGlue.prototype = {
 #endif
     webrtcUI.init();
     AboutHome.init();
+    AboutNewTab.init();
     SessionStore.init();
     BrowserUITelemetry.init();
     ContentSearch.init();
@@ -1015,6 +1019,7 @@ BrowserGlue.prototype = {
 
     CustomizationTabPreloader.uninit();
     WebappManager.uninit();
+    AboutNewTab.uninit();
 #ifdef NIGHTLY_BUILD
     if (Services.prefs.getBoolPref("dom.identity.enabled")) {
       SignInToWebsiteUX.uninit();

browser/components/uitour/test/browser_UITour_loop.js

@@ -44,6 +44,9 @@ let tests = [
     });
 
     let loopDoc = document.getElementById("loop-notification-panel").children[0].contentDocument;
+    yield waitForConditionPromise(() => {
+      return loopDoc.readyState == 'complete';
+    }, "Loop notification panel document should be fully loaded.");
     let gettingStartedButton = loopDoc.getElementById("fte-button");
     ok(gettingStartedButton, "Getting Started button should be found");
 

browser/devtools/framework/toolbox.js

@@ -2068,7 +2068,7 @@ Toolbox.prototype = {
   }),
 
   /**
-   * Disconnects the underlying Performance Actor Connection. If the connection
+   * Disconnects the underlying Performance actor. If the connection
    * has not finished initializing, as opening a toolbox does not wait,
    * the performance connection destroy method will wait for it on its own.
    */

browser/devtools/performance/modules/logic/actors.js

@@ -249,7 +249,7 @@ TimelineFrontFacade.prototype = {
 
   /**
    * An aggregate of all events (markers, frames, memory, ticks) and exposes
-   * to PerformanceActorsConnection as a single event.
+   * to PerformanceFront as a single event.
    */
   _onTimelineData: function (type, ...data) {
     this.emit("timeline-data", type, ...data);

browser/devtools/performance/modules/logic/frame-utils.js

@@ -259,6 +259,7 @@ function getOrAddInflatedFrame(cache, index, frameTable, stringTable, allocation
  */
 function InflatedFrame(index, frameTable, stringTable, allocationsTable) {
   const LOCATION_SLOT = frameTable.schema.location;
+  const IMPLEMENTATION_SLOT = frameTable.schema.implementation;
   const OPTIMIZATIONS_SLOT = frameTable.schema.optimizations;
   const LINE_SLOT = frameTable.schema.line;
   const CATEGORY_SLOT = frameTable.schema.category;
@@ -266,6 +267,7 @@ function InflatedFrame(index, frameTable, stringTable, allocationsTable) {
   let frame = frameTable.data[index];
   let category = frame[CATEGORY_SLOT];
   this.location = stringTable[frame[LOCATION_SLOT]];
+  this.implementation = frame[IMPLEMENTATION_SLOT];
   this.optimizations = frame[OPTIMIZATIONS_SLOT];
   this.line = frame[LINE_SLOT];
   this.column = undefined;

browser/devtools/performance/modules/logic/front.js

@@ -35,8 +35,8 @@ let PerformanceFronts = new WeakMap();
  *
  * @param Target target
  *        The target owning this connection.
- * @return PerformanceActorsConnection
- *         The shared connection for the specified target.
+ * @return PerformanceFront
+ *         The pseudofront for all the underlying actors.
  */
 PerformanceFronts.forTarget = function(target) {
   if (this.has(target)) {
@@ -350,7 +350,7 @@ PerformanceFront.prototype = {
    *         Returns the same model, populated with the profiling data.
    */
   stopRecording: Task.async(function*(model) {
-    // If model isn't in the PerformanceActorsConnections internal store,
+    // If model isn't in the PerformanceFront internal store,
     // then do nothing.
     if (this._recordings.indexOf(model) === -1) {
       return;
@@ -460,6 +460,7 @@ function getRecordingModelPrefs () {
     withMemory: Services.prefs.getBoolPref("devtools.performance.ui.enable-memory"),
     withTicks: Services.prefs.getBoolPref("devtools.performance.ui.enable-framerate"),
     withAllocations: Services.prefs.getBoolPref("devtools.performance.ui.enable-allocations"),
+    withJITOptimizations: Services.prefs.getBoolPref("devtools.performance.ui.enable-jit-optimizations"),
     allocationsSampleProbability: +Services.prefs.getCharPref("devtools.performance.memory.sample-probability"),
     allocationsMaxLogLength: Services.prefs.getIntPref("devtools.performance.memory.max-log-length")
   };

browser/devtools/performance/modules/logic/jit.js

@@ -207,7 +207,7 @@ const JITOptimizations = function (rawSites, stringTable) {
     };
   }
 
-  this.optimizationSites = sites.sort((a, b) => b.samples - a.samples);;
+  this.optimizationSites = sites.sort((a, b) => b.samples - a.samples);
 };
 
 /**
@@ -252,5 +252,94 @@ function maybeTypeset(typeset, stringTable) {
   });
 }
 
+// Map of optimization implementation names to an enum.
+const IMPLEMENTATION_MAP = {
+  "interpreter": 0,
+  "baseline": 1,
+  "ion": 2
+};
+const IMPLEMENTATION_NAMES = Object.keys(IMPLEMENTATION_MAP);
+
+/**
+ * Takes data from a FrameNode and computes rendering positions for
+ * a stacked mountain graph, to visualize JIT optimization tiers over time.
+ *
+ * @param {FrameNode} frameNode
+ *                    The FrameNode who's optimizations we're iterating.
+ * @param {Array<number>} sampleTimes
+ *                        An array of every sample time within the range we're counting.
+ *                        From a ThreadNode's `sampleTimes` property.
+ * @param {number} op.startTime
+ *                 The start time of the first sample.
+ * @param {number} op.endTime
+ *                 The end time of the last sample.
+ * @param {number} op.resolution
+ *                 The maximum amount of possible data points returned.
+ *                 Also determines the size in milliseconds of each bucket
+ *                 via `(endTime - startTime) / resolution`
+ * @return {?Array<object>}
+ */
+function createTierGraphDataFromFrameNode (frameNode, sampleTimes, { startTime, endTime, resolution }) {
+  if (!frameNode.hasOptimizations()) {
+    return;
+  }
+
+  let tierData = frameNode.getOptimizationTierData();
+  let duration = endTime - startTime;
+  let stringTable = frameNode._stringTable;
+  let output = [];
+  let implEnum;
+
+  let tierDataIndex = 0;
+  let nextOptSample = tierData[tierDataIndex];
+
+  // Bucket data
+  let samplesInCurrentBucket = 0;
+  let currentBucketStartTime = sampleTimes[0];
+  let bucket = [];
+  // Size of each bucket in milliseconds
+  let bucketSize = Math.ceil(duration / resolution);
+
+  // Iterate one after the samples, so we can finalize the last bucket
+  for (let i = 0; i <= sampleTimes.length; i++) {
+    let sampleTime = sampleTimes[i];
+
+    // If this sample is in the next bucket, or we're done
+    // checking sampleTimes and on the last iteration, finalize previous bucket
+    if (sampleTime >= (currentBucketStartTime + bucketSize) ||
+        i >= sampleTimes.length) {
+
+      let dataPoint = {};
+      dataPoint.ys = [];
+      dataPoint.x = currentBucketStartTime;
+
+      // Map the opt site counts as a normalized percentage (0-1)
+      // of its count in context of total samples this bucket
+      for (let j = 0; j < IMPLEMENTATION_NAMES.length; j++) {
+        dataPoint.ys[j] = (bucket[j] || 0) / (samplesInCurrentBucket || 1);
+      }
+      output.push(dataPoint);
+
+      // Set the new start time of this bucket and reset its count
+      currentBucketStartTime += bucketSize;
+      samplesInCurrentBucket = 0;
+      bucket = [];
+    }
+
+    // If this sample observed an optimization in this frame, record it
+    if (nextOptSample && nextOptSample.time === sampleTime) {
+      // If no implementation defined, it was the "interpreter".
+      implEnum = IMPLEMENTATION_MAP[stringTable[nextOptSample.implementation] || "interpreter"];
+      bucket[implEnum] = (bucket[implEnum] || 0) + 1;
+      nextOptSample = tierData[++tierDataIndex];
+    }
+
+    samplesInCurrentBucket++;
+  }
+
+  return output;
+}
+
+exports.createTierGraphDataFromFrameNode = createTierGraphDataFromFrameNode;
 exports.OptimizationSite = OptimizationSite;
 exports.JITOptimizations = JITOptimizations;

browser/devtools/performance/modules/logic/recording-model.js

@@ -25,6 +25,7 @@ const RecordingModel = function (options={}) {
     withTicks: options.withTicks || false,
     withMemory: options.withMemory || false,
     withAllocations: options.withAllocations || false,
+    withJITOptimizations: options.withJITOptimizations || false,
     allocationsSampleProbability: options.allocationsSampleProbability || 0,
     allocationsMaxLogLength: options.allocationsMaxLogLength || 0,
     bufferSize: options.bufferSize || 0,
@@ -88,8 +89,8 @@ RecordingModel.prototype = {
   }),
 
   /**
-   * Sets up the instance with data from the SharedPerformanceConnection when
-   * starting a recording. Should only be called by SharedPerformanceConnection.
+   * Sets up the instance with data from the PerformanceFront when
+   * starting a recording. Should only be called by PerformanceFront.
    */
   _populate: function (info) {
     // Times must come from the actor in order to be self-consistent.
@@ -130,8 +131,8 @@ RecordingModel.prototype = {
   },
 
   /**
-   * Sets results available from stopping a recording from SharedPerformanceConnection.
-   * Should only be called by SharedPerformanceConnection.
+   * Sets results available from stopping a recording from PerformanceFront.
+   * Should only be called by PerformanceFront.
    */
   _onStopRecording: Task.async(function *({ profilerEndTime, profile }) {
     // Update the duration with the accurate profilerEndTime, so we don't have
@@ -184,7 +185,8 @@ RecordingModel.prototype = {
 
   /**
    * Returns configuration object of specifying whether the recording
-   * was started withTicks, withMemory and withAllocations.
+   * was started withTicks, withMemory and withAllocations and other
+   * recording options.
    * @return object
    */
   getConfiguration: function () {

browser/devtools/performance/modules/logic/recording-utils.js

@@ -318,6 +318,20 @@ function deflateMarkers(markers, uniqueStacks) {
  * @return object
  */
 function deflateThread(thread, uniqueStacks) {
+  // Some extra threads in a profile come stringified as a full profile (so
+  // it has nested threads itself) so the top level "thread" does not have markers
+  // or samples. We don't use this anyway so just make this safe to deflate.
+  // can be a string rather than an object on import. Bug 1173695
+  if (typeof thread === "string") {
+    thread = JSON.parse(thread);
+  }
+  if (!thread.samples) {
+    thread.samples = [];
+  }
+  if (!thread.markers) {
+    thread.markers = [];
+  }
+
   return {
     name: thread.name,
     tid: thread.tid,

browser/devtools/performance/modules/logic/tree-model.js

@@ -35,6 +35,7 @@ function ThreadNode(thread, options = {}) {
     throw new Error("ThreadNode requires both `startTime` and `endTime`.");
   }
   this.samples = 0;
+  this.sampleTimes = [];
   this.youngestFrameSamples = 0;
   this.calls = [];
   this.duration = options.endTime - options.startTime;
@@ -131,11 +132,6 @@ ThreadNode.prototype = {
     let endTime = options.endTime;
     let flattenRecursion = options.flattenRecursion;
 
-    // Take the timestamp of the first sample as prevSampleTime. 0 is
-    // incorrect due to circular buffer wraparound. If wraparound happens,
-    // then the first sample will have an incorrect, large duration.
-    let prevSampleTime = samplesData[0][SAMPLE_TIME_SLOT];
-
     // Reused options object passed to InflatedFrame.prototype.getFrameKey.
     let mutableFrameKeyOptions = {
       contentOnly: options.contentOnly,
@@ -144,9 +140,7 @@ ThreadNode.prototype = {
       isMetaCategoryOut: false
     };
 
-    // Start iteration at the second sample, as we use the first sample to
-    // compute prevSampleTime.
-    for (let i = 1; i < samplesData.length; i++) {
+    for (let i = 0; i < samplesData.length; i++) {
       let sample = samplesData[i];
       let sampleTime = sample[SAMPLE_TIME_SLOT];
 
@@ -156,7 +150,6 @@ ThreadNode.prototype = {
       // Thus, we compare sampleTime <= start instead of < to filter out
       // samples that end exactly at the start time.
       if (!sampleTime || sampleTime <= startTime || sampleTime > endTime) {
-        prevSampleTime = sampleTime;
         continue;
       }
 
@@ -235,7 +228,10 @@ ThreadNode.prototype = {
                                           leafTable);
         if (isLeaf) {
           frameNode.youngestFrameSamples++;
-          frameNode._addOptimizations(inflatedFrame.optimizations, stringTable);
+          if (inflatedFrame.optimizations) {
+            frameNode._addOptimizations(inflatedFrame.optimizations, inflatedFrame.implementation,
+                                        sampleTime, stringTable);
+          }
         }
         frameNode.samples++;
 
@@ -245,6 +241,7 @@ ThreadNode.prototype = {
       }
 
       this.samples++;
+      this.sampleTimes.push(sampleTime);
     }
   },
 
@@ -372,6 +369,7 @@ function FrameNode(frameKey, { location, line, category, allocations, isContent
   this.calls = [];
   this.isContent = !!isContent;
   this._optimizations = null;
+  this._tierData = null;
   this._stringTable = null;
   this.isMetaCategory = !!isMetaCategory;
   this.category = category;
@@ -384,19 +382,30 @@ FrameNode.prototype = {
    * @param object optimizationSite
    *               Any JIT optimization information attached to the current
    *               sample. Lazily inflated via stringTable.
+   * @param number implementation
+   *               JIT implementation used for this observed frame (interpreter,
+   *               baseline, ion);
+   * @param number time
+   *               The time this optimization occurred.
    * @param object stringTable
    *               The string table used to inflate the optimizationSite.
    */
-  _addOptimizations: function (optimizationSite, stringTable) {
+  _addOptimizations: function (site, implementation, time, stringTable) {
     // Simply accumulate optimization sites for now. Processing is done lazily
     // by JITOptimizations, if optimization information is actually displayed.
-    if (optimizationSite) {
+    if (site) {
       let opts = this._optimizations;
       if (opts === null) {
         opts = this._optimizations = [];
         this._stringTable = stringTable;
       }
-      opts.push(optimizationSite);
+      opts.push(site);
+
+      if (this._tierData === null) {
+        this._tierData = [];
+      }
+      // Record type of implementation used and the sample time
+      this._tierData.push({ implementation, time });
     }
   },
 
@@ -475,6 +484,18 @@ FrameNode.prototype = {
     }
     return new JITOptimizations(this._optimizations, this._stringTable);
   },
+
+  /**
+   * Returns the optimization tiers used overtime.
+   *
+   * @return {?Array<object>}
+   */
+  getOptimizationTierData: function () {
+    if (!this._tierData) {
+      return null;
+    }
+    return this._tierData;
+  }
 };
 
 exports.ThreadNode = ThreadNode;

browser/devtools/performance/modules/widgets/graphs.js

@@ -9,10 +9,10 @@
 
 const { Cc, Ci, Cu, Cr } = require("chrome");
 const { Task } = require("resource://gre/modules/Task.jsm");
-const { LineGraphWidget } = require("resource:///modules/devtools/Graphs.jsm");
-const { BarGraphWidget } = require("resource:///modules/devtools/Graphs.jsm");
-const { CanvasGraphUtils } = require("resource:///modules/devtools/Graphs.jsm");
 const { Heritage } = require("resource:///modules/devtools/ViewHelpers.jsm");
+const { LineGraphWidget } = require("devtools/shared/widgets/Graphs");
+const { BarGraphWidget } = require("devtools/shared/widgets/Graphs");
+const { CanvasGraphUtils } = require("devtools/shared/widgets/Graphs");
 
 loader.lazyRequireGetter(this, "promise");
 loader.lazyRequireGetter(this, "EventEmitter",
@@ -325,7 +325,7 @@ GraphsController.prototype = {
 
   /**
    * Fetches the currently mapped selection. If graphs are not yet rendered,
-   * (which throws in Graphs.jsm), return null.
+   * (which throws in Graphs.js), return null.
    */
   getMappedSelection: function ({ mapStart, mapEnd }) {
     let primary = this._getPrimaryLink();

browser/devtools/performance/modules/widgets/markers-overview.js

@@ -10,8 +10,8 @@
  */
 
 const { Cc, Ci, Cu, Cr } = require("chrome");
-const { AbstractCanvasGraph } = require("resource:///modules/devtools/Graphs.jsm");
 const { Heritage } = require("resource:///modules/devtools/ViewHelpers.jsm");
+const { AbstractCanvasGraph } = require("devtools/shared/widgets/Graphs");
 
 loader.lazyRequireGetter(this, "colorUtils",
   "devtools/css-color", true);

browser/devtools/performance/performance-controller.js

@@ -295,6 +295,7 @@ let PerformanceController = {
       withMarkers: true,
       withMemory: this.getOption("enable-memory"),
       withTicks: this.getOption("enable-framerate"),
+      withJITOptimizations: this.getOption("enable-jit-optimizations"),
       withAllocations: this.getOption("enable-allocations"),
       allocationsSampleProbability: this.getPref("memory-sample-probability"),
       allocationsMaxLogLength: this.getPref("memory-max-log-length"),

browser/devtools/performance/performance.xul

@@ -69,12 +69,12 @@
                 data-pref="flatten-tree-recursion"
                 label="&profilerUI.flattenTreeRecursion;"
                 tooltiptext="&profilerUI.flattenTreeRecursion.tooltiptext;"/>
-      <menuitem id="option-show-jit-optimizations"
+      <menuitem id="option-enable-jit-optimizations"
                 class="experimental-option"
                 type="checkbox"
-                data-pref="show-jit-optimizations"
-                label="&profilerUI.showJITOptimizations;"
-                tooltiptext="&profilerUI.showJITOptimizations.tooltiptext;"/>
+                data-pref="enable-jit-optimizations"
+                label="&profilerUI.enableJITOptimizations;"
+                tooltiptext="&profilerUI.enableJITOptimizations.tooltiptext;"/>
     </menupopup>
   </popupset>
 

browser/devtools/performance/test/browser.ini

@@ -68,8 +68,6 @@ support-files =
 [browser_perf-highlighted.js]
 [browser_perf-jit-view-01.js]
 [browser_perf-jit-view-02.js]
-[browser_perf-jit-model-01.js]
-[browser_perf-jit-model-02.js]
 [browser_perf-loading-01.js]
 [browser_perf-loading-02.js]
 [browser_perf-marker-details-01.js]
@@ -88,6 +86,7 @@ support-files =
 [browser_perf-options-show-idle-blocks-02.js]
 [browser_perf-options-enable-memory-01.js]
 [browser_perf-options-enable-memory-02.js]
+[browser_perf-options-enable-optimizations.js]
 [browser_perf-options-enable-framerate.js]
 [browser_perf-options-allocations.js]
 [browser_perf-options-profiler.js]
@@ -116,6 +115,7 @@ support-files =
 [browser_perf_recordings-io-03.js]
 [browser_perf_recordings-io-04.js]
 [browser_perf_recordings-io-05.js]
+[browser_perf_recordings-io-06.js]
 [browser_perf-range-changed-render.js]
 [browser_perf-recording-selected-01.js]
 [browser_perf-recording-selected-02.js]

browser/devtools/performance/test/browser_perf-jit-view-01.js

@@ -17,7 +17,9 @@ function* spawnTest() {
 
   let profilerData = { threads: [gThread] }
 
-  is(Services.prefs.getBoolPref(JIT_PREF), false, "show JIT Optimizations pref off by default");
+  is(Services.prefs.getBoolPref(JIT_PREF), false, "record JIT Optimizations pref off by default");
+  Services.prefs.setBoolPref(JIT_PREF, true);
+  is(Services.prefs.getBoolPref(JIT_PREF), true, "toggle on record JIT Optimizations");
 
   // Make two recordings, so we have one to switch to later, as the
   // second one will have fake sample data
@@ -56,27 +58,20 @@ function* spawnTest() {
     let recording = PerformanceController.getCurrentRecording();
     recording._profile = profilerData;
 
-    is($("#jit-optimizations-view").hidden, true, "JIT Optimizations panel is hidden when pref off.");
-
     // Force a rerender
     let rendered = once(JsCallTreeView, EVENTS.JS_CALL_TREE_RENDERED);
     JsCallTreeView.render(OverviewView.getTimeInterval());
     yield rendered;
 
-    is($("#jit-optimizations-view").hidden, true, "JIT Optimizations panel still hidden when rerendered");
-    Services.prefs.setBoolPref(JIT_PREF, true);
     is($("#jit-optimizations-view").hidden, false, "JIT Optimizations should be visible when pref is on");
     ok($("#jit-optimizations-view").classList.contains("empty"),
       "JIT Optimizations view has empty message when no frames selected.");
-
-     Services.prefs.setBoolPref(JIT_PREF, false);
   }
 
   function *checkFrame (frameIndex, expectedOpts=[]) {
     // Click the frame
     let rendered = once(JITOptimizationsView, EVENTS.OPTIMIZATIONS_RENDERED);
     mousedown(window, $$(".call-tree-item")[frameIndex]);
-    Services.prefs.setBoolPref(JIT_PREF, true);
     yield rendered;
     ok(true, "JITOptimizationsView rendered when enabling with the current frame node selected");
 

browser/devtools/performance/test/browser_perf-jit-view-02.js

@@ -19,7 +19,7 @@ function* spawnTest() {
 
   let profilerData = { threads: [gThread] };
 
-  is(Services.prefs.getBoolPref(JIT_PREF), false, "show JIT Optimizations pref off by default");
+  Services.prefs.setBoolPref(JIT_PREF, true);
 
   // Make two recordings, so we have one to switch to later, as the
   // second one will have fake sample data
@@ -33,7 +33,6 @@ function* spawnTest() {
 
   yield injectAndRenderProfilerData();
 
-  Services.prefs.setBoolPref(JIT_PREF, true);
   // Click the frame
   let rendered = once(JITOptimizationsView, EVENTS.OPTIMIZATIONS_RENDERED);
   mousedown(window, $$(".call-tree-item")[2]);
@@ -64,11 +63,8 @@ function* spawnTest() {
     JsCallTreeView.render(OverviewView.getTimeInterval());
     yield rendered;
 
-    Services.prefs.setBoolPref(JIT_PREF, true);
     ok($("#jit-optimizations-view").classList.contains("empty"),
       "JIT Optimizations view has empty message when no frames selected.");
-
-     Services.prefs.setBoolPref(JIT_PREF, false);
   }
 }
 

browser/devtools/performance/test/browser_perf-options-enable-optimizations.js

@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that `enable-jit-optimizations` sets the recording to subsequently
+ * display optimizations info.
+ */
+function* spawnTest() {
+  let { panel } = yield initPerformance(SIMPLE_URL);
+  let { EVENTS, PerformanceController, $, DetailsView, JsCallTreeView } = panel.panelWin;
+  Services.prefs.setBoolPref(JIT_PREF, true);
+
+
+  yield startRecording(panel);
+  let rendered = once(JsCallTreeView, EVENTS.JS_CALL_TREE_RENDERED);
+  yield stopRecording(panel);
+
+  yield DetailsView.selectView("js-calltree");
+  ok(DetailsView.isViewSelected(JsCallTreeView), "The call tree is now selected.");
+  yield rendered;
+
+  let recording = PerformanceController.getCurrentRecording();
+  is(recording.getConfiguration().withJITOptimizations, true, "recording model has withJITOptimizations as true");
+
+  // Set back to false, should not affect display of first recording
+  info("Disabling enable-jit-optimizations");
+  Services.prefs.setBoolPref(JIT_PREF, false);
+  is($("#jit-optimizations-view").hidden, false, "JIT Optimizations panel is displayed when feature enabled.");
+
+  yield startRecording(panel);
+  rendered = once(JsCallTreeView, EVENTS.JS_CALL_TREE_RENDERED);
+  yield stopRecording(panel);
+
+  yield DetailsView.selectView("js-calltree");
+  ok(DetailsView.isViewSelected(JsCallTreeView), "The call tree is now selected.");
+  yield rendered;
+
+  recording = PerformanceController.getCurrentRecording();
+  is(recording.getConfiguration().withJITOptimizations, false, "recording model has withJITOptimizations as false");
+  is($("#jit-optimizations-view").hidden, true, "JIT Optimizations panel is hidden when feature disabled");
+
+  yield teardown(panel);
+  finish();
+}

browser/devtools/performance/test/browser_perf-shared-connection-02.js

@@ -2,7 +2,7 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 /**
- * Tests if the shared PerformanceActorsConnection is only opened once.
+ * Tests if the shared PerformanceFront is only opened once.
  */
 
 let gProfilerConnectionsOpened = 0;

browser/devtools/performance/test/browser_perf-shared-connection-03.js

@@ -2,7 +2,7 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 /**
- * Tests if the shared PerformanceActorsConnection can properly send requests.
+ * Tests if the shared PerformanceFront can properly send requests.
  */
 
 function* spawnTest() {

browser/devtools/performance/test/browser_perf_recordings-io-06.js

@@ -0,0 +1,142 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests if the performance tool can import profiler data when Profiler is v2
+ * and requires deflating, and has an extra thread that's a string. Not sure
+ * what causes this.
+ */
+let RecordingUtils = devtools.require("devtools/performance/recording-utils");
+
+let STRINGED_THREAD = (function () {
+  let thread = {};
+
+  thread.libs = [{
+    start: 123,
+    end: 456,
+    offset: 0,
+    name: "",
+    breakpadId: ""
+  }];
+  thread.meta = { version: 2, interval: 1, stackwalk: 0, processType: 1, startTime: 0 };
+  thread.threads = [{
+    name: "Plugin",
+    tid: 4197,
+    samples: [],
+    markers: [],
+  }];
+
+  return JSON.stringify(thread);
+})();
+
+let PROFILER_DATA = (function () {
+  let data = {};
+  let threads = data.threads = [];
+  let thread = {};
+  threads.push(thread);
+  threads.push(STRINGED_THREAD);
+  thread.name = "Content";
+  thread.samples = [{
+    time: 5,
+    frames: [
+      { location: "(root)" },
+      { location: "A" },
+      { location: "B" },
+      { location: "C" }
+    ]
+  }, {
+    time: 5 + 6,
+    frames: [
+      { location: "(root)" },
+      { location: "A" },
+      { location: "B" },
+      { location: "D" }
+    ]
+  }, {
+    time: 5 + 6 + 7,
+    frames: [
+      { location: "(root)" },
+      { location: "A" },
+      { location: "E" },
+      { location: "F" }
+    ]
+  }, {
+    time: 20,
+    frames: [
+      { location: "(root)" },
+      { location: "A" },
+      { location: "B" },
+      { location: "C" },
+      { location: "D" },
+      { location: "E" },
+      { location: "F" },
+      { location: "G" }
+    ]
+  }];
+
+  // Handled in other deflating tests
+  thread.markers = [];
+
+  let meta = data.meta = {};
+  meta.version = 2;
+  meta.interval = 1;
+  meta.stackwalk = 0;
+  meta.product = "Firefox";
+  return data;
+})();
+
+let test = Task.async(function*() {
+  let { target, panel, toolbox } = yield initPerformance(SIMPLE_URL);
+  let { $, EVENTS, PerformanceController, DetailsView, JsCallTreeView } = panel.panelWin;
+
+  let profilerData = {
+    profile: PROFILER_DATA,
+    duration: 10000,
+    configuration: {},
+    fileType: "Recorded Performance Data",
+    version: 2
+  };
+
+  let file = FileUtils.getFile("TmpD", ["tmpprofile.json"]);
+  file.createUnique(Ci.nsIFile.NORMAL_FILE_TYPE, parseInt("666", 8));
+  yield asyncCopy(profilerData, file);
+
+  // Import recording.
+
+  let calltreeRendered = once(JsCallTreeView, EVENTS.JS_CALL_TREE_RENDERED);
+  let imported = once(PerformanceController, EVENTS.RECORDING_IMPORTED);
+  yield PerformanceController.importRecording("", file);
+
+  yield imported;
+  ok(true, "The profiler data appears to have been successfully imported.");
+
+  yield calltreeRendered;
+  ok(true, "The imported data was re-rendered.");
+
+  yield teardown(panel);
+  finish();
+});
+
+function getUnicodeConverter() {
+  let className = "@mozilla.org/intl/scriptableunicodeconverter";
+  let converter = Cc[className].createInstance(Ci.nsIScriptableUnicodeConverter);
+  converter.charset = "UTF-8";
+  return converter;
+}
+
+function asyncCopy(data, file) {
+  let deferred = Promise.defer();
+
+  let string = JSON.stringify(data);
+  let inputStream = getUnicodeConverter().convertToInputStream(string);
+  let outputStream = FileUtils.openSafeFileOutputStream(file);
+
+  NetUtil.asyncCopy(inputStream, outputStream, status => {
+    if (!Components.isSuccessCode(status)) {
+      deferred.reject(new Error("Could not save data to file."));
+    }
+    deferred.resolve();
+  });
+
+  return deferred.promise;
+}

browser/devtools/performance/test/head.js

@@ -39,7 +39,7 @@ const IDLE_PREF = "devtools.performance.ui.show-idle-blocks";
 const INVERT_PREF = "devtools.performance.ui.invert-call-tree";
 const INVERT_FLAME_PREF = "devtools.performance.ui.invert-flame-graph";
 const FLATTEN_PREF = "devtools.performance.ui.flatten-tree-recursion";
-const JIT_PREF = "devtools.performance.ui.show-jit-optimizations";
+const JIT_PREF = "devtools.performance.ui.enable-jit-optimizations";
 const EXPERIMENTAL_PREF = "devtools.performance.ui.experimental";
 
 // All tests are asynchronous.
@@ -56,7 +56,7 @@ let DEFAULT_PREFS = [
   "devtools.performance.ui.enable-memory",
   "devtools.performance.ui.enable-allocations",
   "devtools.performance.ui.enable-framerate",
-  "devtools.performance.ui.show-jit-optimizations",
+  "devtools.performance.ui.enable-jit-optimizations",
   "devtools.performance.memory.sample-probability",
   "devtools.performance.memory.max-log-length",
   "devtools.performance.profiler.buffer-size",

browser/devtools/performance/test/unit/test_jit-graph-data.js

@@ -0,0 +1,186 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Unit test for `createTierGraphDataFromFrameNode` function.
+ */
+
+function run_test() {
+  run_next_test();
+}
+
+const SAMPLE_COUNT = 1000;
+const RESOLUTION = 50;
+const TIME_PER_SAMPLE = 5;
+
+// Offset needed since ThreadNode requires the first sample to be strictly
+// greater than its start time. This lets us still have pretty numbers
+// in this test to keep it (more) simple, which it sorely needs.
+const TIME_OFFSET = 5;
+
+add_task(function test() {
+  let { ThreadNode } = devtools.require("devtools/performance/tree-model");
+  let { createTierGraphDataFromFrameNode } = devtools.require("devtools/performance/jit");
+
+  // Select the second half of the set of samples
+  let startTime = (SAMPLE_COUNT / 2 * TIME_PER_SAMPLE) - TIME_OFFSET;
+  let endTime = (SAMPLE_COUNT * TIME_PER_SAMPLE) - TIME_OFFSET;
+  let invertTree = true;
+
+  let root = new ThreadNode(gThread, { invertTree, startTime, endTime });
+
+  equal(root.samples, SAMPLE_COUNT / 2, "root has correct amount of samples");
+  equal(root.sampleTimes.length, SAMPLE_COUNT / 2, "root has correct amount of sample times");
+  // Add time offset since the first sample begins TIME_OFFSET after startTime
+  equal(root.sampleTimes[0], startTime + TIME_OFFSET, "root recorded first sample time in scope");
+  equal(root.sampleTimes[root.sampleTimes.length - 1], endTime, "root recorded last sample time in scope");
+
+  let frame = getFrameNodePath(root, "X");
+  let data = createTierGraphDataFromFrameNode(frame, root.sampleTimes, { startTime, endTime, resolution: RESOLUTION });
+
+  let TIME_PER_WINDOW = SAMPLE_COUNT / 2 / RESOLUTION * TIME_PER_SAMPLE;
+
+  for (let i = 0; i < 10; i++) {
+    equal(data[i].x, startTime + TIME_OFFSET + (TIME_PER_WINDOW * i), "first window has correct x");
+    equal(data[i].ys[0], 0.2, "first window has 2 frames in interpreter");
+    equal(data[i].ys[1], 0.2, "first window has 2 frames in baseline");
+    equal(data[i].ys[2], 0.2, "first window has 2 frames in ion");
+  }
+  for (let i = 10; i < 20; i++) {
+    equal(data[i].x, startTime + TIME_OFFSET + (TIME_PER_WINDOW * i), "second window has correct x");
+    equal(data[i].ys[0], 0, "second window observed no optimizations");
+    equal(data[i].ys[1], 0, "second window observed no optimizations");
+    equal(data[i].ys[2], 0, "second window observed no optimizations");
+  }
+  for (let i = 20; i < 30; i++) {
+    equal(data[i].x, startTime + TIME_OFFSET + (TIME_PER_WINDOW * i), "third window has correct x");
+    equal(data[i].ys[0], 0.3, "third window has 3 frames in interpreter");
+    equal(data[i].ys[1], 0, "third window has 0 frames in baseline");
+    equal(data[i].ys[2], 0, "third window has 0 frames in ion");
+  }
+});
+
+let gUniqueStacks = new RecordingUtils.UniqueStacks();
+
+function uniqStr(s) {
+  return gUniqueStacks.getOrAddStringIndex(s);
+}
+
+const TIER_PATTERNS = [
+  // 0-99
+  ["X", "X", "X", "X", "X", "X", "X", "X", "X", "X"],
+  // 100-199
+  ["X", "X", "X", "X", "X", "X", "X", "X", "X", "X"],
+  // 200-299
+  ["X", "X", "X", "X", "X", "X", "X", "X", "X", "X"],
+  // 300-399
+  ["X", "X", "X", "X", "X", "X", "X", "X", "X", "X"],
+  // 400-499
+  ["X", "X", "X", "X", "X", "X", "X", "X", "X", "X"],
+
+  // 500-599
+  // Test current frames in all opts, including that
+  // the same frame with no opts does not get counted
+  ["X", "X", "A", "A", "X_1", "X_2", "X_1", "X_2", "X_0", "X_0"],
+
+  // 600-699
+  // Nothing for current frame
+  ["A", "B", "A", "B", "A", "B", "A", "B", "A", "B"],
+
+  // 700-799
+  // A few frames where the frame is not the leaf node
+  ["X_2 -> Y", "X_2 -> Y", "X_2 -> Y", "X_0", "X_0", "X_0", "A", "A", "A", "A"],
+
+  // 800-899
+  ["X", "X", "X", "X", "X", "X", "X", "X", "X", "X"],
+  // 900-999
+  ["X", "X", "X", "X", "X", "X", "X", "X", "X", "X"],
+];
+
+function createSample (i, frames) {
+  let sample = {};
+  sample.time = i * TIME_PER_SAMPLE;
+  sample.frames = [{ location: "(root)" }];
+  if (i === 0) {
+    return sample;
+  }
+  if (frames) {
+    frames.split(" -> ").forEach(frame => sample.frames.push({ location: frame }));
+  }
+  return sample;
+}
+
+let SAMPLES = (function () {
+  let samples = [];
+
+  for (let i = 0; i < SAMPLE_COUNT;) {
+    let pattern = TIER_PATTERNS[Math.floor(i/100)];
+    for (let j = 0; j < pattern.length; j++) {
+      samples.push(createSample(i+j, pattern[j]));
+    }
+    i += 10;
+  }
+
+  return samples;
+})();
+
+let gThread = RecordingUtils.deflateThread({ samples: SAMPLES, markers: [] }, gUniqueStacks);
+
+let gRawSite1 = {
+  line: 12,
+  column: 2,
+  types: [{
+    mirType: uniqStr("Object"),
+    site: uniqStr("B (http://foo/bar:10)"),
+    typeset: [{
+        keyedBy: uniqStr("constructor"),
+        name: uniqStr("Foo"),
+        location: uniqStr("B (http://foo/bar:10)")
+    }, {
+        keyedBy: uniqStr("primitive"),
+        location: uniqStr("self-hosted")
+    }]
+  }],
+  attempts: {
+    schema: {
+      outcome: 0,
+      strategy: 1
+    },
+    data: [
+      [uniqStr("Failure1"), uniqStr("SomeGetter1")],
+      [uniqStr("Failure2"), uniqStr("SomeGetter2")],
+      [uniqStr("Inlined"), uniqStr("SomeGetter3")]
+    ]
+  }
+};
+
+function serialize (x) {
+  return JSON.parse(JSON.stringify(x));
+}
+
+gThread.frameTable.data.forEach((frame) => {
+  const LOCATION_SLOT = gThread.frameTable.schema.location;
+  const OPTIMIZATIONS_SLOT = gThread.frameTable.schema.optimizations;
+  const IMPLEMENTATION_SLOT = gThread.frameTable.schema.implementation;
+
+  let l = gThread.stringTable[frame[LOCATION_SLOT]];
+  switch (l) {
+  // Rename some of the location sites so we can register different
+  // frames with different opt sites
+  case "X_0":
+    frame[LOCATION_SLOT] = uniqStr("X");
+    frame[OPTIMIZATIONS_SLOT] = serialize(gRawSite1);
+    frame[IMPLEMENTATION_SLOT] = null;
+    break;
+  case "X_1":
+    frame[LOCATION_SLOT] = uniqStr("X");
+    frame[OPTIMIZATIONS_SLOT] = serialize(gRawSite1);
+    frame[IMPLEMENTATION_SLOT] = uniqStr("baseline");
+    break;
+  case "X_2":
+    frame[LOCATION_SLOT] = uniqStr("X");
+    frame[OPTIMIZATIONS_SLOT] = serialize(gRawSite1);
+    frame[IMPLEMENTATION_SLOT] = uniqStr("ion");
+    break;
+  }
+});

browser/devtools/performance/test/unit/test_jit-model-01.js

@@ -7,9 +7,11 @@
  * FrameNode, and the returning of that data is as expected.
  */
 
-const RecordingUtils = devtools.require("devtools/performance/recording-utils");
+function run_test() {
+  run_next_test();
+}
 
-function test() {
+add_task(function test() {
   let { JITOptimizations } = devtools.require("devtools/performance/jit");
 
   let rawSites = [];
@@ -25,18 +27,16 @@ function test() {
 
   let [first, second, third] = sites;
 
-  is(first.id, 0, "site id is array index");
-  is(first.samples, 3, "first OptimizationSiteProfile has correct sample count");
-  is(first.data.line, 34, "includes OptimizationSite as reference under `data`");
-  is(second.id, 1, "site id is array index");
-  is(second.samples, 2, "second OptimizationSiteProfile has correct sample count");
-  is(second.data.line, 12, "includes OptimizationSite as reference under `data`");
-  is(third.id, 2, "site id is array index");
-  is(third.samples, 1, "third OptimizationSiteProfile has correct sample count");
-  is(third.data.line, 78, "includes OptimizationSite as reference under `data`");
-
-  finish();
-}
+  equal(first.id, 0, "site id is array index");
+  equal(first.samples, 3, "first OptimizationSiteProfile has correct sample count");
+  equal(first.data.line, 34, "includes OptimizationSite as reference under `data`");
+  equal(second.id, 1, "site id is array index");
+  equal(second.samples, 2, "second OptimizationSiteProfile has correct sample count");
+  equal(second.data.line, 12, "includes OptimizationSite as reference under `data`");
+  equal(third.id, 2, "site id is array index");
+  equal(third.samples, 1, "third OptimizationSiteProfile has correct sample count");
+  equal(third.data.line, 78, "includes OptimizationSite as reference under `data`");
+});
 
 let gStringTable = new RecordingUtils.UniqueStrings();
 

browser/devtools/performance/test/unit/test_jit-model-02.js

@@ -6,9 +6,11 @@
  * OptimizationSites methods work as expected.
  */
 
-const RecordingUtils = devtools.require("devtools/performance/recording-utils");
+function run_test() {
+  run_next_test();
+}
 
-function test() {
+add_task(function test() {
   let { JITOptimizations, OptimizationSite } = devtools.require("devtools/performance/jit");
 
   let rawSites = [];
@@ -25,22 +27,20 @@ function test() {
   let [first, second, third] = sites;
 
   /* hasSuccessfulOutcome */
-  is(first.hasSuccessfulOutcome(), false, "optSite.hasSuccessfulOutcome() returns expected (1)");
-  is(second.hasSuccessfulOutcome(), true, "optSite.hasSuccessfulOutcome() returns expected (2)");
-  is(third.hasSuccessfulOutcome(), true, "optSite.hasSuccessfulOutcome() returns expected (3)");
+  equal(first.hasSuccessfulOutcome(), false, "optSite.hasSuccessfulOutcome() returns expected (1)");
+  equal(second.hasSuccessfulOutcome(), true, "optSite.hasSuccessfulOutcome() returns expected (2)");
+  equal(third.hasSuccessfulOutcome(), true, "optSite.hasSuccessfulOutcome() returns expected (3)");
 
   /* getAttempts */
-  is(first.getAttempts().length, 2, "optSite.getAttempts() has the correct amount of attempts (1)");
-  is(second.getAttempts().length, 5, "optSite.getAttempts() has the correct amount of attempts (2)");
-  is(third.getAttempts().length, 3, "optSite.getAttempts() has the correct amount of attempts (3)");
+  equal(first.getAttempts().length, 2, "optSite.getAttempts() has the correct amount of attempts (1)");
+  equal(second.getAttempts().length, 5, "optSite.getAttempts() has the correct amount of attempts (2)");
+  equal(third.getAttempts().length, 3, "optSite.getAttempts() has the correct amount of attempts (3)");
 
   /* getIonTypes */
-  is(first.getIonTypes().length, 1, "optSite.getIonTypes() has the correct amount of IonTypes (1)");
-  is(second.getIonTypes().length, 2, "optSite.getIonTypes() has the correct amount of IonTypes (2)");
-  is(third.getIonTypes().length, 1, "optSite.getIonTypes() has the correct amount of IonTypes (3)");
-
-  finish();
-}
+  equal(first.getIonTypes().length, 1, "optSite.getIonTypes() has the correct amount of IonTypes (1)");
+  equal(second.getIonTypes().length, 2, "optSite.getIonTypes() has the correct amount of IonTypes (2)");
+  equal(third.getIonTypes().length, 1, "optSite.getIonTypes() has the correct amount of IonTypes (3)");
+});
 
 
 let gStringTable = new RecordingUtils.UniqueStrings();

browser/devtools/performance/test/unit/xpcshell.ini

@@ -10,6 +10,9 @@ skip-if = toolkit == 'android' || toolkit == 'gonk'
 [test_marker-blueprint.js]
 [test_marker-utils.js]
 [test_profiler-categories.js]
+[test_jit-graph-data.js] 
+[test_jit-model-01.js]
+[test_jit-model-02.js]
 [test_tree-model-01.js]
 [test_tree-model-02.js]
 [test_tree-model-03.js]

browser/devtools/performance/views/details-js-call-tree.js

@@ -54,6 +54,7 @@ let JsCallTreeView = Heritage.extend(DetailsSubview, {
     let profile = recording.getProfile();
     let threadNode = this._prepareCallTree(profile, interval, options);
     this._populateCallTree(threadNode, options);
+    this._toggleJITOptimizationsView(recording);
     this.emit(EVENTS.JS_CALL_TREE_RENDERED);
   },
 
@@ -129,6 +130,21 @@ let JsCallTreeView = Heritage.extend(DetailsSubview, {
     return root;
   },
 
+  /**
+   * Displays or hides the optimizations view based on the recordings
+   * optimizations feature.
+   *
+   * @param {RecordingModel} recording
+   */
+  _toggleJITOptimizationsView: function (recording) {
+    if (recording && recording.getConfiguration().withJITOptimizations) {
+      JITOptimizationsView.show();
+      JITOptimizationsView.render();
+    } else {
+      JITOptimizationsView.hide();
+    }
+  },
+
   toString: () => "[object JsCallTreeView]"
 });
 

browser/devtools/performance/views/jit-optimizations.js

@@ -25,7 +25,6 @@ let JITOptimizationsView = {
   initialize: function () {
     this.reset = this.reset.bind(this);
     this._onFocusFrame = this._onFocusFrame.bind(this);
-    this._toggleVisibility = this._toggleVisibility.bind(this);
 
     this.el = $("#jit-optimizations-view");
     this.$headerName = $("#jit-optimizations-header .header-function-name");
@@ -40,10 +39,7 @@ let JITOptimizationsView = {
     // Start the tree by resetting.
     this.reset();
 
-    this._toggleVisibility();
-
     PerformanceController.on(EVENTS.RECORDING_SELECTED, this.reset);
-    PerformanceController.on(EVENTS.PREF_CHANGED, this._toggleVisibility);
     JsCallTreeView.on("focus", this._onFocusFrame);
   },
 
@@ -54,7 +50,6 @@ let JITOptimizationsView = {
     this.tree = null;
     this.$headerName = this.$headerFile = this.$headerLine = this.el = null;
     PerformanceController.off(EVENTS.RECORDING_SELECTED, this.reset);
-    PerformanceController.off(EVENTS.PREF_CHANGED, this._toggleVisibility);
     JsCallTreeView.off("focus", this._onFocusFrame);
   },
 
@@ -98,11 +93,20 @@ let JITOptimizationsView = {
     this.tree.clear();
   },
 
+  show: function () {
+    this.el.hidden = false;
+  },
+
+  hide: function () {
+    this.el.hidden = true;
+  },
+
   /**
    * Helper to determine whether or not this view should be enabled.
    */
   isEnabled: function () {
-    return PerformanceController.getOption("show-jit-optimizations");
+    let recording = PerformanceController.getCurrentRecording();
+    return !!(recording && recording.getConfiguration().withJITOptimizations);
   },
 
   /**
@@ -381,22 +385,6 @@ let JITOptimizationsView = {
         url.indexOf("file://") === 0);
   },
 
-  /**
-   * Toggles the visibility of the JITOptimizationsView based on the preference
-   * devtools.performance.ui.show-jit-optimizations.
-   */
-
-  _toggleVisibility: function () {
-    let enabled = this.isEnabled();
-    this.el.hidden = !enabled;
-
-    // If view is toggled on, and there's a frame node selected,
-    // attempt to render it
-    if (enabled) {
-      this.render();
-    }
-  },
-
   /**
    * Called when the JSCallTreeView focuses on a frame.
    */

browser/devtools/performance/views/overview.js

@@ -178,7 +178,7 @@ let OverviewView = {
    * Method for handling all the set up for rendering the overview graphs.
    *
    * @param number resolution
-   *        The fps graph resolution. @see Graphs.jsm
+   *        The fps graph resolution. @see Graphs.js
    */
   render: Task.async(function *(resolution) {
     if (this.isDisabled()) {

browser/devtools/performance/views/toolbar.js

@@ -93,7 +93,7 @@ let ToolbarView = {
    * hiding or showing all elements with class "experimental-option".
    *
    * TODO re-enable "#option-enable-memory" permanently once stable in bug 1163350
-   * TODO re-enable "#option-show-jit-optimizations" permanently once stable in bug 1163351
+   * TODO re-enable "#option-enable-jit-optimizations" permanently once stable in bug 1163351
    *
    * @param {boolean} isEnabled
    */

browser/devtools/shared/moz.build

@@ -21,7 +21,6 @@ EXTRA_JS_MODULES.devtools += [
     'widgets/AbstractTreeItem.jsm',
     'widgets/BreadcrumbsWidget.jsm',
     'widgets/Chart.jsm',
-    'widgets/Graphs.jsm',
     'widgets/GraphsWorker.js',
     'widgets/SideMenuWidget.jsm',
     'widgets/SimpleListWidget.jsm',
@@ -54,6 +53,7 @@ EXTRA_JS_MODULES.devtools.shared.widgets += [
     'widgets/FastListWidget.js',
     'widgets/FilterWidget.js',
     'widgets/FlameGraph.js',
+    'widgets/Graphs.js',
     'widgets/MdnDocsWidget.js',
     'widgets/Spectrum.js',
     'widgets/TableWidget.js',

browser/devtools/shared/test/browser_graphs-01.js

@@ -3,7 +3,7 @@
 
 // Tests that graph widgets works properly.
 
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-02.js

@@ -5,7 +5,7 @@
 
 const TEST_DATA = [{ delta: 112, value: 48 }, { delta: 213, value: 59 }, { delta: 313, value: 60 }, { delta: 413, value: 59 }, { delta: 530, value: 59 }, { delta: 646, value: 58 }, { delta: 747, value: 60 }, { delta: 863, value: 48 }, { delta: 980, value: 37 }, { delta: 1097, value: 30 }, { delta: 1213, value: 29 }, { delta: 1330, value: 23 }, { delta: 1430, value: 10 }, { delta: 1534, value: 17 }, { delta: 1645, value: 20 }, { delta: 1746, value: 22 }, { delta: 1846, value: 39 }, { delta: 1963, value: 26 }, { delta: 2080, value: 27 }, { delta: 2197, value: 35 }, { delta: 2312, value: 47 }, { delta: 2412, value: 53 }, { delta: 2514, value: 60 }, { delta: 2630, value: 37 }, { delta: 2730, value: 36 }, { delta: 2830, value: 37 }, { delta: 2946, value: 36 }, { delta: 3046, value: 40 }, { delta: 3163, value: 47 }, { delta: 3280, value: 41 }, { delta: 3380, value: 35 }, { delta: 3480, value: 27 }, { delta: 3580, value: 39 }, { delta: 3680, value: 42 }, { delta: 3780, value: 49 }, { delta: 3880, value: 55 }, { delta: 3980, value: 60 }, { delta: 4080, value: 60 }, { delta: 4180, value: 60 }];
 const TEST_REGIONS = [{ start: 320, end: 460 }, { start: 780, end: 860 }];
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-03.js

@@ -4,7 +4,7 @@
 // Tests that graph widgets can handle clients getting/setting the
 // selection or cursor.
 
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-04.js

@@ -3,7 +3,7 @@
 
 // Tests that graph widgets can correctly compare selections and cursors.
 
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-05.js

@@ -5,7 +5,7 @@
 
 const TEST_DATA = [{ delta: 112, value: 48 }, { delta: 213, value: 59 }, { delta: 313, value: 60 }, { delta: 413, value: 59 }, { delta: 530, value: 59 }, { delta: 646, value: 58 }, { delta: 747, value: 60 }, { delta: 863, value: 48 }, { delta: 980, value: 37 }, { delta: 1097, value: 30 }, { delta: 1213, value: 29 }, { delta: 1330, value: 23 }, { delta: 1430, value: 10 }, { delta: 1534, value: 17 }, { delta: 1645, value: 20 }, { delta: 1746, value: 22 }, { delta: 1846, value: 39 }, { delta: 1963, value: 26 }, { delta: 2080, value: 27 }, { delta: 2197, value: 35 }, { delta: 2312, value: 47 }, { delta: 2412, value: 53 }, { delta: 2514, value: 60 }, { delta: 2630, value: 37 }, { delta: 2730, value: 36 }, { delta: 2830, value: 37 }, { delta: 2946, value: 36 }, { delta: 3046, value: 40 }, { delta: 3163, value: 47 }, { delta: 3280, value: 41 }, { delta: 3380, value: 35 }, { delta: 3480, value: 27 }, { delta: 3580, value: 39 }, { delta: 3680, value: 42 }, { delta: 3780, value: 49 }, { delta: 3880, value: 55 }, { delta: 3980, value: 60 }, { delta: 4080, value: 60 }, { delta: 4180, value: 60 }];
 const TEST_REGIONS = [{ start: 320, end: 460 }, { start: 780, end: 860 }];
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-06.js

@@ -5,7 +5,7 @@
 
 const TEST_DATA = [{ delta: 112, value: 48 }, { delta: 213, value: 59 }, { delta: 313, value: 60 }, { delta: 413, value: 59 }, { delta: 530, value: 59 }, { delta: 646, value: 58 }, { delta: 747, value: 60 }, { delta: 863, value: 48 }, { delta: 980, value: 37 }, { delta: 1097, value: 30 }, { delta: 1213, value: 29 }, { delta: 1330, value: 23 }, { delta: 1430, value: 10 }, { delta: 1534, value: 17 }, { delta: 1645, value: 20 }, { delta: 1746, value: 22 }, { delta: 1846, value: 39 }, { delta: 1963, value: 26 }, { delta: 2080, value: 27 }, { delta: 2197, value: 35 }, { delta: 2312, value: 47 }, { delta: 2412, value: 53 }, { delta: 2514, value: 60 }, { delta: 2630, value: 37 }, { delta: 2730, value: 36 }, { delta: 2830, value: 37 }, { delta: 2946, value: 36 }, { delta: 3046, value: 40 }, { delta: 3163, value: 47 }, { delta: 3280, value: 41 }, { delta: 3380, value: 35 }, { delta: 3480, value: 27 }, { delta: 3580, value: 39 }, { delta: 3680, value: 42 }, { delta: 3780, value: 49 }, { delta: 3880, value: 55 }, { delta: 3980, value: 60 }, { delta: 4080, value: 60 }, { delta: 4180, value: 60 }];
 const TEST_REGIONS = [{ start: 320, end: 460 }, { start: 780, end: 860 }];
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-07a.js

@@ -4,7 +4,7 @@
 // Tests if selecting, resizing, moving selections and zooming in/out works.
 
 const TEST_DATA = [{ delta: 112, value: 48 }, { delta: 213, value: 59 }, { delta: 313, value: 60 }, { delta: 413, value: 59 }, { delta: 530, value: 59 }, { delta: 646, value: 58 }, { delta: 747, value: 60 }, { delta: 863, value: 48 }, { delta: 980, value: 37 }, { delta: 1097, value: 30 }, { delta: 1213, value: 29 }, { delta: 1330, value: 23 }, { delta: 1430, value: 10 }, { delta: 1534, value: 17 }, { delta: 1645, value: 20 }, { delta: 1746, value: 22 }, { delta: 1846, value: 39 }, { delta: 1963, value: 26 }, { delta: 2080, value: 27 }, { delta: 2197, value: 35 }, { delta: 2312, value: 47 }, { delta: 2412, value: 53 }, { delta: 2514, value: 60 }, { delta: 2630, value: 37 }, { delta: 2730, value: 36 }, { delta: 2830, value: 37 }, { delta: 2946, value: 36 }, { delta: 3046, value: 40 }, { delta: 3163, value: 47 }, { delta: 3280, value: 41 }, { delta: 3380, value: 35 }, { delta: 3480, value: 27 }, { delta: 3580, value: 39 }, { delta: 3680, value: 42 }, { delta: 3780, value: 49 }, { delta: 3880, value: 55 }, { delta: 3980, value: 60 }, { delta: 4080, value: 60 }, { delta: 4180, value: 60 }];
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-07b.js

@@ -4,7 +4,7 @@
 // Tests if selections can't be added via clicking, while not allowed.
 
 const TEST_DATA = [{ delta: 112, value: 48 }, { delta: 213, value: 59 }, { delta: 313, value: 60 }, { delta: 413, value: 59 }, { delta: 530, value: 59 }, { delta: 646, value: 58 }, { delta: 747, value: 60 }, { delta: 863, value: 48 }, { delta: 980, value: 37 }, { delta: 1097, value: 30 }, { delta: 1213, value: 29 }, { delta: 1330, value: 23 }, { delta: 1430, value: 10 }, { delta: 1534, value: 17 }, { delta: 1645, value: 20 }, { delta: 1746, value: 22 }, { delta: 1846, value: 39 }, { delta: 1963, value: 26 }, { delta: 2080, value: 27 }, { delta: 2197, value: 35 }, { delta: 2312, value: 47 }, { delta: 2412, value: 53 }, { delta: 2514, value: 60 }, { delta: 2630, value: 37 }, { delta: 2730, value: 36 }, { delta: 2830, value: 37 }, { delta: 2946, value: 36 }, { delta: 3046, value: 40 }, { delta: 3163, value: 47 }, { delta: 3280, value: 41 }, { delta: 3380, value: 35 }, { delta: 3480, value: 27 }, { delta: 3580, value: 39 }, { delta: 3680, value: 42 }, { delta: 3780, value: 49 }, { delta: 3880, value: 55 }, { delta: 3980, value: 60 }, { delta: 4080, value: 60 }, { delta: 4180, value: 60 }];
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-07c.js

@@ -6,7 +6,7 @@
 // callbacks with textX / testY for convenience.
 
 const TEST_DATA = [{ delta: 112, value: 48 }, { delta: 213, value: 59 }, { delta: 313, value: 60 }, { delta: 413, value: 59 }, { delta: 530, value: 59 }, { delta: 646, value: 58 }, { delta: 747, value: 60 }, { delta: 863, value: 48 }, { delta: 980, value: 37 }, { delta: 1097, value: 30 }, { delta: 1213, value: 29 }, { delta: 1330, value: 23 }, { delta: 1430, value: 10 }, { delta: 1534, value: 17 }, { delta: 1645, value: 20 }, { delta: 1746, value: 22 }, { delta: 1846, value: 39 }, { delta: 1963, value: 26 }, { delta: 2080, value: 27 }, { delta: 2197, value: 35 }, { delta: 2312, value: 47 }, { delta: 2412, value: 53 }, { delta: 2514, value: 60 }, { delta: 2630, value: 37 }, { delta: 2730, value: 36 }, { delta: 2830, value: 37 }, { delta: 2946, value: 36 }, { delta: 3046, value: 40 }, { delta: 3163, value: 47 }, { delta: 3280, value: 41 }, { delta: 3380, value: 35 }, { delta: 3480, value: 27 }, { delta: 3580, value: 39 }, { delta: 3680, value: 42 }, { delta: 3780, value: 49 }, { delta: 3880, value: 55 }, { delta: 3980, value: 60 }, { delta: 4080, value: 60 }, { delta: 4180, value: 60 }];
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-07d.js

@@ -5,7 +5,7 @@
 
 const TEST_DATA = [{ delta: 112, value: 48 }, { delta: 213, value: 59 }, { delta: 313, value: 60 }, { delta: 413, value: 59 }, { delta: 530, value: 59 }, { delta: 646, value: 58 }, { delta: 747, value: 60 }, { delta: 863, value: 48 }, { delta: 980, value: 37 }, { delta: 1097, value: 30 }, { delta: 1213, value: 29 }, { delta: 1330, value: 23 }, { delta: 1430, value: 10 }, { delta: 1534, value: 17 }, { delta: 1645, value: 20 }, { delta: 1746, value: 22 }, { delta: 1846, value: 39 }, { delta: 1963, value: 26 }, { delta: 2080, value: 27 }, { delta: 2197, value: 35 }, { delta: 2312, value: 47 }, { delta: 2412, value: 53 }, { delta: 2514, value: 60 }, { delta: 2630, value: 37 }, { delta: 2730, value: 36 }, { delta: 2830, value: 37 }, { delta: 2946, value: 36 }, { delta: 3046, value: 40 }, { delta: 3163, value: 47 }, { delta: 3280, value: 41 }, { delta: 3380, value: 35 }, { delta: 3480, value: 27 }, { delta: 3580, value: 39 }, { delta: 3680, value: 42 }, { delta: 3780, value: 49 }, { delta: 3880, value: 55 }, { delta: 3980, value: 60 }, { delta: 4080, value: 60 }, { delta: 4180, value: 60 }];
 const TEST_REGIONS = [{ start: 320, end: 460 }, { start: 780, end: 860 }];
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-07e.js

@@ -4,7 +4,7 @@
 // Tests that selections are drawn onto the canvas.
 
 const TEST_DATA = [{ delta: 112, value: 48 }, { delta: 213, value: 59 }, { delta: 313, value: 60 }, { delta: 413, value: 59 }, { delta: 530, value: 59 }, { delta: 646, value: 58 }, { delta: 747, value: 60 }, { delta: 863, value: 48 }, { delta: 980, value: 37 }, { delta: 1097, value: 30 }, { delta: 1213, value: 29 }, { delta: 1330, value: 23 }, { delta: 1430, value: 10 }, { delta: 1534, value: 17 }, { delta: 1645, value: 20 }, { delta: 1746, value: 22 }, { delta: 1846, value: 39 }, { delta: 1963, value: 26 }, { delta: 2080, value: 27 }, { delta: 2197, value: 35 }, { delta: 2312, value: 47 }, { delta: 2412, value: 53 }, { delta: 2514, value: 60 }, { delta: 2630, value: 37 }, { delta: 2730, value: 36 }, { delta: 2830, value: 37 }, { delta: 2946, value: 36 }, { delta: 3046, value: 40 }, { delta: 3163, value: 47 }, { delta: 3280, value: 41 }, { delta: 3380, value: 35 }, { delta: 3480, value: 27 }, { delta: 3580, value: 39 }, { delta: 3680, value: 42 }, { delta: 3780, value: 49 }, { delta: 3880, value: 55 }, { delta: 3980, value: 60 }, { delta: 4080, value: 60 }, { delta: 4180, value: 60 }];
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 let CURRENT_ZOOM = 1;
 

browser/devtools/shared/test/browser_graphs-08.js

@@ -4,7 +4,7 @@
 // Tests if a selection is dropped when clicking outside of it.
 
 const TEST_DATA = [{ delta: 112, value: 48 }, { delta: 213, value: 59 }, { delta: 313, value: 60 }, { delta: 413, value: 59 }, { delta: 530, value: 59 }, { delta: 646, value: 58 }, { delta: 747, value: 60 }, { delta: 863, value: 48 }, { delta: 980, value: 37 }, { delta: 1097, value: 30 }, { delta: 1213, value: 29 }, { delta: 1330, value: 23 }, { delta: 1430, value: 10 }, { delta: 1534, value: 17 }, { delta: 1645, value: 20 }, { delta: 1746, value: 22 }, { delta: 1846, value: 39 }, { delta: 1963, value: 26 }, { delta: 2080, value: 27 }, { delta: 2197, value: 35 }, { delta: 2312, value: 47 }, { delta: 2412, value: 53 }, { delta: 2514, value: 60 }, { delta: 2630, value: 37 }, { delta: 2730, value: 36 }, { delta: 2830, value: 37 }, { delta: 2946, value: 36 }, { delta: 3046, value: 40 }, { delta: 3163, value: 47 }, { delta: 3280, value: 41 }, { delta: 3380, value: 35 }, { delta: 3480, value: 27 }, { delta: 3580, value: 39 }, { delta: 3680, value: 42 }, { delta: 3780, value: 49 }, { delta: 3880, value: 55 }, { delta: 3980, value: 60 }, { delta: 4080, value: 60 }, { delta: 4180, value: 60 }];
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-09a.js

@@ -4,7 +4,7 @@
 // Tests that line graphs properly create the gutter and tooltips.
 
 const TEST_DATA = [{ delta: 112, value: 48 }, { delta: 213, value: 59 }, { delta: 313, value: 60 }, { delta: 413, value: 59 }, { delta: 530, value: 59 }, { delta: 646, value: 58 }, { delta: 747, value: 60 }, { delta: 863, value: 48 }, { delta: 980, value: 37 }, { delta: 1097, value: 30 }, { delta: 1213, value: 29 }, { delta: 1330, value: 23 }, { delta: 1430, value: 10 }, { delta: 1534, value: 17 }, { delta: 1645, value: 20 }, { delta: 1746, value: 22 }, { delta: 1846, value: 39 }, { delta: 1963, value: 26 }, { delta: 2080, value: 27 }, { delta: 2197, value: 35 }, { delta: 2312, value: 47 }, { delta: 2412, value: 53 }, { delta: 2514, value: 60 }, { delta: 2630, value: 37 }, { delta: 2730, value: 36 }, { delta: 2830, value: 37 }, { delta: 2946, value: 36 }, { delta: 3046, value: 40 }, { delta: 3163, value: 47 }, { delta: 3280, value: 41 }, { delta: 3380, value: 35 }, { delta: 3480, value: 27 }, { delta: 3580, value: 39 }, { delta: 3680, value: 42 }, { delta: 3780, value: 49 }, { delta: 3880, value: 55 }, { delta: 3980, value: 60 }, { delta: 4080, value: 60 }, { delta: 4180, value: 60 }];
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-09b.js

@@ -4,7 +4,7 @@
 // Tests that line graphs properly use the tooltips configuration properties.
 
 const TEST_DATA = [{ delta: 112, value: 48 }, { delta: 213, value: 59 }, { delta: 313, value: 60 }, { delta: 413, value: 59 }, { delta: 530, value: 59 }, { delta: 646, value: 58 }, { delta: 747, value: 60 }, { delta: 863, value: 48 }, { delta: 980, value: 37 }, { delta: 1097, value: 30 }, { delta: 1213, value: 29 }, { delta: 1330, value: 23 }, { delta: 1430, value: 10 }, { delta: 1534, value: 17 }, { delta: 1645, value: 20 }, { delta: 1746, value: 22 }, { delta: 1846, value: 39 }, { delta: 1963, value: 26 }, { delta: 2080, value: 27 }, { delta: 2197, value: 35 }, { delta: 2312, value: 47 }, { delta: 2412, value: 53 }, { delta: 2514, value: 60 }, { delta: 2630, value: 37 }, { delta: 2730, value: 36 }, { delta: 2830, value: 37 }, { delta: 2946, value: 36 }, { delta: 3046, value: 40 }, { delta: 3163, value: 47 }, { delta: 3280, value: 41 }, { delta: 3380, value: 35 }, { delta: 3480, value: 27 }, { delta: 3580, value: 39 }, { delta: 3680, value: 42 }, { delta: 3780, value: 49 }, { delta: 3880, value: 55 }, { delta: 3980, value: 60 }, { delta: 4080, value: 60 }, { delta: 4180, value: 60 }];
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-09c.js

@@ -4,7 +4,7 @@
 // Tests that line graphs hide the tooltips when there's no data available.
 
 const TEST_DATA = [];
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-09d.js

@@ -5,7 +5,7 @@
 // the 'min' and 'max' tooltip is too small.
 
 const TEST_DATA = [{ delta: 100, value: 60 }, { delta: 200, value: 59.9 }];
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-09e.js

@@ -7,7 +7,7 @@
 const NO_DATA = [];
 const TEST_DATA = [{ delta: 112, value: 48 }, { delta: 213, value: 59 }, { delta: 313, value: 60 }, { delta: 413, value: 59 }, { delta: 530, value: 59 }, { delta: 646, value: 58 }, { delta: 747, value: 60 }, { delta: 863, value: 48 }, { delta: 980, value: 37 }, { delta: 1097, value: 30 }, { delta: 1213, value: 29 }, { delta: 1330, value: 23 }, { delta: 1430, value: 10 }, { delta: 1534, value: 17 }, { delta: 1645, value: 20 }, { delta: 1746, value: 22 }, { delta: 1846, value: 39 }, { delta: 1963, value: 26 }, { delta: 2080, value: 27 }, { delta: 2197, value: 35 }, { delta: 2312, value: 47 }, { delta: 2412, value: 53 }, { delta: 2514, value: 60 }, { delta: 2630, value: 37 }, { delta: 2730, value: 36 }, { delta: 2830, value: 37 }, { delta: 2946, value: 36 }, { delta: 3046, value: 40 }, { delta: 3163, value: 47 }, { delta: 3280, value: 41 }, { delta: 3380, value: 35 }, { delta: 3480, value: 27 }, { delta: 3580, value: 39 }, { delta: 3680, value: 42 }, { delta: 3780, value: 49 }, { delta: 3880, value: 55 }, { delta: 3980, value: 60 }, { delta: 4080, value: 60 }, { delta: 4180, value: 60 }];
 
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-09f.js

@@ -5,7 +5,7 @@
 // gutter/tooltips and lines.
 
 const TEST_DATA = [{ delta: 100, value: 60 }, { delta: 200, value: 1 }];
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-10a.js

@@ -4,7 +4,7 @@
 // Tests that graphs properly handle resizing.
 
 const TEST_DATA = [{ delta: 112, value: 48 }, { delta: 213, value: 59 }, { delta: 313, value: 60 }, { delta: 413, value: 59 }, { delta: 530, value: 59 }, { delta: 646, value: 58 }, { delta: 747, value: 60 }, { delta: 863, value: 48 }, { delta: 980, value: 37 }, { delta: 1097, value: 30 }, { delta: 1213, value: 29 }, { delta: 1330, value: 23 }, { delta: 1430, value: 10 }, { delta: 1534, value: 17 }, { delta: 1645, value: 20 }, { delta: 1746, value: 22 }, { delta: 1846, value: 39 }, { delta: 1963, value: 26 }, { delta: 2080, value: 27 }, { delta: 2197, value: 35 }, { delta: 2312, value: 47 }, { delta: 2412, value: 53 }, { delta: 2514, value: 60 }, { delta: 2630, value: 37 }, { delta: 2730, value: 36 }, { delta: 2830, value: 37 }, { delta: 2946, value: 36 }, { delta: 3046, value: 40 }, { delta: 3163, value: 47 }, { delta: 3280, value: 41 }, { delta: 3380, value: 35 }, { delta: 3480, value: 27 }, { delta: 3580, value: 39 }, { delta: 3680, value: 42 }, { delta: 3780, value: 49 }, { delta: 3880, value: 55 }, { delta: 3980, value: 60 }, { delta: 4080, value: 60 }, { delta: 4180, value: 60 }];
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-10b.js

@@ -5,7 +5,7 @@
 // the graph dimensions stay the same.
 
 const TEST_DATA = [{ delta: 112, value: 48 }, { delta: 213, value: 59 }, { delta: 313, value: 60 }, { delta: 413, value: 59 }, { delta: 530, value: 59 }, { delta: 646, value: 58 }, { delta: 747, value: 60 }, { delta: 863, value: 48 }, { delta: 980, value: 37 }, { delta: 1097, value: 30 }, { delta: 1213, value: 29 }, { delta: 1330, value: 23 }, { delta: 1430, value: 10 }, { delta: 1534, value: 17 }, { delta: 1645, value: 20 }, { delta: 1746, value: 22 }, { delta: 1846, value: 39 }, { delta: 1963, value: 26 }, { delta: 2080, value: 27 }, { delta: 2197, value: 35 }, { delta: 2312, value: 47 }, { delta: 2412, value: 53 }, { delta: 2514, value: 60 }, { delta: 2630, value: 37 }, { delta: 2730, value: 36 }, { delta: 2830, value: 37 }, { delta: 2946, value: 36 }, { delta: 3046, value: 40 }, { delta: 3163, value: 47 }, { delta: 3280, value: 41 }, { delta: 3380, value: 35 }, { delta: 3480, value: 27 }, { delta: 3580, value: 39 }, { delta: 3680, value: 42 }, { delta: 3780, value: 49 }, { delta: 3880, value: 55 }, { delta: 3980, value: 60 }, { delta: 4080, value: 60 }, { delta: 4180, value: 60 }];
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-10c.js

@@ -2,7 +2,7 @@
 // Tests that graphs properly handle resizing.
 
 const TEST_DATA = [{ delta: 112, value: 48 }, { delta: 213, value: 59 }, { delta: 313, value: 60 }, { delta: 413, value: 59 }, { delta: 530, value: 59 }, { delta: 646, value: 58 }, { delta: 747, value: 60 }, { delta: 863, value: 48 }, { delta: 980, value: 37 }, { delta: 1097, value: 30 }, { delta: 1213, value: 29 }, { delta: 1330, value: 23 }, { delta: 1430, value: 10 }, { delta: 1534, value: 17 }, { delta: 1645, value: 20 }, { delta: 1746, value: 22 }, { delta: 1846, value: 39 }, { delta: 1963, value: 26 }, { delta: 2080, value: 27 }, { delta: 2197, value: 35 }, { delta: 2312, value: 47 }, { delta: 2412, value: 53 }, { delta: 2514, value: 60 }, { delta: 2630, value: 37 }, { delta: 2730, value: 36 }, { delta: 2830, value: 37 }, { delta: 2946, value: 36 }, { delta: 3046, value: 40 }, { delta: 3163, value: 47 }, { delta: 3280, value: 41 }, { delta: 3380, value: 35 }, { delta: 3480, value: 27 }, { delta: 3580, value: 39 }, { delta: 3680, value: 42 }, { delta: 3780, value: 49 }, { delta: 3880, value: 55 }, { delta: 3980, value: 60 }, { delta: 4080, value: 60 }, { delta: 4180, value: 60 }];
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-11a.js

@@ -3,7 +3,7 @@
 
 // Tests that bar graph create a legend as expected.
 
-let {BarGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {BarGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 const CATEGORIES = [

browser/devtools/shared/test/browser_graphs-11b.js

@@ -3,7 +3,7 @@
 
 // Tests that bar graph's legend items handle mouseover/mouseout.
 
-let {BarGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {BarGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 const CATEGORIES = [

browser/devtools/shared/test/browser_graphs-12.js

@@ -3,7 +3,7 @@
 
 // Tests that canvas graphs can have their selection linked.
 
-let {LineGraphWidget, BarGraphWidget, CanvasGraphUtils} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget,BarGraphWidget,CanvasGraphUtils} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-13.js

@@ -3,7 +3,7 @@
 
 // Tests that graph widgets may have a fixed width or height.
 
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-14.js

@@ -4,7 +4,7 @@
 // Tests that graph widgets correctly emit mouse input events.
 
 const TEST_DATA = [{ delta: 112, value: 48 }, { delta: 213, value: 59 }, { delta: 313, value: 60 }, { delta: 413, value: 59 }, { delta: 530, value: 59 }, { delta: 646, value: 58 }, { delta: 747, value: 60 }, { delta: 863, value: 48 }, { delta: 980, value: 37 }, { delta: 1097, value: 30 }, { delta: 1213, value: 29 }, { delta: 1330, value: 23 }, { delta: 1430, value: 10 }, { delta: 1534, value: 17 }, { delta: 1645, value: 20 }, { delta: 1746, value: 22 }, { delta: 1846, value: 39 }, { delta: 1963, value: 26 }, { delta: 2080, value: 27 }, { delta: 2197, value: 35 }, { delta: 2312, value: 47 }, { delta: 2412, value: 53 }, { delta: 2514, value: 60 }, { delta: 2630, value: 37 }, { delta: 2730, value: 36 }, { delta: 2830, value: 37 }, { delta: 2946, value: 36 }, { delta: 3046, value: 40 }, { delta: 3163, value: 47 }, { delta: 3280, value: 41 }, { delta: 3380, value: 35 }, { delta: 3480, value: 27 }, { delta: 3580, value: 39 }, { delta: 3680, value: 42 }, { delta: 3780, value: 49 }, { delta: 3880, value: 55 }, { delta: 3980, value: 60 }, { delta: 4080, value: 60 }, { delta: 4180, value: 60 }];
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/test/browser_graphs-15.js

@@ -19,7 +19,7 @@ for (let frameRate of FRAMES) {
   }
 }
 
-let {LineGraphWidget} = Cu.import("resource:///modules/devtools/Graphs.jsm", {});
+let {LineGraphWidget} = devtools.require("devtools/shared/widgets/Graphs");
 let {Promise} = devtools.require("resource://gre/modules/Promise.jsm");
 
 add_task(function*() {

browser/devtools/shared/widgets/FlameGraph.js

@@ -19,12 +19,12 @@ loader.lazyRequireGetter(this, "CATEGORY_MAPPINGS",
 loader.lazyRequireGetter(this, "FrameUtils",
   "devtools/performance/frame-utils");
 
-loader.lazyImporter(this, "AbstractCanvasGraph",
-  "resource:///modules/devtools/Graphs.jsm");
-loader.lazyImporter(this, "GraphArea",
-  "resource:///modules/devtools/Graphs.jsm");
-loader.lazyImporter(this, "GraphAreaDragger",
-  "resource:///modules/devtools/Graphs.jsm");
+loader.lazyRequireGetter(this, "AbstractCanvasGraph",
+  "devtools/shared/widgets/Graphs", true);
+loader.lazyRequireGetter(this, "GraphArea",
+  "devtools/shared/widgets/Graphs", true);
+loader.lazyRequireGetter(this, "GraphAreaDragger",
+  "devtools/shared/widgets/Graphs", true);
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 const GRAPH_SRC = "chrome://browser/content/devtools/graphs-frame.xhtml";

browser/devtools/shared/widgets/Graphs.js

@@ -3,29 +3,25 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const Cu = Components.utils;
+const { Cc, Ci, Cu, Cr } = require("chrome");
 
-Cu.import("resource:///modules/devtools/ViewHelpers.jsm");
-const promise = Cu.import("resource://gre/modules/Promise.jsm", {}).Promise;
-const {Task} = Cu.import("resource://gre/modules/Task.jsm", {});
-const {EventEmitter} = Cu.import("resource://gre/modules/devtools/event-emitter.js", {});
-const {DevToolsWorker} = Cu.import("resource://gre/modules/devtools/shared/worker.js", {});
-const {LayoutHelpers} = Cu.import("resource://gre/modules/devtools/LayoutHelpers.jsm", {});
+const { Task } = Cu.import("resource://gre/modules/Task.jsm", {});
+const { ViewHelpers } = require("resource:///modules/devtools/ViewHelpers.jsm");
+const { Heritage, setNamedTimeout, clearNamedTimeout } = require("resource:///modules/devtools/ViewHelpers.jsm");
 
-this.EXPORTED_SYMBOLS = [
-  "GraphCursor",
-  "GraphArea",
-  "GraphAreaDragger",
-  "GraphAreaResizer",
-  "AbstractCanvasGraph",
-  "LineGraphWidget",
-  "BarGraphWidget",
-  "CanvasGraphUtils"
-];
+loader.lazyRequireGetter(this, "promise");
+loader.lazyRequireGetter(this, "EventEmitter",
+  "devtools/toolkit/event-emitter");
+
+loader.lazyImporter(this, "DevToolsWorker",
+  "resource://gre/modules/devtools/shared/worker.js");
+loader.lazyImporter(this, "LayoutHelpers",
+  "resource://gre/modules/devtools/LayoutHelpers.jsm");
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 const GRAPH_SRC = "chrome://browser/content/devtools/graphs-frame.xhtml";
 const WORKER_URL = "resource:///modules/devtools/GraphsWorker.js";
+
 const L10N = new ViewHelpers.L10N();
 
 // Generic constants.
@@ -2225,6 +2221,15 @@ function findFirst(array, predicate) {
   }
 }
 
+exports.GraphCursor = GraphCursor;
+exports.GraphArea = GraphArea;
+exports.GraphAreaDragger = GraphAreaDragger;
+exports.GraphAreaResizer = GraphAreaResizer;
+exports.AbstractCanvasGraph = AbstractCanvasGraph;
+exports.LineGraphWidget = LineGraphWidget;
+exports.BarGraphWidget = BarGraphWidget;
+exports.CanvasGraphUtils = CanvasGraphUtils;
+
 /**
  * Finds the last element in an array that validates a predicate.
  * @param array

browser/devtools/shared/widgets/GraphsWorker.js

@@ -10,7 +10,7 @@ importScripts("resource://gre/modules/workers/require.js");
 const { createTask } = require("resource://gre/modules/devtools/shared/worker-helper");
 
 /**
- * @see LineGraphWidget.prototype.setDataFromTimestamps in Graphs.jsm
+ * @see LineGraphWidget.prototype.setDataFromTimestamps in Graphs.js
  * @param number id
  * @param array timestamps
  * @param number interval

browser/devtools/webaudioeditor/includes.js

@@ -23,8 +23,9 @@ const STRINGS_URI = "chrome://browser/locale/devtools/webaudioeditor.properties"
 const L10N = new ViewHelpers.L10N(STRINGS_URI);
 const Telemetry = require("devtools/shared/telemetry");
 const telemetry = new Telemetry();
-devtools.lazyImporter(this, "LineGraphWidget",
-  "resource:///modules/devtools/Graphs.jsm");
+
+devtools.lazyRequireGetter(this, "LineGraphWidget",
+  "devtools/shared/widgets/Graphs", true);
 
 // `AUDIO_NODE_DEFINITION` defined in the controller's initialization,
 // which describes all the properties of an AudioNode

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

@@ -142,11 +142,11 @@
 <!ENTITY profilerUI.enableFramerate             "Record Framerate">
 <!ENTITY profilerUI.enableFramerate.tooltiptext "Record framerate while profiling.">
 
-<!-- LOCALIZATION NOTE (profilerUI.showJITOptimizations): This string
+<!-- LOCALIZATION NOTE (profilerUI.enableJITOptimizations): This string
   -  is displayed next to a checkbox determining whether or not JIT optimization data
-  -  should be shown. -->
-<!ENTITY profilerUI.showJITOptimizations             "Show JIT Optimizations">
-<!ENTITY profilerUI.showJITOptimizations.tooltiptext "Show JIT optimization data sampled in each frame of the JS call tree.">
+  -  should be recorded. -->
+<!ENTITY profilerUI.enableJITOptimizations             "Record JIT Optimizations">
+<!ENTITY profilerUI.enableJITOptimizations.tooltiptext "Record JIT optimization data sampled in each JavaScript frame.">
 
 <!-- LOCALIZATION NOTE (profilerUI.JITOptimizationsTitle): This string
   -  is displayed as the title of the JIT Optimizations panel. -->

browser/modules/AboutNewTab.jsm

@@ -0,0 +1,39 @@
+/* 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";
+
+let Cc = Components.classes;
+let Ci = Components.interfaces;
+let Cu = Components.utils;
+
+this.EXPORTED_SYMBOLS = [ "AboutNewTab" ];
+
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource://gre/modules/Services.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "RemotePages",
+  "resource://gre/modules/RemotePageManager.jsm");
+XPCOMUtils.defineLazyModuleGetter(this, "NewTabUtils",
+  "resource://gre/modules/NewTabUtils.jsm");
+
+let AboutNewTab = {
+
+  pageListener: null,
+
+  init: function() {
+    this.pageListener = new RemotePages("about:newtab");
+    this.pageListener.addMessageListener("NewTab:Customize", this.customize.bind(this));
+  },
+
+  customize: function(message) {
+    NewTabUtils.allPages.enabled = message.data.enabled;
+    NewTabUtils.allPages.enhanced = message.data.enhanced;
+  },
+
+  uninit: function() {
+    this.pageListener.destroy();
+    this.pageListener = null;
+  },
+};

browser/modules/moz.build

@@ -12,6 +12,7 @@ XPCSHELL_TESTS_MANIFESTS += [
 
 EXTRA_JS_MODULES += [
     'AboutHome.jsm',
+    'AboutNewTab.jsm',
     'BrowserUITelemetry.jsm',
     'CastingApps.jsm',
     'Chat.jsm',

build/mobile/robocop/AndroidManifest.xml.in

@@ -14,12 +14,16 @@
 #endif
               android:targetSdkVersion="@ANDROID_TARGET_SDK@"/>
 
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+
     <instrumentation
         android:name="org.mozilla.gecko.FennecInstrumentationTestRunner"
         android:targetPackage="@ANDROID_PACKAGE_NAME@" />
 
     <application
-        android:label="@string/app_name" >
+        android:label="@string/app_name"
+        android:debuggable="true">
+
         <uses-library android:name="android.test.runner" />
 
         <!-- Fake handlers to ensure that we have some share intents to show in our share handler list -->

dom/base/ChromeUtils.cpp

@@ -0,0 +1,23 @@
+/* -*-  Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2; -*- */
+/* 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/. */
+
+#include "ChromeUtils.h"
+
+#include "mozilla/BasePrincipal.h"
+
+namespace mozilla {
+namespace dom {
+
+/* static */ void
+ChromeUtils::OriginAttributesToCookieJar(GlobalObject& aGlobal,
+                                         const OriginAttributesDictionary& aAttrs,
+                                         nsCString& aCookieJar)
+{
+  OriginAttributes attrs(aAttrs);
+  attrs.CookieJar(aCookieJar);
+}
+
+} // namespace dom
+} // namespace mozilla

dom/base/ChromeUtils.h

@@ -0,0 +1,52 @@
+/* -*-  Mode: C++; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2; -*- */
+/* 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/. */
+
+#ifndef mozilla_dom_ChromeUtils__
+#define mozilla_dom_ChromeUtils__
+
+#include "mozilla/AlreadyAddRefed.h"
+#include "mozilla/dom/BindingDeclarations.h"
+#include "mozilla/dom/ChromeUtilsBinding.h"
+#include "mozilla/dom/ThreadSafeChromeUtilsBinding.h"
+#include "mozilla/ErrorResult.h"
+
+namespace mozilla {
+
+namespace devtools {
+class HeapSnapshot;
+}
+
+namespace dom {
+
+class ThreadSafeChromeUtils
+{
+public:
+  // Implemented in toolkit/devtools/server/HeapSnapshot.cpp
+  static void SaveHeapSnapshot(GlobalObject& global,
+                               JSContext* cx,
+                               const nsAString& filePath,
+                               const HeapSnapshotBoundaries& boundaries,
+                               ErrorResult& rv);
+
+  // Implemented in toolkit/devtools/server/HeapSnapshot.cpp
+  static already_AddRefed<devtools::HeapSnapshot> ReadHeapSnapshot(GlobalObject& global,
+                                                                   JSContext* cx,
+                                                                   const nsAString& filePath,
+                                                                   ErrorResult& rv);
+};
+
+class ChromeUtils : public ThreadSafeChromeUtils
+{
+public:
+  static void
+  OriginAttributesToCookieJar(dom::GlobalObject& aGlobal,
+                              const dom::OriginAttributesDictionary& aAttrs,
+                              nsCString& aCookieJar);
+};
+
+} // namespace dom
+} // namespace mozilla
+
+#endif // mozilla_dom_ChromeUtils__

dom/base/MultipartBlobImpl.h

@@ -14,6 +14,7 @@
 #include "mozilla/dom/BlobBinding.h"
 #include "mozilla/dom/FileBinding.h"
 #include <algorithm>
+#include "nsPIDOMWindow.h"
 
 using namespace mozilla;
 using namespace mozilla::dom;

dom/base/moz.build

@@ -154,6 +154,7 @@ EXPORTS.mozilla.dom += [
     'BarProps.h',
     'BlobSet.h',
     'ChildIterator.h',
+    'ChromeUtils.h',
     'Comment.h',
     'Console.h',
     'DirectionalityUtils.h',
@@ -209,6 +210,7 @@ UNIFIED_SOURCES += [
     'Attr.cpp',
     'BarProps.cpp',
     'ChildIterator.cpp',
+    'ChromeUtils.cpp',
     'Comment.cpp',
     'Console.cpp',
     'Crypto.cpp',

dom/base/nsContentPolicy.cpp

@@ -4,7 +4,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/. */
 
-/* 
+/*
  * Implementation of the "@mozilla.org/layout/content-policy;1" contract.
  */
 
@@ -15,11 +15,15 @@
 #include "nsContentPolicyUtils.h"
 #include "nsContentPolicy.h"
 #include "nsIURI.h"
+#include "nsIDocShell.h"
 #include "nsIDOMNode.h"
 #include "nsIDOMWindow.h"
 #include "nsIContent.h"
+#include "nsILoadContext.h"
 #include "nsCOMArray.h"
 
+using mozilla::LogLevel;
+
 NS_IMPL_ISUPPORTS(nsContentPolicy, nsIContentPolicy)
 
 static PRLogModuleInfo* gConPolLog;

dom/base/nsContentUtils.cpp

@@ -7575,7 +7575,7 @@ nsContentUtils::GetViewToDispatchEvent(nsPresContext* presContext,
 }
 
 nsresult
-nsContentUtils::SendKeyEvent(nsCOMPtr<nsIWidget> aWidget,
+nsContentUtils::SendKeyEvent(nsIWidget* aWidget,
                              const nsAString& aType,
                              int32_t aKeyCode,
                              int32_t aCharCode,

dom/base/nsContentUtils.h

@@ -2363,7 +2363,7 @@ public:
    * Synthesize a key event to the given widget
    * (see nsIDOMWindowUtils.sendKeyEvent).
    */
-  static nsresult SendKeyEvent(nsCOMPtr<nsIWidget> aWidget,
+  static nsresult SendKeyEvent(nsIWidget* aWidget,
                                const nsAString& aType,
                                int32_t aKeyCode,
                                int32_t aCharCode,

dom/base/nsFrameLoader.cpp

@@ -933,6 +933,9 @@ nsFrameLoader::SwapWithOtherRemoteLoader(nsFrameLoader* aOther,
 
   ourFrameFrame->EndSwapDocShells(otherFrame);
 
+  ourShell->BackingScaleFactorChanged();
+  otherShell->BackingScaleFactorChanged();
+
   ourDoc->FlushPendingNotifications(Flush_Layout);
   otherDoc->FlushPendingNotifications(Flush_Layout);
 

dom/base/nsFrameMessageManager.cpp

@@ -1785,8 +1785,7 @@ nsMessageManagerScriptExecutor::TryCacheLoadAndCompileScript(
       }
     } else {
       // We're going to run these against some non-global scope.
-      options.setHasPollutedScope(true);
-      if (!JS::Compile(cx, options, srcBuf, &script)) {
+      if (!JS::CompileForNonSyntacticScope(cx, options, srcBuf, &script)) {
         return;
       }
     }

dom/base/nsViewportInfo.h

@@ -59,16 +59,16 @@ class MOZ_STACK_CLASS nsViewportInfo
       ConstrainViewportValues();
     }
 
-    mozilla::CSSToScreenScale GetDefaultZoom() { return mDefaultZoom; }
+    mozilla::CSSToScreenScale GetDefaultZoom() const { return mDefaultZoom; }
     void SetDefaultZoom(const mozilla::CSSToScreenScale& aDefaultZoom);
-    mozilla::CSSToScreenScale GetMinZoom() { return mMinZoom; }
-    mozilla::CSSToScreenScale GetMaxZoom() { return mMaxZoom; }
+    mozilla::CSSToScreenScale GetMinZoom() const { return mMinZoom; }
+    mozilla::CSSToScreenScale GetMaxZoom() const { return mMaxZoom; }
 
-    mozilla::CSSSize GetSize() { return mSize; }
+    mozilla::CSSSize GetSize() const { return mSize; }
 
-    bool IsAutoSizeEnabled() { return mAutoSize; }
-    bool IsZoomAllowed() { return mAllowZoom; }
-    bool IsDoubleTapZoomAllowed() { return mAllowDoubleTapZoom; }
+    bool IsAutoSizeEnabled() const { return mAutoSize; }
+    bool IsZoomAllowed() const { return mAllowZoom; }
+    bool IsDoubleTapZoomAllowed() const { return mAllowDoubleTapZoom; }
 
     void SetAllowDoubleTapZoom(bool aAllowDoubleTapZoom) { mAllowDoubleTapZoom = aAllowDoubleTapZoom; }
 

dom/bindings/Bindings.conf

@@ -270,8 +270,6 @@ DOMInterfaces = {
     # The codegen is dumb, and doesn't understand that this interface is only a
     # collection of static methods, so we have this `concrete: False` hack.
     'concrete': False,
-    'nativeType': 'mozilla::devtools::ChromeUtils',
-    'implicitJSContext': ['readHeapSnapshot', 'saveHeapSnapshot']
 },
 
 'ChromeWindow': {
@@ -1273,6 +1271,14 @@ DOMInterfaces = {
     'wrapperCache': False
 },
 
+'ThreadSafeChromeUtils': {
+    # The codegen is dumb, and doesn't understand that this interface is only a
+    # collection of static methods, so we have this `concrete: False` hack.
+    'concrete': False,
+    'headerFile': 'mozilla/dom/ChromeUtils.h',
+    'implicitJSContext': ['readHeapSnapshot', 'saveHeapSnapshot']
+},
+
 'TimeRanges': {
     'wrapperCache': False
 },

dom/bindings/Codegen.py

@@ -2732,9 +2732,14 @@ class CGCreateInterfaceObjectsMethod(CGAbstractMethod):
         if needInterfacePrototypeObject:
             protoClass = "&PrototypeClass.mBase"
             protoCache = "&aProtoAndIfaceCache.EntrySlotOrCreate(prototypes::id::%s)" % self.descriptor.name
+            parentProto = "parentProto"
+            getParentProto = CGGeneric(getParentProto)
         else:
             protoClass = "nullptr"
             protoCache = "nullptr"
+            parentProto = "nullptr"
+            getParentProto = None
+
         if needInterfaceObject:
             interfaceClass = "&InterfaceObjectClass.mBase"
             interfaceCache = "&aProtoAndIfaceCache.EntrySlotOrCreate(constructors::id::%s)" % self.descriptor.name
@@ -2762,7 +2767,7 @@ class CGCreateInterfaceObjectsMethod(CGAbstractMethod):
             """
             JS::Heap<JSObject*>* protoCache = ${protoCache};
             JS::Heap<JSObject*>* interfaceCache = ${interfaceCache};
-            dom::CreateInterfaceObjects(aCx, aGlobal, parentProto,
+            dom::CreateInterfaceObjects(aCx, aGlobal, ${parentProto},
                                         ${protoClass}, protoCache,
                                         constructorProto, ${interfaceClass}, ${constructHookHolder}, ${constructArgs}, ${namedConstructors},
                                         interfaceCache,
@@ -2771,6 +2776,7 @@ class CGCreateInterfaceObjectsMethod(CGAbstractMethod):
                                         ${name}, aDefineOnGlobal);
             """,
             protoClass=protoClass,
+            parentProto=parentProto,
             protoCache=protoCache,
             interfaceClass=interfaceClass,
             constructHookHolder=constructHookHolder,
@@ -2849,7 +2855,7 @@ class CGCreateInterfaceObjectsMethod(CGAbstractMethod):
             defineAliases = None
 
         return CGList(
-            [CGGeneric(getParentProto), CGGeneric(getConstructorProto), initIds,
+            [getParentProto, CGGeneric(getConstructorProto), initIds,
              prefCache, CGGeneric(call), defineAliases, createUnforgeableHolder, setUnforgeableHolder],
             "\n").define()