diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn
index 04179ff5703..da72b3020ea 100644
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -100,7 +100,6 @@ devtools.jar:
     content/performance/views/details-js-flamegraph.js (performance/views/details-js-flamegraph.js)
     content/performance/views/details-memory-call-tree.js (performance/views/details-memory-call-tree.js)
     content/performance/views/details-memory-flamegraph.js (performance/views/details-memory-flamegraph.js)
-    content/performance/views/optimizations-list.js (performance/views/optimizations-list.js)
     content/performance/views/recordings.js (performance/views/recordings.js)
     content/memory/memory.xhtml (memory/memory.xhtml)
     content/memory/initializer.js (memory/initializer.js)
@@ -219,6 +218,8 @@ devtools.jar:
     skin/splitview.css (themes/splitview.css)
     skin/styleeditor.css (themes/styleeditor.css)
     skin/webaudioeditor.css (themes/webaudioeditor.css)
+    skin/components-frame.css (themes/components-frame.css)
+    skin/jit-optimizations.css (themes/jit-optimizations.css)
     skin/images/magnifying-glass.png (themes/images/magnifying-glass.png)
     skin/images/magnifying-glass@2x.png (themes/images/magnifying-glass@2x.png)
     skin/images/magnifying-glass-light.png (themes/images/magnifying-glass-light.png)
diff --git a/devtools/client/locales/en-US/jit-optimizations.properties b/devtools/client/locales/en-US/jit-optimizations.properties
new file mode 100644
index 00000000000..1a9fb58d851
--- /dev/null
+++ b/devtools/client/locales/en-US/jit-optimizations.properties
@@ -0,0 +1,31 @@
+# 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/.
+
+# LOCALIZATION NOTE These strings are used within the JIT tools
+# in the Performance Tools which is available from the Web Developer
+# sub-menu -> 'Performance' The correct localization of this file might
+# be to keep it in English, or another language commonly spoken among
+# web developers. You want to make that choice consistent across the
+# developer tools. A good criteria is the language in which you'd find the best
+# documentation on web development on the web.
+
+# LOCALIZATION NOTE (jit.title):
+# This string is displayed in the header of the JIT Optimizations view.
+jit.title=JIT Optimizations
+
+# LOCALIZATION NOTE (jit.optimizationFailure):
+# This string is displayed in a tooltip when no JIT optimizations were detected.
+jit.optimizationFailure=Optimization failed
+
+# LOCALIZATION NOTE (jit.samples):
+# See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
+# This string is displayed for the unit representing the number of times a
+# frame is sampled.
+# "#1" represents the number of samples
+# example: 30 samples
+jit.samples=#1 sample;#1 samples
+
+# LOCALIZATION NOTE (jit.empty):
+# This string is displayed when there are no JIT optimizations to display.
+jit.empty=No JIT optimizations recorded for this frame.
diff --git a/devtools/client/locales/en-US/performance.dtd b/devtools/client/locales/en-US/performance.dtd
index e1f210a5a95..ea5715ed969 100644
--- a/devtools/client/locales/en-US/performance.dtd
+++ b/devtools/client/locales/en-US/performance.dtd
@@ -140,10 +140,6 @@
 <!ENTITY performanceUI.enableJITOptimizations             "Record JIT Optimizations">
 <!ENTITY performanceUI.enableJITOptimizations.tooltiptext "Record JIT optimization data sampled in each JavaScript frame.">
 
-<!-- LOCALIZATION NOTE (performanceUI.JITOptimizationsTitle): This string
-  -  is displayed as the title of the JIT Optimizations panel. -->
-<!ENTITY performanceUI.JITOptimizationsTitle "JIT Optimizations">
-
 <!-- LOCALIZATION NOTE (performanceUI.console.recordingNoticeStart/recordingNoticeEnd):
   -  This string is displayed when a recording is selected that started via console.profile.
   -  Wraps the command used to start, like "Currently recording via console.profile("label")" -->
diff --git a/devtools/client/locales/en-US/performance.properties b/devtools/client/locales/en-US/performance.properties
index bf05a0adc83..2347a6e0dc2 100644
--- a/devtools/client/locales/en-US/performance.properties
+++ b/devtools/client/locales/en-US/performance.properties
@@ -141,22 +141,6 @@ recordingsList.saveDialogJSONFilter=JSON Files
 # This string is displayed as a filter for saving a recording to disk.
 recordingsList.saveDialogAllFilter=All Files
 
-# LOCALIZATION NOTE (jit.optimizationFailure):
-# This string is displayed in a tooltip when no JIT optimizations were detected.
-jit.optimizationFailure=Optimization failed
-
-# LOCALIZATION NOTE (jit.samples):
-# See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
-# This string is displayed for the unit representing the number of times a
-# frame is sampled.
-# "#1" represents the number of samples
-# example: 30 samples
-jit.samples=#1 sample;#1 samples
-
-# LOCALIZATION NOTE (jit.empty):
-# This string is displayed when there are no JIT optimizations to display.
-jit.empty=No JIT optimizations recorded for this frame.
-
 # LOCALIZATION NOTE (timeline.tick):
 # This string is displayed in the timeline overview, for delimiting ticks
 # by time, in milliseconds.
diff --git a/devtools/client/memory/memory.xhtml b/devtools/client/memory/memory.xhtml
index 41e9b73fa66..914b3526653 100644
--- a/devtools/client/memory/memory.xhtml
+++ b/devtools/client/memory/memory.xhtml
@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="chrome://devtools/skin/common.css" type="text/css"/>
     <link rel="stylesheet" href="chrome://devtools/skin/widgets.css" type="text/css"/>
     <link rel="stylesheet" href="chrome://devtools/skin/memory.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/components-frame.css" type="text/css"/>
 
     <script type="application/javascript;version=1.8"
             src="chrome://devtools/content/shared/theme-switching.js"/>
diff --git a/devtools/client/performance/components/moz.build b/devtools/client/performance/components/moz.build
new file mode 100644
index 00000000000..8c62201a9c9
--- /dev/null
+++ b/devtools/client/performance/components/moz.build
@@ -0,0 +1,9 @@
+# vim: set filetype=python:
+# 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/.
+
+DevToolsModules(
+    'optimizations-item.js',
+    'optimizations.js',
+)
diff --git a/devtools/client/performance/components/optimizations-item.js b/devtools/client/performance/components/optimizations-item.js
new file mode 100644
index 00000000000..bdb08e625e8
--- /dev/null
+++ b/devtools/client/performance/components/optimizations-item.js
@@ -0,0 +1,145 @@
+/* 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/. */
+
+const { Cu } = require("chrome");
+Cu.import("resource://devtools/client/shared/widgets/ViewHelpers.jsm");
+const STRINGS_URI = "chrome://devtools/locale/jit-optimizations.properties";
+const L10N = new ViewHelpers.L10N(STRINGS_URI);
+const { DOM: dom, PropTypes, createClass, createFactory } = require("devtools/client/shared/vendor/react");
+const Frame = createFactory(require("devtools/client/shared/components/frame"));
+const OPTIMIZATION_FAILURE = L10N.getStr("jit.optimizationFailure");
+const JIT_SAMPLES = L10N.getStr("jit.samples");
+const JIT_EMPTY_TEXT = L10N.getStr("jit.empty");
+const PROPNAME_MAX_LENGTH = 4;
+// If TREE_ROW_HEIGHT changes, be sure to change `var(--jit-tree-row-height)`
+// in `devtools/client/themes/jit-optimizations.css`
+const TREE_ROW_HEIGHT = 14;
+
+const OPTIMIZATION_ITEM_TYPES = ["site", "attempts", "types", "attempt", "type", "observedtype"];
+const OptimizationsItem = module.exports = createClass({
+  displayName: "OptimizationsItem",
+
+  propTypes: {
+    onViewSourceInDebugger: PropTypes.func.isRequired,
+    frameData: PropTypes.object.isRequired,
+    type: PropTypes.oneOf(OPTIMIZATION_ITEM_TYPES).isRequired,
+  },
+
+  render() {
+    let {
+      item,
+      depth,
+      arrow,
+      focused,
+      type,
+      frameData,
+      onViewSourceInDebugger,
+    } = this.props;
+
+    let content;
+    switch (type) {
+      case "site":         content = this._renderSite(this.props); break;
+      case "attempts":     content = this._renderAttempts(this.props); break;
+      case "types":        content = this._renderTypes(this.props); break;
+      case "attempt":      content = this._renderAttempt(this.props); break;
+      case "type":         content = this._renderType(this.props); break;
+      case "observedtype": content = this._renderObservedType(this.props); break;
+    };
+
+    return dom.div(
+      {
+        className: `optimization-tree-item optimization-tree-item-${type}`,
+        style: { marginLeft: depth * TREE_ROW_HEIGHT }
+      },
+      arrow,
+      content
+    );
+  },
+
+  _renderSite({ item: site, onViewSourceInDebugger, frameData }) {
+    let attempts = site.data.attempts;
+    let lastStrategy = attempts[attempts.length - 1].strategy;
+    let propString = "";
+    let propertyName = site.data.propertyName;
+
+    // Display property name if it exists
+    if (propertyName) {
+      if (propertyName.length > PROPNAME_MAX_LENGTH) {
+        propString = ` (.${propertyName.substr(0, PROPNAME_MAX_LENGTH)}…)`;
+      } else {
+        propString = ` (.${propertyName})`;
+      }
+    }
+
+    let sampleString = PluralForm.get(site.samples, JIT_SAMPLES).replace("#1", site.samples);
+    let text = `${lastStrategy}${propString} – (${sampleString})`;
+    let frame = Frame({
+      onClick: () => onViewSourceInDebugger(frameData.url, site.data.line),
+      frame: {
+        source: frameData.url,
+        line: site.data.line,
+        column: site.data.column,
+      }
+    })
+    let children = [text, frame];
+
+    if (!site.hasSuccessfulOutcome()) {
+      children.unshift(dom.span({ className: "opt-icon warning" }));
+    }
+
+    return dom.span({ className: "optimization-site" }, ...children);
+  },
+
+  _renderAttempts({ item: attempts }) {
+    return dom.span({ className: "optimization-attempts" },
+      `Attempts (${attempts.length})`
+    );
+  },
+
+  _renderTypes({ item: types }) {
+    return dom.span({ className: "optimization-types" },
+      `Types (${types.length})`
+    );
+  },
+
+  _renderAttempt({ item: attempt }) {
+    let success = JITOptimizations.isSuccessfulOutcome(attempt.outcome);
+    let { strategy, outcome } = attempt;
+    return dom.span({ className: "optimization-attempt" },
+      dom.span({ className: "optimization-strategy" }, strategy),
+      " → ",
+      dom.span({ className: `optimization-outcome ${success ? "success" : "failure"}` }, outcome)
+    );
+  },
+
+  _renderType({ item: type }) {
+    return dom.span({ className: "optimization-ion-type" }, `${type.site}:${type.mirType}`);
+  },
+
+  _renderObservedType({ onViewSourceInDebugger, item: type }) {
+    let children = [
+      `${type.keyedBy}${type.name ? ` → ${type.name}` : ""}`
+    ];
+
+    // If we have a line and location, make a link to the debugger
+    if (type.location && type.line) {
+      children.push(
+        Frame({
+          onClick: () => onViewSourceInDebugger(type.location, type.line),
+          frame: {
+            source: type.location,
+            line: type.line,
+            column: type.column,
+          }
+        })
+      );
+    }
+    // Otherwise if we just have a location, it's probably just a memory location.
+    else if (type.location) {
+      children.push(`@${type.location}`);
+    }
+
+    return dom.span({ className: "optimization-observed-type" }, ...children);
+  },
+});
diff --git a/devtools/client/performance/components/optimizations.js b/devtools/client/performance/components/optimizations.js
new file mode 100644
index 00000000000..2490110bb89
--- /dev/null
+++ b/devtools/client/performance/components/optimizations.js
@@ -0,0 +1,183 @@
+/* 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/. */
+
+const { Cu } = require("chrome");
+Cu.import("resource://devtools/client/shared/widgets/ViewHelpers.jsm");
+const STRINGS_URI = "chrome://devtools/locale/jit-optimizations.properties";
+const L10N = new ViewHelpers.L10N(STRINGS_URI);
+const { assert } = require("devtools/shared/DevToolsUtils");
+const { DOM: dom, createClass, createFactory, PropTypes } = require("devtools/client/shared/vendor/react");
+const Tree = createFactory(require("../../shared/components/tree"));
+const OptimizationsItem = createFactory(require("./optimizations-item"));
+const FrameView = createFactory(require("../../shared/components/frame"));
+
+const onClickTooltipString = frame =>
+  L10N.getFormatStr("viewsourceindebugger",`${frame.source}:${frame.line}:${frame.column}`);
+const JIT_TITLE = L10N.getStr("jit.title");
+// If TREE_ROW_HEIGHT changes, be sure to change `var(--jit-tree-row-height)`
+// in `devtools/client/themes/jit-optimizations.css`
+const TREE_ROW_HEIGHT = 14;
+
+const Optimizations = module.exports = createClass({
+  displayName: "Optimizations",
+
+  propTypes: {
+    onViewSourceInDebugger: PropTypes.func.isRequired,
+    frameData: PropTypes.object.isRequired,
+    optimizationSites: PropTypes.array.isRequired,
+  },
+
+  getInitialState() {
+    return {
+      expanded: new Set()
+    };
+  },
+
+  getDefaultProps() {
+    return {};
+  },
+
+  render() {
+    let header = this._createHeader(this.props);
+    let tree = this._createTree(this.props);
+
+    return dom.div({}, header, tree);
+  },
+
+  /**
+   * Frame data generated from `frameNode.getInfo()`, or an empty
+   * object, as well as a handler for clicking on the frame component.
+   *
+   * @param {?Object} .frameData
+   * @param {Function} .onViewSourceInDebugger
+   * @return {ReactElement}
+   */
+  _createHeader: function ({ frameData, onViewSourceInDebugger }) {
+    let { isMetaCategory, url, line } = frameData;
+    let name = isMetaCategory ? frameData.categoryData.label :
+               frameData.functionName || "";
+
+    // Simulate `SavedFrame`s interface
+    let frame = { source: url, line: +line, functionDisplayName: name };
+
+    // Neither Meta Category nodes, or the lack of a selected frame node,
+    // renders out a frame source, like "file.js:123"; so just use
+    // an empty span.
+    let frameComponent;
+    if (isMetaCategory || !name) {
+      frameComponent = dom.span();
+    } else {
+      frameComponent = FrameView({
+        frame,
+        onClick: () => onViewSourceInDebugger(frame),
+      });
+    }
+
+    return dom.div({ className: "optimization-header" },
+      dom.span({ className: "header-title" }, JIT_TITLE),
+      dom.span({ className: "header-function-name" }, name),
+      frameComponent
+    );
+  },
+
+  _createTree(props) {
+    let { frameData, onViewSourceInDebugger, optimizationSites: sites } = this.props;
+
+    let getSite = id => sites.find(site => site.id === id);
+    let getIonTypeForObserved = type =>
+      getSite(type.id).data.types.find(iontype => (iontype.typeset || []).indexOf(type) !== -1);
+    let isSite = site => getSite(site.id) === site;
+    let isAttempts = attempts => getSite(attempts.id).data.attempts === attempts;
+    let isAttempt = attempt => getSite(attempt.id).data.attempts.indexOf(attempt) !== -1;
+    let isTypes = types => getSite(types.id).data.types === types;
+    let isType = type => getSite(type.id).data.types.indexOf(type) !== -1;
+    let isObservedType = type => getIonTypeForObserved(type);
+
+    let getRowType = node => {
+      return isSite(node) ? "site" :
+             isAttempts(node) ? "attempts" :
+             isTypes(node) ? "types" :
+             isAttempt(node) ? "attempt" :
+             isType(node) ? "type":
+             isObservedType(node) ? "observedtype": null;
+    };
+
+    // Creates a unique key for each node in the
+    // optimizations data
+    let getKey = node => {
+      let site = getSite(node.id);
+      if (isSite(node)) {
+        return node.id;
+      } else if (isAttempts(node)) {
+        return `${node.id}-A`;
+      } else if (isTypes(node)) {
+        return `${node.id}-T`;
+      } else if (isType(node)) {
+        return `${node.id}-T-${site.data.types.indexOf(node)}`;
+      } else if (isAttempt(node)) {
+        return `${node.id}-A-${site.data.attempts.indexOf(node)}`;
+      } else if (isObservedType(node)) {
+        let iontype = getIonTypeForObserved(node);
+        return `${getKey(iontype)}-O-${iontype.typeset.indexOf(node)}`;
+      }
+    };
+
+    return Tree({
+      autoExpandDepth: 0,
+      getParent: node => {
+        let site = getSite(node.id);
+        let parent;
+        if (isAttempts(node) || isTypes(node)) {
+          parent = site;
+        } else if (isType(node)) {
+          parent = site.data.types;
+        } else if (isAttempt(node)) {
+          parent = site.data.attempts;
+        } else if (isObservedType(node)) {
+          parent = getIonTypeForObserved(node);
+        }
+        assert(parent, "Could not find a parent for optimization data node");
+
+        return parent;
+      },
+      getChildren: node => {
+        if (isSite(node)) {
+          return [node.data.types, node.data.attempts];
+        } else if (isAttempts(node) || isTypes(node)) {
+          return node;
+        } else if (isType(node)) {
+          return node.typeset || [];
+        } else {
+          return [];
+        }
+      },
+      isExpanded: node => this.state.expanded.has(node),
+      onExpand: node => this.setState(state => {
+        let expanded = new Set(state.expanded);
+        expanded.add(node);
+        return { expanded };
+      }),
+      onCollapse: node => this.setState(state => {
+        let expanded = new Set(state.expanded);
+        expanded.delete(node);
+        return { expanded };
+      }),
+      onFocus: function () {},
+      getKey,
+      getRoots: () => sites || [],
+      itemHeight: TREE_ROW_HEIGHT,
+      renderItem: (item, depth, focused, arrow, expanded) =>
+        new OptimizationsItem({
+          onViewSourceInDebugger,
+          item,
+          depth,
+          focused,
+          arrow,
+          expanded,
+          type: getRowType(item),
+          frameData,
+        }),
+    });
+  }
+});
diff --git a/devtools/client/performance/modules/logic/frame-utils.js b/devtools/client/performance/modules/logic/frame-utils.js
index edff9a70d74..7ea7644e28d 100644
--- a/devtools/client/performance/modules/logic/frame-utils.js
+++ b/devtools/client/performance/modules/logic/frame-utils.js
@@ -5,6 +5,7 @@
 
 const global = require("devtools/client/performance/modules/global");
 const demangle = require("devtools/client/shared/demangle");
