--- a/Pipfile
+++ b/Pipfile
@@ -7,11 +7,12 @@ name = "pypi"
 
 [packages]
 pipenv = "==2018.5.18"
 virtualenv = "==15.2.0"
 six = "==1.10.0"
 attrs = "==18.1.0"
 pytest = "==3.2.5"
 jsmin = "==2.1.0"
+python-hglib = "==2.4"
 
 [requires]
 python_version = "2.7"

--- a/Pipfile.lock
+++ b/Pipfile.lock
@@ -1,12 +1,12 @@
 {
     "_meta": {
         "hash": {
-            "sha256": "706dd858cb4e07dbccf7f3e6f129ac5b50c9906bcd6083e4fb09e9869b379d5e"
+            "sha256": "695978bb529a1cffb6f329519ce6fe68adbee73d9f05595dbefb2b9d0ebe4177"
         },
         "pipfile-spec": 6,
         "requires": {
             "python_version": "2.7"
         },
         "sources": [
             {
                 "name": "pypi",
@@ -56,16 +56,23 @@
         "pytest": {
             "hashes": [
                 "sha256:241d7e7798d79192a123ceaf64c602b4d233eacf6d6e42ae27caa97f498b7dc6",
                 "sha256:6d5bd4f7113b444c55a3bbb5c738a3dd80d43563d063fc42dcb0aaefbdd78b81"
             ],
             "index": "pypi",
             "version": "==3.2.5"
         },
+        "python-hglib": {
+            "hashes": [
+                "sha256:693d6ed92a6566e78802c7a03c256cda33d08c63ad3f00fcfa11379b184b9462"
+            ],
+            "index": "pypi",
+            "version": "==2.4"
+        },
         "six": {
             "hashes": [
                 "sha256:0ff78c403d9bccf5a425a6d31a12aa6b47f1c21ca4dc2573a7e2f32a97335eb1",
                 "sha256:105f8d68616f8248e24bf0e9372ef04d3cc10104f1980f54d57b2ce73a5ad56a"
             ],
             "index": "pypi",
             "version": "==1.10.0"
         },

--- a/accessible/ipc/other/ProxyAccessible.cpp
+++ b/accessible/ipc/other/ProxyAccessible.cpp
@@ -73,17 +73,17 @@ ProxyAccessible::RelationByType(Relation
                                      &targetIDs);
 
   size_t targetCount = targetIDs.Length();
   nsTArray<ProxyAccessible*> targets(targetCount);
   for (size_t i = 0; i < targetCount; i++)
     if (ProxyAccessible* proxy = mDoc->GetAccessible(targetIDs[i]))
       targets.AppendElement(proxy);
 
-  return std::move(targets);
+  return targets;
 }
 
 void
 ProxyAccessible::Relations(nsTArray<RelationType>* aTypes,
                            nsTArray<nsTArray<ProxyAccessible*>>* aTargetSets)
   const
 {
   nsTArray<RelationTargets> ipcRelations;

--- a/browser/components/nsBrowserGlue.js
+++ b/browser/components/nsBrowserGlue.js
@@ -754,16 +754,17 @@ BrowserGlue.prototype = {
       description: gBrowserBundle.GetStringFromName("darkTheme.description"),
       iconURL: "resource:///chrome/browser/content/browser/defaultthemes/dark.icon.svg",
       textcolor: "white",
       accentcolor: "black",
       popup: "#4a4a4f",
       popup_text: "rgb(249, 249, 250)",
       popup_border: "#27272b",
       toolbar_field_text: "rgb(249, 249, 250)",
+      toolbar_field_border: "rgba(249, 249, 250, 0.2)",
       author: vendorShortName,
     });
 
     Normandy.init();
 
     // Initialize the default l10n resource sources for L10nRegistry.
     let locales = Services.locale.getPackagedLocales();
     const appSource = new FileSource("app", locales, "resource://app/localization/{locale}/");

--- a/browser/components/preferences/in-content/privacy.js
+++ b/browser/components/preferences/in-content/privacy.js
@@ -1001,17 +1001,17 @@ var gPrivacyPane = {
     document.getElementById("autoplayMediaPolicyButton").disabled = autoPlayEnabled;
   },
 
   /**
    * Show the controls for the new media autoplay behaviour behind a pref for now
    */
   updateAutoplayMediaControlsVisibility() {
     document.getElementById("autoplayMediaBox").hidden =
-      !Services.prefs.getBoolPref("media.autoplay.enabled.user-gestures-needed");
+      !Services.prefs.getBoolPref("media.autoplay.enabled.user-gestures-needed", false);
   },
 
   /**
    * Displays the autoplay exceptions dialog where specific site autoplay preferences
    * can be set.
    */
   showAutoplayMediaExceptions() {
     var params = {

--- a/browser/config/mozconfigs/linux64/code-coverage
+++ b/browser/config/mozconfigs/linux64/code-coverage
@@ -1,8 +1,10 @@
+MOZ_AUTOMATION_L10N_CHECK=0
+
 . "$topsrcdir/browser/config/mozconfigs/linux64/nightly"
 
 TOOLTOOL_DIR=${TOOLTOOL_DIR:-$topsrcdir}
 
 ac_add_options --disable-install-strip
 ac_add_options --disable-elf-hack
 ac_add_options --disable-sandbox
 ac_add_options --disable-profiling

--- a/browser/installer/package-manifest.in
+++ b/browser/installer/package-manifest.in
@@ -294,16 +294,17 @@
 @RESPATH@/components/nsPrompter.js
 @RESPATH@/components/SyncComponents.manifest
 @RESPATH@/components/Weave.js
 @RESPATH@/components/FxAccountsComponents.manifest
 @RESPATH@/components/FxAccountsPush.js
 @RESPATH@/components/CaptivePortalDetectComponents.manifest
 @RESPATH@/components/captivedetect.js
 @RESPATH@/components/servicesComponents.manifest
+@RESPATH@/components/servicesSettings.manifest
 @RESPATH@/components/cryptoComponents.manifest
 @RESPATH@/components/TelemetryStartup.js
 @RESPATH@/components/TelemetryStartup.manifest
 @RESPATH@/components/XULStore.js
 @RESPATH@/components/XULStore.manifest
 @RESPATH@/components/recording-cmdline.js
 @RESPATH@/components/recording-cmdline.manifest
 @RESPATH@/components/htmlMenuBuilder.js

--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -45,17 +45,21 @@
   --toolbar-bgimage: none;
 
   --toolbox-border-bottom-color: rgba(0,0,0,.3);
 
   --panel-separator-color: hsla(210,4%,10%,.14);
 }
 
 :root[lwt-popup-brighttext] {
-  --panel-separator-color: hsla(0,0%,80%,.25);
+  --panel-separator-color: rgba(249,249,250,.2);
+
+  --arrowpanel-dimmed: rgba(249,249,250,.1);
+  --arrowpanel-dimmed-further: rgba(249,249,250,.15);
+  --arrowpanel-dimmed-even-further: rgba(249,249,250,.2);
 }
 
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */
 }
 
 #main-menubar {
   -moz-box-flex: 1; /* make menu items expand to fill toolbar height */

--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -36,17 +36,21 @@
 :root:-moz-lwtheme {
   --toolbar-bgcolor: rgba(255,255,255,.4);
   --toolbar-bgimage: none;
 
   --toolbox-border-bottom-color: rgba(0,0,0,.3);
 }
 
 :root[lwt-popup-brighttext] {
-  --panel-separator-color: hsla(0,0%,80%,.25);
+  --panel-separator-color: rgba(249,249,250,.2);
+
+  --arrowpanel-dimmed: rgba(249,249,250,.1);
+  --arrowpanel-dimmed-further: rgba(249,249,250,.15);
+  --arrowpanel-dimmed-even-further: rgba(249,249,250,.2);
 }
 
 #navigator-toolbox {
   --tabs-border-color: rgba(0,0,0,.3);
 }
 
 #tabbrowser-tabs {
   --tab-line-color: #0a84ff;

--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -25,16 +25,21 @@
   --chrome-nav-bar-controls-border-color: hsla(240, 5%, 5%, .3);
   --chrome-selection-color: #fff;
   --chrome-selection-background-color: #5675B9;
 
   /* Url and search bars */
   --lwt-toolbar-field-background-color: rgb(71, 71, 73);
   --lwt-toolbar-field-color: var(--chrome-color);
   --urlbar-separator-color: #5F6670;
+
+  /* !important to override LightweightThemeManager.addBuiltInTheme in
+     nsBrowserGlue.js */
+  --autocomplete-popup-background: #2A2A2E !important;
+  --autocomplete-popup-highlight-background: #0060DF;
 }
 
 :root:-moz-lwtheme-darktext {
   --lwt-toolbar-field-background-color: #fff;
 
   --chrome-background-color: #E3E4E6;
   --chrome-color: #18191a;
   --chrome-secondary-background-color: #f5f6f7;

--- a/browser/themes/shared/searchbar.inc.css
+++ b/browser/themes/shared/searchbar.inc.css
@@ -47,16 +47,20 @@
   font-weight: normal;
   background-color: var(--arrowpanel-dimmed);
   border-top: 1px solid var(--panel-separator-color);
   margin: 0;
   padding: 3px 6px;
   color: var(--panel-disabled-color);
 }
 
+:root[lwt-popup-brighttext] .search-panel-header {
+  color: var(--autocomplete-popup-color);
+}
+
 .search-panel-header > label {
   margin-top: 2px !important;
   margin-bottom: 1px !important;
 }
 
 .search-panel-current-input > label {
   margin: 2px 0 !important;
 }

--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -67,17 +67,21 @@
   --toolbar-bgimage: none;
 
   --toolbox-border-bottom-color: rgba(0,0,0,.3);
 
   --panel-separator-color: hsla(210,4%,10%,.14);
 }
 
 :root[lwt-popup-brighttext] {
-  --panel-separator-color: hsla(0,0%,80%,.25);
+  --panel-separator-color: rgba(249,249,250,.2);
+
+  --arrowpanel-dimmed: rgba(249,249,250,.1);
+  --arrowpanel-dimmed-further: rgba(249,249,250,.15);
+  --arrowpanel-dimmed-even-further: rgba(249,249,250,.2);
 }
 
 #navigator-toolbox:-moz-lwtheme {
   --tabs-border-color: rgba(0,0,0,.3);
 }
 
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */

--- a/build/moz.configure/warnings.configure
+++ b/build/moz.configure/warnings.configure
@@ -81,22 +81,16 @@ check_and_add_gcc_warning('-Wstring-conv
 
 # we inline 'new' and 'delete' in mozalloc
 check_and_add_gcc_warning('-Wno-inline-new-delete', cxx_compiler)
 
 # Prevent the following GCC warnings from being treated as errors:
 # too many false positives
 check_and_add_gcc_warning('-Wno-error=maybe-uninitialized')
 
-# Turned on by -Wall, but needs changes to be turned into an error
-# (bug 1465060).
-check_and_add_gcc_warning('-Wno-error=pessimizing-move')
-# This one is probably easier, it's only triggered by tests.
-check_and_add_gcc_warning('-Wno-error=self-move')
-
 # we don't want our builds held hostage when a platform-specific API
 # becomes deprecated.
 check_and_add_gcc_warning('-Wno-error=deprecated-declarations')
 
 # false positives depending on optimization
 check_and_add_gcc_warning('-Wno-error=array-bounds')
 
 # can't get rid of those PGO warnings

--- a/build/unix/build-binutils/build-binutils.sh
+++ b/build/unix/build-binutils/build-binutils.sh
@@ -1,26 +1,26 @@
 #!/bin/bash
 
-binutils_version=2.25.1
+binutils_version=2.28.1
 make_flags='-j12'
 
 root_dir="$1"
 if [ -z "$root_dir" -o ! -d "$root_dir" ]; then
   root_dir=$(mktemp -d)
 fi
 cd $root_dir
 
 if test -z $TMPDIR; then
   TMPDIR=/tmp/
 fi
 
 # Download the source of the specified version of binutils
-wget -c --progress=dot:mega -P $TMPDIR ftp://ftp.gnu.org/gnu/binutils/binutils-${binutils_version}.tar.bz2 || exit 1
-tar xjf $TMPDIR/binutils-${binutils_version}.tar.bz2
+wget -c --progress=dot:mega -P $TMPDIR ftp://ftp.gnu.org/gnu/binutils/binutils-${binutils_version}.tar.xz || exit 1
+tar xJf $TMPDIR/binutils-${binutils_version}.tar.xz
 
 # Build binutils
 mkdir binutils-objdir
 cd binutils-objdir
 
 ../binutils-$binutils_version/configure --prefix /tools/binutils/ --enable-gold --enable-plugins --disable-nls || exit 1
 make $make_flags || exit 1
 make install $make_flags DESTDIR=$root_dir || exit 1

new file mode 100644
--- /dev/null
+++ b/build/unix/stdc++compat/hide_std.ld
@@ -0,0 +1,5 @@
+hidden {
+  local:
+    # std::thread::_M_start_thread(...)
+    _ZNSt6thread15_M_start_thread*;
+};

--- a/build/unix/stdc++compat/moz.build
+++ b/build/unix/stdc++compat/moz.build
@@ -18,8 +18,10 @@ FORCE_STATIC_LIB = True
 
 NO_PGO = True
 
 DisableStlWrapping()
 COMPILE_FLAGS['CLANG_PLUGIN'] = []
 
 DEFINES['MOZ_LIBSTDCXX_VERSION'] = CONFIG['MOZ_LIBSTDCXX_TARGET_VERSION']
 HOST_DEFINES['MOZ_LIBSTDCXX_VERSION'] = CONFIG['MOZ_LIBSTDCXX_HOST_VERSION']
+
+OS_LIBS += ['-Wl,--version-script,%s/hide_std.ld' % SRCDIR]

--- a/build/virtualenv_packages.txt
+++ b/build/virtualenv_packages.txt
@@ -9,17 +9,17 @@ mozilla.pth:python/l10n
 mozilla.pth:third_party/python/attrs/src
 mozilla.pth:third_party/python/blessings
 mozilla.pth:third_party/python/compare-locales
 mozilla.pth:third_party/python/configobj
 mozilla.pth:third_party/python/cram
 mozilla.pth:third_party/python/dlmanager
 mozilla.pth:third_party/python/fluent
 mozilla.pth:third_party/python/futures
-mozilla.pth:third_party/python/hglib
+mozilla.pth:third_party/python/python-hglib
 mozilla.pth:third_party/python/jsmin
 optional:setup.py:third_party/python/psutil:build_ext:--inplace
 mozilla.pth:third_party/python/psutil
 mozilla.pth:third_party/python/pylru
 mozilla.pth:third_party/python/which
 mozilla.pth:third_party/python/pystache
 mozilla.pth:third_party/python/pyyaml/lib
 mozilla.pth:third_party/python/requests

--- a/devtools/client/inspector/animation/animation.js
+++ b/devtools/client/inspector/animation/animation.js
@@ -181,16 +181,33 @@ class AnimationInspector {
     return this.inspector.store.getState().animations;
   }
 
   addAnimationsCurrentTimeListener(listener) {
     this.animationsCurrentTimeListeners.push(listener);
   }
 
   /**
+   * This function calls AnimationsFront.setCurrentTimes with considering the createdTime
+   * which was introduced bug 1454392.
+   *
+   * @param {Number} currentTime
+   */
+  async doSetCurrentTimes(currentTime) {
+    const { animations, timeScale } = this.state;
+
+    // If currentTime is not defined in timeScale (which happens when connected
+    // to server older than FF62), set currentTime as it is. See bug 1454392.
+    currentTime = typeof timeScale.currentTime === "undefined"
+                    ? currentTime : currentTime + timeScale.minStartTime;
+    await this.animationsFront.setCurrentTimes(animations, currentTime, true,
+                                               { relativeToCreatedTime: true });
+  }
+
+  /**
    * Return a map of animated property from given animation actor.
    *
    * @param {Object} animation
    * @return {Map} A map of animated property
    *         key: {String} Animated property name
    *         value: {Array} Array of keyframe object
    *         Also, the keyframe object is consisted as following.
    *         {
@@ -381,27 +398,21 @@ class AnimationInspector {
   async setAnimationsCurrentTime(currentTime, shouldRefresh) {
     this.stopAnimationsCurrentTimeTimer();
     this.onAnimationsCurrentTimeUpdated(currentTime);
 
     if (!shouldRefresh && this.isCurrentTimeSet) {
       return;
     }
 
-    const { animations, timeScale } = this.state;
+    const { animations } = this.state;
     this.isCurrentTimeSet = true;
-    // If currentTime is not defined in timeScale (which happens when connected
-    // to server older than FF62), set currentTime as it is. See bug 1454392.
-    currentTime =
-      typeof timeScale.currentTime === "undefined"
-        ? currentTime : currentTime + timeScale.minStartTime;
 
     try {
-      await this.animationsFront.setCurrentTimes(animations, currentTime, true,
-                                                 { relativeToCreatedTime: true });
+      await this.doSetCurrentTimes(currentTime);
       await this.updateAnimations(animations);
     } catch (e) {
       // Expected if we've already been destroyed or other node have been selected
       // in the meantime.
       console.error(e);
       return;
     }
 
@@ -440,18 +451,17 @@ class AnimationInspector {
         await this.inspector.target.actorHasMethod("animations", "pauseSome");
     }
 
     const { animations, timeScale } = this.state;
 
     try {
       if (doPlay && animations.every(animation =>
                       timeScale.getEndTime(animation) <= animation.state.currentTime)) {
-        await this.animationsFront.setCurrentTimes(animations, 0, true,
-                                                   { relativeToCreatedTime: true });
+        await this.doSetCurrentTimes(0);
       }
 
       // If the server does not support pauseSome/playSome function, (which happens
       // when connected to server older than FF62), use pauseAll/playAll instead.
       // See bug 1456857.
       if (this.hasPausePlaySome) {
         if (doPlay) {
           await this.animationsFront.playSome(animations);

--- a/devtools/client/inspector/animation/components/AnimationTarget.js
+++ b/devtools/client/inspector/animation/components/AnimationTarget.js
@@ -129,20 +129,34 @@ class AnimationTarget extends Component 
       },
       Rep(
         {
           defaultRep: ElementNode,
           mode: MODE.TINY,
           inspectIconTitle: getInspectorStr("inspector.nodePreview.highlightNodeLabel"),
           object: translateNodeFrontToGrip(nodeFront),
           onDOMNodeClick: () => this.select(),
-          onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
-          onDOMNodeMouseOver: () => this.highlight(),
+          onDOMNodeMouseOut: () => {
+            if (!isHighlighted) {
+              onHideBoxModelHighlighter();
+            }
+          },
+          onDOMNodeMouseOver: () => {
+            if (!isHighlighted) {
+              this.highlight();
+            }
+          },
           onInspectIconClick: (_, e) => {
             e.stopPropagation();
+
+            if (!isHighlighted) {
+              // At first, hide highlighter which was created by onDOMNodeMouseOver.
+              onHideBoxModelHighlighter();
+            }
+
             setHighlightedNode(isHighlighted ? null : nodeFront);
           }
         }
       )
     );
   }
 }
 

--- a/devtools/client/inspector/animation/test/browser.ini
+++ b/devtools/client/inspector/animation/test/browser.ini
@@ -31,17 +31,18 @@ support-files =
 [browser_animation_animation-target_select.js]
 [browser_animation_animation-timeline-tick.js]
 [browser_animation_css-transition-with-playstate-idle.js]
 [browser_animation_current-time-label.js]
 [browser_animation_current-time-scrubber.js]
 [browser_animation_current-time-scrubber_each-different-creation-time-animations.js]
 [browser_animation_empty_on_invalid_nodes.js]
 [browser_animation_inspector_exists.js]
-[browser_animation_keyframes-graph_computed-value-path.js]
+[browser_animation_keyframes-graph_computed-value-path-01.js]
+[browser_animation_keyframes-graph_computed-value-path-02.js]
 [browser_animation_keyframes-graph_computed-value-path_easing-hint.js]
 skip-if = (os == "win") || (os == "linux") #1461899
 [browser_animation_keyframes-graph_keyframe-marker.js]
 [browser_animation_keyframes-progress-bar.js]
 [browser_animation_keyframes-progress-bar_after-resuming.js]
 [browser_animation_logic_auto-stop.js]
 [browser_animation_logic_avoid-updating-during-hiding.js]
 [browser_animation_logic_created-time.js]

--- a/devtools/client/inspector/animation/test/browser_animation_animation-target_highlight.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-target_highlight.js
@@ -3,66 +3,94 @@
 
 "use strict";
 
 // Test for following highlighting related.
 // * highlight when mouse over on a target node
 // * unhighlight when mouse out from the above element
 // * lock highlighting when click on the inspect icon in animation target component
 // * add 'highlighting' class to animation target component during locking
+// * mouseover locked target node
 // * unlock highlighting when click on the above icon
 // * lock highlighting when click on the other inspect icon
 // * if the locked node has multi animations,
 //   the class will add to those animation target as well
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
   await removeAnimatedElementsExcept([".animated", ".multi"]);
-  const { animationInspector, panel, toolbox } = await openAnimationInspector();
+  const {
+    animationInspector,
+    inspector,
+    panel,
+    toolbox,
+  } = await openAnimationInspector();
 
   info("Check highlighting when mouse over on a target node");
-  let onHighlight = toolbox.once("node-highlight");
+  const onHighlight = toolbox.once("node-highlight");
   mouseOverOnTargetNode(animationInspector, panel, 0);
   let nodeFront = await onHighlight;
   assertNodeFront(nodeFront, "DIV", "ball animated");
 
   info("Check unhighlighting when mouse out on a target node");
   const onUnhighlight = toolbox.once("node-unhighlight");
   mouseOutOnTargetNode(animationInspector, panel, 0);
   await onUnhighlight;
   ok(true, "Unhighlighted the targe node");
 
   info("Check node is highlighted when the inspect icon is clicked");
-  onHighlight = toolbox.once("node-highlight");
+  let onHighlighterShown = inspector.highlighters.once("box-model-highlighter-shown");
   await clickOnInspectIcon(animationInspector, panel, 0);
-  nodeFront = await onHighlight;
+  nodeFront = await onHighlighterShown;
   assertNodeFront(nodeFront, "DIV", "ball animated");
   ok(panel.querySelectorAll(".animation-target")[0].classList.contains("highlighting"),
     "The highlighted animation target element should have 'highlighting' class");
 
   info("Check if the animation target is still highlighted on mouse out");
   mouseOutOnTargetNode(animationInspector, panel, 0);
   await wait(500);
   ok(panel.querySelectorAll(".animation-target")[0].classList.contains("highlighting"),
     "The highlighted element still should have 'highlighting' class");
 
+  info("Check no highlight event occur by mouse over locked target");
+  let highlightEventCount = 0;
+  const highlightEventCounter = () => {
+    highlightEventCount += 1;
+  };
+  toolbox.on("node-highlight", highlightEventCounter);
+  mouseOverOnTargetNode(animationInspector, panel, 0);
+  await wait(500);
+  is(highlightEventCount, 0, "Highlight event should not occur");
+  toolbox.off("node-highlight", highlightEventCounter);
+
   info("Highlighting another animation target");
-  onHighlight = toolbox.once("node-highlight");
+  onHighlighterShown = inspector.highlighters.once("box-model-highlighter-shown");
   await clickOnInspectIcon(animationInspector, panel, 1);
-  nodeFront = await onHighlight;
+  nodeFront = await onHighlighterShown;
   assertNodeFront(nodeFront, "DIV", "ball multi");
 
   info("Check the highlighted state of the animation targets");
   const animationTargetEls = panel.querySelectorAll(".animation-target");
   ok(!animationTargetEls[0].classList.contains("highlighting"),
     "The animation target[0] should not have 'highlighting' class");
   ok(animationTargetEls[1].classList.contains("highlighting"),
     "The animation target[1] should have 'highlighting' class");
   ok(animationTargetEls[2].classList.contains("highlighting"),
     "The animation target[2] should have 'highlighting' class");
+
+  info("Hide highlighter");
+  const onHighlighterHidden = inspector.highlighters.once("box-model-highlighter-hidden");
+  await clickOnInspectIcon(animationInspector, panel, 1);
+  await onHighlighterHidden;
+
+  info("Check the highlighted state of the animation targets");
+  ok(!animationTargetEls[1].classList.contains("highlighting"),
+    "The animation target[1] should not have 'highlighting' class");
+  ok(!animationTargetEls[2].classList.contains("highlighting"),
+    "The animation target[2] should not have 'highlighting' class");
 });
 
 function assertNodeFront(nodeFront, tagName, classValue) {
   is(nodeFront.tagName, "DIV",
      "The highlighted node has the correct tagName");
   is(nodeFront.attributes[0].name, "class",
      "The highlighted node has the correct attributes");
   is(nodeFront.attributes[0].value, classValue,

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path-01.js
@@ -0,0 +1,341 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following ComputedValuePath component:
+// * element existence
+// * path segments
+// * fill color by animation type
+// * stop color if the animation type is color
+
+requestLongerTimeout(2);
+
+const TEST_DATA = [
+  {
+    targetClass: "multi-types",
+    properties: [
+      {
+        name: "background-color",
+        computedValuePathClass: "color-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 0, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+        expectedStopColors: [
+          { offset: 0, color: "rgb(255, 0, 0)" },
+          { offset: 1, color: "rgb(0, 255, 0)" },
+        ]
+      },
+      {
+        name: "background-repeat",
+        computedValuePathClass: "discrete-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 499.999, y: 0 },
+          { x: 500, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "font-size",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "margin-left",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "opacity",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "text-align",
+        computedValuePathClass: "discrete-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 499.999, y: 0 },
+          { x: 500, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "transform",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 100 },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "multi-types-reverse",
+    properties: [
+      {
+        name: "background-color",
+        computedValuePathClass: "color-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 0, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+        expectedStopColors: [
+          { offset: 0, color: "rgb(0, 255, 0)" },
+          { offset: 1, color: "rgb(255, 0, 0)" },
+        ]
+      },
+      {
+        name: "background-repeat",
+        computedValuePathClass: "discrete-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 499.999, y: 0 },
+          { x: 500, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "font-size",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 100 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 0 },
+        ],
+      },
+      {
+        name: "margin-left",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 100 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 0 },
+        ],
+      },
+      {
+        name: "opacity",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 100 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 0 },
+        ],
+      },
+      {
+        name: "text-align",
+        computedValuePathClass: "discrete-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 499.999, y: 0 },
+          { x: 500, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "transform",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 100 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 0 },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "middle-keyframe",
+    properties: [
+      {
+        name: "background-color",
+        computedValuePathClass: "color-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 0, y: 100 },
+          { x: 500, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+        expectedStopColors: [
+          { offset: 0, color: "rgb(255, 0, 0)" },
+          { offset: 0.5, color: "rgb(0, 0, 255)" },
+          { offset: 1, color: "rgb(0, 255, 0)" },
+        ]
+      },
+      {
+        name: "background-repeat",
+        computedValuePathClass: "discrete-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 249.999, y: 0 },
+          { x: 250, y: 100 },
+          { x: 749.999, y: 100 },
+          { x: 750, y: 0 },
+          { x: 1000, y: 0 },
+        ],
+      },
+      {
+        name: "font-size",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 250, y: 50 },
+          { x: 500, y: 100 },
+          { x: 750, y: 50 },
+          { x: 1000, y: 0 },
+        ],
+      },
+      {
+        name: "margin-left",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 250, y: 50 },
+          { x: 500, y: 100 },
+          { x: 750, y: 50 },
+          { x: 1000, y: 0 },
+        ],
+      },
+      {
+        name: "opacity",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 250, y: 50 },
+          { x: 500, y: 100 },
+          { x: 750, y: 50 },
+          { x: 1000, y: 0 },
+        ],
+      },
+      {
+        name: "text-align",
+        computedValuePathClass: "discrete-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 249.999, y: 0 },
+          { x: 250, y: 100 },
+          { x: 749.999, y: 100 },
+          { x: 750, y: 0 },
+          { x: 1000, y: 0 },
+        ],
+      },
+      {
+        name: "transform",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 250, y: 50 },
+          { x: 500, y: 100 },
+          { x: 750, y: 50 },
+          { x: 1000, y: 0 },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "steps-keyframe",
+    properties: [
+      {
+        name: "background-color",
+        computedValuePathClass: "color-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 0, y: 100 },
+          { x: 500, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+        expectedStopColors: [
+          { offset: 0, color: "rgb(255, 0, 0)" },
+          { offset: 0.499, color: "rgb(255, 0, 0)" },
+          { offset: 0.5, color: "rgb(128, 128, 0)" },
+          { offset: 0.999, color: "rgb(128, 128, 0)" },
+          { offset: 1, color: "rgb(0, 255, 0)" },
+        ]
+      },
+      {
+        name: "background-repeat",
+        computedValuePathClass: "discrete-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 499.999, y: 0 },
+          { x: 500, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "font-size",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 500, y: 0 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 50 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "margin-left",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 499.999, y: 0 },
+          { x: 500, y: 50 },
+          { x: 999.999, y: 50 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "opacity",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 499.999, y: 0 },
+          { x: 500, y: 50 },
+          { x: 999.999, y: 50 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "text-align",
+        computedValuePathClass: "discrete-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 499.999, y: 0 },
+          { x: 500, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+      },
+      {
+        name: "transform",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 500, y: 0 },
+          { x: 500, y: 50 },
+          { x: 1000, y: 50 },
+          { x: 1000, y: 100 },
+        ],
+      },
+    ],
+  },
+];
+
+add_task(async function() {
+  await testKeyframesGraphComputedValuePath(TEST_DATA);
+});

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path-02.js
@@ -0,0 +1,91 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following ComputedValuePath component:
+// * element existence
+// * path segments
+
+requestLongerTimeout(2);
+
+const TEST_DATA = [
+  {
+    targetClass: "steps-effect",
+    properties: [
+      {
+        name: "opacity",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 250, y: 25 },
+          { x: 500, y: 50 },
+          { x: 750, y: 75 },
+          { x: 1000, y: 100 },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "frames-keyframe",
+    properties: [
+      {
+        name: "opacity",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 199, y: 0 },
+          { x: 200, y: 25 },
+          { x: 399, y: 25 },
+          { x: 400, y: 50 },
+          { x: 599, y: 50 },
+          { x: 600, y: 75 },
+          { x: 799, y: 75 },
+          { x: 800, y: 100 },
+          { x: 1000, y: 100 },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "narrow-offsets",
+    properties: [
+      {
+        name: "opacity",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 0 },
+          { x: 100, y: 100 },
+          { x: 110, y: 100 },
+          { x: 114.9, y: 100 },
+          { x: 115, y: 50 },
+          { x: 129.9, y: 50 },
+          { x: 130, y: 0 },
+          { x: 1000, y: 100 },
+        ],
+      },
+    ],
+  },
+  {
+    targetClass: "duplicate-offsets",
+    properties: [
+      {
+        name: "opacity",
+        computedValuePathClass: "distance-path",
+        expectedPathSegments: [
+          { x: 0, y: 100 },
+          { x: 250, y: 100 },
+          { x: 499, y: 100 },
+          { x: 500, y: 100 },
+          { x: 500, y: 0 },
+          { x: 750, y: 50 },
+          { x: 1000, y: 100 },
+        ],
+      },
+    ],
+  },
+];
+
+add_task(async function() {
+  await testKeyframesGraphComputedValuePath(TEST_DATA);
+});

deleted file mode 100644
--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path.js
+++ /dev/null
@@ -1,463 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-// Test for following ComputedValuePath component:
-// * element existence
-// * path segments
-// * fill color by animation type
-// * stop color if the animation type is color
-
-requestLongerTimeout(2);
-
-const TEST_DATA = [
-  {
-    targetClass: "multi-types",
-    properties: [
-      {
-        name: "background-color",
-        computedValuePathClass: "color-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 0, y: 100 },
-          { x: 1000, y: 100 },
-        ],
-        expectedStopColors: [
-          { offset: 0, color: "rgb(255, 0, 0)" },
-          { offset: 1, color: "rgb(0, 255, 0)" },
-        ]
-      },
-      {
-        name: "background-repeat",
-        computedValuePathClass: "discrete-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 499.999, y: 0 },
-          { x: 500, y: 100 },
-          { x: 1000, y: 100 },
-        ],
-      },
-      {
-        name: "font-size",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 500, y: 50 },
-          { x: 1000, y: 100 },
-        ],
-      },
-      {
-        name: "margin-left",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 500, y: 50 },
-          { x: 1000, y: 100 },
-        ],
-      },
-      {
-        name: "opacity",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 500, y: 50 },
-          { x: 1000, y: 100 },
-        ],
-      },
-      {
-        name: "text-align",
-        computedValuePathClass: "discrete-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 499.999, y: 0 },
-          { x: 500, y: 100 },
-          { x: 1000, y: 100 },
-        ],
-      },
-      {
-        name: "transform",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 500, y: 50 },
-          { x: 1000, y: 100 },
-        ],
-      },
-    ],
-  },
-  {
-    targetClass: "multi-types-reverse",
-    properties: [
-      {
-        name: "background-color",
-        computedValuePathClass: "color-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 0, y: 100 },
-          { x: 1000, y: 100 },
-        ],
-        expectedStopColors: [
-          { offset: 0, color: "rgb(0, 255, 0)" },
-          { offset: 1, color: "rgb(255, 0, 0)" },
-        ]
-      },
-      {
-        name: "background-repeat",
-        computedValuePathClass: "discrete-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 499.999, y: 0 },
-          { x: 500, y: 100 },
-          { x: 1000, y: 100 },
-        ],
-      },
-      {
-        name: "font-size",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 100 },
-          { x: 500, y: 50 },
-          { x: 1000, y: 0 },
-        ],
-      },
-      {
-        name: "margin-left",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 100 },
-          { x: 500, y: 50 },
-          { x: 1000, y: 0 },
-        ],
-      },
-      {
-        name: "opacity",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 100 },
-          { x: 500, y: 50 },
-          { x: 1000, y: 0 },
-        ],
-      },
-      {
-        name: "text-align",
-        computedValuePathClass: "discrete-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 499.999, y: 0 },
-          { x: 500, y: 100 },
-          { x: 1000, y: 100 },
-        ],
-      },
-      {
-        name: "transform",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 100 },
-          { x: 500, y: 50 },
-          { x: 1000, y: 0 },
-        ],
-      },
-    ],
-  },
-  {
-    targetClass: "middle-keyframe",
-    properties: [
-      {
-        name: "background-color",
-        computedValuePathClass: "color-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 0, y: 100 },
-          { x: 500, y: 100 },
-          { x: 1000, y: 100 },
-        ],
-        expectedStopColors: [
-          { offset: 0, color: "rgb(255, 0, 0)" },
-          { offset: 0.5, color: "rgb(0, 0, 255)" },
-          { offset: 1, color: "rgb(0, 255, 0)" },
-        ]
-      },
-      {
-        name: "background-repeat",
-        computedValuePathClass: "discrete-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 249.999, y: 0 },
-          { x: 250, y: 100 },
-          { x: 749.999, y: 100 },
-          { x: 750, y: 0 },
-          { x: 1000, y: 0 },
-        ],
-      },
-      {
-        name: "font-size",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 250, y: 50 },
-          { x: 500, y: 100 },
-          { x: 750, y: 50 },
-          { x: 1000, y: 0 },
-        ],
-      },
-      {
-        name: "margin-left",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 250, y: 50 },
-          { x: 500, y: 100 },
-          { x: 750, y: 50 },
-          { x: 1000, y: 0 },
-        ],
-      },
-      {
-        name: "opacity",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 250, y: 50 },
-          { x: 500, y: 100 },
-          { x: 750, y: 50 },
-          { x: 1000, y: 0 },
-        ],
-      },
-      {
-        name: "text-align",
-        computedValuePathClass: "discrete-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 249.999, y: 0 },
-          { x: 250, y: 100 },
-          { x: 749.999, y: 100 },
-          { x: 750, y: 0 },
-          { x: 1000, y: 0 },
-        ],
-      },
-      {
-        name: "transform",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 250, y: 50 },
-          { x: 500, y: 100 },
-          { x: 750, y: 50 },
-          { x: 1000, y: 0 },
-        ],
-      },
-    ],
-  },
-  {
-    targetClass: "steps-keyframe",
-    properties: [
-      {
-        name: "background-color",
-        computedValuePathClass: "color-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 0, y: 100 },
-          { x: 500, y: 100 },
-          { x: 1000, y: 100 },
-        ],
-        expectedStopColors: [
-          { offset: 0, color: "rgb(255, 0, 0)" },
-          { offset: 0.499, color: "rgb(255, 0, 0)" },
-          { offset: 0.5, color: "rgb(128, 128, 0)" },
-          { offset: 0.999, color: "rgb(128, 128, 0)" },
-          { offset: 1, color: "rgb(0, 255, 0)" },
-        ]
-      },
-      {
-        name: "background-repeat",
-        computedValuePathClass: "discrete-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 499.999, y: 0 },
-          { x: 500, y: 100 },
-          { x: 1000, y: 100 },
-        ],
-      },
-      {
-        name: "font-size",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 500, y: 0 },
-          { x: 500, y: 50 },
-          { x: 1000, y: 50 },
-          { x: 1000, y: 100 },
-        ],
-      },
-      {
-        name: "margin-left",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 499.999, y: 0 },
-          { x: 500, y: 50 },
-          { x: 999.999, y: 50 },
-          { x: 1000, y: 100 },
-        ],
-      },
-      {
-        name: "opacity",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 499.999, y: 0 },
-          { x: 500, y: 50 },
-          { x: 999.999, y: 50 },
-          { x: 1000, y: 100 },
-        ],
-      },
-      {
-        name: "text-align",
-        computedValuePathClass: "discrete-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 499.999, y: 0 },
-          { x: 500, y: 100 },
-          { x: 1000, y: 100 },
-        ],
-      },
-      {
-        name: "transform",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 500, y: 0 },
-          { x: 500, y: 50 },
-          { x: 1000, y: 50 },
-          { x: 1000, y: 100 },
-        ],
-      },
-    ],
-  },
-  {
-    targetClass: "steps-effect",
-    properties: [
-      {
-        name: "opacity",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 250, y: 25 },
-          { x: 500, y: 50 },
-          { x: 750, y: 75 },
-          { x: 1000, y: 100 },
-        ],
-      },
-    ],
-  },
-  {
-    targetClass: "frames-keyframe",
-    properties: [
-      {
-        name: "opacity",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 199, y: 0 },
-          { x: 200, y: 25 },
-          { x: 399, y: 25 },
-          { x: 400, y: 50 },
-          { x: 599, y: 50 },
-          { x: 600, y: 75 },
-          { x: 799, y: 75 },
-          { x: 800, y: 100 },
-          { x: 1000, y: 100 },
-        ],
-      },
-    ],
-  },
-  {
-    targetClass: "narrow-offsets",
-    properties: [
-      {
-        name: "opacity",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 0 },
-          { x: 100, y: 100 },
-          { x: 110, y: 100 },
-          { x: 114.9, y: 100 },
-          { x: 115, y: 50 },
-          { x: 129.9, y: 50 },
-          { x: 130, y: 0 },
-          { x: 1000, y: 100 },
-        ],
-      },
-    ],
-  },
-  {
-    targetClass: "duplicate-offsets",
-    properties: [
-      {
-        name: "opacity",
-        computedValuePathClass: "distance-path",
-        expectedPathSegments: [
-          { x: 0, y: 100 },
-          { x: 250, y: 100 },
-          { x: 499, y: 100 },
-          { x: 500, y: 100 },
-          { x: 500, y: 0 },
-          { x: 750, y: 50 },
-          { x: 1000, y: 100 },
-        ],
-      },
-    ],
-  },
-];
-
-add_task(async function() {
-  await addTab(URL_ROOT + "doc_multi_keyframes.html");
-  const { animationInspector, panel } = await openAnimationInspector();
-
-  for (const { properties, targetClass } of TEST_DATA) {
-    info(`Checking keyframes graph for ${ targetClass }`);
-    await clickOnAnimationByTargetSelector(animationInspector,
-                                           panel, `.${ targetClass }`);
-
-    for (const property of properties) {
-      const {
-        name,
-        computedValuePathClass,
-        expectedPathSegments,
-        expectedStopColors,
-      } = property;
-
-      const testTarget = `${ name } in ${ targetClass }`;
-      info(`Checking keyframes graph for ${ testTarget }`);
-      info(`Checking keyframes graph path existence for ${ testTarget }`);
-      const keyframesGraphPathEl = panel.querySelector(`.${ name }`);
-      ok(keyframesGraphPathEl,
-        `The keyframes graph path element of ${ testTarget } should be existence`);
-
-      info(`Checking computed value path existence for ${ testTarget }`);
-      const computedValuePathEl =
-        keyframesGraphPathEl.querySelector(`.${ computedValuePathClass }`);
-      ok(computedValuePathEl,
-        `The computed value path element of ${ testTarget } should be existence`);
-
-      info(`Checking path segments for ${ testTarget }`);
-      const pathEl = computedValuePathEl.querySelector("path");
-      ok(pathEl, `The <path> element of ${ testTarget } should be existence`);
-      assertPathSegments(pathEl, true, expectedPathSegments);
-
-      if (!expectedStopColors) {
-        continue;
-      }
-
-      info(`Checking linearGradient for ${ testTarget }`);
-      const linearGradientEl = computedValuePathEl.querySelector("linearGradient");
-      ok(linearGradientEl,
-        `The <linearGradientEl> element of ${ testTarget } should be existence`);
-
-      for (const expectedStopColor of expectedStopColors) {
-        const { offset, color } = expectedStopColor;
-        assertLinearGradient(linearGradientEl, offset, color);
-      }
-    }
-  }
-});

--- a/devtools/client/inspector/animation/test/browser_animation_pause-resume-button_end-time.js
+++ b/devtools/client/inspector/animation/test/browser_animation_pause-resume-button_end-time.js
@@ -21,27 +21,35 @@ add_task(async function() {
                   ["running", "finished", "finished"]);
   await clickOnCurrentTimeScrubberController(animationInspector, panel, 0);
 
   info("Check animations state after resuming without infinite animation");
   info("Remove infinite animation");
   await setClassAttribute(animationInspector, ".animated", "ball still");
   info("Make the current time of animation to be over its end time");
   await clickOnCurrentTimeScrubberController(animationInspector, panel, 1);
+  await clickOnPlaybackRateSelector(animationInspector, panel, 10);
   info("Resume animations");
   await clickOnPauseResumeButton(animationInspector, panel);
   assertPlayState(animationInspector.state.animations, ["running", "running"]);
   assertCurrentTimeLessThanDuration(animationInspector.state.animations);
+  assertScrubberPosition(panel);
 });
 
 function assertPlayState(animations, expectedState) {
   animations.forEach((animation, index) => {
     is(animation.state.playState, expectedState[index],
        `The playState of animation [${ index }] should be ${ expectedState[index] }`);
   });
 }
 
 function assertCurrentTimeLessThanDuration(animations) {
   animations.forEach((animation, index) => {
     ok(animation.state.currentTime < animation.state.duration,
-       "The current time of animation[${ index }] should be less than its duration");
+       `The current time of animation[${ index }] should be less than its duration`);
   });
 }
+
+function assertScrubberPosition(panel) {
+  const scrubberEl = panel.querySelector(".current-time-scrubber");
+  const translateX = parseFloat(scrubberEl.style.transform.match(/-?\d+(\.\d+)?/)[0]);
+  ok(translateX >= 0, "The translateX of scrubber position should be zero or more");
+}

--- a/devtools/client/inspector/animation/test/head.js
+++ b/devtools/client/inspector/animation/test/head.js
@@ -756,8 +756,66 @@ function findStopElement(linearGradientE
   for (const stopEl of linearGradientEl.querySelectorAll("stop")) {
     if (offset <= parseFloat(stopEl.getAttribute("offset"))) {
       return stopEl;
     }
   }
 
   return null;
 }
+
+/**
+ * Do test for keyframes-graph_computed-value-path-1/2.
+ *
+ * @param {Array} testData
+ */
+async function testKeyframesGraphComputedValuePath(testData) {
+  await addTab(URL_ROOT + "doc_multi_keyframes.html");
+  await removeAnimatedElementsExcept(testData.map(t => `.${ t.targetClass }`));
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  for (const { properties, targetClass } of testData) {
+    info(`Checking keyframes graph for ${ targetClass }`);
+    await clickOnAnimationByTargetSelector(animationInspector,
+                                           panel, `.${ targetClass }`);
+
+    for (const property of properties) {
+      const {
+        name,
+        computedValuePathClass,
+        expectedPathSegments,
+        expectedStopColors,
+      } = property;
+
+      const testTarget = `${ name } in ${ targetClass }`;
+      info(`Checking keyframes graph for ${ testTarget }`);
+      info(`Checking keyframes graph path existence for ${ testTarget }`);
+      const keyframesGraphPathEl = panel.querySelector(`.${ name }`);
+      ok(keyframesGraphPathEl,
+         `The keyframes graph path element of ${ testTarget } should be existence`);
+
+      info(`Checking computed value path existence for ${ testTarget }`);
+      const computedValuePathEl =
+        keyframesGraphPathEl.querySelector(`.${ computedValuePathClass }`);
+      ok(computedValuePathEl,
+         `The computed value path element of ${ testTarget } should be existence`);
+
+      info(`Checking path segments for ${ testTarget }`);
+      const pathEl = computedValuePathEl.querySelector("path");
+      ok(pathEl, `The <path> element of ${ testTarget } should be existence`);
+      assertPathSegments(pathEl, true, expectedPathSegments);
+
+      if (!expectedStopColors) {
+        continue;
+      }
+
+      info(`Checking linearGradient for ${ testTarget }`);
+      const linearGradientEl = computedValuePathEl.querySelector("linearGradient");
+      ok(linearGradientEl,
+         `The <linearGradientEl> element of ${ testTarget } should be existence`);
+
+      for (const expectedStopColor of expectedStopColors) {
+        const { offset, color } = expectedStopColor;
+        assertLinearGradient(linearGradientEl, offset, color);
+      }
+    }
+  }
+}

--- a/devtools/client/inspector/shared/highlighters-overlay.js
+++ b/devtools/client/inspector/shared/highlighters-overlay.js
@@ -438,28 +438,31 @@ class HighlightersOverlay {
     }
 
     const isShown = await highlighter.show(node, options);
     if (!isShown) {
       return;
     }
 
     this.boxModelHighlighterShown = node;
+    this.emit("box-model-highlighter-shown", node);
   }
 
   /**
    * Hide the box model highlighter.
    */
   async hideBoxModelHighlighter() {
     if (!this.boxModelHighlighterShown || !this.highlighters.BoxModelHighlighter) {
       return;
     }
 
     await this.highlighters.BoxModelHighlighter.hide();
+    const node = this.boxModelHighlighterShown;
     this.boxModelHighlighterShown = null;
+    this.emit("box-model-highlighter-hidden", node);
   }
 
   /**
    * Toggle the geometry editor highlighter for the given element.
    *
    * @param {NodeFront} node
    *        The NodeFront of the element to highlight.
    */