+const { assert } = require("devtools/shared/DevToolsUtils");
 const { isChromeScheme, isContentScheme, parseURL } =
   require("devtools/client/shared/source-utils");
 
@@ -20,6 +21,8 @@ const CHAR_CODE_COLON = ":".charCodeAt(0);
 const CHAR_CODE_SPACE = " ".charCodeAt(0);
 const CHAR_CODE_UNDERSCORE = "_".charCodeAt(0);
 
+const EVAL_TOKEN = "%20%3E%20eval";
+
 // The cache used to store inflated frames.
 const gInflatedFrameStore = new WeakMap();
 
@@ -149,6 +152,26 @@ function parseLocation(location, fallbackLine, fallbackColumn) {
     fileName = parsedUrl.fileName;
     port = parsedUrl.port;
     host = parsedUrl.host;
+
+    // Check for the case of the filename containing eval
+    // e.g. "file.js%20line%2065%20%3E%20eval"
+    let evalIndex = fileName.indexOf(EVAL_TOKEN);
+    if (evalIndex !== -1 && evalIndex === (fileName.length - EVAL_TOKEN.length)) {
+      // Match the filename
+      let evalLine = line;
+      let [, _fileName, , _line] = fileName.match(/(.+)(%20line%20(\d+)%20%3E%20eval)/) || [];
+      fileName = `${_fileName} (eval:${evalLine})`;
+      line =  _line;
+      assert(_fileName !== undefined,
+             "Filename could not be found from an eval location site");
+      assert(_line !== undefined,
+             "Line could not be found from an eval location site");
+
+      // Match the url as well
+      [, url] = url.match(/(.+)( line (\d+) > eval)/) || [];
+      assert(url !== undefined,
+             "The URL could not be parsed correctly from an eval location site");
+    }
   } else {
     functionName = location;
     url = null;
diff --git a/devtools/client/performance/modules/logic/jit.js b/devtools/client/performance/modules/logic/jit.js
index 57d52c5bdc6..a567d4314bd 100644
--- a/devtools/client/performance/modules/logic/jit.js
+++ b/devtools/client/performance/modules/logic/jit.js
@@ -52,7 +52,7 @@ const SUCCESSFUL_OUTCOMES = [
  * a "getter" optimization, `a[b]`, has site `a` (the "Receiver") and `b` (the "Index").
  *
  * Generally the more ObservedTypes, the more deoptimized this OptimizationSite is.
- * There could be no ObservedTypes, in which case `types` is undefined.
+ * There could be no ObservedTypes, in which case `typeset` is undefined.
  *
  * @type {?Array<ObservedType>} typeset
  * @type {string} site
@@ -184,23 +184,33 @@ const JITOptimizations = function (rawSites, stringTable) {
     let data = site.data;
     let STRATEGY_SLOT = data.attempts.schema.strategy;
     let OUTCOME_SLOT = data.attempts.schema.outcome;
+    let attempts = data.attempts.data.map((a) => {
+      return {
+        id: site.id,
+        strategy: stringTable[a[STRATEGY_SLOT]],
+        outcome: stringTable[a[OUTCOME_SLOT]]
+      }
+    });
+    let types = data.types.map((t) => {
+      let typeset = maybeTypeset(t.typeset, stringTable);
+      if (typeset) {
+        typeset.forEach(t => t.id = site.id);
+      }
+
+      return {
+        id: site.id,
+        typeset,
+        site: stringTable[t.site],
+        mirType: stringTable[t.mirType]
+      };
+    });
+    // Add IDs to to all children objects, so we can correllate sites when
+    // just looking at a specific type, attempt, etc..
+    attempts.id = types.id = site.id;
 
     site.data = {
-      attempts: data.attempts.data.map((a) => {
-        return {
-          strategy: stringTable[a[STRATEGY_SLOT]],
-          outcome: stringTable[a[OUTCOME_SLOT]]
-        }
-      }),
-
-      types: data.types.map((t) => {
-        return {
-          typeset: maybeTypeset(t.typeset, stringTable),
-          site: stringTable[t.site],
-          mirType: stringTable[t.mirType]
-        };
-      }),
-
+      attempts,
+      types,
       propertyName: maybeString(stringTable, data.propertyName),
       line: data.line,
       column: data.column
diff --git a/devtools/client/performance/moz.build b/devtools/client/performance/moz.build
index 96012cf12b5..fc339064b36 100644
--- a/devtools/client/performance/moz.build
+++ b/devtools/client/performance/moz.build
@@ -4,6 +4,7 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DIRS += [
+    'components',
     'legacy',
     'modules',
 ]
diff --git a/devtools/client/performance/performance-controller.js b/devtools/client/performance/performance-controller.js
index 08aee3948a8..577d559aa76 100644
--- a/devtools/client/performance/performance-controller.js
+++ b/devtools/client/performance/performance-controller.js
@@ -18,6 +18,9 @@ Object.defineProperty(this, "EVENTS", {
   writable: false
 });
 
+var React = require("devtools/client/shared/vendor/react");
+var ReactDOM = require("devtools/client/shared/vendor/react-dom");
+var Optimizations = React.createFactory(require("devtools/client/performance/components/optimizations"));
 var Services = require("Services");
 var promise = require("promise");
 var EventEmitter = require("devtools/shared/event-emitter");
diff --git a/devtools/client/performance/performance.xul b/devtools/client/performance/performance.xul
index 72ead0fc30d..cc6be1ae129 100644
--- a/devtools/client/performance/performance.xul
+++ b/devtools/client/performance/performance.xul
@@ -7,6 +7,8 @@
 <?xml-stylesheet href="chrome://devtools/skin/common.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/performance.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/jit-optimizations.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/components-frame.css" type="text/css"?>
 <!DOCTYPE window [
   <!ENTITY % performanceDTD SYSTEM "chrome://devtools/locale/performance.dtd">
   %performanceDTD;
@@ -26,7 +28,6 @@
   <script type="application/javascript" src="views/details-memory-flamegraph.js"/>
   <script type="application/javascript" src="views/details.js"/>
   <script type="application/javascript" src="views/recordings.js"/>
-  <script type="application/javascript" src="views/optimizations-list.js"/>
 
   <popupset id="performance-options-popupset">
     <menupopup id="performance-filter-menupopup"/>
@@ -318,17 +319,7 @@
                 <splitter class="devtools-side-splitter"/>
                 <!-- Optimizations Panel -->
                 <vbox id="jit-optimizations-view"
-                      class="hidden">
-                  <toolbar id="jit-optimizations-toolbar" class="devtools-toolbar">
-                    <hbox id="jit-optimizations-header">
-                      <span class="jit-optimizations-title">&performanceUI.JITOptimizationsTitle;</span>
-                      <span class="header-function-name" />
-                      <span class="header-file opt-url debugger-link" />
-                      <span class="header-line opt-line" />
-                    </hbox>
-                  </toolbar>
-                  <hbox id="optimizations-graph"></hbox>
-                  <vbox id="jit-optimizations-raw-view"></vbox>
+                  class="hidden">
                 </vbox>
               </hbox>
 
diff --git a/devtools/client/performance/test/browser.ini b/devtools/client/performance/test/browser.ini
index c272ba94a3c..244505d910f 100644
--- a/devtools/client/performance/test/browser.ini
+++ b/devtools/client/performance/test/browser.ini
@@ -43,7 +43,9 @@ skip-if = true # Bug 1161817
 [browser_perf-events-calltree.js]
 [browser_perf-highlighted.js]
 [browser_perf-jit-view-01.js]
+skip-if = true # Bug 1176056
 [browser_perf-jit-view-02.js]
+skip-if = true # Bug 1176056
 [browser_perf-legacy-front-01.js]
 [browser_perf-legacy-front-02.js]
 [browser_perf-legacy-front-03.js]
diff --git a/devtools/client/performance/test/browser_profiler_tree-view-11.js b/devtools/client/performance/test/browser_profiler_tree-view-11.js
index bfe79e030b0..bf2f28d2f85 100644
--- a/devtools/client/performance/test/browser_profiler_tree-view-11.js
+++ b/devtools/client/performance/test/browser_profiler_tree-view-11.js
@@ -11,7 +11,7 @@ var { CATEGORY_MASK } = require("devtools/client/performance/modules/global");
 function* spawnTest() {
   let { panel } = yield initPerformance(SIMPLE_URL);
   let { EVENTS, $, $$, window, PerformanceController } = panel.panelWin;
-  let { OverviewView, DetailsView, JITOptimizationsView, JsCallTreeView, RecordingsView } = panel.panelWin;
+  let { OverviewView, DetailsView, JsCallTreeView, RecordingsView } = panel.panelWin;
 
   let profilerData = { threads: [gThread] };
 
diff --git a/devtools/client/performance/test/unit/test_frame-utils-01.js b/devtools/client/performance/test/unit/test_frame-utils-01.js
index aabd226ef95..2be257a0f2b 100644
--- a/devtools/client/performance/test/unit/test_frame-utils-01.js
+++ b/devtools/client/performance/test/unit/test_frame-utils-01.js
@@ -20,6 +20,9 @@ const CONTENT_LOCATIONS = [
   "hello/<.world (http://localhost:8888/file.js:100:1)",
   "hello/<.world (http://localhost:8888/file.js:100)",
 
+  // Eval
+  "hello/<.world (http://localhost:8888/file.js line 65 > eval:1)",
+
   // Occurs when executing an inline script on a root html page with port
   // (I've never seen it with a column number but check anyway) bug 1164131
   "hello/<.world (http://localhost:8888/:1)",
@@ -72,6 +75,7 @@ add_task(function () {
     ["hello/<.world", "file.js", "myfxosapp", "app://myfxosapp/file.js", 100, 1, "myfxosapp", null],
     ["hello/<.world", "file.js", "localhost:8888", "http://localhost:8888/file.js", 100, 1, "localhost:8888", 8888],
     ["hello/<.world", "file.js", "localhost:8888", "http://localhost:8888/file.js", 100, null, "localhost:8888", 8888],
+    ["hello/<.world", "file.js (eval:1)", "localhost:8888", "http://localhost:8888/file.js", 65, null, "localhost:8888", 8888],
     ["hello/<.world", "/", "localhost:8888", "http://localhost:8888/", 1, null, "localhost:8888", 8888],
     ["hello/<.world", "/", "localhost:8888", "http://localhost:8888/", 100, 50, "localhost:8888", 8888],
     ["Native[\"arraycopy(blah)\"]", "profiler.html", "localhost:8888", "http://localhost:8888/profiler.html", 4, null, "localhost:8888", 8888],
diff --git a/devtools/client/performance/views/details-js-call-tree.js b/devtools/client/performance/views/details-js-call-tree.js
index 25d75097b98..68d05524014 100644
--- a/devtools/client/performance/views/details-js-call-tree.js
+++ b/devtools/client/performance/views/details-js-call-tree.js
@@ -29,14 +29,15 @@ var JsCallTreeView = Heritage.extend(DetailsSubview, {
 
     this.container = $("#js-calltree-view .call-tree-cells-container");
 
-    OptimizationsListView.initialize();
+    this.optimizationsElement = $("#jit-optimizations-view");
   },
 
   /**
    * Unbinds events.
    */
   destroy: function () {
-    OptimizationsListView.destroy();
+    ReactDOM.unmountComponentAtNode(this.optimizationsElement);
+    this.optimizationsElement = null;
     this.container = null;
     this.threadNode = null;
     DetailsSubview.destroy.call(this);
@@ -67,25 +68,48 @@ var JsCallTreeView = Heritage.extend(DetailsSubview, {
     } else {
       this.hideOptimizations();
     }
-    OptimizationsListView.reset();
 
     this.emit(EVENTS.JS_CALL_TREE_RENDERED);
   },
 
   showOptimizations: function () {
-    $("#jit-optimizations-view").classList.remove("hidden");
+    this.optimizationsElement.classList.remove("hidden");
   },
 
   hideOptimizations: function () {
-    $("#jit-optimizations-view").classList.add("hidden");
+    this.optimizationsElement.classList.add("hidden");
   },
 
   _onFocus: function (_, treeItem) {
-    if (PerformanceController.getCurrentRecording().getConfiguration().withJITOptimizations) {
-      OptimizationsListView.setCurrentFrame(this.threadNode, treeItem.frame);
-      OptimizationsListView.render();
+    let recording = PerformanceController.getCurrentRecording();
+    let frameNode = treeItem.frame;
+
+    if (!frameNode) {
+      console.warn("No frame found!");
+      return;
     }
 
+    let frameData = frameNode.getInfo();
+    let optimizationSites = frameNode.hasOptimizations()
+                            ? frameNode.getOptimizations().optimizationSites
+                            : [];
+
+    let optimizations = Optimizations({
+      frameData,
+      optimizationSites,
+      onViewSourceInDebugger: (url, line) => {
+        gToolbox.viewSourceInDebugger(url, line).then(success => {
+          if (success) {
+            this.emit(EVENTS.SOURCE_SHOWN_IN_JS_DEBUGGER);
+          } else {
+            this.emit(EVENTS.SOURCE_NOT_FOUND_IN_JS_DEBUGGER);
+          }
+        });
+      }
+    });
+
+    ReactDOM.render(optimizations, this.optimizationsElement);
+
     this.emit("focus", treeItem);
   },
 
diff --git a/devtools/client/performance/views/optimizations-list.js b/devtools/client/performance/views/optimizations-list.js
deleted file mode 100644
index fd73925a30f..00000000000
--- a/devtools/client/performance/views/optimizations-list.js
+++ /dev/null
@@ -1,396 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this file,
- * You can obtain one at http://mozilla.org/MPL/2.0/. */
-/* import-globals-from ../performance-controller.js */
-/* import-globals-from ../performance-view.js */
-/* globals document */
-"use strict";
-
-const URL_LABEL_TOOLTIP = L10N.getStr("table.url.tooltiptext");
-const OPTIMIZATION_FAILURE = L10N.getStr("jit.optimizationFailure");
-const JIT_SAMPLES = L10N.getStr("jit.samples");
-const JIT_EMPTY_TEXT = L10N.getStr("jit.empty");
-const PROPNAME_MAX_LENGTH = 4;
-
-/**
- * View for rendering a list of all optmizations found in a frame.
- * The terminology and types used here can be referenced:
- * @see devtools/client/performance/modules/logic/jit.js
- */
-
-var OptimizationsListView = {
-
-  _currentFrame: null,
-
-  /**
-   * Initialization function called when the tool starts up.
-   */
-  initialize: function () {
-    this.reset = this.reset.bind(this);
-    this._onThemeChanged = this._onThemeChanged.bind(this);
-
-    this.el = $("#jit-optimizations-view");
-    this.$headerName = $("#jit-optimizations-header .header-function-name");
-    this.$headerFile = $("#jit-optimizations-header .header-file");
-    this.$headerLine = $("#jit-optimizations-header .header-line");
-
-    this.tree = new TreeWidget($("#jit-optimizations-raw-view"), {
-      sorted: false,
-      emptyText: JIT_EMPTY_TEXT
-    });
-    this.graph = new OptimizationsGraph($("#optimizations-graph"));
-    this.graph.setTheme(PerformanceController.getTheme());
-
-    // Start the tree by resetting.
-    this.reset();
-
-    PerformanceController.on(EVENTS.THEME_CHANGED, this._onThemeChanged);
-  },
-
-  /**
-   * Destruction function called when the tool cleans up.
-   */
-  destroy: function () {
-    PerformanceController.off(EVENTS.THEME_CHANGED, this._onThemeChanged);
-    this.tree = null;
-    this.$headerName = this.$headerFile = this.$headerLine = this.el = null;
-  },
-
-  /**
-   * Takes a FrameNode, with corresponding optimization data to be displayed
-   * in the view.
-   *
-   * @param {FrameNode} frameNode
-   */
-  setCurrentFrame: function (threadNode, frameNode) {
-    if (threadNode !== this.getCurrentThread()) {
-      this._currentThread = threadNode;
-    }
-    if (frameNode !== this.getCurrentFrame()) {
-      this._currentFrame = frameNode;
-    }
-  },
-
-  /**
-   * Returns the current frame node for this view.
-   *
-   * @return {?FrameNode}
-   */
-  getCurrentFrame: function () {
-    return this._currentFrame;
-  },
-
-  /**
-   * Returns the current thread node for this view.
-   *
-   * @return {?ThreadNode}
-   */
-  getCurrentThread: function () {
-    return this._currentThread;
-  },
-
-  /**
-   * Clears out data in the tree, sets to an empty state,
-   * and removes current frame.
-   */
-  reset: function () {
-    this.setCurrentFrame(null, null);
-    this.clear();
-    this.el.classList.add("empty");
-    this.emit(EVENTS.OPTIMIZATIONS_RESET);
-    this.emit(EVENTS.OPTIMIZATIONS_RENDERED, this.getCurrentFrame());
-  },
-
-  /**
-   * Clears out data in the tree.
-   */
-  clear: function () {
-    this.tree.clear();
-  },
-
-  /**
-   * Takes a JITOptimizations object and builds a view containing all attempted
-   * optimizations for this frame. This view is very verbose and meant for those
-   * who understand JIT compilers.
-   */
-  render: function () {
-    let frameNode = this.getCurrentFrame();
-
-    if (!frameNode) {
-      this.reset();
-      return;
-    }
-
-    let view = this.tree;
-
-    // Set header information, even if the frame node
-    // does not have any optimization data
-    let frameData = frameNode.getInfo();
-    this._setHeaders(frameData);
-    this.clear();
-
-    // If this frame node does not have optimizations, or if its a meta node in the
-    // case of only showing content, reset the view.
-    if (!frameNode.hasOptimizations() || frameNode.isMetaCategory) {
-      this.reset();
-      return;
-    }
-    this.el.classList.remove("empty");
-
-    // An array of sorted OptimizationSites.
-    let sites = frameNode.getOptimizations().optimizationSites;
-
-    for (let site of sites) {
-      this._renderSite(view, site, frameData);
-    }
-
-    this._renderTierGraph();
-
-    this.emit(EVENTS.OPTIMIZATIONS_RENDERED, this.getCurrentFrame());
-  },
-
-  /**
-   * Renders the optimization tier graph over time.
-   */
-  _renderTierGraph: function () {
-    this.graph.render(this.getCurrentThread(), this.getCurrentFrame());
-  },
-
-  /**
-   * Creates an entry in the tree widget for an optimization site.
-   */
-  _renderSite: function (view, site, frameData) {
-    let { id, samples, data } = site;
-    let { types, attempts } = data;
-    let siteNode = this._createSiteNode(frameData, site);
-
-    // Cast `id` to a string so TreeWidget doesn't think it does not exist
-    id = id + "";
-
-    view.add([{ id: id, node: siteNode }]);
-
-    // Add types -- Ion types are the parent, with
-    // the observed types as children.
-    view.add([id, { id: `${id}-types`, label: `Types (${types.length})` }]);
-    this._renderIonType(view, site);
-
-    // Add attempts
-    view.add([id, { id: `${id}-attempts`, label: `Attempts (${attempts.length})` }]);
-    for (let i = attempts.length - 1; i >= 0; i--) {
-      let node = this._createAttemptNode(attempts[i]);
-      view.add([id, `${id}-attempts`, { node }]);
-    }
-  },
-
-  /**
-   * Renders all Ion types from an optimization site, with its children
-   * ObservedTypes.
-   */
-  _renderIonType: function (view, site) {
-    let { id, data: { types }} = site;
-    // Cast `id` to a string so TreeWidget doesn't think it does not exist
-    id = id + "";
-    for (let i = 0; i < types.length; i++) {
-      let ionType = types[i];
-
-      let ionNode = this._createIonNode(ionType);
-      view.add([id, `${id}-types`, { id: `${id}-types-${i}`, node: ionNode }]);
-      for (let observedType of (ionType.typeset || [])) {
-        let node = this._createObservedTypeNode(observedType);
-        view.add([id, `${id}-types`, `${id}-types-${i}`, { node }]);
-      }
-    }
-  },
-
-  /**
-   * Creates an element for insertion in the raw view for an OptimizationSite.
-   */
-  _createSiteNode: function (frameData, site) {
-    let node = document.createElement("span");
-    let desc = document.createElement("span");
-    let line = document.createElement("span");
-    let column = document.createElement("span");
-    let urlNode = this._createDebuggerLinkNode(frameData.url, site.data.line);
-
-    let attempts = site.getAttempts();
-    let lastStrategy = attempts[attempts.length - 1].strategy;
-
-    let propString = "";
-    if (site.data.propertyName) {
-      if (site.data.propertyName.length > PROPNAME_MAX_LENGTH) {
-        propString = ` (.${site.data.propertyName.substr(0, PROPNAME_MAX_LENGTH)}…)`;
-        desc.setAttribute("tooltiptext", site.data.propertyName);
-      } else {
-        propString = ` (.${site.data.propertyName})`;
-      }
-    }
-
-    if (!site.hasSuccessfulOutcome()) {
-      let icon = document.createElement("span");
-      icon.setAttribute("tooltiptext", OPTIMIZATION_FAILURE);
-      icon.setAttribute("severity", "warning");
-      icon.className = "opt-icon";
-      node.appendChild(icon);
-    }
-
-    let sampleString = PluralForm.get(site.samples, JIT_SAMPLES).replace("#1", site.samples);
-    desc.textContent = `${lastStrategy}${propString} – (${sampleString})`;
-    line.textContent = site.data.line;
-    line.className = "opt-line";
-    column.textContent = site.data.column;
-    column.className = "opt-line";
-    node.appendChild(desc);
-    node.appendChild(urlNode);
-    node.appendChild(line);
-    node.appendChild(column);
-
-    return node;
-  },
-
-  /**
-   * Creates an element for insertion in the raw view for an IonType.
-   *
-   * @see devtools/client/performance/modules/logic/jit.js
-   * @param {IonType} ionType
-   * @return {Element}
-   */
-  _createIonNode: function (ionType) {
-    let node = document.createElement("span");
-    node.textContent = `${ionType.site} : ${ionType.mirType}`;
-    node.className = "opt-ion-type";
-    return node;
-  },
-
-  /**
-   * Creates an element for insertion in the raw view for an ObservedType.
-   *
-   * @see devtools/client/performance/modules/logic/jit.js
-   * @param {ObservedType} type
-   * @return {Element}
-   */
-  _createObservedTypeNode: function (type) {
-    let node = document.createElement("span");
-    let typeNode = document.createElement("span");
-
-    typeNode.textContent = `${type.keyedBy}` + (type.name ? ` → ${type.name}` : "");
-    typeNode.className = "opt-type";
-    node.appendChild(typeNode);
-
-    // If we have a type and a location, try to make a
-    // link to the debugger
-    if (type.location && type.line) {
-      let urlNode = this._createDebuggerLinkNode(type.location, type.line);
-      node.appendChild(urlNode);
-    }
-    // Otherwise if we just have a location, it could just
-    // be a memory location
-    else if (type.location) {
-      let locNode = document.createElement("span");
-      locNode.textContent = `@${type.location}`;
-      locNode.className = "opt-url";
-      node.appendChild(locNode);
-    }
-
-    if (type.line) {
-      let line = document.createElement("span");
-      line.textContent = type.line;
-      line.className = "opt-line";
-      node.appendChild(line);
-    }
-    return node;
-  },
-
-  /**
-   * Creates an element for insertion in the raw view for an OptimizationAttempt.
-   *
-   * @see devtools/client/performance/modules/logic/jit.js
-   * @param {OptimizationAttempt} attempt
-   * @return {Element}
-   */
-  _createAttemptNode: function (attempt) {
-    let node = document.createElement("span");
-    let strategyNode = document.createElement("span");
-    let outcomeNode = document.createElement("span");
-
-    strategyNode.textContent = attempt.strategy;
-    strategyNode.className = "opt-strategy";
-    outcomeNode.textContent = attempt.outcome;
-    outcomeNode.className = "opt-outcome";
-    outcomeNode.setAttribute("outcome",
-      JITOptimizations.isSuccessfulOutcome(attempt.outcome) ? "success" : "failure");
-
-    node.appendChild(strategyNode);
-    node.appendChild(outcomeNode);
-    node.className = "opt-attempt";
-    return node;
-  },
-
-  /**
-   * Creates a new element, linking it up to the debugger upon clicking.
-   * Can also optionally pass in an element to modify it rather than
-   * creating a new one.
-   *
-   * @param {String} url
-   * @param {Number} line
-   * @param {?Element} el
-   * @return {Element}
-   */
-  _createDebuggerLinkNode: function (url, line, el) {
-    let node = el || document.createElement("span");
-    node.className = "opt-url";
-    let fileName;
-
-    if (this._isLinkableURL(url)) {
-      fileName = url.slice(url.lastIndexOf("/") + 1);
-      node.classList.add("debugger-link");
-      node.setAttribute("tooltiptext", URL_LABEL_TOOLTIP + " → " + url);
-      node.addEventListener("click", () => gToolbox.viewSourceInDebugger(url, line));
-    }
-    fileName = fileName || url || "";
-    node.textContent = fileName ? `@${fileName}` : "";
-    return node;
-  },
-
-  /**
-   * Updates the headers with the current frame's data.
-   */
-  _setHeaders: function (frameData) {
-    let isMeta = frameData.isMetaCategory;
-    let name = isMeta ? frameData.categoryData.label : frameData.functionName;
-    let url = isMeta ? "" : frameData.url;
-    let line = isMeta ? "" : frameData.line;
-
-    this.$headerName.textContent = name;
-    this.$headerLine.textContent = line;
-    this._createDebuggerLinkNode(url, line, this.$headerFile);
-
-    this.$headerLine.hidden = isMeta;
-    this.$headerFile.hidden = isMeta;
-  },
-
-  /**
-   * Takes a string and returns a boolean indicating whether or not
-   * this is a valid url for linking to the debugger.
-   *
-   * @param {String} url
-   * @return {Boolean}
-   */
-  _isLinkableURL: function (url) {
-    return url && url.indexOf &&
-       (url.indexOf("http") === 0 ||
-        url.indexOf("resource://") === 0 ||
-        url.indexOf("file://") === 0);
-  },
-
-  /**
-   * Called when `devtools.theme` changes.
-   */
-  _onThemeChanged: function (_, theme) {
-    this.graph.setTheme(theme);
-    this.graph.refresh({ force: true });
-  },
-
-  toString: () => "[object OptimizationsListView]"
-};
-
-EventEmitter.decorate(OptimizationsListView);
diff --git a/devtools/client/shared/components/frame.js b/devtools/client/shared/components/frame.js
index 6bbaf50da79..b3d3e5f0a7c 100644
--- a/devtools/client/shared/components/frame.js
+++ b/devtools/client/shared/components/frame.js
@@ -26,7 +26,7 @@ const Frame = module.exports = createClass({
       functionDisplayName: PropTypes.string,
       source: PropTypes.string.isRequired,
       line: PropTypes.number.isRequired,
-      column: PropTypes.number.isRequired,
+      column: PropTypes.number,
     }).isRequired,
     // Clicking on the frame link -- probably should link to the debugger.
     onClick: PropTypes.func.isRequired,
@@ -46,7 +46,7 @@ const Frame = module.exports = createClass({
       tooltip += `:${frame.column}`;
     }
 
-    let sourceString = `${frame.source}:${frame.line}`;
+    let sourceString = `${long}:${frame.line}`;
     if (frame.column) {
       sourceString += `:${frame.column}`;
     }
diff --git a/devtools/client/shared/components/test/mochitest/chrome.ini b/devtools/client/shared/components/test/mochitest/chrome.ini
index aef19942c61..4d97b71ec24 100644
--- a/devtools/client/shared/components/test/mochitest/chrome.ini
+++ b/devtools/client/shared/components/test/mochitest/chrome.ini
@@ -2,6 +2,8 @@
 support-files =
   head.js
 
+[test_frame_01.html]
+[test_frame_02.html]
 [test_tree_01.html]
 [test_tree_02.html]
 [test_tree_03.html]
diff --git a/devtools/client/shared/components/test/mochitest/head.js b/devtools/client/shared/components/test/mochitest/head.js
index 06e360465bf..fdf1e659091 100644
--- a/devtools/client/shared/components/test/mochitest/head.js
+++ b/devtools/client/shared/components/test/mochitest/head.js
@@ -23,6 +23,59 @@ var { require: browserRequire } = BrowserLoader("resource://devtools/client/shar
 
 var EXAMPLE_URL = "http://example.com/browser/browser/devtools/shared/test/";
 
+function forceRender(comp) {
+  return setState(comp, {})
+    .then(() => setState(comp, {}));
+}
+
+// All tests are asynchronous.
+SimpleTest.waitForExplicitFinish();
+
+function onNextAnimationFrame(fn) {
+  return () =>
+    requestAnimationFrame(() =>
+      requestAnimationFrame(fn));
+}
+
+function setState(component, newState) {
+  var deferred = promise.defer();
+  component.setState(newState, onNextAnimationFrame(deferred.resolve));
+  return deferred.promise;
+}
+
+function setProps(component, newState) {
+  var deferred = promise.defer();
+  component.setProps(newState, onNextAnimationFrame(deferred.resolve));
+  return deferred.promise;
+}
+
+function dumpn(msg) {
+  dump(`SHARED-COMPONENTS-TEST: ${msg}\n`);
+}
+
+/**
+ * Tree
+ */
+
+var TEST_TREE_INTERFACE = {
+  getParent: x => TEST_TREE.parent[x],
+  getChildren: x => TEST_TREE.children[x],
+  renderItem: (x, depth, focused, arrow) => "-".repeat(depth) + x + ":" + focused + "\n",
+  getRoots: () => ["A", "M"],
+  getKey: x => "key-" + x,
+  itemHeight: 1,
+  onExpand: x => TEST_TREE.expanded.add(x),
+  onCollapse: x => TEST_TREE.expanded.delete(x),
+  isExpanded: x => TEST_TREE.expanded.has(x),
+};
+
+function isRenderedTree(actual, expectedDescription, msg) {
+  const expected = expectedDescription.map(x => x + "\n").join("");
+  dumpn(`Expected tree:\n${expected}`);
+  dumpn(`Actual tree:\n${actual}`);
+  is(actual, expected, msg);
+}
+
 // Encoding of the following tree/forest:
 //
 // A
@@ -78,51 +131,26 @@ var TEST_TREE = {
   expanded: new Set(),
 };
 
-var TEST_TREE_INTERFACE = {
-  getParent: x => TEST_TREE.parent[x],
-  getChildren: x => TEST_TREE.children[x],
-  renderItem: (x, depth, focused, arrow) => "-".repeat(depth) + x + ":" + focused + "\n",
-  getRoots: () => ["A", "M"],
-  getKey: x => "key-" + x,
-  itemHeight: 1,
-  onExpand: x => TEST_TREE.expanded.add(x),
-  onCollapse: x => TEST_TREE.expanded.delete(x),
-  isExpanded: x => TEST_TREE.expanded.has(x),
-};
-
-function forceRender(tree) {
-  return setState(tree, {})
-    .then(() => setState(tree, {}));
+/**
+ * Frame
+ */
+function checkFrameString (component, file, line, column) {
+  let el = component.getDOMNode();
+  is(el.querySelector(".frame-link-filename").textContent, file);
+  is(+el.querySelector(".frame-link-line").textContent, +line);
+  if (column != null) {
+    is(+el.querySelector(".frame-link-column").textContent, +column);
+    is(el.querySelectorAll(".frame-link-colon").length, 2);
+  } else {
+    is(el.querySelector(".frame-link-column"), null,
+      "Should not render column when none specified");
+    is(el.querySelectorAll(".frame-link-colon").length, 1,
+      "Should only render one colon when no column specified");
+  }
 }
 
-// All tests are asynchronous.
-SimpleTest.waitForExplicitFinish();
-
-function onNextAnimationFrame(fn) {
-  return () =>
-    requestAnimationFrame(() =>
-      requestAnimationFrame(fn));
-}
-
-function setState(component, newState) {
-  var deferred = promise.defer();
-  component.setState(newState, onNextAnimationFrame(deferred.resolve));
-  return deferred.promise;
-}
-
-function setProps(component, newState) {
-  var deferred = promise.defer();
-  component.setProps(newState, onNextAnimationFrame(deferred.resolve));
-  return deferred.promise;
-}
-
-function dumpn(msg) {
-  dump(`MEMORY-TEST: ${msg}\n`);
-}
-
-function isRenderedTree(actual, expectedDescription, msg) {
-  const expected = expectedDescription.map(x => x + "\n").join("");
-  dumpn(`Expected tree:\n${expected}`);
-  dumpn(`Actual tree:\n${actual}`);
-  is(actual, expected, msg);
+function checkFrameTooltips (component, mainTooltip, linkTooltip) {
+  let el = component.getDOMNode();
+  is(el.getAttribute("title"), mainTooltip);
+  is(el.querySelector("a.frame-link-filename").getAttribute("title"), linkTooltip);
 }
diff --git a/devtools/client/shared/components/test/mochitest/test_frame_01.html b/devtools/client/shared/components/test/mochitest/test_frame_01.html
new file mode 100644
index 00000000000..80b77d650ee
--- /dev/null
+++ b/devtools/client/shared/components/test/mochitest/test_frame_01.html
@@ -0,0 +1,89 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+Test the formatting of the file name, line and columns are correct in frame components,
+with optional columns, unknown and non-URL sources.
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Frame component test</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+</head>
+<body>
+<pre id="test">
+<script src="head.js" type="application/javascript;version=1.8"></script>
+<script type="application/javascript;version=1.8">
+window.onload = Task.async(function* () {
+  try {
+    let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
+    let React = browserRequire("devtools/client/shared/vendor/react");
+    let Frame = React.createFactory(browserRequire("devtools/client/shared/components/frame"));
+    ok(Frame, "Should get Frame");
+    let frame;
+
+    // Check when there's a column
+    frame = ReactDOM.render(Frame({
+      frame: {
+        source: "http://myfile.com/mahscripts.js",
+        line: 55,
+        column: 10,
+      },
+      onClick: ()=>{},
+    }), window.document.body);
+    yield forceRender(frame);
+    checkFrameString(frame, "mahscripts.js", 55, 10);
+
+    // Check when there's no column
+    frame = ReactDOM.render(Frame({
+      frame: {
+        source: "http://myfile.com/mahscripts.js",
+        line: 55,
+      },
+      onClick: ()=>{},
+    }), window.document.body);
+    yield forceRender(frame);
+    checkFrameString(frame, "mahscripts.js", 55);
+
+    // Check when column === 0
+    frame = ReactDOM.render(Frame({
+      frame: {
+        source: "http://myfile.com/mahscripts.js",
+        line: 55,
+        column: 0,
+      },
+      onClick: ()=>{},
+    }), window.document.body);
+    yield forceRender(frame);
+    checkFrameString(frame, "mahscripts.js", 55, 0);
+
+    // Check when there's no parseable URL source
+    frame = ReactDOM.render(Frame({
+      frame: {
+        source: "self-hosted",
+        line: 1,
+      },
+      onClick: ()=>{},
+    }), window.document.body);
+    yield forceRender(frame);
+    checkFrameString(frame, "self-hosted",1);
+
+    // Check when there's no source
+    frame = ReactDOM.render(Frame({
+      frame: {
+        line: 1,
+      },
+      onClick: ()=>{},
+    }), window.document.body);
+    yield forceRender(frame);
+    checkFrameString(frame, "(unknown)",1);
+  } catch(e) {
+    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
+  } finally {
+    SimpleTest.finish();
+  }
+});
+</script>
+</pre>
+</body>
+</html>
diff --git a/devtools/client/shared/components/test/mochitest/test_frame_02.html b/devtools/client/shared/components/test/mochitest/test_frame_02.html
new file mode 100644
index 00000000000..830f0877e34
--- /dev/null
+++ b/devtools/client/shared/components/test/mochitest/test_frame_02.html
@@ -0,0 +1,85 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+Test the formatting of the tooltips in the frame component.
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Frame component test</title>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+</head>
+<body>
+<pre id="test">
+<script src="head.js" type="application/javascript;version=1.8"></script>
+<script type="application/javascript;version=1.8">
+window.onload = Task.async(function* () {
+  try {
+    let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
+    let React = browserRequire("devtools/client/shared/vendor/react");
+    let Frame = React.createFactory(browserRequire("devtools/client/shared/components/frame"));
+    ok(Frame, "Should get Frame");
+    let frame;
+
+    // Check when there's a column
+    frame = ReactDOM.render(Frame({
+      frame: {
+        source: "http://myfile.com/mahscripts.js",
+        line: 55,
+        column: 10,
+      },
+      onClick: ()=>{},
+    }), window.document.body);
+    yield forceRender(frame);
+    checkFrameTooltips(frame,
+      "http://myfile.com/mahscripts.js:55:10",
+      "View source in Debugger → http://myfile.com/mahscripts.js:55:10");
+
+    // Check when there's no column
+    frame = ReactDOM.render(Frame({
+      frame: {
+        source: "http://myfile.com/mahscripts.js",
+        line: 55,
+      },
+      onClick: ()=>{},
+    }), window.document.body);
+    yield forceRender(frame);
+    checkFrameTooltips(frame,
+      "http://myfile.com/mahscripts.js:55",
+      "View source in Debugger → http://myfile.com/mahscripts.js:55");
+
+    // Check when there's no parseable URL source
+    frame = ReactDOM.render(Frame({
+      frame: {
+        source: "self-hosted",
+        line: 1,
+      },
+      onClick: ()=>{},
+    }), window.document.body);
+    yield forceRender(frame);
+    checkFrameTooltips(frame,
+      "self-hosted:1",
+      "View source in Debugger → self-hosted:1");
+
+    // Check when there's no source
+    frame = ReactDOM.render(Frame({
+      frame: {
+        line: 1,
+      },
+      onClick: ()=>{},
+    }), window.document.body);
+    yield forceRender(frame);
+    checkFrameTooltips(frame,
+      "(unknown):1",
+      "View source in Debugger → (unknown):1");
+
+  } catch(e) {
+    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
+  } finally {
+    SimpleTest.finish();
+  }
+});
+</script>
+</pre>
+</body>
+</html>
diff --git a/devtools/client/themes/components-frame.css b/devtools/client/themes/components-frame.css
new file mode 100644
index 00000000000..234295220b1
--- /dev/null
+++ b/devtools/client/themes/components-frame.css
@@ -0,0 +1,46 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+/**
+ * Frame Component
+ * Styles for React component at `devtools/client/shared/components/frame.js`
+ */
+
+.frame-link {
+  margin-left: 7px;
+}
+
+.focused .frame-link-filename,
+.focused .frame-link-column,
+.focused .frame-link-line,
+.focused .frame-link-host,
+.focused .frame-link-colon {
+  color: var(--theme-selection-color);
+}
+
+.frame-link .frame-link-filename {
+  color: var(--theme-highlight-blue);
+  cursor: pointer;
+}
+
+.frame-link .frame-link-filename:hover {
+  text-decoration: underline;
+}
+
+.frame-link .frame-link-host {
+  margin-inline-start: 5px;
+  font-size: 90%;
+  color: var(--theme-content-color2);
+}
+
+.frame-link .frame-link-function-display-name {
+  margin-inline-end: 5px;
+}
+
+.frame-link .frame-link-column,
+.frame-link .frame-link-line,
+.frame-link .frame-link-colon {
+  color: var(--theme-highlight-orange);
+}
diff --git a/devtools/client/themes/jit-optimizations.css b/devtools/client/themes/jit-optimizations.css
new file mode 100644
index 00000000000..9141518c6eb
--- /dev/null
+++ b/devtools/client/themes/jit-optimizations.css
@@ -0,0 +1,143 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+/**
+ * JIT View
+ */
+
+#jit-optimizations-view {
+  width: 350px;
+  overflow-x: auto;
+  min-width: 200px;
+  white-space: nowrap;
+  --jit-tree-row-height: 14;
+  --jit-tree-header-height: 16;
+}
+
+#jit-optimizations-view > div {
+  flex: 1;
+}
+
+#jit-optimizations-view div {
+  display: block;
+}
+
+.tree {
+  /**
+   * Flexing to fill out remaining vertical space.
+   */
+  flex: 1;
+  overflow-y: auto;
+  height: 100%;
+  background-color: var(--theme-body-background);
+}
+
+.optimization-header {
+  height: var(--jit-tree-header-height);
+  padding: 2px 5px;
+  background-color: var(--theme-tab-toolbar-background);
+}
+
+#jit-optimizations-view .header-title {
+  font-weight: bold;
+  padding-right: 7px;
+}
+
+.tree-node {
+  height: var(--jit-tree-row-height);
+  clear: both;
+}
+
+.tree-node button {
+  display: none;
+}
+
+#jit-optimizations-view .optimization-tree-item {
+  display: flex;
+}
+
+#jit-optimizations-view .arrow,
+#jit-optimizations-view .optimization-site,
+#jit-optimizations-view .optimization-attempts,
+#jit-optimizations-view .optimization-attempt,
+#jit-optimizations-view .optimization-types,
+#jit-optimizations-view .optimization-ion-type,
+#jit-optimizations-view .optimization-observed-type {
+  float: left;
+}
+
+#jit-optimizations-view .optimization-outcome.success {
+  color: var(--theme-highlight-green);
+}
+#jit-optimizations-view .optimization-outcome.failure {
+  color: var(--theme-highlight-red);
+}
+
+.opt-icon::before {
+  content: "";
+  background-image: url(chrome://devtools/skin/images/webconsole.svg);
+  background-repeat: no-repeat;
+  background-size: 72px 60px;
+  /* show grey "i" bubble by default */
+  background-position: -36px -36px;
+  width: 10px;
+  height: 10px;
+  display: inline-block;
+
+  max-height: 12px;
+}
+
+#jit-optimizations-view .opt-icon {
+  float: left;
+}
+
+#jit-optimizations-view .opt-icon::before {
+  margin: 1px 6px 0 0;
+}
+
+.theme-light .opt-icon::before {
+  background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
+}
+.opt-icon.warning::before {
+  background-position: -24px -24px;
+}
+
+/* Frame Component */
+.focused .frame-link-filename,
+.focused .frame-link-column,
+.focused .frame-link-line,
+.focused .frame-link-host,
+.focused .frame-link-colon {
+  color: var(--theme-selection-color);
+}
+
+.frame-link {
+  margin-left: 7px;
+}
+
+.frame-link-filename {
+  color: var(--theme-highlight-blue);
+  cursor: pointer;
+}
+
+.frame-link-filename:hover {
+  text-decoration: underline;
+}
+
+.frame-link-column,
+.frame-link-line,
+.frame-link-colon {
+  color: var(--theme-highlight-orange);
+}
+
+.frame-link-host {
+  margin-inline-start: 5px;
+  font-size: 90%;
+  color: var(--theme-content-color2);
+}
+
+.frame-link-function-display-name {
+  margin-inline-end: 5px;
+}
diff --git a/devtools/client/themes/memory.css b/devtools/client/themes/memory.css
index f540ddf81b0..3093e0c635f 100644
--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -465,39 +465,6 @@ html, body, #app, #memory-tool {
   margin-right: .5em;
 }
 
-.focused .frame-link-filename,
-.focused .frame-link-column,
-.focused .frame-link-line,
-.focused .frame-link-host,
-.focused .frame-link-colon {
-  color: var(--theme-selection-color);
-}
-
-.frame-link-filename {
-  color: var(--theme-highlight-blue);
-  cursor: pointer;
-}
-
-.frame-link-filename:hover {
-  text-decoration: underline;
-}
-
-.frame-link-column,
-.frame-link-line,
-.frame-link-colon {
-  color: var(--theme-highlight-orange);
-}
-
-.frame-link-host {
-  margin-inline-start: 5px;
-  font-size: 90%;
-  color: var(--theme-content-color2);
-}
-
-.frame-link-function-display-name {
-  margin-inline-end: 5px;
-}
-
 .no-allocation-stacks {
   border-color: var(--theme-splitter-color);
   border-style: solid;
diff --git a/devtools/client/themes/performance.css b/devtools/client/themes/performance.css
index 0dc35c949dc..39c0cab65a6 100644
--- a/devtools/client/themes/performance.css
+++ b/devtools/client/themes/performance.css
@@ -272,6 +272,8 @@
 .call-tree-item .call-tree-cell,
 .call-tree-item .call-tree-cell[type=function] description {
   -moz-user-select: text;
+  /* so that optimizations view doesn't break the lines in call tree */
+  white-space: nowrap;
 }
 
 .call-tree-item .call-tree-cell::-moz-selection,
@@ -609,153 +611,6 @@ menuitem.marker-color-graphs-grey:before,
   border-color: var(--theme-graphs-grey);
 }
 
-/**
- * JIT View
- */
-
-#jit-optimizations-view {
-  width: 350px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  min-width: 200px;
-}
-
-#optimizations-graph {
-  height: 30px;
-}
-
-#jit-optimizations-view.empty #optimizations-graph {
-  display: none !important;
-}
-
-/* override default styles for tree widget */
-#jit-optimizations-view .tree-widget-empty-text {
-  font-size: inherit;
-  padding: 0px;
-  margin: 8px;
-}
-
-#jit-optimizations-view:not(.empty) .tree-widget-empty-text {
-  display: none;
-}
-
-#jit-optimizations-toolbar {
-  height: 18px;
-  min-height: 0px; /* override .devtools-toolbar min-height */
-}
-
-.jit-optimizations-title {
-  margin: 0px 4px;
-  font-weight: 600;
-}
-
-#jit-optimizations-raw-view {
-  font-size: 90%;
-}
-
-/* override default .tree-widget-item line-height */
-#jit-optimizations-raw-view .tree-widget-item {
-  line-height: 20px !important;
-  display: block;
-  overflow: hidden;
-}
-
-#jit-optimizations-raw-view .tree-widget-item[level="1"] {
-  font-weight: 600;
-}
-
-#jit-optimizations-view .opt-outcome::before {
-  content: "→";
-  margin: 4px 0px;
-  color: var(--theme-body-color);
-}
-#jit-optimizations-view .theme-selected .opt-outcome::before {
-  color: var(--theme-selection-color);
-}
-
-#jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=success] {
-  color: var(--theme-highlight-green);
-}
-#jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=failure] {
-  color: var(--theme-highlight-red);
-}
-#jit-optimizations-view .tree-widget-container {
-  -moz-margin-end: 0px;
-}
-#jit-optimizations-view .tree-widget-container > li,
-#jit-optimizations-view .tree-widget-children > li {
-  overflow: hidden;
-}
-
-.opt-line::before {
-  content: ":";
-  color: var(--theme-highlight-orange);
-}
-.theme-selected .opt-line::before {
-  color: var(--theme-selection-color);
-}
-.opt-line.header-line::before {
-  color: var(--theme-body-color);
-}
-#jit-optimizations-view.empty .opt-line.header-line::before {
-  display: none;
-}
-
-.opt-url {
-  -moz-margin-start: 4px !important;
-}
-.opt-url:hover {
-  text-decoration: underline;
-}
-.opt-url.debugger-link {
-  cursor: pointer;
-}
-
-.opt-icon::before {
-  content: "";
-  background-image: url(chrome://devtools/skin/images/webconsole.svg);
-  background-repeat: no-repeat;
-  background-size: 72px 60px;
-  /* show grey "i" bubble by default */
-  background-position: -36px -36px;
-  width: 12px;
-  height: 12px;
-  display: inline-block;
-
-  max-height: 12px;
-}
-
-#jit-optimizations-view .opt-icon::before {
-  margin: 5px 6px 0 0;
-}
-description.opt-icon {
-  margin: 0px 0px 0px 0px;
-}
-description.opt-icon::before {
-  margin: 1px 4px 0px 0px;
-}
-.theme-light .opt-icon::before {
-  background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
-}
-.opt-icon[severity=warning]::before {
-  background-position: -24px -24px;
-}
-
-ul.frames-list {
-  list-style-type: none;
-  padding: 0px;
-  margin: 0px;
-}
-
-ul.frames-list li {
-  cursor: pointer;
-}
-
-ul.frames-list li.selected {
-  background-color: var(--theme-selection-background);
-  color: var(--theme-selection-color);
-}
-
 /**
  * Configurable Options
  *
@@ -787,3 +642,32 @@ menuitem.experimental-option::before {
 #performance-options-menupopup:not(.experimental-enabled) .experimental-option::before {
   display: none;
 }
+
+.opt-icon::before {
+  content: "";
+  background-image: url(chrome://devtools/skin/images/webconsole.svg);
+  background-repeat: no-repeat;
+  background-size: 72px 60px;
+  /* show grey "i" bubble by default */
+  background-position: -36px -36px;
+  width: 10px;
+  height: 10px;
+  display: inline-block;
+
+  max-height: 12px;
+}
+
+.theme-light .opt-icon::before {
+  background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
+}
+.opt-icon.warning::before {
+  background-position: -24px -24px;
+}
+
+/* for call tree */
+description.opt-icon {
+  margin: 0px 0px 0px 0px;
+}
+description.opt-icon::before {
+  margin: 1px 4px 0px 0px;
+}
diff --git a/devtools/client/webconsole/webconsole.js b/devtools/client/webconsole/webconsole.js
index 557228dffdc..c8bce00bf71 100644
--- a/devtools/client/webconsole/webconsole.js
+++ b/devtools/client/webconsole/webconsole.js
@@ -197,8 +197,7 @@ const PREF_INPUT_HISTORY_COUNT = "devtools.webconsole.inputHistoryCount";
  * @param object webConsoleOwner
  *        The WebConsole owner object.
  */