--- a/devtools/client/locales/en-US/performance.properties
+++ b/devtools/client/locales/en-US/performance.properties
@@ -58,23 +58,23 @@ graphs.ms=ms
 # AS SHORT AS POSSIBLE so it doesn't obstruct important parts of the graph.
 graphs.memory=MB
 
 # LOCALIZATION NOTE (category.*):
 # These strings are displayed in the categories graph of the Performance Tools,
 # as the legend for each block in every bar. These labels should be kept
 # AS SHORT AS POSSIBLE so they don't obstruct important parts of the graph.
 category.other=Gecko
-category.css=Styles
+category.layout=Layout
 category.js=JIT
 category.gc=GC
 category.network=Network
 category.graphics=Graphics
-category.storage=Storage
-category.events=Input & Events
+category.dom=DOM
+category.idle=Idle
 category.tools=Tools
 
 # LOCALIZATION NOTE (table.bytes):
 # This string is displayed in the call tree after bytesize units.
 # %S represents the value in bytes.
 table.bytes=%S B
 
 # LOCALIZATION NOTE (table.ms2):

--- a/devtools/client/locales/jar.mn
+++ b/devtools/client/locales/jar.mn
@@ -1,13 +1,13 @@
 #filter substitution
 # 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] @AB_CD@.jar:
-    devtools (en-US/**/*.ftl)
+    devtools (%*.ftl)
 
 @AB_CD@.jar:
 %   locale devtools @AB_CD@ %locale/@AB_CD@/devtools/client/
     locale/@AB_CD@/devtools/client/ (%*.properties)
     locale/@AB_CD@/devtools/client/ (%*.dtd)
 

--- a/devtools/client/performance/modules/categories.js
+++ b/devtools/client/performance/modules/categories.js
@@ -2,26 +2,30 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
 const { L10N } = require("devtools/client/performance/modules/global");
 
 /**
  * Details about each label stack frame category.
- * @see CATEGORY_MAPPINGS.
+ * To be kept in sync with the js::ProfilingStackFrame::Category in ProfilingStack.h
  */
 const CATEGORIES = [{
+  color: "#d99b28",
+  abbrev: "idle",
+  label: L10N.getStr("category.idle")
+}, {
   color: "#5e88b0",
   abbrev: "other",
   label: L10N.getStr("category.other")
 }, {
   color: "#46afe3",
-  abbrev: "css",
-  label: L10N.getStr("category.css")
+  abbrev: "layout",
+  label: L10N.getStr("category.layout")
 }, {
   color: "#d96629",
   abbrev: "js",
   label: L10N.getStr("category.js")
 }, {
   color: "#eb5368",
   abbrev: "gc",
   label: L10N.getStr("category.gc")
@@ -30,99 +34,40 @@ const CATEGORIES = [{
   abbrev: "network",
   label: L10N.getStr("category.network")
 }, {
   color: "#70bf53",
   abbrev: "graphics",
   label: L10N.getStr("category.graphics")
 }, {
   color: "#8fa1b2",
-  abbrev: "storage",
-  label: L10N.getStr("category.storage")
+  abbrev: "dom",
+  label: L10N.getStr("category.dom")
 }, {
-  color: "#d99b28",
-  abbrev: "events",
-  label: L10N.getStr("category.events")
-}, {
+  // The devtools-only "tools" category which gets computed by
+  // computeIsContentAndCategory and is not part of the category list in
+  // ProfilingStack.h.
   color: "#8fa1b2",
   abbrev: "tools",
   label: L10N.getStr("category.tools")
 }];
 
 /**
- * Mapping from category bitmasks in the profiler data to additional details.
- * To be kept in sync with the js::ProfilingStackFrame::Category in ProfilingStack.h
+ * Get the numeric index for the given category abbreviation.
+ * See `CATEGORIES` above.
  */
-const CATEGORY_MAPPINGS = {
-  // js::ProfilingStackFrame::Category::OTHER
-  "16": CATEGORIES[0],
-  // js::ProfilingStackFrame::Category::CSS
-  "32": CATEGORIES[1],
-  // js::ProfilingStackFrame::Category::JS
-  "64": CATEGORIES[2],
-  // js::ProfilingStackFrame::Category::GC
-  "128": CATEGORIES[3],
-  // js::ProfilingStackFrame::Category::CC
-  "256": CATEGORIES[3],
-  // js::ProfilingStackFrame::Category::NETWORK
-  "512": CATEGORIES[4],
-  // js::ProfilingStackFrame::Category::GRAPHICS
-  "1024": CATEGORIES[5],
-  // js::ProfilingStackFrame::Category::STORAGE
-  "2048": CATEGORIES[6],
-  // js::ProfilingStackFrame::Category::EVENTS
-  "4096": CATEGORIES[7],
-  // non-bitmasks for specially-assigned categories
-  "9000": CATEGORIES[8],
-};
-
-/**
- * Get the numeric bitmask (or set of masks) for the given category
- * abbreviation. See `CATEGORIES` and `CATEGORY_MAPPINGS` above.
- *
- * CATEGORY_MASK can be called with just a name if it is expected that the
- * category is mapped to by exactly one bitmask. If the category is mapped
- * to by multiple masks, CATEGORY_MASK for that name must be called with
- * an additional argument specifying the desired id (in ascending order).
- */
-const [CATEGORY_MASK, CATEGORY_MASK_LIST] = (() => {
-  const bitmasksForCategory = {};
-  const all = Object.keys(CATEGORY_MAPPINGS);
-
-  for (const category of CATEGORIES) {
-    bitmasksForCategory[category.abbrev] = all
-      .filter(mask => CATEGORY_MAPPINGS[mask] == category)
-      .map(mask => +mask)
-      .sort();
+const CATEGORY_INDEX = (() => {
+  const indexForCategory = {};
+  for (let categoryIndex = 0; categoryIndex < CATEGORIES.length; categoryIndex++) {
+    const category = CATEGORIES[categoryIndex];
+    indexForCategory[category.abbrev] = categoryIndex;
   }
 
-  return [
-    function(name, index) {
-      if (!(name in bitmasksForCategory)) {
-        throw new Error(`Category abbreviation "${name}" does not exist.`);
-      }
-      if (arguments.length == 1) {
-        if (bitmasksForCategory[name].length != 1) {
-          throw new Error(`Expected exactly one category number for "${name}".`);
-        } else {
-          return bitmasksForCategory[name][0];
-        }
-      } else {
-        if (index > bitmasksForCategory[name].length) {
-          throw new Error(`Index "${index}" too high for category "${name}".`);
-        }
-        return bitmasksForCategory[name][index - 1];
-      }
-    },
-
-    function(name) {
-      if (!(name in bitmasksForCategory)) {
-        throw new Error(`Category abbreviation "${name}" does not exist.`);
-      }
-      return bitmasksForCategory[name];
+  return function(name) {
+    if (!(name in indexForCategory)) {
+      throw new Error(`Category abbreviation "${name}" does not exist.`);
     }
-  ];
+    return indexForCategory[name];
+  };
 })();
 
 exports.CATEGORIES = CATEGORIES;
-exports.CATEGORY_MAPPINGS = CATEGORY_MAPPINGS;
-exports.CATEGORY_MASK = CATEGORY_MASK;
-exports.CATEGORY_MASK_LIST = CATEGORY_MASK_LIST;
+exports.CATEGORY_INDEX = CATEGORY_INDEX;

--- a/devtools/client/performance/modules/logic/frame-utils.js
+++ b/devtools/client/performance/modules/logic/frame-utils.js
@@ -4,17 +4,17 @@
 "use strict";
 
 const global = require("devtools/client/performance/modules/global");
 const demangle = require("devtools/client/shared/demangle");
 const { assert } = require("devtools/shared/DevToolsUtils");
 const { isChromeScheme, isContentScheme, isWASM, parseURL } =
   require("devtools/client/shared/source-utils");
 
-const { CATEGORY_MASK, CATEGORY_MAPPINGS } = require("devtools/client/performance/modules/categories");
+const { CATEGORY_INDEX, CATEGORIES } = require("devtools/client/performance/modules/categories");
 
 // Character codes used in various parsing helper functions.
 const CHAR_CODE_R = "r".charCodeAt(0);
 const CHAR_CODE_0 = "0".charCodeAt(0);
 const CHAR_CODE_9 = "9".charCodeAt(0);
 const CHAR_CODE_CAP_Z = "Z".charCodeAt(0);
 
 const CHAR_CODE_LPAREN = "(".charCodeAt(0);
@@ -185,17 +185,17 @@ function parseLocation(location, fallbac
 
 /**
  * Sets the properties of `isContent` and `category` on a frame.
  *
  * @param {InflatedFrame} frame
  */
 function computeIsContentAndCategory(frame) {
   // Only C++ stack frames have associated category information.
-  if (frame.category) {
+  if (frame.category !== null && frame.category !== undefined) {
     return;
   }
 
   const location = frame.location;
 
   // There are 3 variants of location strings in the profiler (with optional
   // column numbers):
   //   1) "name (resource:line)"
@@ -229,28 +229,28 @@ function computeIsContentAndCategory(fra
   }
 
   if (schemeStartIndex !== 0) {
     for (let j = schemeStartIndex; j < location.length; j++) {
       if (location.charCodeAt(j) === CHAR_CODE_R &&
           isChromeScheme(location, j) &&
           (location.includes("resource://devtools") ||
            location.includes("resource://devtools"))) {
-        frame.category = CATEGORY_MASK("tools");
+        frame.category = CATEGORY_INDEX("tools");
         return;
       }
     }
   }
 
   if (location === "EnterJIT") {
-    frame.category = CATEGORY_MASK("js");
+    frame.category = CATEGORY_INDEX("js");
     return;
   }
 
-  frame.category = CATEGORY_MASK("other");
+  frame.category = CATEGORY_INDEX("other");
 }
 
 /**
  * Get caches to cache inflated frames and computed frame keys of a frame
  * table.
  *
  * @param object framesTable
  * @return object
@@ -388,17 +388,20 @@ function getFrameInfo(node, options) {
       data.functionName = global.L10N.getStr("table.root");
     } else {
       data = parseLocation(node.location, node.line, node.column);
       data.hasOptimizations = node.hasOptimizations();
       data.isContent = node.isContent;
       data.isMetaCategory = node.isMetaCategory;
     }
     data.samples = node.youngestFrameSamples;
-    data.categoryData = CATEGORY_MAPPINGS[node.category] || {};
+    const hasCategory = node.category !== null && node.category !== undefined;
+    data.categoryData = hasCategory
+      ? (CATEGORIES[node.category] || CATEGORIES[CATEGORY_INDEX("other")])
+      : {};
     data.nodeType = node.nodeType;
 
     // Frame name (function location or some meta information)
     if (data.isMetaCategory) {
       data.name = data.categoryData.label;
     } else if (shouldDemangle(data.functionName)) {
       data.name = demangle(data.functionName);
     } else {

--- a/devtools/client/performance/test/browser_perf-tree-view-02.js
+++ b/devtools/client/performance/test/browser_perf-tree-view-02.js
@@ -119,17 +119,17 @@ add_task(function() {
   is($fun(".call-tree-url", $$(".call-tree-item")[2]).textContent.trim(), "baz",
     "The .A.B node's function cell displays the correct url.");
   ok($fun(".call-tree-url", $$(".call-tree-item")[2]).getAttribute("tooltiptext").includes("http://foo/bar/baz"),
     "The .A.B node's function cell displays the correct url tooltiptext.");
   is($fun(".call-tree-line", $$(".call-tree-item")[2]).textContent.trim(), ":34",
     "The .A.B node's function cell displays the correct line.");
   is($fun(".call-tree-host", $$(".call-tree-item")[2]).textContent.trim(), "foo",
     "The .A.B node's function cell displays the correct host.");
-  is($fun(".call-tree-category", $$(".call-tree-item")[2]).textContent.trim(), "Styles",
+  is($fun(".call-tree-category", $$(".call-tree-item")[2]).textContent.trim(), "Layout",
     "The .A.B node's function cell displays the correct category.");
 
   is($$dur(3).textContent.trim(), "5 ms",
     "The .A.E node's duration cell displays the correct value.");
   is($$per(3).textContent.trim(), "25%",
     "The .A.E node's percentage cell displays the correct value.");
   is($$sam(3).textContent.trim(), "0",
     "The .A.E node's samples cell displays the correct value.");

--- a/devtools/client/performance/test/browser_perf-tree-view-08.js
+++ b/devtools/client/performance/test/browser_perf-tree-view-08.js
@@ -4,17 +4,17 @@
 
 /**
  * Tests that the profiler's tree view renders generalized platform data
  * when `contentOnly` is on correctly.
  */
 
 const { ThreadNode } = require("devtools/client/performance/modules/logic/tree-model");
 const { CallView } = require("devtools/client/performance/modules/widgets/tree-view");
-const { CATEGORY_MASK } = require("devtools/client/performance/modules/categories");
+const { CATEGORY_INDEX } = require("devtools/client/performance/modules/categories");
 const RecordingUtils = require("devtools/shared/performance/recording-utils");
 
 add_task(function() {
   const threadNode = new ThreadNode(gProfile.threads[0], { startTime: 0, endTime: 20,
                                                            contentOnly: true });
 
   // Don't display the synthesized (root) and the real (root) node twice.
   threadNode.calls = threadNode.calls[0].calls;
@@ -84,26 +84,26 @@ const gProfile = RecordingUtils.deflateP
       ]
     }, {
       time: 1 + 1 + 2,
       frames: [
         { location: "(root)" },
         { location: "http://content/A" },
         { location: "http://content/E" },
         { location: "http://content/F" },
-        { location: "platform_JS", category: CATEGORY_MASK("js") },
+        { location: "platform_JS", category: CATEGORY_INDEX("js") },
       ]
     }, {
       time: 1 + 1 + 2 + 3,
       frames: [
         { location: "(root)" },
-        { location: "platform_JS2", category: CATEGORY_MASK("js") },
+        { location: "platform_JS2", category: CATEGORY_INDEX("js") },
       ]
     }, {
       time: 1 + 1 + 2 + 3 + 5,
       frames: [
         { location: "(root)" },
         { location: "http://content/A" },
-        { location: "platform_GC", category: CATEGORY_MASK("gc", 1) },
+        { location: "platform_GC", category: CATEGORY_INDEX("gc") },
       ]
     }]
   }]
 });

--- a/devtools/client/performance/test/helpers/synth-utils.js
+++ b/devtools/client/performance/test/helpers/synth-utils.js
@@ -1,53 +1,53 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 /**
  * Generates a generalized profile with some samples.
  */
 exports.synthesizeProfile = () => {
-  const { CATEGORY_MASK } = require("devtools/client/performance/modules/categories");
+  const { CATEGORY_INDEX } = require("devtools/client/performance/modules/categories");
   const RecordingUtils = require("devtools/shared/performance/recording-utils");
 
   return RecordingUtils.deflateProfile({
     meta: { version: 2 },
     threads: [{
       samples: [{
         time: 1,
         frames: [
-          { category: CATEGORY_MASK("other"), location: "(root)" },
-          { category: CATEGORY_MASK("other"), location: "A (http://foo/bar/baz:12)" },
-          { category: CATEGORY_MASK("css"), location: "B (http://foo/bar/baz:34)" },
-          { category: CATEGORY_MASK("js"), location: "C (http://foo/bar/baz:56)" }
+          { category: CATEGORY_INDEX("other"), location: "(root)" },
+          { category: CATEGORY_INDEX("other"), location: "A (http://foo/bar/baz:12)" },
+          { category: CATEGORY_INDEX("layout"), location: "B (http://foo/bar/baz:34)" },
+          { category: CATEGORY_INDEX("js"), location: "C (http://foo/bar/baz:56)" }
         ]
       }, {
         time: 1 + 1,
         frames: [
-          { category: CATEGORY_MASK("other"), location: "(root)" },
-          { category: CATEGORY_MASK("other"), location: "A (http://foo/bar/baz:12)" },
-          { category: CATEGORY_MASK("css"), location: "B (http://foo/bar/baz:34)" },
-          { category: CATEGORY_MASK("gc", 1), location: "D (http://foo/bar/baz:78:9)" }
+          { category: CATEGORY_INDEX("other"), location: "(root)" },
+          { category: CATEGORY_INDEX("other"), location: "A (http://foo/bar/baz:12)" },
+          { category: CATEGORY_INDEX("layout"), location: "B (http://foo/bar/baz:34)" },
+          { category: CATEGORY_INDEX("gc"), location: "D (http://foo/bar/baz:78:9)" }
         ]
       }, {
         time: 1 + 1 + 2,
         frames: [
-          { category: CATEGORY_MASK("other"), location: "(root)" },
-          { category: CATEGORY_MASK("other"), location: "A (http://foo/bar/baz:12)" },
-          { category: CATEGORY_MASK("css"), location: "B (http://foo/bar/baz:34)" },
-          { category: CATEGORY_MASK("gc", 1), location: "D (http://foo/bar/baz:78:9)" }
+          { category: CATEGORY_INDEX("other"), location: "(root)" },
+          { category: CATEGORY_INDEX("other"), location: "A (http://foo/bar/baz:12)" },
+          { category: CATEGORY_INDEX("layout"), location: "B (http://foo/bar/baz:34)" },
+          { category: CATEGORY_INDEX("gc"), location: "D (http://foo/bar/baz:78:9)" }
         ]
       }, {
         time: 1 + 1 + 2 + 3,
         frames: [
-          { category: CATEGORY_MASK("other"), location: "(root)" },
-          { category: CATEGORY_MASK("other"), location: "A (http://foo/bar/baz:12)" },
-          { category: CATEGORY_MASK("gc", 2), location: "E (http://foo/bar/baz:90)" },
-          { category: CATEGORY_MASK("network"), location: "F (http://foo/bar/baz:99)" }
+          { category: CATEGORY_INDEX("other"), location: "(root)" },
+          { category: CATEGORY_INDEX("other"), location: "A (http://foo/bar/baz:12)" },
+          { category: CATEGORY_INDEX("gc"), location: "E (http://foo/bar/baz:90)" },
+          { category: CATEGORY_INDEX("network"), location: "F (http://foo/bar/baz:99)" }
         ]
       }]
     }]
   });
 };
 
 /**
  * Generates a simple implementation for a tree class.

--- a/devtools/client/performance/test/unit/test_profiler-categories.js
+++ b/devtools/client/performance/test/unit/test_profiler-categories.js
@@ -2,32 +2,24 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 /**
  * Tests if the profiler categories are mapped correctly.
  */
 
 add_task(function() {
-  const { CATEGORIES, CATEGORY_MAPPINGS } = require("devtools/client/performance/modules/categories");
+  const { CATEGORIES } = require("devtools/client/performance/modules/categories");
   const { L10N } = require("devtools/client/performance/modules/global");
   const count = CATEGORIES.length;
 
   ok(count,
     "Should have a non-empty list of categories available.");
 
   ok(CATEGORIES.some(e => e.color),
     "All categories have an associated color.");
 
   ok(CATEGORIES.every(e => e.label),
     "All categories have an associated label.");
 
   ok(CATEGORIES.every(e => e.label === L10N.getStr("category." + e.abbrev)),
     "All categories have a correctly localized label.");
-
-  ok(Object.keys(CATEGORY_MAPPINGS).every(e => (Number(e) >= 9000 && Number(e) <= 9999) ||
-                                                Number.isInteger(Math.log2(e))),
-    "All bitmask mappings keys are powers of 2, or between 9000-9999 for special " +
-    "categories.");
-
-  ok(Object.keys(CATEGORY_MAPPINGS).every(e => CATEGORIES.includes(CATEGORY_MAPPINGS[e])),
-    "All bitmask mappings point to a category.");
 });

--- a/devtools/client/performance/test/unit/test_tree-model-07.js
+++ b/devtools/client/performance/test/unit/test_tree-model-07.js
@@ -1,17 +1,17 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 /**
  * Tests that when displaying only content nodes, platform nodes are generalized.
  */
 
-var { CATEGORY_MASK } = require("devtools/client/performance/modules/categories");
+var { CATEGORY_INDEX } = require("devtools/client/performance/modules/categories");
 
 add_task(function test() {
   const { ThreadNode } = require("devtools/client/performance/modules/logic/tree-model");
   const url = (n) => `http://content/${n}`;
 
   // Create a root node from a given samples array.
 
   const root = getFrameNodePath(new ThreadNode(gThread, { startTime: 5, endTime: 30,
@@ -30,32 +30,39 @@ add_task(function test() {
    *       - F
    *         - (JS)
    */
 
   // Test the root node.
 
   equal(root.calls.length, 2, "root has 2 children");
   ok(getFrameNodePath(root, url("A")), "root has content child");
-  ok(getFrameNodePath(root, "64"), "root has platform generalized child");
-  equal(getFrameNodePath(root, "64").calls.length, 0,
+  ok(getFrameNodePath(root, `${CATEGORY_INDEX("js")}`),
+     "root has platform generalized child");
+  equal(getFrameNodePath(root, `${CATEGORY_INDEX("js")}`).calls.length, 0,
         "platform generalized child is a leaf.");
 
-  ok(getFrameNodePath(root, `${url("A")} > 128`),
+  ok(getFrameNodePath(root, `${url("A")} > ${CATEGORY_INDEX("gc")}`),
      "A has platform generalized child of another type");
-  equal(getFrameNodePath(root, `${url("A")} > 128`).calls.length, 0,
+  equal(getFrameNodePath(root, `${url("A")} > ${CATEGORY_INDEX("gc")}`).calls.length, 0,
         "second generalized type is a leaf.");
 
-  ok(getFrameNodePath(root, `${url("A")} > ${url("E")} > ${url("F")} > 64`),
+  ok(getFrameNodePath(
+       root,
+       `${url("A")} > ${url("E")} > ${url("F")} > ${CATEGORY_INDEX("js")}`
+     ),
      "a second leaf of the first generalized type exists deep in the tree.");
-  ok(getFrameNodePath(root, `${url("A")} > 128`),
+  ok(getFrameNodePath(root, `${url("A")} > ${CATEGORY_INDEX("gc")}`),
      "A has platform generalized child of another type");
 
-  equal(getFrameNodePath(root, "64").category,
-     getFrameNodePath(root, `${url("A")} > ${url("E")} > ${url("F")} > 64`).category,
+  equal(getFrameNodePath(root, `${CATEGORY_INDEX("js")}`).category,
+     getFrameNodePath(
+       root,
+       `${url("A")} > ${url("E")} > ${url("F")} > ${CATEGORY_INDEX("js")}`
+     ).category,
      "generalized frames of same type are duplicated in top-down view");
 });
 
 var gThread = synthesizeProfileForTest([{
   time: 5,
   frames: [
     { location: "(root)" },
     { location: "http://content/A" },
@@ -63,35 +70,35 @@ var gThread = synthesizeProfileForTest([
     { location: "http://content/C" }
   ]
 }, {
   time: 5 + 6,
   frames: [
     { location: "(root)" },
     { location: "http://content/A" },
     { location: "http://content/B" },
-    { location: "contentY", category: CATEGORY_MASK("css") },
+    { location: "contentY", category: CATEGORY_INDEX("layout") },
     { location: "http://content/D" }
   ]
 }, {
   time: 5 + 6 + 7,
   frames: [
     { location: "(root)" },
     { location: "http://content/A" },
-    { location: "contentY", category: CATEGORY_MASK("css") },
+    { location: "contentY", category: CATEGORY_INDEX("layout") },
     { location: "http://content/E" },
     { location: "http://content/F" },
-    { location: "contentY", category: CATEGORY_MASK("js") },
+    { location: "contentY", category: CATEGORY_INDEX("js") },
   ]
 }, {
   time: 5 + 20,
   frames: [
     { location: "(root)" },
-    { location: "contentX", category: CATEGORY_MASK("js") },
+    { location: "contentX", category: CATEGORY_INDEX("js") },
   ]
 }, {
   time: 5 + 25,
   frames: [
     { location: "(root)" },
     { location: "http://content/A" },
-    { location: "contentZ", category: CATEGORY_MASK("gc", 1) },
+    { location: "contentZ", category: CATEGORY_INDEX("gc") },
   ]
 }]);

--- a/devtools/client/performance/test/unit/test_tree-model-08.js
+++ b/devtools/client/performance/test/unit/test_tree-model-08.js
@@ -4,17 +4,17 @@
 
 /**
  * Verifies if FrameNodes retain and parse their data appropriately.
  */
 
 add_task(function test() {
   const FrameUtils = require("devtools/client/performance/modules/logic/frame-utils");
   const { FrameNode } = require("devtools/client/performance/modules/logic/tree-model");
-  const { CATEGORY_MASK } = require("devtools/client/performance/modules/categories");
+  const { CATEGORY_INDEX } = require("devtools/client/performance/modules/categories");
   const compute = frame => {
     FrameUtils.computeIsContentAndCategory(frame);
     return frame;
   };
 
   const frames = [
     new FrameNode("hello/<.world (http://foo/bar.js:123:987)", compute({
       location: "hello/<.world (http://foo/bar.js:123:987)",
@@ -34,17 +34,17 @@ add_task(function test() {
     }), false),
     new FrameNode("hello/<.world (resource://foo.js -> http://bar/baz.js:123:987)", compute({
       location: "hello/<.world (resource://foo.js -> http://bar/baz.js:123:987)",
       line: 456,
     }), false),
     new FrameNode("Foo::Bar::Baz", compute({
       location: "Foo::Bar::Baz",
       line: 456,
-      category: CATEGORY_MASK("other"),
+      category: CATEGORY_INDEX("other"),
     }), false),
     new FrameNode("EnterJIT", compute({
       location: "EnterJIT",
     }), false),
     new FrameNode("chrome://browser/content/content.js", compute({
       location: "chrome://browser/content/content.js",
       line: 456,
       column: 123

--- a/devtools/client/performance/test/unit/test_tree-model-09.js
+++ b/devtools/client/performance/test/unit/test_tree-model-09.js
@@ -1,16 +1,18 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 /**
  * Tests that when displaying only content nodes, platform nodes are generalized.
  */
 
+var { CATEGORY_INDEX } = require("devtools/client/performance/modules/categories");
+
 add_task(function test() {
   const { ThreadNode } = require("devtools/client/performance/modules/logic/tree-model");
   const url = (n) => `http://content/${n}`;
 
   // Create a root node from a given samples array.
 
   const root = getFrameNodePath(new ThreadNode(gThread, { startTime: 5, endTime: 25,
                                                           contentOnly: true }), "(root)");
@@ -27,26 +29,29 @@ add_task(function test() {
    *       - F
    *         - (Tools)
    */
 
   // Test the root node.
 
   equal(root.calls.length, 2, "root has 2 children");
   ok(getFrameNodePath(root, url("A")), "root has content child");
-  ok(getFrameNodePath(root, "9000"),
+  ok(getFrameNodePath(root, `${CATEGORY_INDEX("tools")}`),
     "root has platform generalized child from Chrome JS");
-  equal(getFrameNodePath(root, "9000").calls.length, 0,
+  equal(getFrameNodePath(root, `${CATEGORY_INDEX("tools")}`).calls.length, 0,
     "platform generalized child is a leaf.");
 
-  ok(getFrameNodePath(root, `${url("A")} > ${url("E")} > ${url("F")} > 9000`),
+  ok(getFrameNodePath(root,
+       `${url("A")} > ${url("E")} > ${url("F")} > ${CATEGORY_INDEX("tools")}`),
      "a second leaf of the generalized Chrome JS exists.");
 
-  equal(getFrameNodePath(root, "9000").category,
-     getFrameNodePath(root, `${url("A")} > ${url("E")} > ${url("F")} > 9000`).category,
+  equal(getFrameNodePath(root, `${CATEGORY_INDEX("tools")}`).category,
+     getFrameNodePath(root,
+       `${url("A")} > ${url("E")} > ${url("F")} > ${CATEGORY_INDEX("tools")}`
+     ).category,
      "generalized frames of same type are duplicated in top-down view");
 });
 
 var gThread = synthesizeProfileForTest([{
   time: 5,
   frames: [
     { location: "(root)" },
     { location: "http://content/A" },

--- a/devtools/client/scratchpad/test/browser_scratchpad_wrong_window_focus.js
+++ b/devtools/client/scratchpad/test/browser_scratchpad_wrong_window_focus.js
@@ -24,17 +24,17 @@ function test() {
       const sw = gScratchpadWindow;
       const {require} = ChromeUtils.import("resource://devtools/shared/Loader.jsm", {});
       const {TargetFactory} = require("devtools/client/framework/target");
 
       openScratchpad(function() {
         const target = TargetFactory.forTab(gBrowser.selectedTab);
         gDevTools.showToolbox(target, "webconsole").then((toolbox) => {
           const hud = toolbox.getCurrentPanel().hud;
-          hud.jsterm.clearOutput(true);
+          hud.ui.clearOutput(true);
           testFocus(sw, hud);
         });
       });
     });
   });
 
   gBrowser.loadURI("data:text/html;charset=utf8,<p>test window focus for Scratchpad.");
 }

--- a/devtools/client/shared/webpack/shims/jsterm-stub.js
+++ b/devtools/client/shared/webpack/shims/jsterm-stub.js
@@ -17,17 +17,16 @@ function JSTerm(webConsoleFrame) {
 JSTerm.prototype = {
   SELECTED_FRAME: -1,
 
   get webConsoleClient() {
     return this.hud.webConsoleClient;
   },
 
   openVariablesView() { },
-  clearOutput() { },
 
   init() {
     this.doc = this.hud.window.document;
     this.root = this.doc.createElement("div");
     this.root.className = "jsterm-input-container";
     this.inputNode = this.doc.createElement("input");
     this.inputNode.className = "jsterm-input-node jsterm-input-node-html";
     this.root.appendChild(this.inputNode);

--- a/devtools/client/shared/widgets/FlameGraph.js
+++ b/devtools/client/shared/widgets/FlameGraph.js
@@ -8,17 +8,19 @@ const { ELLIPSIS } = require("devtools/s
 
 loader.lazyRequireGetter(this, "defer", "devtools/shared/defer");
 loader.lazyRequireGetter(this, "EventEmitter",
   "devtools/shared/event-emitter");
 
 loader.lazyRequireGetter(this, "getColor",
   "devtools/client/shared/theme", true);
 
-loader.lazyRequireGetter(this, "CATEGORY_MAPPINGS",
+loader.lazyRequireGetter(this, "CATEGORIES",
+  "devtools/client/performance/modules/categories", true);
+loader.lazyRequireGetter(this, "CATEGORY_INDEX",
   "devtools/client/performance/modules/categories", true);
 loader.lazyRequireGetter(this, "FrameUtils",
   "devtools/client/performance/modules/logic/frame-utils");
 loader.lazyRequireGetter(this, "demangle",
   "devtools/client/shared/demangle");
 
 loader.lazyRequireGetter(this, "AbstractCanvasGraph",
   "devtools/client/shared/widgets/Graphs", true);
@@ -1287,17 +1289,18 @@ var FlameGraphUtils = {
         mutableFrameKeyOptions.isLeaf = stackDepth === 0;
         let frameKey = inflatedFrame.getFrameKey(mutableFrameKeyOptions);
 
         // If not skipping the frame, add it to the current level. The (root)
         // node isn't useful for flame graphs.
         if (frameKey !== "" && frameKey !== "(root)") {
           // If the frame is a meta category, use the category label.
           if (mutableFrameKeyOptions.isMetaCategoryOut) {
-            frameKey = CATEGORY_MAPPINGS[frameKey].label;
+            const category = CATEGORIES[frameKey] || CATEGORIES[CATEGORY_INDEX("other")];
+            frameKey = category.label;
           }
 
           sampleFrames[stackDepth] = inflatedFrame;
           sampleFrameKeys[stackDepth] = frameKey;
 
           // If we shouldn't flatten the current frame into the previous one,
           // increment the stack depth.
           if (!flattenRecursion || frameKey !== prevFrameKey) {

--- a/devtools/client/webconsole/components/JSTerm.js
+++ b/devtools/client/webconsole/components/JSTerm.js
@@ -283,17 +283,17 @@ class JSTerm extends Component {
     }
     const result = response.result;
     const helperResult = response.helperResult;
     const helperHasRawOutput = !!(helperResult || {}).rawOutput;
 
     if (helperResult && helperResult.type) {
       switch (helperResult.type) {
         case "clearOutput":
-          this.clearOutput();
+          this.hud.clearOutput();
           break;
         case "clearHistory":
           this.props.clearHistory();
           break;
         case "inspectObject":
           this.inspectObjectActor(helperResult.object);
           break;
         case "error":
@@ -480,50 +480,16 @@ class JSTerm extends Component {
     } else {
       grip = state.frames[frame];
     }
 
     return grip ? grip.actor : null;
   }
 
   /**
-   * Clear the Web Console output.
-   *
-   * This method emits the "messages-cleared" notification.
-   *
-   * @param boolean clearStorage
-   *        True if you want to clear the console messages storage associated to
-   *        this Web Console.
-   */
-  clearOutput(clearStorage) {
-    if (this.hud && this.hud.consoleOutput) {
-      this.hud.consoleOutput.dispatchMessagesClear();
-    }
-
-    this.webConsoleClient.clearNetworkRequests();
-    if (clearStorage) {
-      this.webConsoleClient.clearMessagesCache();
-    }
-    this.focus();
-    this.emit("messages-cleared");
-  }
-
-  /**
-   * Remove all of the private messages from the Web Console output.
-   *
-   * This method emits the "private-messages-cleared" notification.
-   */
-  clearPrivateMessages() {
-    if (this.hud && this.hud.consoleOutput) {
-      this.hud.consoleOutput.dispatchPrivateMessagesClear();
-      this.emit("private-messages-cleared");
-    }
-  }
-
-  /**
    * Updates the size of the input field (command line) to fit its contents.
    *
    * @returns void
    */
   resizeInput() {
     if (this.props.codeMirrorEnabled) {
       return;
     }

--- a/devtools/client/webconsole/console-commands.js
+++ b/devtools/client/webconsole/console-commands.js
@@ -68,18 +68,18 @@ exports.items = [
         return null;
       }
 
       const panel = toolbox.getPanel("webconsole");
       if (panel == null) {
         return null;
       }
 
-      const onceMessagesCleared = panel.hud.jsterm.once("messages-cleared");
-      panel.hud.jsterm.clearOutput();
+      const onceMessagesCleared = panel.hud.once("messages-cleared");
+      panel.hud.ui.clearOutput();
       return onceMessagesCleared;
     }
   },
   {
     item: "command",
     runAt: "client",
     name: "console close",
     description: l10n.lookup("consolecloseDesc"),

--- a/devtools/client/webconsole/test/mochitest/browser_console.js
+++ b/devtools/client/webconsole/test/mochitest/browser_console.js
@@ -39,17 +39,17 @@ add_task(async function() {
   });
 
   await testMessages(hud);
   await testCPOWInspection(hud);
   await resetFilters(hud);
 });
 
 async function testMessages(hud) {
-  hud.jsterm.clearOutput(true);
+  hud.ui.clearOutput(true);
 
   expectUncaughtException();
 
   executeSoon(() => {
     // eslint-disable-next-line no-undef
     foobarException();
   });
 

--- a/devtools/client/webconsole/test/mochitest/browser_console_consolejsm_output.js
+++ b/devtools/client/webconsole/test/mochitest/browser_console_consolejsm_output.js
@@ -14,17 +14,17 @@ add_task(async function testCategoryLogs
 
   const {console} = ChromeUtils.import("resource://gre/modules/Console.jsm", {});
   console.log("bug861338-log-cached");
 
   const hud = await HUDService.toggleBrowserConsole();
 
   await checkMessageExists(hud, "bug861338-log-cached");
 
-  hud.jsterm.clearOutput(true);
+  hud.ui.clearOutput(true);
 
   function testTrace() {
     console.trace();
   }
 
   console.time("foobarTimer");
   const foobar = { bug851231prop: "bug851231value" };
 
@@ -43,17 +43,17 @@ add_task(async function testCategoryLogs
   await checkMessageExists(hud, "bug851231-info");
   await checkMessageExists(hud, "bug851231-warn");
   await checkMessageExists(hud, "bug851231-error");
   await checkMessageExists(hud, "bug851231-debug");
   await checkMessageExists(hud, "XULDocument");
   await checkMessageExists(hud, "console.trace()");
   await checkMessageExists(hud, "foobarTimer");
 
-  hud.jsterm.clearOutput(true);
+  hud.ui.clearOutput(true);
   await HUDService.toggleBrowserConsole();
 });
 
 add_task(async function testFilter() {
   const consoleStorage = Cc["@mozilla.org/consoleAPI-storage;1"];
   const storage = consoleStorage.getService(Ci.nsIConsoleAPIStorage);
   storage.clearEvents();
 
@@ -74,17 +74,17 @@ add_task(async function testFilter() {
   console2.error(shouldBeVisible);
 
   await checkMessageExists(hud, shouldBeVisible);
   // Here we can safely assert that the log message is not visible, since the
   // error message was logged after and is visible.
   await checkMessageHidden(hud, shouldBeHidden);
 
   await resetFilters(hud);
-  hud.jsterm.clearOutput(true);
+  hud.ui.clearOutput(true);
   await HUDService.toggleBrowserConsole();
 });
 
 // Test that console.profile / profileEnd trigger the right events
 add_task(async function testProfile() {
   const consoleStorage = Cc["@mozilla.org/consoleAPI-storage;1"];
   const storage = consoleStorage.getService(Ci.nsIConsoleAPIStorage);
   const { console } = ChromeUtils.import("resource://gre/modules/Console.jsm", {});

--- a/devtools/client/webconsole/test/mochitest/browser_console_webconsole_private_browsing.js
+++ b/devtools/client/webconsole/test/mochitest/browser_console_webconsole_private_browsing.js
@@ -80,17 +80,17 @@ add_task(async function() {
     waitForMessage(hud, PRIVATE_EXCEPTION, ".error");
   logPrivateMessages(privateBrowser.selectedBrowser);
 
   await onBrowserConsolePrivateLogMessage;
   await onBrowserConsolePrivateErrorMessage;
   ok(true, "Messages are displayed as expected");
 
   info("close the private window and check if private messages are removed");
-  const onPrivateMessagesCleared = hud.jsterm.once("private-messages-cleared");
+  const onPrivateMessagesCleared = hud.ui.once("private-messages-cleared");
   privateWindow.BrowserTryToCloseWindow();
   await onPrivateMessagesCleared;
 
   ok(findMessage(hud, NON_PRIVATE_MESSAGE),
     "non-private messages are still shown after private window closed");
   assertNoPrivateMessages(hud);
 
   info("close the browser console");

--- a/devtools/client/webconsole/test/mochitest/browser_jsterm_completion.js
+++ b/devtools/client/webconsole/test/mochitest/browser_jsterm_completion.js
@@ -5,17 +5,17 @@
 
 // Tests that code completion works properly.
 
 "use strict";
 
 const TEST_URI = "data:text/html;charset=utf8,<p>test code completion";
 
 add_task(async function() {
-  const {jsterm} = await openNewTabAndConsole(TEST_URI);
+  const {jsterm, ui} = await openNewTabAndConsole(TEST_URI);
   const input = jsterm.inputNode;
 
   // Test typing 'docu'.
   await jstermSetValueAndComplete(jsterm, "docu");
   is(input.value, "docu", "'docu' completion (input.value)");
   is(jsterm.completeNode.value, "    ment", "'docu' completion (completeNode)");
 
   // Test typing 'docu' and press tab.
@@ -45,17 +45,17 @@ add_task(async function() {
      "'document.getElem' another tab completion");
 
   // Test pressing shift_tab.
   await jstermComplete(jsterm, jsterm.COMPLETE_BACKWARD);
   is(input.value, "document.getElem", "'document.getElem' untab completion");
   is(jsterm.completeNode.value, "                entsByTagNameNS",
      "'document.getElem' completion");
 
-  jsterm.clearOutput();
+  ui.clearOutput();
 
   await jstermSetValueAndComplete(jsterm, "docu");
   is(jsterm.completeNode.value, "    ment", "'docu' completion");
 
   await jsterm.execute();
   is(jsterm.completeNode.value, "", "clear completion on execute()");
 
   // Test multi-line completion works

--- a/devtools/client/webconsole/test/mochitest/browser_jsterm_dollar.js
+++ b/devtools/client/webconsole/test/mochitest/browser_jsterm_dollar.js
@@ -13,19 +13,19 @@ const TEST_URI = "http://example.com/bro
 
 add_task(async function() {
   const hud = await openNewTabAndConsole(TEST_URI);
   await test$(hud);
   await test$$(hud);
 });
 
 async function test$(hud) {
-  hud.jsterm.clearOutput();
+  hud.ui.clearOutput();
   const msg = await hud.jsterm.execute("$(document.body)");
   ok(msg.textContent.includes("<p>"), "jsterm output is correct for $()");
 }
 
 async function test$$(hud) {
-  hud.jsterm.clearOutput();
+  hud.ui.clearOutput();
   hud.jsterm.setInputValue();
   const msg = await hud.jsterm.execute("$$(document)");
   ok(msg.textContent.includes("621644"), "jsterm output is correct for $$()");
 }

--- a/devtools/client/webconsole/test/mochitest/browser_jsterm_error_docs.js
+++ b/devtools/client/webconsole/test/mochitest/browser_jsterm_error_docs.js
@@ -17,17 +17,17 @@ add_task(async function() {
     "JSMSG_BAD_ARRAY_LENGTH": "([]).length = -1",
     "JSMSG_NEGATIVE_REPETITION_COUNT": "'abc'.repeat(-1);",
     "JSMSG_PRECISION_RANGE": "77.1234.toExponential(-1);",
   };
 
   for (const [errorMessageName, expression] of Object.entries(ErrorDocStatements)) {
     const title = ErrorDocs.GetURL({ errorMessageName }).split("?")[0];
 
-    jsterm.clearOutput();
+    hud.ui.clearOutput();
     const onMessage = waitForMessage(hud, "RangeError:");
     jsterm.execute(expression);
     const {node} = await onMessage;
     const learnMoreLink = node.querySelector(".learn-more-link");
     ok(learnMoreLink, `There is a [Learn More] link for "${errorMessageName}" error`);
     is(learnMoreLink.title, title, `The link has the expected "${title}" title`);
   }
 });

--- a/devtools/client/webconsole/test/mochitest/browser_jsterm_helper_help.js
+++ b/devtools/client/webconsole/test/mochitest/browser_jsterm_helper_help.js
@@ -13,17 +13,17 @@ add_task(async function() {
   let openedLinks = 0;
   const oldOpenLink = hud.openLink;
   hud.openLink = (url) => {
     if (url == HELP_URL) {
       openedLinks++;
     }
   };
 
-  jsterm.clearOutput();
+  hud.ui.clearOutput();
   await jsterm.execute("help()");
   await jsterm.execute("help");
   await jsterm.execute("?");
 
   const messages = Array.from(jsterm.outputNode.querySelectorAll(".message"));
   ok(messages.every(msg => msg.classList.contains("command")),
     "There is no results shown for the help commands");
   is(openedLinks, 3, "correct number of pages opened by the help calls");

--- a/devtools/client/webconsole/test/mochitest/browser_jsterm_hide_when_devtools_chrome_enabled_false.js
+++ b/devtools/client/webconsole/test/mochitest/browser_jsterm_hide_when_devtools_chrome_enabled_false.js
@@ -60,17 +60,17 @@ add_task(async function() {
  * currently in use.
  */
 async function getObjectInspector(hud) {
   const { ui, jsterm } = hud;
 
   // Filter out other messages to ensure ours stays visible.
   ui.filterBox.value = "browser_console_hide_jsterm_test";
 
-  jsterm.clearOutput();
+  hud.ui.clearOutput();
   jsterm.execute("new Object({ browser_console_hide_jsterm_test: true })");
 
   const message = await waitFor(
     () => findMessage(hud, "Object { browser_console_hide_jsterm_test: true }")
   );
 
   const objInspector = message.querySelector(".tree");
   return objInspector;

--- a/devtools/client/webconsole/test/mochitest/browser_jsterm_history.js
+++ b/devtools/client/webconsole/test/mochitest/browser_jsterm_history.js
@@ -11,19 +11,19 @@ const TEST_URI = "data:text/html;charset
 const COMMANDS = ["document", "window", "window.location"];
 
 const {
   HISTORY_BACK,
   HISTORY_FORWARD,
 } = require("devtools/client/webconsole/constants");
 
 add_task(async function() {
-  const { jsterm } = await openNewTabAndConsole(TEST_URI);
+  const { jsterm, ui } = await openNewTabAndConsole(TEST_URI);
   const { inputNode } = jsterm;
-  jsterm.clearOutput();
+  ui.clearOutput();
 
   for (const command of COMMANDS) {
     info(`Executing command ${command}`);
     jsterm.setInputValue(command);
     await jsterm.execute();
   }
 
   for (let x = COMMANDS.length - 1; x != -1; x--) {

--- a/devtools/client/webconsole/test/mochitest/browser_jsterm_selfxss.js
+++ b/devtools/client/webconsole/test/mochitest/browser_jsterm_selfxss.js
@@ -14,18 +14,18 @@ XPCOMUtils.defineLazyServiceGetter(
   "nsIClipboardHelper"
 );
 const WebConsoleUtils = require("devtools/client/webconsole/utils").Utils;
 const stringToCopy = "foobazbarBug642615";
 
 add_task(async function() {
   await pushPref("devtools.selfxss.count", 0);
 
-  const {jsterm} = await openNewTabAndConsole(TEST_URI);
-  jsterm.clearOutput();
+  const {jsterm, ui} = await openNewTabAndConsole(TEST_URI);
+  ui.clearOutput();
   ok(!jsterm.completeNode.value, "no completeNode.value");
 
   jsterm.setInputValue("doc");
 
   info("wait for completion value after typing 'docu'");
   let onAutocompleteUpdated = jsterm.once("autocomplete-updated");
   EventUtils.sendString("u");
   await onAutocompleteUpdated;

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_cd_iframe.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_cd_iframe.js
@@ -62,10 +62,10 @@ async function executeWindowTest(hud, if
   hud.jsterm.execute(`document.title`);
   hud.jsterm.execute(`"p: " + document.querySelector("p").textContent`);
   hud.jsterm.execute(`"obj: " + window.foobar`);
 
   const messages = await onMessages;
   ok(messages, `Expected evaluation result messages are shown in ${iframeRole} iframe`);
 
   // Clear the output so we don't pollute the next assertions.
-  hud.jsterm.clearOutput();
+  hud.ui.clearOutput();
 }

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_console_logging_workers_api.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_console_logging_workers_api.js
@@ -15,12 +15,12 @@ add_task(async function() {
   const hud = await openNewTabAndConsole(TEST_URI);
   const message = await waitFor(() => findMessage(hud, "foo-bar-shared-worker"));
   is(
     message.querySelector(".message-body").textContent,
     `foo-bar-shared-worker Object { foo: "bar" }`,
     "log from SharedWorker is displayed as expected"
   );
 
-  const onMessagesCleared = hud.jsterm.once("messages-cleared");
-  hud.jsterm.clearOutput(true);
+  const onMessagesCleared = hud.ui.once("messages-cleared");
+  hud.ui.clearOutput(true);
   await onMessagesCleared;
 });

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_context_menu_copy_entire_message.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_context_menu_copy_entire_message.js
@@ -30,17 +30,17 @@ const TEST_URI = `data:text/html;charset
 
 add_task(async function() {
   const observer = new PrefObserver("");
   let onPrefUpdated = observer.once(PREF_MESSAGE_TIMESTAMP, () => {});
   Services.prefs.setBoolPref(PREF_MESSAGE_TIMESTAMP, true);
   await onPrefUpdated;
 
   const hud = await openNewTabAndConsole(TEST_URI);
-  hud.jsterm.clearOutput();
+  hud.ui.clearOutput();
 
   info("Call the log function defined in the test page");
   await ContentTask.spawn(gBrowser.selectedBrowser, null, () => {
     content.wrappedJSObject.logStuff();
   });
 
   info("Test copy menu item for the simple log");
   let message = await waitFor(() => findMessage(hud, "simple text message"));

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_context_menu_copy_link_location.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_context_menu_copy_link_location.js
@@ -13,17 +13,17 @@ const TEST_URI = "http://example.com/bro
                  Date.now();
 const CONTEXT_MENU_ID = "#console-menu-copy-url";
 
 add_task(async function() {
   // Enable net messages in the console for this test.
   await pushPref("devtools.webconsole.filter.net", true);
 
   const hud = await openNewTabAndConsole(TEST_URI);
-  hud.jsterm.clearOutput();
+  hud.ui.clearOutput();
 
   info("Test Copy URL menu item for text log");
 
   info("Logging a text message in the content window");
   const onLogMessage = waitForMessage(hud, "simple text message");
   await ContentTask.spawn(gBrowser.selectedBrowser, null, () => {
     content.wrappedJSObject.console.log("simple text message");
   });
@@ -31,17 +31,17 @@ add_task(async function() {
   ok(message, "Text log found in the console");
 
   info("Open and check the context menu for the logged text message");
   let menuPopup = await openContextMenu(hud, message.node);
   let copyURLItem = menuPopup.querySelector(CONTEXT_MENU_ID);
   ok(!copyURLItem, "Copy URL menu item is hidden for a simple text message");
 
   await hideContextMenu(hud);
-  hud.jsterm.clearOutput();
+  hud.ui.clearOutput();
 
   info("Test Copy URL menu item for network log");
 
   info("Reload the content window to produce a network log");
   const onNetworkMessage = waitForMessage(hud, "test-console.html");
   await ContentTask.spawn(gBrowser.selectedBrowser, null, () => {
     content.wrappedJSObject.location.reload();
   });

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_context_menu_open_url.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_context_menu_open_url.js
@@ -11,34 +11,34 @@
 const TEST_URI = "http://example.com/browser/devtools/client/webconsole/" +
                  "test/mochitest/test-console.html";
 
 add_task(async function() {
   // Enable net messages in the console for this test.
   await pushPref("devtools.webconsole.filter.net", true);
 
   const hud = await openNewTabAndConsole(TEST_URI);
-  hud.jsterm.clearOutput();
+  hud.ui.clearOutput();
 
   info("Test Open URL menu item for text log");
 
   info("Logging a text message in the content window");
   await ContentTask.spawn(gBrowser.selectedBrowser, null, () => {
     content.wrappedJSObject.console.log("simple text message");
   });
   let message = await waitFor(() => findMessage(hud, "simple text message"));
   ok(message, "Text log found in the console");
 
   info("Open and check the context menu for the logged text message");
   let menuPopup = await openContextMenu(hud, message);
   let openUrlItem = menuPopup.querySelector("#console-menu-open-url");
   ok(!openUrlItem, "Open URL menu item is not available");
 
   await hideContextMenu(hud);
-  hud.jsterm.clearOutput();
+  hud.ui.clearOutput();
 
   info("Test Open URL menu item for network log");
 
   info("Reload the content window to produce a network log");
   await ContentTask.spawn(gBrowser.selectedBrowser, null, () => {
     content.wrappedJSObject.location.reload();
   });
   message = await waitFor(() => findMessage(hud, "test-console.html"));

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_csp_violation.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_csp_violation.js
@@ -12,16 +12,16 @@ const TEST_URI = "data:text/html;charset
 const TEST_VIOLATION = "https://example.com/browser/devtools/client/webconsole/" +
                        "test/mochitest/test-csp-violation.html";
 const CSP_VIOLATION_MSG = "Content Security Policy: The page\u2019s settings " +
                           "blocked the loading of a resource at " +
                           "http://some.example.com/test.png (\u201cimg-src\u201d).";
 
 add_task(async function() {
   const hud = await openNewTabAndConsole(TEST_URI);
-  hud.jsterm.clearOutput();
+  hud.ui.clearOutput();
 
   const onRepeatedMessage = waitForRepeatedMessage(hud, CSP_VIOLATION_MSG, 2);
   await loadDocument(TEST_VIOLATION);
   await onRepeatedMessage;
 
   ok(true, "Received expected messages");
 });

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_cspro.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_cspro.js
@@ -35,10 +35,10 @@ add_task(async function() {
 
   info("Load a page with CSP warnings.");
   loadDocument(TEST_VIOLATION);
 
   await onCspViolationMessage;
   await onCspReportMessage;
   ok(true, "Confirmed that CSP and CSP-Report-Only log different messages to console");
 
-  hud.jsterm.clearOutput(true);
+  hud.ui.clearOutput(true);
 });

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_execution_scope.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_execution_scope.js
@@ -8,17 +8,17 @@
 "use strict";
 
 const TEST_URI = "http://example.com/browser/devtools/client/webconsole/" +
                  "test/mochitest/test-console.html";
 
 add_task(async function() {
   const hud = await openNewTabAndConsole(TEST_URI);
   const {jsterm} = hud;
-  jsterm.clearOutput();
+  hud.ui.clearOutput();
 
   const onInputMessage = waitForMessage(hud, "window.location.href;", ".message.command");
   const onEvaluationResultMessage = waitForMessage(hud, TEST_URI, ".message.result");
   jsterm.execute("window.location.href;");
 
   let message = await onInputMessage;
   ok(message, "Input message is displayed with the expected class");
 

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_file_uri.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_file_uri.js
@@ -28,17 +28,17 @@ add_task(async function() {
 
   // Open tab with correct remote type so we don't switch processes when we load
   // the file:// URI, otherwise we won't get the same web console.
   const remoteType = E10SUtils.getRemoteTypeForURI(uri.spec,
                                                  gMultiProcessBrowser);
   const { browser } = await loadTab("about:blank", remoteType);
 
   hud = await openConsole();
-  hud.jsterm.clearOutput();
+  hud.ui.clearOutput();
 
   const loaded = loadBrowser(browser);
   BrowserTestUtils.loadURI(gBrowser.selectedBrowser, uri.spec);
   await loaded;
 
   await testMessages();
 
   Services.prefs.clearUserPref(PREF);

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_highlighter_console_helper.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_highlighter_console_helper.js
@@ -43,24 +43,24 @@ add_task(async function() {
 
   await onPickerStopped;
   await onInspectorUpdated;
 
   info("Picker mode stopped, <h1> selected, now switching to the console");
   const hud = await openConsole();
   const {jsterm} = hud;
 
-  jsterm.clearOutput();
+  hud.ui.clearOutput();
 
   const onEvaluationResult = waitForMessage(hud, "<h1>");
   jsterm.execute("$0");
   await onEvaluationResult;
   ok(true, "correct output for $0");
 
-  jsterm.clearOutput();
+  hud.ui.clearOutput();
 
   const newH1Content = "newH1Content";
   const onAssignmentResult = waitForMessage(hud, "<h1>");
   jsterm.execute(`$0.textContent = "${newH1Content}";$0`);
   await onAssignmentResult;
 
   ok(true, "correct output for $0 after setting $0.textContent");
   const {textContent} = await testActor.getNodeInfo("h1");

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_hpkp_invalid-headers.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_hpkp_invalid-headers.js
@@ -87,17 +87,17 @@ add_task(async function() {
     name: "Non-built-in root error displayed successfully",
     text: "Public-Key-Pins: The certificate used by the site was not issued " +
           "by a certificate in the default root certificate store. To " +
           "prevent accidental breakage, the specified header was ignored."
   }, hud);
 });
 
 async function navigateAndCheckForWarningMessage({name, text, url}, hud) {
-  hud.jsterm.clearOutput(true);
+  hud.ui.clearOutput(true);
 
   const onMessage = waitForMessage(hud, text, ".message.warning");
   BrowserTestUtils.loadURI(gBrowser.selectedBrowser, url);
   const {node} = await onMessage;
   ok(node, name);
 
   const learnMoreNode = node.querySelector(".learn-more-link");
   ok(learnMoreNode, `There is a "Learn more" link`);

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_hsts_invalid-headers.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_hsts_invalid-headers.js
@@ -53,17 +53,17 @@ add_task(async function() {
     url: SJS_URL + "?multipleMaxAge",
     name: "Multiple max-age error displayed successfully",
     text: "Strict-Transport-Security: The site specified a header that " +
           "included multiple \u2018max-age\u2019 directives."
   }, hud);
 });
 
 async function navigateAndCheckWarningMessage({url, name, text}, hud) {
-  hud.jsterm.clearOutput(true);
+  hud.ui.clearOutput(true);
 
   const onMessage = waitForMessage(hud, text, ".message.warning");
   BrowserTestUtils.loadURI(gBrowser.selectedBrowser, url);
   const {node} = await onMessage;
   ok(node, name);
 
   const learnMoreNode = node.querySelector(".learn-more-link");
   ok(learnMoreNode, `There is a "Learn more" link`);

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_input_focus.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_input_focus.js
@@ -15,17 +15,17 @@ const TEST_URI =
 
 add_task(async function() {
   const hud = await openNewTabAndConsole(TEST_URI);
 
   const inputNode = hud.jsterm.inputNode;
   info("Focus after console is opened");
   ok(hasFocus(inputNode), "input node is focused after console is opened");
 
-  hud.jsterm.clearOutput();
+  hud.ui.clearOutput();
   ok(hasFocus(inputNode), "input node is focused after output is cleared");
 
   info("Focus during message logging");
   ContentTask.spawn(gBrowser.selectedBrowser, {}, function() {
     content.wrappedJSObject.console.log("console message 2");
   });
   const msg = await waitFor(() => findMessage(hud, "console message 2"));
   ok(hasFocus(inputNode, "input node is focused, first time"));

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_js_input_expansion.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_js_input_expansion.js
@@ -6,18 +6,18 @@
 // Tests that the input box expands as the user types long lines.
 
 "use strict";
 
 const TEST_URI = "http://example.com/browser/devtools/client/webconsole/" +
                  "test/mochitest/test-console.html";
 
 add_task(async function() {
-  const { jsterm } = await openNewTabAndConsole(TEST_URI);
-  jsterm.clearOutput();
+  const { jsterm, ui } = await openNewTabAndConsole(TEST_URI);
+  ui.clearOutput();
 
   const { inputNode } = jsterm;
   const getInputHeight = () => inputNode.clientHeight;
 
   info("Get the initial (empty) height of the input");
   const emptyHeight = getInputHeight();
 
   info("Set some multiline text in the input");

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_loglimit.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_loglimit.js
@@ -8,17 +8,17 @@
 // Test that messages are properly updated when the log limit is reached.
 
 const TEST_URI = "data:text/html;charset=utf-8,Web Console test for " +
                  "Old messages are removed after passing devtools.hud.loglimit";
 
 add_task(async function() {
   await pushPref("devtools.hud.loglimit", 140);
   const hud = await openNewTabAndConsole(TEST_URI);
-  hud.jsterm.clearOutput();
+  hud.ui.clearOutput();
 
   let onMessage = waitForMessage(hud, "test message [149]");
   ContentTask.spawn(gBrowser.selectedBrowser, {}, async function() {
     for (let i = 0; i < 150; i++) {
       content.console.log(`test message [${i}]`);
     }
   });
   await onMessage;

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_network_messages_expand.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_network_messages_expand.js
@@ -99,17 +99,17 @@ async function openRequestAfterUpdates(t
 
   await payload;
   await testNetworkMessage(toolbox, messageNode);
 }
 
 async function openRequestBeforeUpdates(target, hud, tab) {
   const toolbox = gDevTools.getToolbox(target);
 
-  hud.jsterm.clearOutput(true);
+  hud.ui.clearOutput(true);
 
   const xhrUrl = TEST_PATH + "sjs_slow-response-test-server.sjs";
   const message = waitForMessage(hud, xhrUrl);
 
   // Fire an XHR POST request.
   ContentTask.spawn(gBrowser.selectedBrowser, null, function() {
     content.wrappedJSObject.testXhrPostSlowResponse();
   });

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_output_order.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_output_order.js
@@ -8,17 +8,17 @@
 
 "use strict";
 
 const TEST_URI = "http://example.com/browser/devtools/client/webconsole/" +
                  "test/mochitest/test-console.html";
 
 add_task(async function() {
   const hud = await openNewTabAndConsole(TEST_URI);
-  hud.jsterm.clearOutput();
+  hud.ui.clearOutput();
 
   const messages = ["console.log('foo', 'bar');", "foo bar", "undefined"];
   const onMessages = waitForMessages({
     hud,
     messages: messages.map(text => ({text}))
   });
 
   hud.jsterm.execute("console.log('foo', 'bar');");

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_reopen_closed_tab.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_reopen_closed_tab.js
@@ -15,17 +15,17 @@ add_task(async function() {
   // If we persist log, the test might be successful even if only the first
   // error log is shown.
   pushPref("devtools.webconsole.persistlog", false);
 
   info("Open console and refresh tab.");
 
   expectUncaughtExceptionNoE10s();
   let hud = await openNewTabAndConsole(TEST_URI);
-  hud.jsterm.clearOutput();
+  hud.ui.clearOutput();
 
   expectUncaughtExceptionNoE10s();
   await refreshTab();
   await waitForError(hud);
 
   // Close and reopen
   await closeConsole();
 

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_sandbox_update_after_navigation.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_sandbox_update_after_navigation.js
@@ -41,28 +41,28 @@ add_task(async function() {
   onMessages = waitForMessages({
     hud,
     messages: [
       { text: "window.location.href" },
       { text: TEST_URI2 },
     ],
   });
 
-  hud.jsterm.clearOutput();
+  hud.ui.clearOutput();
   hud.jsterm.execute("window.location.href");
 
   info("wait for window.location.href after page navigation");
   await onMessages;
 
   ok(!findMessage(hud, "Permission denied"), "no permission denied errors");
 
   // Navigation clears messages. Wait for that clear to happen before
   // continuing the test or it might destroy messages we wait later on (Bug
   // 1270234).
-  const cleared = hud.jsterm.once("messages-cleared");
+  const cleared = hud.ui.once("messages-cleared");
 
   gBrowser.goBack();
 
   info("Waiting for messages-cleared event due to navigation");
   await cleared;
 
   info("Messages cleared after navigation; checking location");
 

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_script_errordoc_urls.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_script_errordoc_urls.js
@@ -61,10 +61,10 @@ async function testScriptError(hud, test
   // but have the URL in the title attribute.
   const hrefs = new Set();
   for (const link of hud.ui.outputNode.querySelectorAll("a")) {
     hrefs.add(link.title);
   }
 
   ok(hrefs.has(url), `Expected a link to ${url}.`);
 
-  hud.jsterm.clearOutput();
+  hud.ui.clearOutput();
 }

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_select_all.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_select_all.js
@@ -18,17 +18,17 @@ add_task(async function testSelectAll() 
   testBrowserMenuSelectAll(hud);
   await testContextMenuSelectAll(hud);
 });
 
 async function testSelectionWhenMovingBetweenBoxes(hud) {
   const jsterm = hud.jsterm;
 
   // Fill the console with some output.
-  jsterm.clearOutput();
+  hud.ui.clearOutput();
   await jsterm.execute("1 + 2");
   await waitFor(() => findMessage(hud, "3"));
   await jsterm.execute("3 + 4");
   await waitFor(() => findMessage(hud, "7"));
   await jsterm.execute("5 + 6");
   await waitFor(() => findMessage(hud, "11"));
 }
 

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_show_subresource_security_errors.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_show_subresource_security_errors.js
@@ -10,15 +10,15 @@
 const TEST_URI = "data:text/html;charset=utf-8,Web Console subresource STS " +
                  "warning test";
 const TEST_DOC = "https://example.com/browser/devtools/client/webconsole/" +
                  "test/mochitest/test-subresource-security-error.html";
 const SAMPLE_MSG = "specified a header that could not be parsed successfully.";
 
 add_task(async function() {
   const hud = await openNewTabAndConsole(TEST_URI);
-  hud.jsterm.clearOutput();
+  hud.ui.clearOutput();
   await loadDocument(TEST_DOC);
 
   await waitFor(() => findMessage(hud, SAMPLE_MSG, ".message.warn"));
 
   ok(true, "non-toplevel security warning message was displayed");
 });

--- a/devtools/client/webconsole/test/mochitest/browser_webconsole_time_methods.js
+++ b/devtools/client/webconsole/test/mochitest/browser_webconsole_time_methods.js
@@ -50,17 +50,17 @@ add_task(async function() {
   // We use this await to 'sync' until the message appears, as the console API
   // guarantees us that the smoke signal will be printed after the message for
   // console.time("bTimer") (if there were any)
   await waitFor(() => findMessage(hud2, "smoke signal"));
 
   is(findMessage(hud2, "bTimer started"), null, "No message is printed to "
     + "the console when the timer starts");
 
-  hud2.jsterm.clearOutput();
+  hud2.ui.clearOutput();
 
   // Calling console.time('bTimer') on a page, then navigating to another page
   // and calling console.timeEnd('bTimer') on the new console front-end should
   // result on a warning message: 'Timer "bTimer" does not exist',
   // as the timers in different pages are not related
   await BrowserTestUtils.loadURI(gBrowser.selectedBrowser, TEST_URI4);
 
   const error2 =

--- a/devtools/client/webconsole/test/mochitest/head.js
+++ b/devtools/client/webconsole/test/mochitest/head.js
@@ -41,17 +41,17 @@ registerCleanupFunction(async function()
   // filter prefs has been pushed for the test
   await SpecialPowers.flushPrefEnv();
   Services.prefs.getChildList("devtools.webconsole.filter").forEach(pref => {
     Services.prefs.clearUserPref(pref);
   });
   const browserConsole = HUDService.getBrowserConsole();
   if (browserConsole) {
     if (browserConsole.jsterm) {
-      browserConsole.jsterm.clearOutput(true);
+      browserConsole.jsterm.hud.clearOutput(true);
     }
     await HUDService.toggleBrowserConsole();
   }
 });
 
 /**
  * Add a new tab and open the toolbox in it, and select the webconsole.
  *

--- a/devtools/client/webconsole/webconsole-connection-proxy.js
+++ b/devtools/client/webconsole/webconsole-connection-proxy.js
@@ -382,17 +382,17 @@ WebConsoleConnectionProxy.prototype = {
    * @private
    * @param string type
    *        Message type.
    * @param object packet
    *        The message received from the server.
    */
   _onLastPrivateContextExited: function(type, packet) {
     if (this.webConsoleFrame && packet.from == this._consoleActor) {
-      this.webConsoleFrame.jsterm.clearPrivateMessages();
+      this.webConsoleFrame.clearPrivateMessages();
     }
   },
 
   /**
    * The "navigate" event handlers. We redirect any message to the UI for displaying.
    *
    * @private
    * @param object packet

--- a/devtools/client/webconsole/webconsole-frame.js
+++ b/devtools/client/webconsole/webconsole-frame.js
@@ -118,16 +118,49 @@ WebConsoleFrame.prototype = {
       this.proxy = null;
     } else {
       onDestroy();
     }
 
     return this._destroyer.promise;
   },
 
+  /**
+   * Clear the Web Console output.
+   *
+   * This method emits the "messages-cleared" notification.
+   *
+   * @param boolean clearStorage
+   *        True if you want to clear the console messages storage associated to
+   *        this Web Console.
+   */
+  clearOutput(clearStorage) {
+    if (this.consoleOutput) {
+      this.consoleOutput.dispatchMessagesClear();
+    }
+    this.webConsoleClient.clearNetworkRequests();
+    if (clearStorage) {
+      this.webConsoleClient.clearMessagesCache();
+    }
+    this.jsterm.focus();
+    this.emit("messages-cleared");
+  },
+
+  /**
+   * Remove all of the private messages from the Web Console output.
+   *
+   * This method emits the "private-messages-cleared" notification.
+   */
+  clearPrivateMessages() {
+    if (this.consoleOutput) {
+      this.consoleOutput.dispatchPrivateMessagesClear();
+      this.emit("private-messages-cleared");
+    }
+  },
+
   _onUpdateListeners() {
 
   },
 
   logWarningAboutReplacedAPI() {
     this.owner.target.logWarningInPage(l10n.getStr("ConsoleAPIDisabled"),
       "ConsoleAPIDisabled");
   },
@@ -233,17 +266,17 @@ WebConsoleFrame.prototype = {
 
     let clearShortcut;
     if (AppConstants.platform === "macosx") {
       clearShortcut = l10n.getStr("webconsole.clear.keyOSX");
     } else {
       clearShortcut = l10n.getStr("webconsole.clear.key");
     }
 
-    shortcuts.on(clearShortcut, () => this.jsterm.clearOutput(true));
+    shortcuts.on(clearShortcut, () => this.clearOutput(true));
 
     if (this.isBrowserConsole) {
       // Make sure keyboard shortcuts work immediately after opening
       // the Browser Console (Bug 1461366).
       this.window.focus();
 
       shortcuts.on(l10n.getStr("webconsole.close.key"),
                    this.window.top.close.bind(this.window.top));
@@ -333,17 +366,17 @@ WebConsoleFrame.prototype = {
   },
 
   handleTabWillNavigate: function(packet) {
     if (this.persistLog) {
       // Add a _type to hit convertCachedPacket.
       packet._type = true;
       this.consoleOutput.dispatchMessageAdd(packet);
     } else {
-      this.jsterm.clearOutput(false);
+      this.clearOutput(false);
     }
 
     if (packet.url) {
       this.onLocationChange(packet.url, packet.title);
     }
   }
 };
 

--- a/devtools/shared/heapsnapshot/DeserializedNode.cpp
+++ b/devtools/shared/heapsnapshot/DeserializedNode.cpp
@@ -82,18 +82,18 @@ class DeserializedEdgeRange : public Edg
   void settle() {
     if (i >= node->edges.length()) {
       front_ = nullptr;
       return;
     }
 
     auto& edge = node->edges[i];
     auto referent = node->getEdgeReferent(edge);
-    currentEdge = std::move(Edge(edge.name ? NS_strdup(edge.name) : nullptr,
-                                     referent));
+    currentEdge = Edge(edge.name
+                ? NS_strdup(edge.name) : nullptr, referent);
     front_ = &currentEdge;
   }
 
 public:
   explicit DeserializedEdgeRange(DeserializedNode& node)
     : node(&node)
     , i(0)
   {

--- a/docshell/base/nsDocShell.cpp
+++ b/docshell/base/nsDocShell.cpp
@@ -2860,17 +2860,17 @@ nsDocShell::MaybeCreateInitialClientSour
 }
 
 Maybe<ClientInfo>
 nsDocShell::GetInitialClientInfo() const
 {
   if (mInitialClientSource) {
     Maybe<ClientInfo> result;
     result.emplace(mInitialClientSource->Info());
-    return std::move(result);
+    return result;
   }
 
   nsGlobalWindowInner* innerWindow =
     mScriptGlobal ? mScriptGlobal->GetCurrentInnerWindowInternal() : nullptr;
   nsIDocument* doc = innerWindow ? innerWindow->GetExtantDoc() : nullptr;
 
   if (!doc || !doc->IsInitialDocument()) {
     return Maybe<ClientInfo>();
@@ -14062,20 +14062,20 @@ nsDocShell::NotifyJSRunToCompletionStart
                                          const uint32_t aLineNumber,
                                          JS::Handle<JS::Value> aAsyncStack,
                                          const char* aAsyncCause)
 {
   // If first start, mark interval start.
   if (mJSRunToCompletionDepth == 0) {
     RefPtr<TimelineConsumers> timelines = TimelineConsumers::Get();
     if (timelines && timelines->HasConsumer(this)) {
-      timelines->AddMarkerForDocShell(this, std::move(
+      timelines->AddMarkerForDocShell(this,
         mozilla::MakeUnique<JavascriptTimelineMarker>(
           aReason, aFunctionName, aFilename, aLineNumber, MarkerTracingType::START,
-          aAsyncStack, aAsyncCause)));
+          aAsyncStack, aAsyncCause));
     }
   }
 
   mJSRunToCompletionDepth++;
 }
 
 void
 nsDocShell::NotifyJSRunToCompletionStop()

--- a/docshell/base/timeline/AutoRestyleTimelineMarker.cpp
+++ b/docshell/base/timeline/AutoRestyleTimelineMarker.cpp
@@ -27,34 +27,34 @@ AutoRestyleTimelineMarker::AutoRestyleTi
   }
 
   RefPtr<TimelineConsumers> timelines = TimelineConsumers::Get();
   if (!timelines || !timelines->HasConsumer(aDocShell)) {
     return;
   }
 
   mDocShell = aDocShell;
-  timelines->AddMarkerForDocShell(mDocShell, std::move(
+  timelines->AddMarkerForDocShell(mDocShell,
     MakeUnique<RestyleTimelineMarker>(
       mIsAnimationOnly,
-      MarkerTracingType::START)));
+      MarkerTracingType::START));
 }
 
 AutoRestyleTimelineMarker::~AutoRestyleTimelineMarker()
 {
   MOZ_ASSERT(NS_IsMainThread());
 
   if (!mDocShell) {
     return;
   }
 
   RefPtr<TimelineConsumers> timelines = TimelineConsumers::Get();
   if (!timelines || !timelines->HasConsumer(mDocShell)) {
     return;
   }
 
-  timelines->AddMarkerForDocShell(mDocShell, std::move(
+  timelines->AddMarkerForDocShell(mDocShell,
     MakeUnique<RestyleTimelineMarker>(
       mIsAnimationOnly,
-      MarkerTracingType::END)));
+      MarkerTracingType::END));
 }
 
 } // namespace mozilla

--- a/docshell/base/timeline/TimelineConsumers.cpp
+++ b/docshell/base/timeline/TimelineConsumers.cpp
@@ -180,30 +180,30 @@ TimelineConsumers::IsEmpty()
 void
 TimelineConsumers::AddMarkerForDocShell(nsDocShell* aDocShell,
                                         const char* aName,
                                         MarkerTracingType aTracingType,
                                         MarkerStackRequest aStackRequest)
 {
   MOZ_ASSERT(NS_IsMainThread());
   if (HasConsumer(aDocShell)) {
-    aDocShell->mObserved->AddMarker(std::move(MakeUnique<TimelineMarker>(aName, aTracingType, aStackRequest)));
+    aDocShell->mObserved->AddMarker(MakeUnique<TimelineMarker>(aName, aTracingType, aStackRequest));
   }
 }
 
 void
 TimelineConsumers::AddMarkerForDocShell(nsDocShell* aDocShell,
                                         const char* aName,
                                         const TimeStamp& aTime,
                                         MarkerTracingType aTracingType,
                                         MarkerStackRequest aStackRequest)
 {
   MOZ_ASSERT(NS_IsMainThread());
   if (HasConsumer(aDocShell)) {
-    aDocShell->mObserved->AddMarker(std::move(MakeUnique<TimelineMarker>(aName, aTime, aTracingType, aStackRequest)));
+    aDocShell->mObserved->AddMarker(MakeUnique<TimelineMarker>(aName, aTime, aTracingType, aStackRequest));
   }
 }
 
 void
 TimelineConsumers::AddMarkerForDocShell(nsDocShell* aDocShell,
                                         UniquePtr<AbstractTimelineMarker>&& aMarker)
 {
   MOZ_ASSERT(NS_IsMainThread());

--- a/dom/animation/EffectSet.h
+++ b/dom/animation/EffectSet.h
@@ -85,17 +85,17 @@ public:
   // This allows us to avoid exposing mEffects directly and saves the
   // caller from having to dereference hashtable iterators using
   // the rather complicated: iter.Get()->GetKey().
   class Iterator
   {
   public:
     explicit Iterator(EffectSet& aEffectSet)
       : mEffectSet(aEffectSet)
-      , mHashIterator(std::move(aEffectSet.mEffects.Iter()))
+      , mHashIterator(aEffectSet.mEffects.Iter())
       , mIsEndIterator(false)
     {
 #ifdef DEBUG
       mEffectSet.mActiveIterators++;
 #endif
     }
 
     Iterator(Iterator&& aOther)

--- a/dom/base/BodyUtil.cpp
+++ b/dom/base/BodyUtil.cpp
@@ -291,16 +291,20 @@ public:
   FormDataParser(const nsACString& aMimeType, const nsACString& aData, nsIGlobalObject* aParent)
     : mMimeType(aMimeType), mData(aData), mState(START_PART), mParentObject(aParent)
   {
   }
 
   bool
   Parse()
   {
+    if (mData.IsEmpty()) {
+      return false;
+    }
+
     // Determine boundary from mimetype.
     const char* boundaryId = nullptr;
     boundaryId = strstr(mMimeType.BeginWriting(), "boundary");
     if (!boundaryId) {
       return false;
     }
 
     boundaryId = strchr(boundaryId, '=');
@@ -382,17 +386,17 @@ public:
           mState = START_PART;
           break;
 
         default:
           MOZ_CRASH("Invalid case");
       }
     }
 
-    NS_NOTREACHED("Should never reach here.");
+    MOZ_ASSERT_UNREACHABLE("Should never reach here.");
     return false;
   }
 
   already_AddRefed<FormData> GetFormData()
   {
     return mFormData.forget();
   }
 };

--- a/dom/base/CustomElementRegistry.cpp
+++ b/dom/base/CustomElementRegistry.cpp
@@ -488,17 +488,17 @@ CustomElementRegistry::CreateCustomEleme
 
   if (aArgs) {
     callback->SetArgs(*aArgs);
   }
 
   if (aAdoptedCallbackArgs) {
     callback->SetAdoptedCallbackArgs(*aAdoptedCallbackArgs);
   }
-  return std::move(callback);
+  return callback;
 }
 
 /* static */ void
 CustomElementRegistry::EnqueueLifecycleCallback(nsIDocument::ElementCallbackType aType,
                                                 Element* aCustomElement,
                                                 LifecycleCallbackArgs* aArgs,
                                                 LifecycleAdoptedCallbackArgs* aAdoptedCallbackArgs,
                                                 CustomElementDefinition* aDefinition)

--- a/dom/base/nsContentPermissionHelper.cpp
+++ b/dom/base/nsContentPermissionHelper.cpp
@@ -427,17 +427,17 @@ nsContentPermissionUtils::GetContentPerm
 {
   nsTArray<PContentPermissionRequestParent*> parentArray;
   for (auto& it : ContentPermissionRequestParentMap()) {
     if (it.second == aTabId) {
       parentArray.AppendElement(it.first);
     }
   }
 
-  return std::move(parentArray);
+  return parentArray;
 }
 
 /* static */ void
 nsContentPermissionUtils::NotifyRemoveContentPermissionRequestParent(
   PContentPermissionRequestParent* aParent)
 {
   auto it = ContentPermissionRequestParentMap().find(aParent);
   MOZ_ASSERT(it != ContentPermissionRequestParentMap().end());
@@ -450,17 +450,17 @@ nsContentPermissionUtils::GetContentPerm
 {
   nsTArray<PContentPermissionRequestChild*> childArray;
   for (auto& it : ContentPermissionRequestChildMap()) {
     if (it.second == aTabId) {
       childArray.AppendElement(it.first);
     }
   }
 
-  return std::move(childArray);
+  return childArray;
 }
 
 /* static */ void
 nsContentPermissionUtils::NotifyRemoveContentPermissionRequestChild(
   PContentPermissionRequestChild* aChild)
 {
   auto it = ContentPermissionRequestChildMap().find(aChild);
   MOZ_ASSERT(it != ContentPermissionRequestChildMap().end());

--- a/dom/base/nsContentSink.cpp
+++ b/dom/base/nsContentSink.cpp
@@ -1230,16 +1230,19 @@ void
 nsContentSink::ScrollToRef()
 {
   mDocument->ScrollToRef();
 }
 
 void
 nsContentSink::StartLayout(bool aIgnorePendingSheets)
 {
+  AUTO_PROFILER_LABEL_DYNAMIC_NSCSTRING("nsContentSink::StartLayout", LAYOUT,
+                                        mDocumentURI->GetSpecOrDefault());
+
   if (mLayoutStarted) {
     // Nothing to do here
     return;
   }
 
   mDeferredLayoutStart = true;
 
   if (!aIgnorePendingSheets && WaitForPendingSheets()) {