-function WebConsoleFrame(webConsoleOwner)
-{
+function WebConsoleFrame(webConsoleOwner) {
   this.owner = webConsoleOwner;
   this.hudId = this.owner.hudId;
   this.window = this.owner.iframeWindow;
@@ -399,8 +398,7 @@ WebConsoleFrame.prototype = {
       if (!response.error) {
         this._saveRequestAndResponseBodies = newValue;
         deferred.resolve(response);
-      }
-      else {
+      } else {
         deferred.reject(response.error);
       }
     });
@@ -425,8 +423,7 @@ WebConsoleFrame.prototype = {
    * @return object
    *         A promise object that resolves once the frame is ready to use.
    */
-  init: function()
-  {
+  init: function() {
     this._initUI();
     let connectionInited = this._initConnection();
 
@@ -456,8 +453,7 @@ WebConsoleFrame.prototype = {
    *         A promise object that is resolved/reject based on the connection
    *         result.
    */
-  _initConnection: function WCF__initConnection()
-  {
+  _initConnection: function WCF__initConnection() {
     if (this._initDefer) {
       return this._initDefer.promise;
     }
@@ -481,8 +477,7 @@ WebConsoleFrame.prototype = {
    * Find the Web Console UI elements and setup event listeners as needed.
    * @private
    */
-  _initUI: function WCF__initUI()
-  {
+  _initUI: function WCF__initUI() {
     this.document = this.window.document;
     this.rootElement = this.document.documentElement;
 
@@ -590,8 +585,7 @@ WebConsoleFrame.prototype = {
    * selected or when there is a split console present.
    * @private
    */
-  _onPanelSelected: function WCF__onPanelSelected(evt, id)
-  {
+  _onPanelSelected: function WCF__onPanelSelected(evt, id) {
     this.jsterm.inputNode.focus();
   },
 
@@ -599,8 +593,7 @@ WebConsoleFrame.prototype = {
    * Initialize the default filter preferences.
    * @private
    */
-  _initDefaultFilterPrefs: function WCF__initDefaultFilterPrefs()
-  {
+  _initDefaultFilterPrefs: function WCF__initDefaultFilterPrefs() {
     let prefs = ["network", "networkinfo", "csserror", "cssparser", "csslog",
                  "exception", "jswarn", "jslog", "error", "info", "warn", "log",
                  "secerror", "secwarn", "netwarn", "netxhr", "sharedworkers",
@@ -622,8 +615,7 @@ WebConsoleFrame.prototype = {
    *        added/removed.
    */
   _updateReflowActivityListener:
-    function WCF__updateReflowActivityListener(callback)
-  {
+    function WCF__updateReflowActivityListener(callback) {
     if (this.webConsoleClient) {
       let pref = this._filterPrefsPrefix + "csslog";
       if (Services.prefs.getBoolPref(pref)) {
@@ -644,8 +636,7 @@ WebConsoleFrame.prototype = {
    *        added/removed.
    */
   _updateServerLoggingListener:
-    function WCF__updateServerLoggingListener(callback)
-  {
+    function WCF__updateServerLoggingListener(callback) {
     if (!this.webConsoleClient) {
       return;
     }
@@ -670,8 +661,7 @@ WebConsoleFrame.prototype = {
    * Sets the events for the filter input field.
    * @private
    */
-  _setFilterTextBoxEvents: function WCF__setFilterTextBoxEvents()
-  {
+  _setFilterTextBoxEvents: function WCF__setFilterTextBoxEvents() {
     let timer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);
     let timerEvent = this.adjustVisibilityOnSearchStringChange.bind(this);
 
@@ -698,8 +688,7 @@ WebConsoleFrame.prototype = {
    *        "category", and "prefKey" properties, and optionally a "severities"
    *        property.
    */
-  _initFilterButtons: function WCF__initFilterButtons()
-  {
+  _initFilterButtons: function WCF__initFilterButtons() {
     let categories = this.document
                      .querySelectorAll(".webconsole-filter-button[category]");
     Array.forEach(categories, function(button) {
@@ -751,8 +740,7 @@ WebConsoleFrame.prototype = {
    *        The size of the font change. Accepted values are "+" and "-".
    *        An unmatched size assumes a font reset.
    */
-  changeFontSize: function WCF_changeFontSize(size)
-  {
+  changeFontSize: function WCF_changeFontSize(size) {
     let fontSize = this.window
                    .getComputedStyle(this.outputNode, null)
                    .getPropertyValue("font-size").replace("px", "");
@@ -766,8 +754,7 @@ WebConsoleFrame.prototype = {
 
       if (size == "+") {
         fontSize += 1;
-      }
-      else {
+      } else {
         fontSize -= 1;
       }
 
@@ -781,8 +768,7 @@ WebConsoleFrame.prototype = {
       this.completeNode.style.fontSize = fontSize;
       this.inputNode.style.fontSize = fontSize;
       this.outputNode.style.fontSize = fontSize;
-    }
-    else {
+    } else {
       this.completeNode.style.fontSize = "";
       this.inputNode.style.fontSize = "";
       this.outputNode.style.fontSize = "";
@@ -797,8 +783,7 @@ WebConsoleFrame.prototype = {
    *
    * @private
    */
-  _updateCharSize: function WCF__updateCharSize()
-  {
+  _updateCharSize: function WCF__updateCharSize() {
     let doc = this.document;
     let tempLabel = doc.createElementNS(XHTML_NS, "span");
     let style = tempLabel.style;
@@ -826,8 +811,7 @@ WebConsoleFrame.prototype = {
    * @param nsIDOMEvent event
    *        The event that triggered the filter change.
    */
-  _toggleFilter: function WCF__toggleFilter(event)
-  {
+  _toggleFilter: function WCF__toggleFilter(event) {
     let target = event.target;
     let tagName = target.tagName;
     // Prevent toggle if generated from a contextmenu event (right click)
@@ -928,8 +912,7 @@ WebConsoleFrame.prototype = {
    * @param boolean state
    *        True if the menu item is being toggled on, and false otherwise.
    */
-  _setMenuState: function WCF__setMenuState(target, state)
-  {
+  _setMenuState: function WCF__setMenuState(target, state) {
     let menuItems = target.querySelectorAll("menuitem");
     Array.forEach(menuItems, (item) => {
       item.setAttribute("checked", state);
@@ -945,8 +928,7 @@ WebConsoleFrame.prototype = {
    * @param boolean state
    * @returns void
    */
-  setFilterState: function WCF_setFilterState(toggleType, state)
-  {
+  setFilterState: function WCF_setFilterState(toggleType, state) {
     this.filterPrefs[toggleType] = state;
     this.adjustVisibilityForMessageType(toggleType, state);
 
@@ -966,8 +948,7 @@ WebConsoleFrame.prototype = {
    * @param string toggleType
    * @returns boolean
    */
-  getFilterState: function WCF_getFilterState(toggleType)
-  {
+  getFilterState: function WCF_getFilterState(toggleType) {
     return this.filterPrefs[toggleType];
   },
 
@@ -989,8 +970,7 @@ WebConsoleFrame.prototype = {
    *        is a string containing all of the words to filter on.
    * @returns boolean
    */
-  stringMatchesFilters: function WCF_stringMatchesFilters(str, filter)
-  {
+  stringMatchesFilters: function WCF_stringMatchesFilters(str, filter) {
     if (!filter || !str) {
       return true;
     }
@@ -1015,8 +995,7 @@ WebConsoleFrame.prototype = {
    * @returns void
    */
   adjustVisibilityForMessageType:
-  function WCF_adjustVisibilityForMessageType(prefKey, state)
-  {
+  function WCF_adjustVisibilityForMessageType(prefKey, state) {
     let outputNode = this.outputNode;
     let doc = this.document;
 
@@ -1035,8 +1014,7 @@ WebConsoleFrame.prototype = {
       let node = result.snapshotItem(i);
       if (state) {
         node.classList.remove("filtered-by-type");
-      }
-      else {
+      } else {
         node.classList.add("filtered-by-type");
       }
     }
@@ -1047,8 +1025,7 @@ WebConsoleFrame.prototype = {
    * adjustment of the search string.
    */
   adjustVisibilityOnSearchStringChange:
-  function WCF_adjustVisibilityOnSearchStringChange()
-  {
+  function WCF_adjustVisibilityOnSearchStringChange() {
     let nodes = this.outputNode.getElementsByClassName("message");
     let searchString = this.filterBox.value;
 
@@ -1061,8 +1038,7 @@ WebConsoleFrame.prototype = {
       // if the text matches the words in aSearchString...
       if (this.stringMatchesFilters(text, searchString)) {
         node.classList.remove("filtered-by-string");
-      }
-      else {
+      } else {
         node.classList.add("filtered-by-string");
       }
     }
@@ -1077,8 +1053,7 @@ WebConsoleFrame.prototype = {
    * @return boolean
    *         True if the message was filtered or false otherwise.
    */
-  filterMessageNode: function WCF_filterMessageNode(node)
-  {
+  filterMessageNode: function WCF_filterMessageNode(node) {
     let isFiltered = false;
 
     // Filter by the message type.
@@ -1122,8 +1097,7 @@ WebConsoleFrame.prototype = {
    *        The node being filtered out because it is repeated.
    */
   mergeFilteredMessageNode:
-  function WCF_mergeFilteredMessageNode(original, filtered)
-  {
+  function WCF_mergeFilteredMessageNode(original, filtered) {
     let repeatNode = original.getElementsByClassName("message-repeats")[0];
     if (!repeatNode) {
       return; // no repeat node, return early.
@@ -1147,8 +1121,7 @@ WebConsoleFrame.prototype = {
    *          Returns the duplicate node if the message was filtered, null
    *          otherwise.
    */
-  _filterRepeatedMessage: function WCF__filterRepeatedMessage(node)
-  {
+  _filterRepeatedMessage: function WCF__filterRepeatedMessage(node) {
     let repeatNode = node.getElementsByClassName("message-repeats")[0];
     if (!repeatNode) {
       return null;
@@ -1163,11 +1136,10 @@ WebConsoleFrame.prototype = {
       if (!dupeNode) {
         this._repeatNodes[uid] = node;
       }
-    }
-    else if ((node.category == CATEGORY_WEBDEV ||
-              node.category == CATEGORY_JS) &&
-             node.category != CATEGORY_NETWORK &&
-             !node.classList.contains("inlined-variables-view")) {
+    } else if ((node.category == CATEGORY_WEBDEV ||
+                node.category == CATEGORY_JS) &&
+               node.category != CATEGORY_NETWORK &&
+               !node.classList.contains("inlined-variables-view")) {
       let lastMessage = this.outputNode.lastChild;
       if (!lastMessage) {
         return null;
@@ -1195,8 +1167,7 @@ WebConsoleFrame.prototype = {
    *        Array of cached messages coming from the remote Web Console
    *        content instance.
    */
-  displayCachedMessages: function WCF_displayCachedMessages(remoteMessages)
-  {
+  displayCachedMessages: function WCF_displayCachedMessages(remoteMessages) {
     if (!remoteMessages.length) {
       return;
     }
@@ -1232,8 +1203,7 @@ WebConsoleFrame.prototype = {
    * @return nsIDOMElement|null
    *         The message element to display in the Web Console output.
    */
-  logConsoleAPIMessage: function WCF_logConsoleAPIMessage(message)
-  {
+  logConsoleAPIMessage: function WCF_logConsoleAPIMessage(message) {
     let body = null;
     let clipboardText = null;
     let sourceURL = message.filename;
@@ -1400,8 +1370,7 @@ WebConsoleFrame.prototype = {
    * @param object message
    *        The console API message received from the server.
    */
-  handleConsoleAPICall: function WCF_handleConsoleAPICall(message)
-  {
+  handleConsoleAPICall: function WCF_handleConsoleAPICall(message) {
     this.outputMessage(CATEGORY_WEBDEV, this.logConsoleAPIMessage, [message]);
   },
 
@@ -1413,8 +1382,7 @@ WebConsoleFrame.prototype = {
    * @return nsIDOMElement|undefined
    *         The message element to display in the Web Console output.
    */
-  reportPageError: function WCF_reportPageError(category, scriptError)
-  {
+  reportPageError: function WCF_reportPageError(category, scriptError) {
     // Warnings and legacy strict errors become warnings; other types become
     // errors.
     let severity = 'error';
@@ -1497,8 +1465,7 @@ WebConsoleFrame.prototype = {
    * @param nsIScriptError pageError
    *        The error received from the server.
    */
-  handlePageError: function WCF_handlePageError(pageError)
-  {
+  handlePageError: function WCF_handlePageError(pageError) {
     let category = Utils.categoryForScriptError(pageError);
     this.outputMessage(category, this.reportPageError, [category, pageError]);
   },
@@ -1510,8 +1477,7 @@ WebConsoleFrame.prototype = {
    * @param object packet
    *        The message packet received from the server.
    */
-  handleLogMessage: function WCF_handleLogMessage(packet)
-  {
+  handleLogMessage: function WCF_handleLogMessage(packet) {
     if (packet.message) {
       this.outputMessage(CATEGORY_JS, this._reportLogMessage, [packet]);
     }
@@ -1526,8 +1492,7 @@ WebConsoleFrame.prototype = {
    * @return nsIDOMElement
    *         The message element to render for the given log message.
    */
-  _reportLogMessage: function WCF__reportLogMessage(packet)
-  {
+  _reportLogMessage: function WCF__reportLogMessage(packet) {
     let msg = packet.message;
     if (msg.type && msg.type == "longString") {
       msg = msg.initial;
@@ -1548,8 +1513,7 @@ WebConsoleFrame.prototype = {
    * @return nsIDOMElement|null
    *         The message element to display in the Web Console output.
    */
-  logNetEvent: function(networkInfo)
-  {
+  logNetEvent: function(networkInfo) {
     let actorId = networkInfo.actor;
     let request = networkInfo.request;
     let clipboardText = request.method + " " + request.url;
@@ -1631,8 +1595,7 @@ WebConsoleFrame.prototype = {
    * @param linkNode
    *        Parent to the requested urlNode.
    */
-  makeMixedContentNode: function WCF_makeMixedContentNode(linkNode)
-  {
+  makeMixedContentNode: function WCF_makeMixedContentNode(linkNode) {
     let mixedContentWarning = "[" + l10n.getStr("webConsoleMixedContentWarning") + "]";
 
     // Mixed content warning message links to a Learn More page
@@ -1660,8 +1623,7 @@ WebConsoleFrame.prototype = {
    * @param scriptError
    *        The script error object that we are reporting to the console
    */
-  addMoreInfoLink: function WCF_addMoreInfoLink(node, scriptError)
-  {
+  addMoreInfoLink: function WCF_addMoreInfoLink(node, scriptError) {
     let url;
     switch (scriptError.category) {
       case "Insecure Password Field":
@@ -1704,8 +1666,7 @@ WebConsoleFrame.prototype = {
    *        being logged.
    */
   addLearnMoreWarningNode:
-  function WCF_addLearnMoreWarningNode(node, url)
-  {
+  function WCF_addLearnMoreWarningNode(node, url) {
     let moreInfoLabel = "[" + l10n.getStr("webConsoleMoreInfoLabel") + "]";
 
     let warningNode = this.document.createElementNS(XHTML_NS, "a");
@@ -1731,8 +1692,7 @@ WebConsoleFrame.prototype = {
    * @return nsIDOMElement|undefined
    *         The message element to display in the Web Console output.
    */
-  logFileActivity: function WCF_logFileActivity(fileURI)
-  {
+  logFileActivity: function WCF_logFileActivity(fileURI) {
     let urlNode = this.document.createElementNS(XHTML_NS, "a");
     urlNode.setAttribute("title", fileURI);
     urlNode.className = "url";
@@ -1756,8 +1716,7 @@ WebConsoleFrame.prototype = {
    * @param string fileURI
    *        The file URI that was requested.
    */
-  handleFileActivity: function WCF_handleFileActivity(fileURI)
-  {
+  handleFileActivity: function WCF_handleFileActivity(fileURI) {
     this.outputMessage(CATEGORY_NETWORK, this.logFileActivity, [fileURI]);
   },
 
@@ -1767,8 +1726,7 @@ WebConsoleFrame.prototype = {
    * @param object msg
    *        An object holding information about a reflow batch.
    */
-  logReflowActivity: function WCF_logReflowActivity(message)
-  {
+  logReflowActivity: function WCF_logReflowActivity(message) {
     let {start, end, sourceURL, sourceLine} = message;
     let duration = Math.round((end - start) * 100) / 100;
     let node = this.document.createElementNS(XHTML_NS, "span");
@@ -1792,8 +1750,7 @@ WebConsoleFrame.prototype = {
   },
 
 
-  handleReflowActivity: function WCF_handleReflowActivity(message)
-  {
+  handleReflowActivity: function WCF_handleReflowActivity(message) {
     this.outputMessage(CATEGORY_CSS, this.logReflowActivity, [message]);
   },
 
@@ -1801,8 +1758,7 @@ WebConsoleFrame.prototype = {
    * Inform user that the window.console API has been replaced by a script
    * in a content page.
    */
-  logWarningAboutReplacedAPI: function WCF_logWarningAboutReplacedAPI()
-  {
+  logWarningAboutReplacedAPI: function WCF_logWarningAboutReplacedAPI() {
     let node = this.createMessageNode(CATEGORY_JS, SEVERITY_WARNING,
                                       l10n.getStr("ConsoleAPIDisabled"));
     this.outputMessage(CATEGORY_JS, node);
@@ -1814,8 +1770,7 @@ WebConsoleFrame.prototype = {
    * @param object networkInfo
    *        The network request information.
    */
-  handleNetworkEvent: function(networkInfo)
-  {
+  handleNetworkEvent: function(networkInfo) {
     this.outputMessage(CATEGORY_NETWORK, this.logNetEvent, [networkInfo]);
   },
 
@@ -1827,8 +1782,7 @@ WebConsoleFrame.prototype = {
    * @param object packet
    *        Update details.
    */
-  handleNetworkEventUpdate: function(networkInfo, packet)
-  {
+  handleNetworkEventUpdate: function(networkInfo, packet) {
     if (networkInfo.node && this._updateNetMessage(packet.from)) {
       this.emit("new-messages", new Set([{
         update: true,
@@ -1856,8 +1810,7 @@ WebConsoleFrame.prototype = {
    * @return boolean
    *         |true| if the message node was updated, or |false| otherwise.
    */
-  _updateNetMessage: function WCF__updateNetMessage(actorId)
-  {
+  _updateNetMessage: function WCF__updateNetMessage(actorId) {
     let networkInfo = this.webConsoleClient.getNetworkRequest(actorId);
     if (!networkInfo || !networkInfo.node) {
       return;
@@ -1910,8 +1863,7 @@ WebConsoleFrame.prototype = {
    * @param string requestId
    *        The actor ID of the network request.
    */
-  openNetworkPanel: function WCF_openNetworkPanel(requestId)
-  {
+  openNetworkPanel: function WCF_openNetworkPanel(requestId) {
     let toolbox = gDevTools.getToolbox(this.owner.target);
     // The browser console doesn't have a toolbox.
     if (!toolbox) {
@@ -1930,8 +1882,7 @@ WebConsoleFrame.prototype = {
    * @param string title
    *        New page title.
    */
-  onLocationChange: function WCF_onLocationChange(uri, title)
-  {
+  onLocationChange: function WCF_onLocationChange(uri, title) {
     this.contentLocation = uri;
     if (this.owner.onLocationChange) {
       this.owner.onLocationChange(uri, title);
@@ -1946,14 +1897,12 @@ WebConsoleFrame.prototype = {
    * @param object packet
    *        Notification packet received from the server.
    */
-  handleTabNavigated: function WCF_handleTabNavigated(event, packet)
-  {
+  handleTabNavigated: function WCF_handleTabNavigated(event, packet) {
     if (event == "will-navigate") {
       if (this.persistLog) {
         let marker = new Messages.NavigationMarker(packet, Date.now());
         this.output.addMessage(marker);
-      }
-      else {
+      } else {
         this.jsterm.clearOutput();
       }
     }
@@ -1987,8 +1936,7 @@ WebConsoleFrame.prototype = {
    *        object in this array should be the packet received from the
    *        back end.
    */
-  outputMessage: function WCF_outputMessage(category, methodOrNode, args)
-  {
+  outputMessage: function WCF_outputMessage(category, methodOrNode, args) {
     if (!this._outputQueue.length) {
       // If the queue is empty we consider that now was the last output flush.
       // This avoid an immediate output flush when the timer executes.
@@ -2007,8 +1955,7 @@ WebConsoleFrame.prototype = {
    *
    * @private
    */
-  _flushMessageQueue: function WCF__flushMessageQueue()
-  {
+  _flushMessageQueue: function WCF__flushMessageQueue() {
     this._outputTimerInitialized = false;
     if (!this._outputTimer) {
       return;
@@ -2101,9 +2048,8 @@ WebConsoleFrame.prototype = {
     // message.
     if (lastVisibleNode && (scrolledToBottom || isInputOutput)) {
       Utils.scrollToVisible(lastVisibleNode);
-    }
-    else if (!scrolledToBottom && removedNodes > 0 &&
-             oldScrollHeight != scrollNode.scrollHeight) {
+    } else if (!scrolledToBottom && removedNodes > 0 &&
+               oldScrollHeight != scrollNode.scrollHeight) {
       // If there were pruned messages and if scroll is not at the bottom, then
       // we need to adjust the scroll location.
       scrollNode.scrollTop -= oldScrollHeight - scrollNode.scrollHeight;
@@ -2129,8 +2075,7 @@ WebConsoleFrame.prototype = {
    * Initialize the output timer.
    * @private
    */
-  _initOutputTimer: function WCF__initOutputTimer()
-  {
+  _initOutputTimer: function WCF__initOutputTimer() {
     let panelIsDestroyed = !this._outputTimer;
     let alreadyScheduled = this._outputTimerInitialized;
     let nothingToDo = !this._itemDestroyQueue.length &&
@@ -2163,8 +2108,7 @@ WebConsoleFrame.prototype = {
    *         - visible: boolean that tells if the message is visible.
    */
   _outputMessageFromQueue:
-  function WCF__outputMessageFromQueue(hudIdSupportsString, item)
-  {
+  function WCF__outputMessageFromQueue(hudIdSupportsString, item) {
     let [category, methodOrNode, args] = item;
 
     // The last object in the args array should be message
@@ -2211,8 +2155,7 @@ WebConsoleFrame.prototype = {
    * that will be removed at the end of the queue anyway.
    * @private
    */
-  _pruneOutputQueue: function WCF__pruneOutputQueue()
-  {
+  _pruneOutputQueue: function WCF__pruneOutputQueue() {
     let nodes = {};
 
     // Group the messages per category.
@@ -2252,8 +2195,7 @@ WebConsoleFrame.prototype = {
    *        The item you want to destroy.  Does not remove it from the output
    *        queue.
    */
-  _destroyItem: function WCF__destroyItem(item)
-  {
+  _destroyItem: function WCF__destroyItem(item) {
     // TODO: handle object releasing in a more elegant way once all console
     // messages use the new API - bug 778766.
     let [category, methodOrNode, args] = item;
@@ -2281,25 +2223,22 @@ WebConsoleFrame.prototype = {
       let connectionId = null;
       if (methodOrNode == this.logNetEvent) {
         connectionId = args[0].actor;
-      }
-      else if (typeof methodOrNode != "function") {
+      } else if (typeof methodOrNode != "function") {
         connectionId = methodOrNode._connectionId;
       }
       if (connectionId && this.webConsoleClient.hasNetworkRequest(connectionId)) {
         this.webConsoleClient.removeNetworkRequest(connectionId);
         this._releaseObject(connectionId);
       }
-    }
-    else if (category == CATEGORY_WEBDEV &&
-             methodOrNode == this.logConsoleAPIMessage) {
+    } else if (category == CATEGORY_WEBDEV &&
+               methodOrNode == this.logConsoleAPIMessage) {
       args[0].arguments.forEach((value) => {
         if (WebConsoleUtils.isActorGrip(value)) {
           this._releaseObject(value.actor);
         }
       });
-    }
-    else if (category == CATEGORY_JS &&
-             methodOrNode == this.reportPageError) {
+    } else if (category == CATEGORY_JS &&
+               methodOrNode == this.reportPageError) {
       let pageError = args[1];
       for (let prop of ["errorMessage", "lineText"]) {
         let grip = pageError[prop];
@@ -2307,9 +2246,8 @@ WebConsoleFrame.prototype = {
           this._releaseObject(grip.actor);
         }
       }
-    }
-    else if (category == CATEGORY_JS &&
-             methodOrNode == this._reportLogMessage) {
+    } else if (category == CATEGORY_JS &&
+               methodOrNode == this._reportLogMessage) {
       if (WebConsoleUtils.isActorGrip(args[0].message)) {
         this._releaseObject(args[0].message.actor);
       }
@@ -2325,8 +2263,7 @@ WebConsoleFrame.prototype = {
    * @return number
    *         The number of removed nodes.
    */
-  pruneOutputIfNecessary: function WCF_pruneOutputIfNecessary(category)
-  {
+  pruneOutputIfNecessary: function WCF_pruneOutputIfNecessary(category) {
     let logLimit = Utils.logLimitForCategory(category);
     let messageNodes = this.outputNode.querySelectorAll(".message[category=" +
                        CATEGORY_CLASS_FRAGMENTS[category] + "]");
@@ -2341,8 +2278,7 @@ WebConsoleFrame.prototype = {
    * @param nsIDOMNode node
    *        The message node you want to remove.
    */
-  removeOutputMessage: function WCF_removeOutputMessage(node)
-  {
+  removeOutputMessage: function WCF_removeOutputMessage(node) {
     if (node._messageObject) {
       node._messageObject.destroy();
     }
@@ -2360,13 +2296,11 @@ WebConsoleFrame.prototype = {
       if (repeatNode && repeatNode._uid) {
         delete this._repeatNodes[repeatNode._uid];
       }
-    }
-    else if (node._connectionId &&
-             node.category == CATEGORY_NETWORK) {
+    } else if (node._connectionId &&
+               node.category == CATEGORY_NETWORK) {
       this.webConsoleClient.removeNetworkRequest(node._connectionId);
       this._releaseObject(node._connectionId);
-    }
-    else if (node.classList.contains("inlined-variables-view")) {
+    } else if (node.classList.contains("inlined-variables-view")) {
       let view = node._variablesView;
       if (view) {
         view.controller.releaseActors();
@@ -2407,8 +2341,7 @@ WebConsoleFrame.prototype = {
    */
   createMessageNode:
   function WCF_createMessageNode(category, severity, body, sourceURL,
-                                 sourceLine, clipboardText, level, timestamp)
-  {
+                                 sourceLine, clipboardText, level, timestamp) {
     if (typeof body != "string" && clipboardText == null && body.innerText) {
       clipboardText = body.innerText;
     }
@@ -2450,13 +2383,11 @@ WebConsoleFrame.prototype = {
 
     if (body instanceof Ci.nsIDOMNode) {
       bodyNode.appendChild(body);
-    }
-    else {
+    } else {
       let str = undefined;
       if (level == "dir") {
         str = VariablesView.getString(body.arguments[0]);
-      }
-      else {
+      } else {
         str = body;
       }
 
@@ -2541,8 +2472,7 @@ WebConsoleFrame.prototype = {
    *         The new anchor element, ready to be added to the message node.
    */
   createLocationNode:
-  function WCF_createLocationNode({url, line, column}, target)
-  {
+  function WCF_createLocationNode({url, line, column}, target) {
     if (!url) {
       url = "";
     }
@@ -2559,8 +2489,7 @@ WebConsoleFrame.prototype = {
       filename = url;
       fullURL = url;
       isScratchpad = true;
-    }
-    else {
+    } else {
       fullURL = url.split(" -> ").pop();
       filename = WebConsoleUtils.abbreviateSourceURL(fullURL);
     }
@@ -2588,12 +2517,10 @@ WebConsoleFrame.prototype = {
       let category = locationNode.parentNode.category;
       if (target == "styleeditor" || category == CATEGORY_CSS) {
         this.owner.viewSourceInStyleEditor(fullURL, line);
-      }
-      else if (target == "jsdebugger" ||
-               category == CATEGORY_JS || category == CATEGORY_WEBDEV) {
+      } else if (target == "jsdebugger" ||
+                 category == CATEGORY_JS || category == CATEGORY_WEBDEV) {
         this.owner.viewSourceInDebugger(fullURL, line);
-      }
-      else {
+      } else {
         this.owner.viewSource(fullURL, line);
       }
     };
@@ -2625,8 +2552,7 @@ WebConsoleFrame.prototype = {
    * @return void
    */
   setMessageType:
-  function WCF_setMessageType(messageNode, category, severity)
-  {
+  function WCF_setMessageType(messageNode, category, severity) {
     messageNode.category = category;
     messageNode.severity = severity;
     messageNode.setAttribute("category", CATEGORY_CLASS_FRAGMENTS[category]);
@@ -2643,8 +2569,7 @@ WebConsoleFrame.prototype = {
    * @param function callback
    *        The function you want to invoke on click.
    */
-  _addMessageLinkCallback: function WCF__addMessageLinkCallback(node, callback)
-  {
+  _addMessageLinkCallback: function WCF__addMessageLinkCallback(node, callback) {
     node.addEventListener("mousedown", (event) => {
       this._mousedown = true;
       this._startX = event.clientX;
@@ -2666,8 +2591,7 @@ WebConsoleFrame.prototype = {
       // location, we consider this text selection.
       if (mousedown &&
           (this._startX != event.clientX) &&
-          (this._startY != event.clientY))
-      {
+          (this._startY != event.clientY)) {
         this._startX = this._startY = undefined;
         return;
       }
@@ -2678,8 +2602,7 @@ WebConsoleFrame.prototype = {
     }, false);
   },
 
-  _addFocusCallback: function WCF__addFocusCallback(node, callback)
-  {
+  _addFocusCallback: function WCF__addFocusCallback(node, callback) {
     node.addEventListener("mousedown", (event) => {
       this._mousedown = true;
       this._startX = event.clientX;
@@ -2701,8 +2624,7 @@ WebConsoleFrame.prototype = {
       // clicking.
       if (mousedown &&
           (Math.abs(event.clientX - this._startX) >= 2) &&
-          (Math.abs(event.clientY - this._startY) >= 1))
-      {
+          (Math.abs(event.clientY - this._startY) >= 1)) {
         this._startX = this._startY = undefined;
         return;
       }
@@ -2724,13 +2646,11 @@ WebConsoleFrame.prototype = {
    * @param object data
    *        This is the pref-changed data object.
   */
-  _onToolboxPrefChanged: function WCF__onToolboxPrefChanged(event, data)
-  {
+  _onToolboxPrefChanged: function WCF__onToolboxPrefChanged(event, data) {
     if (data.pref == PREF_MESSAGE_TIMESTAMP) {
       if (data.newValue) {
         this.outputNode.classList.remove("hideTimestamps");
-      }
-      else {
+      } else {
         this.outputNode.classList.add("hideTimestamps");
       }
     }
@@ -2747,8 +2667,7 @@ WebConsoleFrame.prototype = {
    *        An optional flag to copy the last clicked item which brought
    *        up the context menu if nothing is selected. Default is false.
    */
-  copySelectedItems: function WCF_copySelectedItems(options)
-  {
+  copySelectedItems: function WCF_copySelectedItems(options) {
     options = options || { linkOnly: false, contextmenu: false };
 
     // Gather up the selected items and concatenate their clipboard text.
@@ -2766,8 +2685,7 @@ WebConsoleFrame.prototype = {
         let timestampString = l10n.timestampString(item.timestamp);
         if (options.linkOnly) {
           strings.push(item.url);
-        }
-        else {
+        } else {
           strings.push(item.clipboardText);
         }
       }
@@ -2786,8 +2704,7 @@ WebConsoleFrame.prototype = {
    *        Function you want invoked once the properties are received.
    */
   objectPropertiesProvider:
-  function WCF_objectPropertiesProvider(actor, callback)
-  {
+  function WCF_objectPropertiesProvider(actor, callback) {
     this.webConsoleClient.inspectObjectProperties(actor,
       function(response) {
         if (response.error) {
@@ -2806,8 +2723,7 @@ WebConsoleFrame.prototype = {
    * @param string actor
    *        The actor ID you want to release.
    */
-  _releaseObject: function WCF__releaseObject(actor)
-  {
+  _releaseObject: function WCF__releaseObject(actor) {
     if (this.proxy) {
       this.proxy.releaseActor(actor);
     }
@@ -2816,8 +2732,7 @@ WebConsoleFrame.prototype = {
   /**
    * Open the selected item's URL in a new tab.
    */
-  openSelectedItemInTab: function WCF_openSelectedItemInTab()
-  {
+  openSelectedItemInTab: function WCF_openSelectedItemInTab() {
     let item = this.output.getSelectedMessages(1)[0] ||
                this._contextMenuHandler.lastClickedMessage;
 
@@ -2836,8 +2751,7 @@ WebConsoleFrame.prototype = {
    *         A promise that is resolved when the WebConsoleFrame instance is
    *         destroyed.
    */
-  destroy: function WCF_destroy()
-  {
+  destroy: function WCF_destroy() {
     if (this._destroyer) {
       return this._destroyer.promise;
     }
@@ -2888,8 +2802,7 @@ WebConsoleFrame.prototype = {
     if (this.proxy) {
       this.proxy.disconnect().then(onDestroy);
       this.proxy = null;
-    }
-    else {
+    } else {
       onDestroy();
     }
 
@@ -2901,8 +2814,7 @@ WebConsoleFrame.prototype = {
 /**
  * @see VariablesView.simpleValueEvalMacro
  */
-function simpleValueEvalMacro(item, currentString)
-{
+function simpleValueEvalMacro(item, currentString) {
   return VariablesView.simpleValueEvalMacro(item, currentString, "_self");
 };
 
@@ -2910,8 +2822,7 @@ function simpleValueEvalMacro(item, currentString)
 /**
  * @see VariablesView.overrideValueEvalMacro
  */
-function overrideValueEvalMacro(item, currentString)
-{
+function overrideValueEvalMacro(item, currentString) {
   return VariablesView.overrideValueEvalMacro(item, currentString, "_self");
 };
 
@@ -2919,8 +2830,7 @@ function overrideValueEvalMacro(item, currentString)
 /**
  * @see VariablesView.getterOrSetterEvalMacro
  */
-function getterOrSetterEvalMacro(item, currentString)
-{
+function getterOrSetterEvalMacro(item, currentString) {
   return VariablesView.getterOrSetterEvalMacro(item, currentString, "_self");
 }
 
@@ -2935,8 +2845,7 @@ function getterOrSetterEvalMacro(item, currentString)
  * @param object webConsoleFrame
  *        The WebConsoleFrame object that owns this JSTerm instance.
  */
-function JSTerm(webConsoleFrame)
-{
+function JSTerm(webConsoleFrame) {
   this.hud = webConsoleFrame;
   this.hudId = this.hud.hudId;
   this.inputHistoryCount = Services.prefs.getIntPref(PREF_INPUT_HISTORY_COUNT);
@@ -3102,8 +3011,7 @@ JSTerm.prototype = {
    * Getter for the element that holds the messages we display.
    * @type nsIDOMElement
    */
-  get outputNode()
-  {
+  get outputNode() {
     return this.hud.outputNode;
   },
 
@@ -3111,8 +3019,7 @@ JSTerm.prototype = {
    * Getter for the debugger WebConsoleClient.
    * @type object
    */
-  get webConsoleClient()
-  {
+  get webConsoleClient() {
     return this.hud.webConsoleClient;
   },
 
@@ -3125,8 +3032,7 @@ JSTerm.prototype = {
   /**
    * Initialize the JSTerminal UI.
    */
-  init: function JST_init()
-  {
+  init: function JST_init() {
     let autocompleteOptions = {
       onSelect: this.onAutocompleteSelect.bind(this),
       onClick: this.acceptProposedCompletion.bind(this),
@@ -3148,8 +3054,7 @@ JSTerm.prototype = {
     if (this.hud.owner._browserConsole &&
         !Services.prefs.getBoolPref("devtools.chrome.enabled")) {
       inputContainer.style.display = "none";
-    }
-    else {
+    } else {
       let okstring = l10n.getStr("selfxss.okstring");
       let msg = l10n.getFormatStr("selfxss.msg", [okstring]);
       this._onPaste = WebConsoleUtils.pasteHandlerGen(this.inputNode,
@@ -3185,8 +3090,7 @@ JSTerm.prototype = {
    *        The message received from the server.
    */
   _executeResultCallback:
-  function JST__executeResultCallback(callback, response)
-  {
+  function JST__executeResultCallback(callback, response) {
     if (!this.hud) {
       return;
     }
@@ -3217,8 +3121,7 @@ JSTerm.prototype = {
         case "error":
           try {
             errorMessage = l10n.getStr(helperResult.message);
-          }
-          catch (ex) {
+          } catch (ex) {
             errorMessage = helperResult.message;
           }
           break;
@@ -3279,8 +3182,7 @@ JSTerm.prototype = {
    * @returns Promise
    *          Resolves with the message once the result is displayed.
    */
-  execute: function JST_execute(executeString, callback)
-  {
+  execute: function JST_execute(executeString, callback) {
     let deferred = promise.defer();
     let resultCallback = function(msg) {
       deferred.resolve(msg);
@@ -3356,15 +3258,13 @@ JSTerm.prototype = {
    *         A promise object that is resolved when the server response is
    *         received.
    */
-  requestEvaluation: function JST_requestEvaluation(str, options = {})
-  {
+  requestEvaluation: function JST_requestEvaluation(str, options = {}) {
     let deferred = promise.defer();
 
     function onResult(response) {
       if (!response.error) {
         deferred.resolve(response);
-      }
-      else {
+      } else {
         deferred.reject(response);
       }
     }
@@ -3393,8 +3293,7 @@ JSTerm.prototype = {
    * @return string|null
    *         The FrameActor ID for the given frame depth.
    */
-  getFrameActor: function JST_getFrameActor(frame)
-  {
+  getFrameActor: function JST_getFrameActor(frame) {
     let state = this.hud.owner.getDebuggerFrames();
     if (!state) {
       return null;
@@ -3403,8 +3302,7 @@ JSTerm.prototype = {
     let grip;
     if (frame == this.SELECTED_FRAME) {
       grip = state.frames[state.selected];
-    }
-    else {
+    } else {
       grip = state.frames[frame];
     }
 
@@ -3432,8 +3330,7 @@ JSTerm.prototype = {
    *         A promise object that is resolved when the variables view has
    *         opened. The new variables view instance is given to the callbacks.
    */
-  openVariablesView: function JST_openVariablesView(options)
-  {
+  openVariablesView: function JST_openVariablesView(options) {
     let onContainerReady = (window) => {
       let container = window.document.querySelector("#variables");
       let view = this._variablesView;
@@ -3476,8 +3373,7 @@ JSTerm.prototype = {
       iframe.style.visibility = "hidden";
       iframe.setAttribute("src", VARIABLES_VIEW_URL);
       options.targetElement.appendChild(iframe);
-    }
-    else {
+    } else {
       if (!this.sidebar) {
         this._createSidebar();
       }
@@ -3493,8 +3389,7 @@ JSTerm.prototype = {
    * @see devtools/framework/sidebar.js
    * @private
    */
-  _createSidebar: function JST__createSidebar()
-  {
+  _createSidebar: function JST__createSidebar() {
     let tabbox = this.hud.document.querySelector("#webconsole-sidebar");
     this.sidebar = new ToolSidebar(tabbox, this, "webconsole");
     this.sidebar.show();
@@ -3508,8 +3403,7 @@ JSTerm.prototype = {
    * @return object
    *         A promise object for the adding of the new tab.
    */
-  _addVariablesViewSidebarTab: function JST__addVariablesViewSidebarTab()
-  {
+  _addVariablesViewSidebarTab: function JST__addVariablesViewSidebarTab() {
     let deferred = promise.defer();
 
     let onTabReady = () => {
@@ -3521,13 +3415,11 @@ JSTerm.prototype = {
     if (tabPanel) {
       if (this.sidebar.getCurrentTabID() == "variablesview") {
         onTabReady();
-      }
-      else {
+      } else {
         this.sidebar.once("variablesview-selected", onTabReady);
         this.sidebar.select("variablesview");
       }
-    }
-    else {
+    } else {
       this.sidebar.once("variablesview-ready", onTabReady);
       this.sidebar.addTab("variablesview", VARIABLES_VIEW_URL, true);
     }
@@ -3543,8 +3435,7 @@ JSTerm.prototype = {
    * @param nsIDOMEvent event
    *        The keypress DOM event object.
    */
-  _onKeypressInVariablesView: function JST__onKeypressInVariablesView(event)
-  {
+  _onKeypressInVariablesView: function JST__onKeypressInVariablesView(event) {
     let tag = event.target.nodeName;
     if (event.keyCode != Ci.nsIDOMKeyEvent.DOM_VK_ESCAPE || event.shiftKey ||
         event.altKey || event.ctrlKey || event.metaKey ||
@@ -3569,8 +3460,7 @@ JSTerm.prototype = {
    * @return object
    *         The new Variables View instance.
    */
-  _createVariablesView: function JST__createVariablesView(options)
-  {
+  _createVariablesView: function JST__createVariablesView(options) {
     let view = new VariablesView(options.container);
     view.toolbox = gDevTools.getToolbox(this.hud.owner.target);
     view.searchPlaceholder = l10n.getStr("propertiesFilterPlaceholder");
@@ -3616,8 +3506,7 @@ JSTerm.prototype = {
    *        - rawObject: the new raw object you want to show.
    *        - label: the new label for the inspected object.
    */
-  _updateVariablesView: function JST__updateVariablesView(options)
-  {
+  _updateVariablesView: function JST__updateVariablesView(options) {
     let view = options.view;
     view.empty();
 
@@ -3634,8 +3523,7 @@ JSTerm.prototype = {
       view.eval = this._variablesViewEvaluate.bind(this, options);
       view.switch = this._variablesViewSwitch.bind(this, options);
       view.delete = this._variablesViewDelete.bind(this, options);
-    }
-    else {
+    } else {
       view.eval = null;
       view.switch = null;
       view.delete = null;
@@ -3646,11 +3534,9 @@ JSTerm.prototype = {
 
     if (options.objectActor) {
       view._consoleLastObjectActor = options.objectActor.actor;
-    }
-    else if (options.rawObject) {
+    } else if (options.rawObject) {
       view._consoleLastObjectActor = null;
-    }
-    else {
+    } else {
       throw new Error("Variables View cannot open without giving it an object " +
                       "display.");
     }
@@ -3673,8 +3559,7 @@ JSTerm.prototype = {
    *        The value the edited property was changed to.
    */
   _variablesViewEvaluate:
-  function JST__variablesViewEvaluate(options, variableObject, value)
-  {
+  function JST__variablesViewEvaluate(options, variableObject, value) {
     let updater = this._updateVariablesView.bind(this, options);
     let onEval = this._silentEvalCallback.bind(this, updater);
     let string = variableObject.evaluationMacro(variableObject, value);
@@ -3697,8 +3582,7 @@ JSTerm.prototype = {
    * @param object variableObject
    *        The Variable object instance for the deleted property.
    */
-  _variablesViewDelete: function JST__variablesViewDelete(options, variableObject)
-  {
+  _variablesViewDelete: function JST__variablesViewDelete(options, variableObject) {
     let onEval = this._silentEvalCallback.bind(this, null);
 
     let evalOptions = {
@@ -3723,8 +3607,7 @@ JSTerm.prototype = {
    *        The new name for the property.
    */
   _variablesViewSwitch:
-  function JST__variablesViewSwitch(options, variableObject, newName)
-  {
+  function JST__variablesViewSwitch(options, variableObject, newName) {
     let updater = this._updateVariablesView.bind(this, options);
     let onEval = this._silentEvalCallback.bind(this, updater);
 
@@ -3758,8 +3641,7 @@ JSTerm.prototype = {
    * @param object response
    *        The response packet received from the server.
    */
-  _silentEvalCallback: function JST__silentEvalCallback(callback, response)
-  {
+  _silentEvalCallback: function JST__silentEvalCallback(callback, response) {
     if (response.error) {
       Cu.reportError("Web Console evaluation failed. " + response.error + ":" +
                      response.message);
@@ -3807,8 +3689,7 @@ JSTerm.prototype = {
    *        True if you want to clear the console messages storage associated to
    *        this Web Console.
    */
-  clearOutput: function JST_clearOutput(clearStorage)
-  {
+  clearOutput: function JST_clearOutput(clearStorage) {
     let hud = this.hud;
     let outputNode = hud.outputNode;
     let node;
@@ -3836,8 +3717,7 @@ JSTerm.prototype = {
    *
    * This method emits the "private-messages-cleared" notification.
    */
-  clearPrivateMessages: function JST_clearPrivateMessages()
-  {
+  clearPrivateMessages: function JST_clearPrivateMessages() {
     let nodes = this.hud.outputNode.querySelectorAll(".message[private]");
     for (let node of nodes) {
       this.hud.removeOutputMessage(node);
@@ -3850,8 +3730,7 @@ JSTerm.prototype = {
    *
    * @returns void
    */
-  resizeInput: function JST_resizeInput()
-  {
+  resizeInput: function JST_resizeInput() {
     let inputNode = this.inputNode;
 
     // Reset the height so that scrollHeight will reflect the natural height of
@@ -3874,8 +3753,7 @@ JSTerm.prototype = {
    *        The new value to set.
    * @returns void
    */
-  setInputValue: function JST_setInputValue(newValue)
-  {
+  setInputValue: function JST_setInputValue(newValue) {
     this.inputNode.value = newValue;
     this.lastInputValue = newValue;
     this.completeNode.value = "";
@@ -3888,8 +3766,7 @@ JSTerm.prototype = {
    * Gets the value from the input field
    * @returns string
    */
-  getInputValue: function()
-  {
+  getInputValue: function() {
     return this.inputNode.value || "";
   },
 
@@ -3897,8 +3774,7 @@ JSTerm.prototype = {
    * The inputNode "input" and "keyup" event handler.
    * @private
    */
-  _inputEventHandler: function JST__inputEventHandler()
-  {
+  _inputEventHandler: function JST__inputEventHandler() {
     if (this.lastInputValue != this.getInputValue()) {
       this.resizeInput();
       this.complete(this.COMPLETE_HINT_ONLY);
@@ -3911,8 +3787,7 @@ JSTerm.prototype = {
    * The window "blur" event handler.
    * @private
    */
-  _blurEventHandler: function JST__blurEventHandler()
-  {
+  _blurEventHandler: function JST__blurEventHandler() {
     if (this.autocompletePopup) {
       this.clearCompletion();
     }
@@ -3924,8 +3799,7 @@ JSTerm.prototype = {
    * @private
    * @param nsIDOMEvent event
    */
-  _keyPress: function JST__keyPress(event)
-  {
+  _keyPress: function JST__keyPress(event) {
     let inputNode = this.inputNode;
     let inputValue = this.getInputValue();
     let inputUpdated = false;
@@ -3988,8 +3862,7 @@ JSTerm.prototype = {
           break;
       }
       return;
-    }
-    else if (event.shiftKey &&
+    } else if (event.shiftKey &&
         event.keyCode == Ci.nsIDOMKeyEvent.DOM_VK_RETURN) {
       // shift return
       // TODO: expand the inputNode height by one line
@@ -4002,8 +3875,7 @@ JSTerm.prototype = {
           this.clearCompletion();
           event.preventDefault();
           event.stopPropagation();
-        }
-        else if (this.sidebar) {
+        } else if (this.sidebar) {
           this._sidebarDestroy();
           event.preventDefault();
           event.stopPropagation();
@@ -4015,8 +3887,7 @@ JSTerm.prototype = {
             this.autocompletePopup.isOpen &&
             this.autocompletePopup.selectedIndex > -1) {
           this.acceptProposedCompletion();
-        }
-        else {
+        } else {
           this.execute();
           this._inputChanged = false;
         }
@@ -4029,8 +3900,7 @@ JSTerm.prototype = {
           if (inputUpdated) {
             this._autocompletePopupNavigated = true;
           }
-        }
-        else if (this.canCaretGoPrevious()) {
+        } else if (this.canCaretGoPrevious()) {
           inputUpdated = this.historyPeruse(HISTORY_BACK);
         }
         if (inputUpdated) {
@@ -4044,8 +3914,7 @@ JSTerm.prototype = {
           if (inputUpdated) {
             this._autocompletePopupNavigated = true;
           }
-        }
-        else if (this.canCaretGoNext()) {
+        } else if (this.canCaretGoNext()) {
           inputUpdated = this.historyPeruse(HISTORY_FORWARD);
         }
         if (inputUpdated) {
@@ -4059,8 +3928,7 @@ JSTerm.prototype = {
           if (inputUpdated) {
             this._autocompletePopupNavigated = true;
           }
-        }
-        else {
+        } else {
           this.hud.outputWrapper.scrollTop =
             Math.max(0,
               this.hud.outputWrapper.scrollTop -
@@ -4076,8 +3944,7 @@ JSTerm.prototype = {
           if (inputUpdated) {
             this._autocompletePopupNavigated = true;
           }
-        }
-        else {
+        } else {
           this.hud.outputWrapper.scrollTop =
             Math.min(this.hud.outputWrapper.scrollHeight,
               this.hud.outputWrapper.scrollTop +
@@ -4138,8 +4005,7 @@ JSTerm.prototype = {
             this.lastCompletion &&
             this.acceptProposedCompletion()) {
           event.preventDefault();
-        }
-        else if (this._inputChanged) {
+        } else if (this._inputChanged) {
           this.updateCompleteNode(l10n.getStr("Autocomplete.blank"));
           event.preventDefault();
         }
@@ -4153,8 +4019,7 @@ JSTerm.prototype = {
    * The inputNode "focus" event handler.
    * @private
    */
-  _focusEventHandler: function JST__focusEventHandler()
-  {
+  _focusEventHandler: function JST__focusEventHandler() {
     this._inputChanged = false;
   },
 
@@ -4167,8 +4032,7 @@ JSTerm.prototype = {
    * @returns boolean
    *          True if the input value changed, false otherwise.
    */
-  historyPeruse: function JST_historyPeruse(direction)
-  {
+  historyPeruse: function JST_historyPeruse(direction) {
     if (!this.history.length) {
       return false;
     }
@@ -4189,17 +4053,15 @@ JSTerm.prototype = {
       }
 
       this.setInputValue(inputVal);
-    }
-    // Down Arrow key
-    else if (direction == HISTORY_FORWARD) {
+    } else if (direction == HISTORY_FORWARD) {
+      // Down Arrow key
       if (this.historyPlaceHolder >= (this.history.length-1)) {
         return false;
       }
 
       let inputVal = this.history[++this.historyPlaceHolder];
       this.setInputValue(inputVal);
-    }
-    else {
+    } else {
       throw new Error("Invalid argument 0");
     }
 
@@ -4212,8 +4074,7 @@ JSTerm.prototype = {
    * @return boolean
    *         True if CR or LF found in node value; else false.
    */
-  hasMultilineInput: function JST_hasMultilineInput()
-  {
+  hasMultilineInput: function JST_hasMultilineInput() {
     return /[\r\n]/.test(this.getInputValue());
   },
 
@@ -4226,8 +4087,7 @@ JSTerm.prototype = {
    *         previous item in history when the user presses the Up arrow key,
    *         otherwise false.
    */
-  canCaretGoPrevious: function JST_canCaretGoPrevious()
-  {
+  canCaretGoPrevious: function JST_canCaretGoPrevious() {
     let node = this.inputNode;
     if (node.selectionStart != node.selectionEnd) {
       return false;
@@ -4247,8 +4107,7 @@ JSTerm.prototype = {
    *         item in history when the user presses the Down arrow key, otherwise
    *         false.
    */
-  canCaretGoNext: function JST_canCaretGoNext()
-  {
+  canCaretGoNext: function JST_canCaretGoNext() {
     let node = this.inputNode;
     if (node.selectionStart != node.selectionEnd) {
       return false;
@@ -4292,8 +4151,7 @@ JSTerm.prototype = {
    * @returns boolean true if there existed a completion for the current input,
    *          or false otherwise.
    */
-  complete: function JSTF_complete(type, callback)
-  {
+  complete: function JSTF_complete(type, callback) {
     let inputNode = this.inputNode;
     let inputValue = this.getInputValue();
     let frameActor = this.getFrameActor(this.SELECTED_FRAME);
@@ -4326,17 +4184,13 @@ JSTerm.prototype = {
     if (type != this.COMPLETE_HINT_ONLY && popup.itemCount == 1) {
       this.acceptProposedCompletion();
       accepted = true;
-    }
-    else if (type == this.COMPLETE_BACKWARD) {
+    } else if (type == this.COMPLETE_BACKWARD) {
       popup.selectPreviousItem();
-    }
-    else if (type == this.COMPLETE_FORWARD) {
+    } else if (type == this.COMPLETE_FORWARD) {
       popup.selectNextItem();
-    }
-    else if (type == this.COMPLETE_PAGEUP) {
+    } else if (type == this.COMPLETE_PAGEUP) {
       popup.selectPreviousPageItem();
-    }
-    else if (type == this.COMPLETE_PAGEDOWN) {
+    } else if (type == this.COMPLETE_PAGEDOWN) {
       popup.selectNextPageItem();
     }
 
@@ -4356,8 +4210,7 @@ JSTerm.prototype = {
    *        Optional, function to invoke when completion results are received.
    */
   _updateCompletionResult:
-  function JST__updateCompletionResult(type, callback)
-  {
+  function JST__updateCompletionResult(type, callback) {
     let frameActor = this.getFrameActor(this.SELECTED_FRAME);
     if (this.lastCompletion.value == this.getInputValue() &&
         frameActor == this._lastFrameActorId) {
@@ -4433,8 +4286,7 @@ JSTerm.prototype = {
    *        the content process.
    */
   _receiveAutocompleteProperties:
-  function JST__receiveAutocompleteProperties(requestId, callback, message)
-  {
+  function JST__receiveAutocompleteProperties(requestId, callback, message) {
     let inputNode = this.inputNode;
     let inputValue = this.getInputValue();
     if (this.lastCompletion.value == inputValue ||
@@ -4478,8 +4330,7 @@ JSTerm.prototype = {
       let x = offset * this.hud._inputCharWidth;
       popup.openPopup(inputNode, x + this.hud._chevronWidth);
       this._autocompletePopupNavigated = false;
-    }
-    else if (items.length < 2 && popup.isOpen) {
+    } else if (items.length < 2 && popup.isOpen) {
       popup.hidePopup();
       this._autocompletePopupNavigated = false;
     }
@@ -4492,11 +4343,9 @@ JSTerm.prototype = {
 
     if (completionType != this.COMPLETE_HINT_ONLY && popup.itemCount == 1) {
       this.acceptProposedCompletion();
-    }
-    else if (completionType == this.COMPLETE_BACKWARD) {
+    } else if (completionType == this.COMPLETE_BACKWARD) {
       popup.selectPreviousItem();
-    }
-    else if (completionType == this.COMPLETE_FORWARD) {
+    } else if (completionType == this.COMPLETE_FORWARD) {
       popup.selectNextItem();
     }
 
@@ -4504,8 +4353,7 @@ JSTerm.prototype = {
     this.emit("autocomplete-updated");
   },
 
-  onAutocompleteSelect: function JSTF_onAutocompleteSelect()
-  {
+  onAutocompleteSelect: function JSTF_onAutocompleteSelect() {
     // Render the suggestion only if the cursor is at the end of the input.
     if (this.inputNode.selectionStart != this.getInputValue().length) {
       return;
@@ -4516,8 +4364,7 @@ JSTerm.prototype = {
       let suffix = currentItem.label.substring(this.lastCompletion.
                                                matchProp.length);
       this.updateCompleteNode(suffix);
-    }
-    else {
+    } else {
       this.updateCompleteNode("");
     }
   },
@@ -4526,8 +4373,7 @@ JSTerm.prototype = {
    * Clear the current completion information and close the autocomplete popup,
    * if needed.
    */
-  clearCompletion: function JSTF_clearCompletion()
-  {
+  clearCompletion: function JSTF_clearCompletion() {
     this.autocompletePopup.clearItems();
     this.lastCompletion = { value: null };
     this.updateCompleteNode("");
@@ -4544,8 +4390,7 @@ JSTerm.prototype = {
    *         True if there was a selected completion item and the input value
    *         was updated, false otherwise.
    */
-  acceptProposedCompletion: function JSTF_acceptProposedCompletion()
-  {
+  acceptProposedCompletion: function JSTF_acceptProposedCompletion() {
     let updated = false;
 
     let currentItem = this.autocompletePopup.selectedItem;
@@ -4571,8 +4416,7 @@ JSTerm.prototype = {
    * @param string suffix
    *        The proposed suffix for the inputNode value.
    */
-  updateCompleteNode: function JSTF_updateCompleteNode(suffix)
-  {
+  updateCompleteNode: function JSTF_updateCompleteNode(suffix) {
     // completion prefix = input, with non-control chars replaced by spaces
     let prefix = suffix ? this.getInputValue().replace(/[\S]/g, " ") : "";
     this.completeNode.value = prefix + suffix;
@@ -4583,8 +4427,7 @@ JSTerm.prototype = {
    * Destroy the sidebar.
    * @private
    */
-  _sidebarDestroy: function JST__sidebarDestroy()
-  {
+  _sidebarDestroy: function JST__sidebarDestroy() {
     if (this._variablesView) {
       this._variablesView.controller.releaseActors();
       this._variablesView = null;
@@ -4602,8 +4445,7 @@ JSTerm.prototype = {
   /**
    * Destroy the JSTerm object. Call this method to avoid memory leaks.
    */
-  destroy: function JST_destroy()
-  {
+  destroy: function JST_destroy() {
     this._sidebarDestroy();
 
     this.clearCompletion();
@@ -4645,8 +4487,7 @@ var Utils = {
    *        The node to make visible.
    * @returns void
    */
-  scrollToVisible: function Utils_scrollToVisible(node)
-  {
+  scrollToVisible: function Utils_scrollToVisible(node) {
     node.scrollIntoView(false);
   },
 
@@ -4659,8 +4500,7 @@ var Utils = {
    *         True if the output node is scrolled to the bottom, or false
    *         otherwise.
    */
-  isOutputScrolledToBottom: function (outputNode, scrollNode)
-  {
+  isOutputScrolledToBottom: function (outputNode, scrollNode) {
     let lastNodeHeight = outputNode.lastChild ?
                          outputNode.lastChild.clientHeight : 0;
     return scrollNode.scrollTop + scrollNode.clientHeight >=
@@ -4676,8 +4516,7 @@ var Utils = {
    *         Depending on the script error CATEGORY_JS, CATEGORY_CSS, or
    *         CATEGORY_SECURITY can be returned.
    */
-  categoryForScriptError: function Utils_categoryForScriptError(scriptError)
-  {
+  categoryForScriptError: function Utils_categoryForScriptError(scriptError) {
     let category = scriptError.category;
 
     if (/^(?:CSS|Layout)\b/.test(category)) {
@@ -4713,16 +4552,14 @@ var Utils = {
    * @return number
    *         The number of messages allowed for the specific category.
    */
-  logLimitForCategory: function Utils_logLimitForCategory(category)
-  {
+  logLimitForCategory: function Utils_logLimitForCategory(category) {
     let logLimit = DEFAULT_LOG_LIMIT;
 
     try {
       let prefName = CATEGORY_CLASS_FRAGMENTS[category];
       logLimit = Services.prefs.getIntPref("devtools.hud.loglimit." + prefName);
       logLimit = Math.max(logLimit, 1);
-    }
-    catch (e) { }
+    } catch (e) { }
 
     return logLimit;
   },
@@ -4736,8 +4573,7 @@ var Utils = {
  * A controller (an instance of nsIController) that makes editing actions
  * behave appropriately in the context of the Web Console.
  */
-function CommandController(webConsole)
-{
+function CommandController(webConsole) {
   this.owner = webConsole;
 }
 
@@ -4745,42 +4581,36 @@ CommandController.prototype = {
   /**
    * Selects all the text in the HUD output.
    */
-  selectAll: function CommandController_selectAll()
-  {
+  selectAll: function CommandController_selectAll() {
     this.owner.output.selectAllMessages();
   },
 
   /**
    * Open the URL of the selected message in a new tab.
    */
-  openURL: function CommandController_openURL()
-  {
+  openURL: function CommandController_openURL() {
     this.owner.openSelectedItemInTab();
   },
 
-  copyURL: function CommandController_copyURL()
-  {
+  copyURL: function CommandController_copyURL() {
     this.owner.copySelectedItems({ linkOnly: true, contextmenu: true });
   },
 
   /**
    * Copies the last clicked message.
    */
-  copyLastClicked: function CommandController_copy()
-  {
+  copyLastClicked: function CommandController_copy() {
     this.owner.copySelectedItems({ linkOnly: false, contextmenu: true });
   },
 
-  supportsCommand: function CommandController_supportsCommand(command)
-  {
+  supportsCommand: function CommandController_supportsCommand(command) {
     if (!this.owner || !this.owner.output) {
       return false;
     }
     return this.isCommandEnabled(command);
   },
 
-  isCommandEnabled: function CommandController_isCommandEnabled(command)
-  {
+  isCommandEnabled: function CommandController_isCommandEnabled(command) {
     switch (command) {
       case "consoleCmd_openURL":
       case "consoleCmd_copyURL": {
@@ -4808,8 +4638,7 @@ CommandController.prototype = {
     return false;
   },
 
-  doCommand: function CommandController_doCommand(command)
-  {
+  doCommand: function CommandController_doCommand(command) {
     switch (command) {
       case "consoleCmd_openURL":
         this.openURL();
@@ -4859,8 +4688,7 @@ CommandController.prototype = {
  * @param RemoteTarget target
  *        The target that the console will connect to.
  */
-function WebConsoleConnectionProxy(webConsoleFrame, target)
-{
+function WebConsoleConnectionProxy(webConsoleFrame, target) {
   this.webConsoleFrame = webConsoleFrame;
   this.target = target;
 
@@ -4949,8 +4777,7 @@ WebConsoleConnectionProxy.prototype = {
    *         A promise object that is resolved/rejected based on the success of
    *         the connection initialization.
    */
-  connect: function WCCP_connect()
-  {
+  connect: function WCCP_connect() {
     if (this._connectDefer) {
       return this._connectDefer.promise;
     }
@@ -5000,8 +4827,7 @@ WebConsoleConnectionProxy.prototype = {
    * Connection timeout handler.
    * @private
    */
-  _connectionTimeout: function WCCP__connectionTimeout()
-  {
+  _connectionTimeout: function WCCP__connectionTimeout() {
     let error = {
       error: "timeout",
       message: l10n.getStr("connectionTimeout"),
@@ -5014,8 +4840,7 @@ WebConsoleConnectionProxy.prototype = {
    * Attach to the Web Console actor.
    * @private
    */
-  _attachConsole: function WCCP__attachConsole()
-  {
+  _attachConsole: function WCCP__attachConsole() {
     let listeners = ["PageError", "ConsoleAPI", "NetworkActivity",
                      "FileActivity"];
     this.client.attachConsole(this._consoleActor, listeners,
@@ -5032,8 +4857,7 @@ WebConsoleConnectionProxy.prototype = {
    *        The WebConsoleClient instance for the attached console, for the
    *        specific tab we work with.
    */
-  _onAttachConsole: function WCCP__onAttachConsole(response, webConsoleClient)
-  {
+  _onAttachConsole: function WCCP__onAttachConsole(response, webConsoleClient) {
     if (response.error) {
       Cu.reportError("attachConsole failed: " + response.error + " " +
                      response.message);
@@ -5065,8 +4889,7 @@ WebConsoleConnectionProxy.prototype = {
    * @param object response
    *        The JSON response object received from the server.
    */
-  _onCachedMessages: function WCCP__onCachedMessages(response)
-  {
+  _onCachedMessages: function WCCP__onCachedMessages(response) {
     if (response.error) {
       Cu.reportError("Web Console getCachedMessages error: " + response.error +
                      " " + response.message);
@@ -5103,8 +4926,7 @@ WebConsoleConnectionProxy.prototype = {
    * @param object packet
    *        The message received from the server.
    */
-  _onPageError: function WCCP__onPageError(type, packet)
-  {
+  _onPageError: function WCCP__onPageError(type, packet) {
     if (this.webConsoleFrame && packet.from == this._consoleActor) {
       this.webConsoleFrame.handlePageError(packet.pageError);
     }
@@ -5120,8 +4942,7 @@ WebConsoleConnectionProxy.prototype = {
    * @param object packet
    *        The message received from the server.
    */
-  _onLogMessage: function WCCP__onLogMessage(type, packet)
-  {
+  _onLogMessage: function WCCP__onLogMessage(type, packet) {
     if (this.webConsoleFrame && packet.from == this._consoleActor) {
       this.webConsoleFrame.handleLogMessage(packet);
     }
@@ -5137,8 +4958,7 @@ WebConsoleConnectionProxy.prototype = {
    * @param object packet
    *        The message received from the server.
    */
-  _onConsoleAPICall: function WCCP__onConsoleAPICall(type, packet)
-  {
+  _onConsoleAPICall: function WCCP__onConsoleAPICall(type, packet) {
     if (this.webConsoleFrame && packet.from == this._consoleActor) {
       this.webConsoleFrame.handleConsoleAPICall(packet.message);
     }
@@ -5154,8 +4974,7 @@ WebConsoleConnectionProxy.prototype = {
    * @param object networkInfo
    *        The network request information.
    */
-  _onNetworkEvent: function(type, networkInfo)
-  {
+  _onNetworkEvent: function(type, networkInfo) {
     if (this.webConsoleFrame) {
       this.webConsoleFrame.handleNetworkEvent(networkInfo);
     }
@@ -5173,8 +4992,7 @@ WebConsoleConnectionProxy.prototype = {
    * @param object networkInfo
    *        The network request information.
    */
-  _onNetworkEventUpdate: function(type, { packet, networkInfo })
-  {
+  _onNetworkEventUpdate: function(type, { packet, networkInfo }) {
     if (this.webConsoleFrame) {
       this.webConsoleFrame.handleNetworkEventUpdate(networkInfo, packet);
     }
@@ -5190,15 +5008,13 @@ WebConsoleConnectionProxy.prototype = {
    * @param object packet
    *        The message received from the server.
    */
-  _onFileActivity: function WCCP__onFileActivity(type, packet)
-  {
+  _onFileActivity: function WCCP__onFileActivity(type, packet) {
     if (this.webConsoleFrame && packet.from == this._consoleActor) {
       this.webConsoleFrame.handleFileActivity(packet.uri);
     }
   },
 
-  _onReflowActivity: function WCCP__onReflowActivity(type, packet)
-  {
+  _onReflowActivity: function WCCP__onReflowActivity(type, packet) {
     if (this.webConsoleFrame && packet.from == this._consoleActor) {
       this.webConsoleFrame.handleReflowActivity(packet);
     }
@@ -5214,8 +5030,7 @@ WebConsoleConnectionProxy.prototype = {
    * @param object packet
    *        The message received from the server.
    */
-  _onServerLogCall: function WCCP__onServerLogCall(type, packet)
-  {
+  _onServerLogCall: function WCCP__onServerLogCall(type, packet) {
     if (this.webConsoleFrame && packet.from == this._consoleActor) {
       this.webConsoleFrame.handleConsoleAPICall(packet.message);
     }
@@ -5232,8 +5047,7 @@ WebConsoleConnectionProxy.prototype = {
    *        The message received from the server.
    */
   _onLastPrivateContextExited:
-  function WCCP__onLastPrivateContextExited(type, packet)
-  {
+  function WCCP__onLastPrivateContextExited(type, packet) {
     if (this.webConsoleFrame && packet.from == this._consoleActor) {
       this.webConsoleFrame.jsterm.clearPrivateMessages();
     }
@@ -5249,8 +5063,7 @@ WebConsoleConnectionProxy.prototype = {
    * @param object packet
    *        The message received from the server.
    */
-  _onTabNavigated: function WCCP__onTabNavigated(event, packet)
-  {
+  _onTabNavigated: function WCCP__onTabNavigated(event, packet) {
     if (!this.webConsoleFrame) {
       return;
     }
@@ -5264,8 +5077,7 @@ WebConsoleConnectionProxy.prototype = {
    * @param string actor
    *        The actor ID to send the request to.
    */
-  releaseActor: function WCCP_releaseActor(actor)
-  {
+  releaseActor: function WCCP_releaseActor(actor) {
     if (this.client) {
       this.client.release(actor);
     }
@@ -5277,8 +5089,7 @@ WebConsoleConnectionProxy.prototype = {
    * @return object
    *         A promise object that is resolved when disconnect completes.
    */
-  disconnect: function WCCP_disconnect()
-  {
+  disconnect: function WCCP_disconnect() {
     if (this._disconnecter) {
       return this._disconnecter.promise;
     }
@@ -5313,8 +5124,7 @@ WebConsoleConnectionProxy.prototype = {
   },
 };
 
-function gSequenceId()
-{
+function gSequenceId() {
   return gSequenceId.n++;
 }
 gSequenceId.n = 0;
@@ -5330,8 +5140,7 @@ gSequenceId.n = 0;
  * @param object owner
  *        The WebConsoleFrame instance that owns this object.
  */
-function ConsoleContextMenu(owner)
-{
+function ConsoleContextMenu(owner) {
   this.owner = owner;
   this.popup = this.owner.document.getElementById("output-contextmenu");
   this.build = this.build.bind(this);
@@ -5344,8 +5153,7 @@ ConsoleContextMenu.prototype = {
   /*
    * Handle to show/hide context menu item.
    */
-  build: function CCM_build(event)
-  {
+  build: function CCM_build(event) {
     let metadata = this.getSelectionMetadata(event.rangeParent);
     for (let element of this.popup.children) {
       element.hidden = this.shouldHideMenuItem(element, metadata);
@@ -5360,8 +5168,7 @@ ConsoleContextMenu.prototype = {
    * @return object
    *         Selection metadata.
    */
-  getSelectionMetadata: function CCM_getSelectionMetadata(clickElement)
-  {
+  getSelectionMetadata: function CCM_getSelectionMetadata(clickElement) {
     let metadata = {
       selectionType: "",
       selection: new Set(),
@@ -5409,8 +5216,7 @@ ConsoleContextMenu.prototype = {
    * @return boolean
    *         Whether the given item should be hidden or not.
    */
-  shouldHideMenuItem: function CCM_shouldHideMenuItem(menuItem, metadata)
-  {
+  shouldHideMenuItem: function CCM_shouldHideMenuItem(menuItem, metadata) {
     let selectionType = menuItem.getAttribute("selectiontype");
     if (selectionType && !metadata.selectionType == selectionType) {
       return true;
@@ -5437,8 +5243,7 @@ ConsoleContextMenu.prototype = {
   /**
    * Destroy the ConsoleContextMenu object instance.
    */
-  destroy: function CCM_destroy()
-  {
+  destroy: function CCM_destroy() {
     this.popup.removeEventListener("popupshowing", this.build);
     this.popup = null;
     this.owner = null;
diff --git a/mobile/android/search/java/org/mozilla/search/PostSearchFragment.java b/mobile/android/search/java/org/mozilla/search/PostSearchFragment.java
index 14b5d12b896..9ff12331eb2 100644
--- a/mobile/android/search/java/org/mozilla/search/PostSearchFragment.java
+++ b/mobile/android/search/java/org/mozilla/search/PostSearchFragment.java
@@ -134,7 +134,7 @@ public class PostSearchFragment extends Fragment {
 
                 // If the intent URI didn't specify a package, open this in Fennec.
                 if (i.getPackage() == null) {
-                    i.setClassName(AppConstants.ANDROID_PACKAGE_NAME, AppConstants.MOZ_ANDROID_BROWSER_INTENT_CLASS);
+                    i.setClassName(view.getContext().getPackageName(), AppConstants.MOZ_ANDROID_BROWSER_INTENT_CLASS);
                     Telemetry.sendUIEvent(TelemetryContract.Event.LOAD_URL,
                             TelemetryContract.Method.CONTENT, "search-result");
                 } else {
diff --git a/mobile/android/search/java/org/mozilla/search/SearchWidget.java b/mobile/android/search/java/org/mozilla/search/SearchWidget.java
index 533ec103bae..8f69cc22c43 100644
--- a/mobile/android/search/java/org/mozilla/search/SearchWidget.java
+++ b/mobile/android/search/java/org/mozilla/search/SearchWidget.java
@@ -67,7 +67,7 @@ public class SearchWidget extends AppWidgetProvider {
         switch (intent.getAction()) {
             case ACTION_LAUNCH_BROWSER:
                 redirect = buildRedirectIntent(Intent.ACTION_MAIN,
-                                               AppConstants.ANDROID_PACKAGE_NAME,
+                                               context.getPackageName(),
                                                AppConstants.MOZ_ANDROID_BROWSER_INTENT_CLASS,
                                                intent);
                 Telemetry.sendUIEvent(TelemetryContract.Event.LAUNCH,
@@ -75,7 +75,7 @@ public class SearchWidget extends AppWidgetProvider {
                 break;
             case ACTION_LAUNCH_NEW_TAB:
                 redirect = buildRedirectIntent(Intent.ACTION_VIEW,
-                                               AppConstants.ANDROID_PACKAGE_NAME,
+                                               context.getPackageName(),
                                                AppConstants.MOZ_ANDROID_BROWSER_INTENT_CLASS,
                                                intent);
                 Telemetry.sendUIEvent(TelemetryContract.Event.LAUNCH,
@@ -83,7 +83,7 @@ public class SearchWidget extends AppWidgetProvider {
                 break;
             case ACTION_LAUNCH_SEARCH:
                 redirect = buildRedirectIntent(Intent.ACTION_VIEW,
-                                               AppConstants.ANDROID_PACKAGE_NAME,
+                                               context.getPackageName(),
                                                AppConstants.MOZ_ANDROID_SEARCH_INTENT_CLASS,
                                                intent);
                 Telemetry.sendUIEvent(TelemetryContract.Event.LAUNCH,
diff --git a/toolkit/mozapps/extensions/content/extensions.xul b/toolkit/mozapps/extensions/content/extensions.xul
index f852098607b..b2f49ee5e53 100644
--- a/toolkit/mozapps/extensions/content/extensions.xul
+++ b/toolkit/mozapps/extensions/content/extensions.xul
@@ -185,6 +185,7 @@
                   command="cmd_restartApp"/>
         </hbox>
         <button id="show-disabled-unsigned-extensions" hidden="true"
+                class="warning"
                 label="&showUnsignedExtensions.button.label;"
                 command="cmd_showUnsignedExtensions"/>
         <toolbarbutton id="header-utils-btn" class="header-button" type="menu"
diff --git a/toolkit/themes/shared/extensions/extensions.inc.css b/toolkit/themes/shared/extensions/extensions.inc.css
index 7f7ba9ab90d..b8e3da1725b 100644
--- a/toolkit/themes/shared/extensions/extensions.inc.css
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@@ -134,6 +134,11 @@
   padding-right: 20px;
 }
 
+button.warning {
+  list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.svg");
+  list-stye-position: inside;
+}
+
 
 /*** category selector ***/